Design & UX
Article

How to Lift Your UX Out of the Ordinary with Micro-Interactions

By Daniel Schwarz

BMW car door

It’s probably not a huge surprise for you to find out that car companies like BMW employ elite teams of sound engineers in their automotive design divisions – after all, cars are noisy machines.

What might be more surprising is that these teams often spend more of their time 'tuning' the sounds the car makes, than they do muffling or dampening them.

For instance, though the ‘car door closing sound’ is just an accidental side-effect of sealing the vehicle, manufacturers go to incredible lengths to engineer what they call the 'the perfect car door closing sound'. They adjust the materials, fillers, joints and hollow spaces to create just the right ‘note’.

Similarly, wipers, window motors, and seat controls all play their parts in this mini automotive symphony.

And as designers, we get that, right? It's a UX thing. It's not just about the outcome of closing the door. It's about how the process feels. For BMW, that is a ‘kaTHUNK!’ that feels 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.

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…

  1. the button can be interacted with now, or
  2. the button can be interacted with soon, or
  3. the button is being interacted with already

…in order to guide the user towards submitting the form.

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.

Another example might be disabling or graying-out certain targets so users’ know they can’t be interacted with yet.

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.

Not helpful — vague error message and unclear button.

Helpful — offers alternative user flows.

Not helpful — offers a dead-end.

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.

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.

Keep the User Informed When Waiting

Occasionally a request can take some time, and so the user needs to stay informed during this time as well. Otherwise, the user will start to wonder if something is wrong and possibly quit the micro-interaction of their own accord (this happens a lot on payment forms because the website has to wait for a response from the merchant before it can deliver its own response!).

We can keep the user informed with loading spinners and progress bars, which again can be animated to further clarify that the website or app is doing something behind the scenes.

Conclusion

If there’s anything to be learned from micro-interactions, it’s that users are very high-maintenance. We’re impatient, we become frustrated easily, and if something isn’t immediately obvious we’re happy to switch to another competitor in an instant!

