If individual interactions are the cells that make up the UX, then micro-interactions are the atoms within the cells. As technology continues to develop, designers are able to delve deeper into the tinier interactions of a UI, and so micro-interactions are the new frontier.
While minuscule on their own, these tiny moments add up to substantial enhancements to your UX. Micro-interactions provide delightful visual feedback, making the interface feel weightless thanks to the smooth transitions. I’ll explain useful techniques for micro-interactions & dissect some great examples.
Defining Micro-interactions
Micro-interactions might be easily overlooked in the greater design scheme, but they actually hold the entire experience together. They are single moments of communication that help users flow through your design.
What Micro-interactions Do
As first described in Dan Saffer’s fantastic book Micro-interactions, these tiny details typically serve these essential functions:
- Communicating feedback or the result of an action
- Accomplishing an isolated, individual task (i.e., connecting one device to another, liking a friend’s post)
- Manipulating a setting
- Preventing user error
However, the most well-known example of a micro-interaction and a good standard to base all others on, has existed long before the Internet was ever invented. The best micro-interaction is pushing a button: gratifying in completing the action & irreplaceable in activating a function.
Some examples of specific micro-interactions include:
- The vibration notification when you switch an iPhone to mute.
- A warm greeting before diving into more straightforward copy
- The pull-to-refresh UI pattern
- Interface animation that either shows clickability (a card that changes color when hovered over) or confirms an action (an icon that changes after clicking)
- An animation confirming an item is added to cart, like with “+1”.
Why Micro-interactions Work
In a nutshell, microinteractions work because they appeal to the user’s natural desire for acknowledgement. Microinteractions fine-tune human-centered design by:
- More control through immediate feedback — The user instantly knows their action was accepted, giving them more confidence in further usability.
- Instructions — Whether blatant or subtle, microinteractions can guide users in how to work the system.
- Visual rewards — Small but satisfying effects enhance the UX, and can facilitate a habit loop.
- Meeting expectations — In today’s web design landscape, microinteractions are the norm — their absence makes a site seem bland.
In short, micro-interactions improve the UX by making the UI less machine and more human. As a result, the design is more usable and enjoyable.
Identifying Opportunities
Part of the beauty of micro-interactions is that, because they’re brief, they can be inserted in a variety of places, around any potential action, really. In general, though, they tend to come up in the following areas:
- Switching on/off (features, functions, or the entire UI itself)
- Adjusting setting preferences or continual elements (i.e., volume)
- Viewing or writing a small piece of content (i.e., status message, comment)
- Connecting one device to another (i.e., computer to phone)
- Uploading and downloading
- Notifications
- Social media sharing
- Pull-down and hidden menus
- Showing changes (i.e., an animation to show the Play button changed to a Pause)
- Highlighting calls-to-action
Of course, there are a lot of potential opportunities for micro-interactions. Where and how you implement them should be determined by the specific needs of your interface.
more to come
Continually updated & living article
Coming Soon
While minuscule on their own, these tiny moments add up to substantial enhancements to your UX. Micro-interactions provide delightful visual feedback, making the interface feel weightless thanks to the smooth transitions. In this chapter, we’ll explain useful techniques for micro-interactions and dissect some great examples.
