Wednesday, May 22, 2024
HomeUSER EXPERIENCEBest Practices for Microinteractions

Best Practices for Microinteractions

Microinteractions are subtle moments centered around accomplishing a single task. Almost all products around us (both physical and digital) are filled in with microinteractions. Here are just a few examples:

  • Visual feedback that confirms the fact that a new item is added to cart
  • Pull-to-refresh that helps us update content
  • Interface animation that acknowledges certain action (e.g. toggle button)

Every one of these tiny moments forms a microinteraction. When we interact with products we rarely focus on them, but we certainly feel their presence. However, these tiny moments when they well-designed can enhance your user experience by making the user interface less machine and more human.

In this article, I’ll desribe 5 useful techniques for microinteractions and provide some helpful examples.

1. Create a Habit Loop

Microinteractions have a direct impact on user engagement. Well-designed microinteractions have the power to encourage users to interact more with a product because they create habit loops. Habits are formed when people perform the same actions repeatedly and consist of three elements:

  1. Cue — Trigger that initiates action
  2. Routine — In response to the cue, you perform an action
  3. Reward — A benefit you get from completing the routine, reason for completing action
Image credit: wikia

Facebook’s notification about incoming message is a good example of habit loop: red badge and whitened icon (cue) indicate there’s a new message, which makes the user click the icon (routine) to read the message from their friend (reward). After a while, users automatically click on icon when they see the red badge.

Microinteractions are the secret ingredient when it comes to creating an addictive app.

Tip: The stronger the reward, the more stronger the habit becomes.

2. String Together with a Theme

Microinteractions should be natural part of your product design. Here area two simple ways to introduce microinteractions in your design:

  • Principle of continuity. You probably heard about the term user journey. When users interact with a product, they go through a series of steps and each step in this process is a logical continuation of a previous step. It’s possible to make the interaction with a product more comfortable by animate the transition between different states so that transition looks smooth, not discontinuous.
Image credit: Cam Runcie
  • Predictability of user interfaces. Human-computer interactions are much more comfortable for users when they can tell what will happen next. Well designed microinteractions can guide users and help them make sense of content and functionality.
Image credit: Leo Zakour

Image credits: Matt D. Smith

3. Use Animated Feedback

Animation can contribute heavily to the user experience if used correctly. Both functional and delightful animations can be used to deliver a feedback:

Image credit: Tamino Martinius
  • Delightful animated details introduced in microinteractions make the interaction more fun because motion brings user interface to life.
Image credit: Chris Bannister
Image credit: Tubik

4. Use Humor

Humor plays an important role in human-computer interaction. When products create positive emotional responses from end users, it has a better chance to create a loyal audience. For example, MailChimp, a web service for creating and sending emails, rewards users for creating and scheduling their first e-mails by adding unexpected humor and positivity throughout the process. By adding small and delightful surprises throughout the user journey, MailChimp makes sending e-mails a lot more fun.

MailChimp’s confirmation view for email campaign uses light humor to ease a tense situation

5. Avoid Unwanted Interactions

When you design microinteractions, always make sure the visual cues and animations are appropriate. Many designers in an attempt to make UI more delightful overload UIs with animated microinteractions, and this often creates too complex interactions. The later can be seen in the example below — it’s a beautiful but not really valuable interaction.

Having the blob fly across the screen, everytime user scroll through the chats, can become a little annoying after a while. Image credit: Jakub Antalík

Imagine seeing such an animated effect each time you tap on the floating action button. It can be really annoying. That’s why it’s vital to follow KISS principle when you design screens. So when planning our microinteractions we should focus only on practical things the microinteraction does for the user.

Learn how to design user interfaces

Interactions between computers and humans should be as intuitive as conversations between two humans. Interaction Design Foundation will help you to learn how to design for efficiency and persuasion.

Learn UX Design

Take all our online courses. Pay a flat fee. Get industry-recognized Course Certificates (see example) Self-paced…

www.interaction-design.org

Conclusion

When you design a product, you should focus both on macro- and micro-details. Even minor details deserve close attention, because attention to every detail is key to your success, making human-computer interaction easy to use.

Thank you!

Follow UX Planet: Twitter | Facebook

Originally published at babich.biz

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here