Microinteractions: The Secret of Great App Design
by Nick Babich
The best products do two things well: features and details. Features are what draw people to your product. Details are what keep them there. And details are what actually make our app stand out from our competition.
Microinteractions are one of the best techniques for providing delightful feedback.
Often considered secondary, microinteractions actually create a feeling of well-designed experience once they are discovered by users. As a designer, recognizing the importance of microinteractions is just as critical as designing them.
What is a Microinteraction Anyway?
Microinteractions are the contained product moments that do one small task.
As first described in Dan Saffer’s book Microinteractions, these tiny details typically serve these essential functions:
- Communicate feedback or the result of an action.
- Accomplish an individual task.
- Enhance the sense of direct manipulation.
- Help users visualize the results of their actions and prevent errors.
Some examples of specific microinteractions include:
- The vibration notification together with silent mode icon on display when you switch an iPhone to mute.
- Interface animation on user input (a button that changes color when you taps it).
Why Microinteractions Work
Microinteractions work because they appeal to the user’s natural desire for acknowledgement. When users interact with UI, they want to know that they system receives their actions. Also microinteractions can guide users on how to interact with the system.
Identifying Opportunities
Part of the beauty of microinteractions is that they can be inserted in a variety of places, around any potential action. In general, though, they tend to come up in the following areas:
Show System Status
The first usability heuristic principle by Jakob Nielsen states: keep your user informed about what is going on. When users trigger an operation, they expect to get immediate response. But there are situations when an app needs some time to complete an operation. So, the interface should keep the user enlightened about what is happening.
Or where the user is:
Takeaway: Don’t let your wonder about what happens — keep the user informed and show them progress.
Highlight Changes
When any important event happens, we need to show notifications to inform users about that. Animation can help achieve this goal. It will attract users attention and won’t let users overlook what you think is important.
Takeaway: In many cases animation effects are used for attracting user’s attention to important details.
Keep Context
Use motion to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen. This is especially true for mobile devices and smart watches, because it’s simply impossible to fit a lot of information on one screen and any screen state change should be crystal clear for your users.
Takeaway: Transitioning between two visual states should be clear and smooth.
Visualize Input
Data input is one of the most important elements of any application. And micro-interactions turn this process into something special. You can use existing visual elements to deliver feedback—just add nice visual details.
Takeaway: Microinteractions help reveal information and help user to reach their goal.
Call to Action
Microinteractions have the power to encourage users to actually interact. By bringing empathy in user experience, you have a better chances users will make a move. But make sure the visual cues and animations are appropriate for your users. And keep longevity in mind — will the microinteraction get annoying on the 100th use, or is it universally clear and unobtrusive?
Takeaway: Focus on user emotions because they play a huge role in user interactions. Draw from context & user research and design for repeated use.
Things to Remember
- Microinteractions act as facilitators for interactions between a user and a system.
- Microinteractions should save time by instantly communicating what is happening in a way that doesn’t bore or distract the user.
- Knowing your users and the context behind the interaction will make microinteractions more effective.
- Microinteractions must survive long-term use. What seems fun the first time might become annoying after the 100th use.
Conclusion
Design with care. Great design has to happen on all levels, from large functional part down to tiny microinteractions.
Follow UX Planet: Twitter | Facebook
Originally published at babich.biz
