- \n
- Communicating feedback or the result of an action<\/li>\n
- Accomplishing an isolated, individual task (i.e., connecting one device to another, liking a friend\u2019s post)<\/li>\n
- Manipulating a setting<\/li>\n
- Preventing user error<\/li>\n<\/ul>\n
Some examples of specific microinteractions include:<\/p>\n
- \n
- The vibration notification when you switch an iPhone to mute.<\/li>\n
- A warm greeting before diving into more straightforward copy<\/li>\n
- The pull-to-refresh UI pattern<\/li>\n
- Interface animation that either shows clickability (a card that changes color when hovered over) or confirms an action (an icon that changes after clicking)<\/li>\n
- An animation confirming an item is added to cart, like with \u201c+1\u201d from Photojojo below.<\/li>\n<\/ul>\n
![\"Screenshot](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/image012.png\")
<\/p>\nPhoto credit: Photojojo<\/a><\/p>\n
However, the most well-known example of a microinteraction, and a good standard to base all others on, has existed long before the Internet was ever invented. The best microinteraction is pushing a button: gratifying in completing the action, and irreplaceable in activating a function.<\/p>\n
For more microinteraction examples,\u00a0read this Econsultancy piece on 15 mobile microinteractions<\/a> (some of which we mentioned above).<\/p>\n
Why Microinteractions Work<\/h3>\n
In a nutshell, microinteractions work because they appeal to the user\u2019s natural desire for acknowledgement. Microinteractions fine-tune human-centered design<\/a> by:<\/p>\n
- \n
- More control through immediate feedback<\/strong> \u2014 The user instantly knows their action was accepted, giving them more confidence in further usability.<\/li>\n
- Instructions<\/strong> \u2014 Whether blatant or subtle, microinteractions can guide users in how to work the system.<\/li>\n
- Visual rewards<\/strong> \u2014 Small but satisfying effects enhance the UX, and can facilitate a habit loop<\/a>.<\/li>\n
- Meeting expectations<\/strong> \u2014 In today\u2019s web design landscape, microinteractions are the norm \u2014 their absence makes a site seem bland.<\/li>\n<\/ul>\n
In short, microinteractions improve the UX by making the UI less machine and more human. As a result, the design is more usable and enjoyable.<\/p>\n
Identifying Opportunities<\/h3>\n
Part of the beauty of microinteractions is that, because they\u2019re 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:<\/p>\n
- \n
- Switching on\/off (features, functions, or the entire UI itself)<\/li>\n
- Adjusting setting preferences or continual elements (i.e., volume)<\/li>\n
- Viewing or writing a small piece of content (i.e., status message, comment)<\/li>\n
- Connecting one device to another (i.e., computer to phone)<\/li>\n
- Uploading and downloading<\/li>\n
- Notifications<\/li>\n
- Social media sharing<\/li>\n
- Pull-down and hidden menus<\/li>\n
- Showing changes (i.e., an animation to show the Play button changed to a Pause<\/a>)<\/li>\n
- Highlighting calls-to-action<\/li>\n<\/ul>\n
Of course, there are a lot of potential opportunities for microinteractions. Where and how you implement them should be determined by the specific needs of your interface.<\/p>\n
In the below example created in UXPin<\/a>, we’ve prototyped a hypothetical model talent website. Each model is represented by a card, which overlays metric measurements and contact information upon hover. In this case, the microinteraction helps reveal information. The animation, however, adds a level of discoverability, making the otherwise mundane task feel a bit more fun.<\/p>\n
![\"Animation](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/image01.gif\")
<\/p>\n4 Steps of Microinteractions<\/h2>\n
No discussion about microinteractions would be complete without mentioning Dan Saffer, the interaction designer who literally wrote the book on the subject<\/a>. He explains that an effective microinteraction follows a four-step process, described with an elevator example:<\/p>\n
- \n
- Trigger<\/b> \u2014 The visual cue or impetus that initiates the action. The numbered floor button is a clear visual signifier. Pushing the button is the trigger.<\/li>\n
- Rules<\/b> \u2014 The parameters the microinteraction follows \u2014 basically, what it does. In this case, when you push the button, the elevator will move to that floor.<\/li>\n
- Feedback<\/b> \u2014 Verification for the user about the result of the microinteraction. When the button lights up, people know the elevator will respond accordingly.<\/li>\n
- Loops & Modes<\/b> \u2014 Considerations about how the microinteraction is reused, including how long it lasts and how it changes for subsequent uses, as well as if the user can change aspects of it in the settings\/preferences. For an elevator, the loop is that the button is recognizable enough that the user will understand the function immediately for different elevators, and that the pushing process is not very difficult. Because microinteractions are brief in nature, they must be designed for repeated use. Modes might be the color of the feedback light, or the typography of the number, all subject to variation.<\/li>\n<\/ul>\n
![\"Illustration](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/image071.png\")
<\/p>\nDeconstructing the 4 Steps of Microinteractions<\/h2>\n
Now, let\u2019s see how these four factors work together in a digital microinteraction, the browser refresh button.<\/p>\n
![\"Screenshot](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/image08.png\")
<\/p>\nSource:<\/i> Mozilla Firefox<\/i><\/a><\/p>\n
Let\u2019s say you\u2019re browsing Facebook and you want to see if anything new was posted since you first opened the site. Naturally, you refresh.<\/p>\n
- \n
- First, you locate the familiar arrow-in-a-circle icon, the trigger of the microinteraction.<\/li>\n
- Clicking on the icon starts the action. The loading of the new page is the microinteraction\u2019s rule: that\u2019s what it does and why you engaged it.<\/li>\n
- After clicking, the icon turn to an X<\/i>. This is one of the key elements of the microinteraction, as it provides the user with feedback that their action is being performed. That extra acknowledgement makes performing the refresh function more assuring. Imagine if such feedback were not there: the user might mistake the computer screen for being frozen, and click needlessly over and over.<\/li>\n<\/ul>\n
![\"Screenshot](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/image052.png\")
<\/p>\nSource:<\/i> Mozilla Firefox<\/i><\/a><\/p>\n
Once the new page is loaded, this is the validation for using the microinteraction in the first place. If this action is rewarding enough (in this case, with something as useful as a refresh function, it is), then this incentivizes the user to continue exploiting the microinteraction in the future. This microinteraction is so useful, it\u2019s become a UI pattern. Safari does the exact same thing. However, they add a blue loading bar at the bottom for even more feedback in case the page takes longer than usual to load.<\/p>\n
![\"Screenshot](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/image04.jpg\")
<\/p>\nBest Practices for Microinteractions<\/h2>\n
Here, we\u2019ve collected the top expert advice about using microinteractions:<\/p>\n
- \n
- Fast response time<\/b> \u2014 A near-immediate response time, within 0.1 second ideally, keeps the user feeling in control.<\/li>\n
- Keep the user informed<\/b> \u2014 A loading bar or status icon engages the user and prevents confusion.<\/li>\n
- Unify in a single theme<\/b> \u2014 If you can, create a unifying theme to tie together all interactions, micro or otherwise. In the site for the movie Amy<\/i><\/a> (below), the pink line, which every time is animated to \u201cgrow,\u201d is used in a variety of different microinteractions<\/li>\n<\/ul>\n
![\"Screenshots](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/Screen-Shot-2015-10-05-at-10.25.07-PM.png\")
<\/p>\nSource:<\/i> Amy – Movie<\/i><\/a><\/p>\n
- \n
- Draw from context and user research<\/b> \u2014 Knowing your users and the context behind the microinteractions will make them more precise and effective. Make sure the visual cues and animations are appropriate.<\/li>\n
- Use what\u2019s available<\/b> \u2014 Don\u2019t add more than necessary: use existing elements to deliver feedback if you can.<\/li>\n
- Design for repeated use <\/b>\u2014 Keep longevity in mind. Will the microinteraction get annoying on the 100th use, or is it universally clear and unobtrusive?<\/li>\n
- Use a human voice <\/b>\u2014 A quick way to make your UI warmer and less mechanical is a human tone in the copy, especially for microinteractions with their emphasis on feedback and need-to-know information.<\/li>\n
- Keep It simple, stupid<\/b> \u2014 Don\u2019t turn your microinteraction into a macrointeraction. It\u2019s supposed to be small and simple, so don\u2019t get too clever.<\/li>\n
- Follow the rules of animations<\/b> \u2014 Although a key component of microinteractions, animation is still a field with its own set of rules. Because the two often go together, brush up on the best practices for animation before incorporating them. Disney\u2019s classic 12 rules<\/a> are a good place to start, which we explain in terms of web design in our Interaction Design Best Practices: Book II<\/a>.<\/li>\n<\/ul>\n
You can learn more about the principles of interaction design (which apply to all microinteractions) in the free Interaction Design Best Practices: Books I<\/a> and II<\/a>.<\/p>\n
Takeaway<\/h2>\n
Remember what we discussed above about why microinteractions are significant and how to apply them:<\/p>\n
- \n
- Microinteractions act as facilitators for interactions, with feedback, notifications, instructions, and sometimes even a little entertainment.<\/li>\n
- They save time by instantly communicating information in a way that doesn\u2019t bore or distract the user.<\/li>\n
- According to Dan Saffer, all microinteractions should have a trigger, rules, feedback, and loops\/modes.<\/li>\n<\/ul>\n
If you\u2019ve found this article helpful, go ahead and download the free guide UX Design Trends 2015 & 2016. We deconstruct 71 examples of great UX design into techniques for everyday design.<\/p>\n
- Use what\u2019s available<\/b> \u2014 Don\u2019t add more than necessary: use existing elements to deliver feedback if you can.<\/li>\n
- Keep the user informed<\/b> \u2014 A loading bar or status icon engages the user and prevents confusion.<\/li>\n
- Fast response time<\/b> \u2014 A near-immediate response time, within 0.1 second ideally, keeps the user feeling in control.<\/li>\n
- Rules<\/b> \u2014 The parameters the microinteraction follows \u2014 basically, what it does. In this case, when you push the button, the elevator will move to that floor.<\/li>\n
- Highlighting calls-to-action<\/li>\n<\/ul>\n
- Instructions<\/strong> \u2014 Whether blatant or subtle, microinteractions can guide users in how to work the system.<\/li>\n
- More control through immediate feedback<\/strong> \u2014 The user instantly knows their action was accepted, giving them more confidence in further usability.<\/li>\n