A bad user experience can make all the difference, so next time you’re designing a website or an app, remember to stand in the users’ shoes for a second. Empathy is a human emotion; this means that it’s the key to designing user interfaces that are both helpful and humanlike. Interfaces that are designed to function in a natural way are better understood by users.

  • Great post, thanks!

    • You’re welcome! I’m really interested in micro-interactions right now, I’m hoping to follow up with a post on easings :)

  • M S i N Lund

    Animations suck ass.

    They look cool the first 1 time, the following 99999999999999999
    times you use the page, they are just added waiting time to sit trough.

    No one with half a brain, who had to live through the epoch when you had sit and wait while slow hardware painted stuff pixel by pixel, would dream of adding that crap back into the UIs now.

    That would be like adding a anchor on a chain to be dragged behind fast cars.

    Just show me the F content already.

    • When done correctly I think animations can improve the user experience. You can’t look at the entire screen at once, without animation you could easily miss something when it changes. The trick is to fine-tune animations so that they 1. communication with the user/guide them safely, and 2. Don’t steal too much time from the user.

      • M S i N Lund

        Then how about some good examples, and leave out the bad ones.

        Oh, yeah, because there are almost none.
        And the only good one are the boring old ones everyone was already using since the 90’s, like the “loading…”-spinner.

        And we (designers) need something new and shiny STAT!

        Having a obligatory CSS “working…”-animation, that runs for X seconds, even if the action doesn’t take X seconds, is worse than useless.

        Animating a button, after you clicked it, to remind you what you just did, is useless.

        Try this;

        Rewrite your article, removing all the animation-examples.

        And then tell me again, how How “Micro-Interactions” isn’t just a way to say “animations” while trying to hide you are talking about animations.

        There is only one possible reason why suddenly designers have started calling animations “Micro-Interactions”, and that’s that they KNOW animations suck.

        • You’re confusing animations with micro-interactions – they’re two different things. You can have a micro-interaction without animation. Micro-interactions should be communicative and animations are only one way to do that. I’m sorry you don’t understand the value that micro-interactions offer.

          While I appreciate your careful words and exemplar opinions, I like the article as it is – thanks though.

          • Exactly

          • M S i N Lund

            OK.

            So point me to an article about micro-interactions that doesn’t show a bunch of flashy animations as an example what micro-interaction are.

            I dare you to find even one.

            Trust me, “micro-interactions” is going to be the new “Low contrast”.
            All the kids are going to compete with each other to cram as much animation as possible into every app and webpage, to make them “llke the mostest micro-interactive evah !!!”.

            Just like the race toward the tinsiest tiniest most microscopic shade-difference between background and text, a couple of years ago.

            Basically you are trying to teach people to best bedazzle their jeans-jackets …but “be careful so you don’t accidentally make it look too sparkly”.

            But Im guessing its already too late.
            And now we are going to have to add a bunch of css-animation killing user-scripts and addons to everything.

            And as a side-effect, the actually needed “loading”-animations will be killed too.

            And the result will be worse usability for all.

          • When you “like” something on Facebook – that is a micro-interaction without animation.

          • M S i N Lund

            Its an interaction, period.
            Noting really micro about it.

            Or at what point exactly, does clicking something and doing a HTTP-post stop becoming non-micro, and start becoming micro?

            I call BS on the whole concept.

            Actually, I medium macro call (without animation) BS on the whole concept.

          • You’re correct, it is an interaction, but also a micro-interaction to be more specific because it’s composed of several interactions (first scrolling, then liking). HTTP-POST has nothing to do with interactions or micro-interactions.

          • M S i N Lund

            How on earth is scrolling part of the action?

            So if just you move the button to the top of the page, you remove the “micro” in the interaction?

          • Scrolling is a verb, a word used to describe an action. This is basic English.

            I can’t answer that without knowing what the button does. If there are several steps the user needs to take in order to accomplish something, each of those steps is a micro-interaction.

          • M S i N Lund

            How about “reading”?
            As in, reading the question before making some random grammar speech.

        • I see where you’re coming from. However, micro-interactions are not quite as synonymous to “animations” as you may think. Like Daniel said, animations are only one way to go about it.

          The idea of micro-interactions is to create a quick, subtle yet impactful behavior that communicates a message to the user in a pleasant and efficient way. A great developer would take it a step further and ensure these micro-interactions do not compromise technical integrity of the site; eg. load speed, compatibility, etc.

          I definitely agree that animations in particular can be abused – I see it all the time. Many will implement animations simply as a way to look flashy and pseudo-pro… so just because you can, doesn’t mean you should, right? But in purposeful cases, micro-interactions can really enhance the user experience and bring delight to users in just a couple lines of code… that alone can increase conversions if you’re interested in your bottom line.

          Users won’t ever remember whatever you say or do, but they’ll always remember how you made them feel.

          So remember to make your users feel awesome. :) This article does.

          • “Users won’t ever remember whatever you say or do, but they’ll always remember how you made them feel.” I love that, nicely put! :)

  • Now how to find out how to create some of those micro interactions… any recommendations? Would love to learn how to make the twitter star and the Request for Contact form numbers

    • We’re always looking for new topics, and that sounds like a great one, Reony. We’ll look into it.

    • I replied to this earlier but the comment was awaiting moderation (I think because I inserted a link), so here it is again:

      You should check out Atomic App, Principle and Framer. Atomic is web-based, Principle is app-based, and Framer is more code-orientated. I won’t overwhelm you with options, but I’d regard these three as the top tools for prototyping interactions, hope this helps!

      • Ah yes, I know how to use all of those lol :) I was talking about, making actual code that can be used on the web to recreate some of these animations. Someone told me about an app called Hype for Mac. Actually creates HTML/CSS from the animations you make. But still, I like to learn the “manual” way ;) I just haven’t put the time and effort into animating something like that yet. My jobs haven’t allowed that time so much unfortunately.

        • Ah, my bad. If you don’t have a SitePoint Premium account (would recommend), Craig Buckler wrote a 4-Part series on CSS transitions and animations that I would really recommend. Just search “css transitions 101” to start from the beginning. If you do have a Premium account, there’s a few videos that might help you.

  • Thanks for sharing

  • wazz

    i think this is a great article, but i don’t think we need another term for all of this (not your doing (i think?)). i see this as simply UX. it’s a good intro, and almost has me convinced that ‘micro-interactions’ are a thing, but i’m not really convinced. there’s (almost?) nothing ‘micro’ about it — users’ actions, such as clicking/tapping a button are not micro, but significant — and the point of all of this seems to not really be about interactions, but *reactions* from the UI. again, good stuff.

    • Of course it’s UX, but UX is a huge field with many areas to consider. Micro-interactions are called “micro”-interactions because they’re one step in a set of large interactions, for example filling out a form requires a tonne of micro-interactions and requires a lot of care to offer optimal UX.

      All interactions have reactions, otherwise they would be very bad interactions!

  • allihans

    Awesome post man! Thanks for this. Looking forward to your next one.

    • It’s coming, currently trying to write something on easings!

  • SallyW

    Thanks for the article. Key point to easily followup – offer alternatives for 404 errors.

Recommended
Sponsors
Get the latest in Design, once a week, for free.