Best Practices for Microinteractions – UX Planet

  • So when designing our microinteractions we should focus only on practical things the microinteraction does for the user.
  • Microinteractions have the power to encourage users to actually interact .
  • After a while, users automatically click on icon when they see the red badge.
  • It’s a common mistake to overload UIs with microinteractions or to create too complex interactions.
  • The tiny moments add up to design to enhance your user experience by making the u ser interface less machine and more human .

Microinteractions are subtle moments centered around accomplishing a single task. Almost all applications around us are filled in with microinteractions. Here are just a few examples: Every one of…

@mattmccullo: “Best Practices for Microinteractions” by @101babich #startups #ui #ux #nodejs #angularjs

by Nick Babich

Microinteractions are subtle moments centered around accomplishing a single task. Almost all applications around us are filled in with microinteractions. Here are just a few examples:

Every one of these tiny moments forms a microinteraction. We often don’t focus on them, but we can feel their presence. These tiny moments add up to design to 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 the power to encourage users to actually interact. They are a strong instrument that helps to form habit loops. Habits are formed when people perform the same actions repeatedly and consists of three elements:

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 chat with their friend (reward). After a while, users automatically click on icon when they see the red badge.

Tip: Rewards fuel our motivation. The stronger the reward, the more stronger the habit becomes.

2. String Together with a Theme

Microinteractions should be natural part of your design — you should create a unifying theme where all interactions (micro- and macro-) are tied together. Follow two simple principle:

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:

Tip: Keep longevity in mind. Will the animation get annoying on the 100th use, or is it universally clear and unobtrusive?

4. Use Humor

Humor in interaction, no matter what the scale, is a sure way to bring emotional reactions into user experience. 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.

The design should communicate emotion in all its forms.

Tip: Use a human voice. A quick way to make your UI warmer and less mechanical is a human tone in the copy.

Make sure the visual cues and animations are appropriate. It’s a common mistake to overload UIs with microinteractions or to create too complex interactions. The later can be seen in example below — it’s a beautiful but impractical interaction.

Remember, less is more with regard to microinteractions. Anything that if removed would make a cleaner UI is almost certainly a good idea. So when designing our microinteractions we should focus only on practical things the microinteraction does for the user.

Tip: Use KISS principle for your design. Microinteraction is supposed to be small and simple. Don’t turn your microinteraction into a macrointeraction.

In UX, what matters is how you deal with users and how they feel when using the product. Even minor details deserve close attention, because attention to each and every detail is key to your success making human-computer interaction easy to use.

Thank you!

Best Practices for Microinteractions – UX Planet

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.