Watch on YouTube
Listen to the podcast
Read the transcript
Jeff from Florida asks, “Microinteractions: are they good, bad, when to use them and not… will they age well?”
I love that question. Thanks for asking, Jeff. This is UX Question number 61 and I am Ben Judy.
What are microinteractions? Well, these are component pieces of a user interface that provide feedback to the user. I’ll give some properties, a few examples, and some thoughts about how to design with them.
Here are three properties of microinteractions.
One, as I said, microinteractions provide feedback to users. They enhance the overall user experience by drawing your attention to some bit of information or a particular UI element.
Two, microinteractions have a trigger. They do their thing either in response to something the user did, or they can be initiated by the system when certain conditions are met.
Three, as the name implies, microinteractions are usually pretty small in size. They don’t dominate the user interface, they enhance it.
I’ll give you a few common examples.
Notifications, scrollbars, alarms, and swipe animations are all basic, UI components or small patterns that include microinteractions.
Think about when you favorite a post in a social media app on your phone. You tap the heart or thumbs-up icon button. When that icon changes color or shape in response to your tap, that’s a microinteraction. The change in its appearance draws your attention, confirming that the system noticed your input—your tap was the trigger.
Now, how do you make good, effective use of microinteractions in your designs? Here are a few tips.
First, direct the user’s attention. Don’t use microinteractions randomly, just because you can. Identify moments in the user experience when the user should be made aware of a change in status, or there is new information that has been updated, or the system should provide knowledge they ought to know contextually.
Second, use microinteractions to help users avoid errors. A common example is a well designed input form with error notifications that appear when the user has entered invalid characters.
Third, encourage engagement. When you click a button and it just slightly changes color or texture or border width, it kinda makes you want to click more buttons, doesn’t it? Because it does something that feels well designed in response.
Fourth, be on brand. Use microinteractions to reinforce your brand identity with a consistently crafted look and feel, as well as sound or haptic feedback, for that matter.
Fifth, be subtle. As Dan Saffer said in his 2013 book Microinteractions, “It’s the little things that turn a good digital product into a great one.”
Keep asking your questions about UX. Next time, I’ll answer the question: How do I choose fonts for UI design?
Referenced in this episode:
- Microinteractions in User Experience by Alita Joyce at Nielsen Norman Group
https://www.nngroup.com/articles/microinteractions - Microinteractions by Dan Saffer – O’Reilly Media
https://www.oreilly.com/library/view/microinteractions/9781449342760/
Support UX Questions
Visit us on Patreon and check out the great perks at each level of support!
Become a sponsor
You can advertise your products or services—our promote yourself as a UX professional—by sponsoring episodes of UX Questions! See the Sponsor page for details.
Hire Ben Judy
Ben is available for consulting engagements as a workshop facilitator, mentor, design coach, and more! See the Ben page for details.