5 Mistakes to Avoid When Designing Micro-interactions

Or, “What I learned after taking a week off and watching thousands of micro-interaction animations until my eyeballs fell out.”

First of all, let’s get synced up. What is a micro-interaction anyway?

In doing my due diligence for this post, I came across this handy definition by Carrie Cousins, who seems like a cool person. She says –

“A micro-interaction is any single task-based engagement with a device.”

Well ok then. I don’t know about you but I found that invigorating. Enjoy with relish.

Before we get into the ‘5 mistakes,’ I want to mention that the following UI animations I am about to rip into are all from extremely talented designers. I have huge respect for them and their work. They are kind enough to offer their portfolios and ‘work in progress’ pieces publically for us to enjoy and learn from. I’ve known quite a few designers to be elitist assholes when critiquing work. That has never been my style. If I come across as mean, just know that I find design seriousness highly entertaining. I am not attacking anyone. I am amusing myself, and hopefully you, dear reader.

You strapped in? Let’s do this thing.

1. For the love of god, restrain yourself

As a designer, your ego is a delicate flower in need of frequent watering and praise. Designing high quality micro-interactions means sending your ego out for a mani-pedi while you get the real work done.

Here, Sergey Valiukh (who is is a genius with type, layout, color, and animation), hoses some micro interactions. Animation is the perfect place to kick the tires on an idea and see if it works. That’s what he did and it doesn’t.

Credit Sergey Valiukh

Let’s break down the play by play –

1. The most obvious thing you may notice is the ‘3d flip’ on the photos. Completely unnecessary and possibly even illegal (just kidding, I wanted to make sure you were still paying attention). In the case of micro-interactions, anything that if removed would make a cleaner narrative is almost certainly a good idea.
2. Secondly, you might notice that the feed view of the photo is cropping the image, which un-crops the photo in edit view. This is clearly unworkable.
3. Thirdly, you will notice the top navigation icons take an insanely long time to transition on. They look great the first time but after that it’s like watching paint dry. Micro interactions need to be swift, lasting at most 300–400 milliseconds, with clean, eased velocity curves.
4. After you peel your eyes off that, you’ll wander down to the bottom, where the two icons land at different times, implying a false narrative (unnecessary emphasis), and adding to cognitive load.

Conclusion: there is a ton of value in producing animations like this. You get to see what works, what doesn’t work, where to trim the fat, and where to get your ego out of the way, and create clean, usable experiences. This is not to say you can’t have fun and add delightful details, just be aware that your delightful detail may in fact be fat in disguise.

Design action step – look for fat to trim. Are these animation details keeping the micro-interaction clean, or are they hosing the user experience, muddying the waters and adding to cognitive load?

Key concept — Restraint

2. Don’t sacrifice your narrative on the altar of catharsis

In user experiences, narrative is important for a variety of reasons. Partly this has to do with expectation, continuity and how these things impact cognitive load. Partly it has to do with how our minds organize and make sense of information. It also has to do with how we build mental models of things so we can use them. Basically, narrative is important.

In this example, Srikant Shetty (who is a very strong animator and designer) does a terrific job of mangling narrative. Follow me below for the play by play.

Credit Srikant Shetty

The first thing you might notice is how bizarre this narrative is. We expect the text to appear inline. Instead, the line isn’t really a line. It’s actually some sort of hidden bigger shape with just its head poking out. By tapping on its head, we’ve enraged it and now it has come out of hiding, presumably to defend its territory (at which point our input appears and we can type away). Like I said, bizarre.

The narrative we would expect as we input form data is interrupted. Our expectation is broken. Rather than continuing our task and flow, we are now forced to stop and deal with the unexpected, updating our mental model, and taking us away from our intended result.

This is what can happen when designers ‘get creative.’ Rather than focusing on preserving the core narrative of the interaction, they go big, sacrificing the narrative for a cool effect or technique. In effect, they make the interaction ‘mushy’ to borrow a term from Pasquale.

Great micro-interactions emply clean narrative and flow. Contrast the above with either of the following —

Credit Andrej Radisic & Matt D. Smith, respectively

In both of these instances, the narrative flow is clean and tight. While the example on the left has an element of play in the line bounce, it functions as a delightful detail, rather than a fundamental of the interaction model itself.

Design action step — Keep the narrative tight and clean.

Key concept — Narrative

3. If you can’t do it in a single movement, don’t do it at all

Surprisingly, this is something that really caught my eye. Almost every single successful micro interaction I came across consisted of a single movement or unified motion. The unsuccessful ones stood out by the complexity of their movement.

In this example, Romain Passelande (who has an insanely cool Dribbble portfolio) does a thorough job of harshing my mellow. Let’s check it out.

Credit Romain Passelande

Now if you aren’t used to animation, you may not see what I see. I see two separate movements that can be combined into a single movement, but aren’t. There are two distinct actions going on —

1. The lines transforming
2. The icon rotating

Rather than having these separate actions happen together, Romain had them happen separately (the lines transform and then the icon rotates — not cool). If you’re still not seeing it, maybe some side by side examples will help —

