Micro-Interaction Design: Models, Principles & Key Tips Explained
:: By Keval Padia, Nimblechapps ::
Small things often make a big difference in design and that is precisely why there is a lot of chatter about the micro aspects of user experience.
Rating an app, replying to a push message, setting a status message, all these are examples of microinteractions. They exist to engage users often to their individual advantage and they can be found inside the features of any app, website or gadget.
When such microinteractions help users get simple things done, they become Signature Moments creating a strong reference to the brand. For example, the ‘Like’ feature in Facebook is a microinteraction that became a signature of this social media network.
Microinteractions can be structured into four different parts:
• Trigger: It initiates an action.
• Rules: It suggests what would happen in the interaction
• Feedback: It lets users know what is happening
• Loops and Modes: It refers to what happens next following the interaction
Microinteraction model and key design principles
The Trigger starts a microinteraction and it can be a manual control like a button or clickable icon or else it can be a system trigger going on or off in certain conditions. The vibration of the phone with the arrival of the text message is a system trigger.
Rules determine what happens within a microinteraction. It defines the interaction flow through a sequence of events and defines what can be done and what cannot.
Rules remain invisible to users but they understand the rules through the third part called Feedback. It lets users know how it works.
Loops and Modes determine the length, complexity, repetition and change of the microinteraction over time.
When designing microinteractions, consider the following:
• Try to minimize or prevent the possibility of human error in microinteractions.
• Keep them at a minimum.
• Speak in simple and human terms to make the interaction interesting.
• Consider your microinteraction over long-term use.
Key elements of microinteraction
• Response time is crucial because your users expect it to activate at the earliest.
• Clever design is good as long as it is not irritating and not too complex.
• Typography, simple colors and structure all add to simple, clear design.
• Text should be at a minimum, just enough to tell users what they need to know.
• The microinteraction should be designed to complement the device being used.
4 tips for microinteraction design
1. Keep users informed
Users should not be left in the dark while a microinteraction is occurring. You must inform users about what is going on. Users are always restless and they want to be responded to immediately, but a technically immediate response is not always possible. Developers must keep them informed of the process status in the background. For instance, when a download is going on, include a progress bar.
2. Keep microinteractions contextual
As devices get smaller and more movable in the way of smartphones and wearables, fitting all information in a single screen remains a challenge. This is why displaying contextual information is important to avoid clutter, such as only the information relevant to what they want to achieve and why.
3. Push Call to Actions
Besides helping users interact effectively with apps, microinteractions also push and inspire users to engage further. Simple messages like "go to next page" or the Like option, inspire users to keep interacting.
4. Make the changes prominent
Microinteractions can keep users informed about the changes made on a page. For example, a new button can be designed in place of the older one to save space but you need to keep users informed so that they do not get confused. A small notification or a little addition of animation can intuitively keep users informed.
About the Author
Keval Padia is a Founder & CEO of Nimblechapps, a fast-growing website development company. The current innovation and updates of the field lures him to express his views and thoughts on certain topics. Check out his latest WordPress plugin – Save Contact Form 7.