It's probably not a huge surprise to find out that car companies like BMW employ elite teams of sound engineers in their automotive design divisions – after all, cars are noisy things.
What might be more of a surprise is that they often spend more of their time 'tuning' the car sounds, than they do dampening them.
For instance, though the 'car door closing sound' is an accidental side-effect, car manufacturers go to incredible lengths to engineer what they call the 'the perfect car door closing sound'. They change the materials, fillers, joins and hollow spaces to great just the right 'note'.
As designers, we get that. It's a UX thing, right? It's not just about the outcome of closing the door. It's about how the process feels. For BMW, that's a kaTHUNK! that sounds safe, reliable and luxurious. Micro-interactions in web design cover similar territory.
What are micro-interactions?
Micro-interactions are subtle “moments” centered around accomplishing a single task, such as hitting the submit button on a form with the intention of logging in or favoriting a tweet with the intention of social engagement.
“Micro-interactions” might be a newish term – micro-interactions can be found literally everywhere from flipping on a light switch, turning up the volume on a speaker), but the one thing they all have in common is that they accomplish a specific task.
[caption id="attachment_142000" align="alignright" width="400"]
Some tasks require a series of interactions, such as filling out form fields, selecting options, and so on. If an interaction involves the action of submitting data in a web form, then the micro-interaction is the specific action of hitting the submit button.
Micro-Interactions != Animations
Micro-interactions are about much more than animations. You also have to consider the obviousness of the interactive target and the language used in the response; the user experience should be more of a concern than the visual aesthetics, although animation can contribute heavily to the user experience if used correctly.
“Because they look cool” is the absolute worst reason for using animations in web design, especially if the sole reason for creating a micro-interaction is so show off an effect.
Since the birth of HTML5 and CSS3, the web has been taking advantage of these native animations and transitions, however, many designers are still using them to add fancy effects to their web designs without ever really considering how it affects the users’ experience. Let’s discuss when to use micro-interactions and how we can offer an optimal user experience for them.
When to Use Micro-Interactions
If an image (for example) doesn’t do anything useful when clicked/hovered/tapped (i.e. it’s not linked to another webpage and it can’t be zoomed or anything), then nothing more needs to be done to it — no animations, no fancy hover effects, nothing.
It’s a static element and anything “more” will lead the user to believe otherwise (confusion = bad user experience). Now let's consider the submit button again; this needs to be a micro-interaction because we need to visually communicate that…
- the button can be interacted with now, or
- the button can be interacted with soon, or
- the button is being interacted with already
…in order to guide the user towards submitting the form.
[caption id="attachment_141999" align="aligncenter" width="800"]
Micro-Interactions Are Like Conversations
Micro-interactions begin with the trigger, which by default is a click or a tap on the users’ behalf — this is your communication to the interface. After that, the website or app listens to your request and decides whether or not it can complete the action according to the rules and then lets you know what it ultimately decided. In the case of a login form, the rules would consist of the credentials being correct.
If everything is a-okay, then we move into the feedback stage, and this is where the user interface communicates its decision back to you. If your request is sound, then you should receive a confirmation saying so; if not, then we move into the loop stage — this is where the user interface explains what went wrong and how you can re-trigger the micro-interaction.
In order to offer an optimal user experience during a micro-interaction, the user interface needs to maintain a clear, intuitive communication with the user at all times.
Designing the Target/Trigger
First of all, interactive elements need to look like they can be interacted with. If links aren’t underlined, for example, they can be confused with ordinary text, or if an input field looks too minimal, the user might not know it’s an input field. It’s lovely to see designers driving their craft to the very edge, but user experience needs to trump visual aesthetics every time.
Interactive targets may even sometimes require hints, such as labels next to form fields and front-end validation so the user instantly knows if they’ve done it right — this help to reduce the users’ chances of form errors and being looped back.
[caption id="attachment_141998" align="aligncenter" width="800"]
Another example might be disabling or graying-out certain targets so users’ know they can’t be interacted with yet.
[caption id="attachment_141997" align="aligncenter" width="800"]
How Rules Help to Articulate a Contextual Response
So your trigger looks like a trigger and it’s been triggered…awesome! Now the user interface needs to respond with something informative. In web forms this can be quite complex as there are typically numerous conditions that need to be met before the data can be sent, however even in simpler requests (such as clicking a link to a “404 Not Found” webpage) things can still go wrong, and when they do, the interface needs to explain what happened and try to help you move forward in any scenario.
Helpful — explains the issue and uses red to emphasize it.
[caption id="attachment_141996" align="aligncenter" width="800"]
Not helpful — vague error message and unclear button.
[caption id="attachment_141995" align="aligncenter" width="400"]
Helpful — offers alternative user flows.
[caption id="attachment_141994" align="aligncenter" width="800"]
Not helpful — offers a dead-end.
[caption id="attachment_141993" align="aligncenter" width="800"]
In the case of forms, a bad error code would be “Error #8418764: your request could not be completed”, whereas “You must agree to the terms of service” is much better because it tells the user exactly how to correct their mistake. By anticipating where users might go wrong you can design interfaces that are not only more helpful but can appeal to the user on a more human level.
Responding With Helpful Feedback
Communicating feedback is a lot like designing triggers as a lot of the same design concepts apply: green means “acceptable” or “go” or “completed”, red means “not acceptable” or “stop” or “error”, so these concepts need to be combined with a contextual response in order to design clear, humanlike responses.
[caption id="attachment_141992" align="aligncenter" width="800"]
Speaking of humanlike, we need to discuss animations once more and how they aid the user experience when used correctly. When displaying a response to a micro-interaction, may that be a dialogue, a visual change, whatever, animation can help the user notice it. When something happens on the screen in an instant, the human brain can completely miss it, so subtle transitions can introduce visual cues in a way that our eyes will see.
Movement should always be fast enough that it doesn’t cause the user to wait too long, but slow enough that the transition can be registered in our brain. Animation can redirect our line of sight to somewhere else on the screen, such as an input field with an invalid value, or a fixed-header that appears after a certain amount of scrolling. Without a subtle transition, the responses to these micro-interactions can go unnoticed.
[caption id="attachment_142016" align="aligncenter" width="800"]
Continue reading %How to Lift Your UX Out of the Ordinary with Micro-Interactions%
by Daniel Schwarz via SitePoint
No comments:
Post a Comment