Credit Naseer Ahmed

Here, the animations on the left and right violate this ‘single movement’ principle. The animation in the middle contains a single unified movement, and makes me happy. It should also make you happy. The movement in the middle animation is clean, definitive and efficient.

Design action step — make sure your micro-interactions occur as a single unified movement. If your micro-interaction contains several actions occurring at different places in time, stop doing that.

Key concept — Single Movement

4. The problem isn’t the animation, the problem is the design

As someone who studies the finer nuances of UI animation, one issue that keeps coming up is that designers have a difficult time separating the motion from the static design. This is understandable and partly a function of the seamless nature of a good micro-interaction: it’s hard to spot in realtime. A bad micro-interaction sticks out like a sore thumb.

In the following chart, I’ve boiled down the finer details of my theories on design and animation. Feel free to print it out and hang it by your desk for reference.

And you thought I couldn’t do information design…

In general, you want to be aiming for the area with the dot and the arrow next to it. I made the dot pink so you could find it quickly if you happen to be in the middle of a project and short on time.

Let’s take this out of the world of theory and into the real world. In the following example, you’re going to practice separating the design from the animation

Here, Sam Thibault, a very talented designer at Handsome (Sam has crazy good design and animation chops) got super excited one day and decided to create an awesome animation on top of some not so cool design.

Credit ⋈ Sam Thibault ⋈

Now, you may be thinking to yourself, “Stop picking on Sam, this looks fresh.” And it does. Like I said, Sam is a talented guy. What makes this such a great reference is the treatment of the ‘add to cart’ button.

In this example, there is no animation solution that would save this design from itself. The fault lies in the design, not in the execution of the design over time, which essentially is what a micro-interaction is — design over time.

Here, the ‘add to cart’ button incomprehensibly transforms, changes shape and fills the image gutter. Not only is this unnecessary, but due to the scale of this critical UI element, now the user is burdened with additional cognitive load.

In film production, it has been said that problems on set are problems that originated in the script. A bad script equals a bad shoot. A bad design equals a bad micro-interaction.

Design action step — I hate to even say it, but make sure your design makes sense before you try to pimp it with animation.

Key concept — Animation will not save you

5. You miss 100% of the shots you don’t take

Wayne Gretzky said that. Apparently, he was pretty good at whacking a plastic disc into a small net while dancing around on ice skates while avoiding punches being thrown by grown men, also dancing around on ice skates. Which if you think about it, is a fairly apt description of what it’s like being a UX designer trying to design micro interactions: you’ve got a lot on your plate.

Because designers largely aren’t used to designing 300–400 millisecond animations, it’s easy to lose control of the details and stop seeing them as what they are — opportunities. It all amounts to a complicated juggling act and it’s easy to start dropping balls, to further mix our metaphor.

In this example from Ivan Bjelajac, I spot 5 missed ‘detail’ opportunities.

Let’s check it out.

Credit Ivan Bjelajac

1. There is an opportunity to create a clean and elegant icon transformation in the menu/back button. Having the menu icon slide in from the top feels disjointed and inconsistent.
2. The right arrow with yellow box — unnecessary rotation and scale effect. Having it persist feels strange. It should transition with the content.
3. The paragraph content text fades on and off unnecessarily during the transition. It should persist.
4. The title wipe from left to right — would be cleaner and more elegant by playing it off the content wipe rather than having it fade on and sliding.
5. Hero image crop — when in the banner view, it would be nice to see the image reframe in a way that supports context, not just randomly landing in the least interesting way (nitpicking here).

Contrast that with these examples of ruthless attention to detail. One cannot imagine these micro-interactions being any cleaner in narrative and execution, no stone unturned, no opportunity missed. Wayne Gretzky would be proud. If he cared at all about user experiences, which I highly doubt.

Credit Colin Garven & Nick Frost &Ramotion, respectively

Design action step — Be ruthless in your attention to detail. Leave no stone unturned. Don’t drop balls. Take the shot.

Key concept — Details are opportunities

In conclusion

I am here to tell you that even with no animation experience it is possible to design and build beautiful, clean micro-interactions. Focusing on following key concepts –

1. Restraint
2. Narrative
3. Single movement
4. Animation will not save you
5. Details are opportunities

Avoiding the five mistakes is no guarantee you will end up with something awesome, but it’s a step in the right direction.

To view more examples of micro-interactions, complete with my annotations and critiques, you can view my super awesome ‘Micro-interactions’ Pinterest board.

Special thanks

Big thank you to Sergey, Srikant, Romain, Sam, and Ivan. You guys rock. I appreciate your work and the opportunity to learn from you.

Extra big thank you to Alex Chang for poignant feedback, Lindsey Gjording for reviewing early drafts, and Valentina Phearson for being a rockstar and helping me source and catalogue like a million UI Animation micro-interaction gifs. And of course to Kateryna Sitner, for being my muse and generously providing feedback every step of the way.

If you want to receive my articles and UI Animation tutorial videos straight to your email, click here to get added to my list.