Home > UX and Prototyping > Micro-interactions: a complete beginner’s guide
Micro-interactions are anything but micro when it comes to delivering a solid user experience, here's how you should use them when creating web and mobile experiences

Micro-interactions are anything but micro when it comes to delivering a solid user experience. Here’s how you should use them when creating web and mobile experiences

There are subtle ways UX designers can boost the user experience of the websites and mobile apps they create. Little moments of joy that can be supplanted into even the most innocuous of tasks. Micro-interactions, as they are called, are small details that transform the mundane into the mesmerizing.

In this post we’ll go over just what exactly mighty micro-interactions are, and how you can use them in your interactive prototypes to create experiences that put a smile on your user’s face.

What are micro-interactions?

Micro-interactions are events which have one main task – a single purpose – and they’re found all over your device and within apps. Their purpose is to delight the user; to create a moment that is engaging, welcoming and, dare we say it – human.  

To illustrate: in Google Maps, when you cross a state line you’ll receive a small message welcoming you to the new state. Or on Instagram, when you take a screenshot, you’ll be given a notification encouraging you to use the share functions within the application.

These are instances of micro-interactions. So micro that if you blink, you might miss them. What makes micro-interactions special is they are a powerful way to enhance an experience through their charm and subtlety.

micro-interactions-designing-microinteractions-ux-design-ui-prototyping

When to use micro-interactions?

There are many opportunities to use micro-interactions. The devil is in the detail and it’s these small actions that help us navigate through experiences in such a way that we barely notice them. They’re an opportunity to do something creative, too. Something as simple as changing or skipping a song is a chance to think about interesting and fun ways to add a micro-interaction.


Download Justinmind and start prototyping micro-interactions in your designs

Download Free


According to Carrie Cousins, micro-interactions help users to: link?

  •         Communicate a status or feedback
  •         See the result of an action
  •         Help the user manipulate something

It’s likely that from the moment you wake up until the moment you go to sleep you’re likely to interact with over 100 micro-interactions on websites and in mobile apps.

Micro-interactions can boost the UX design. Here are a few instances where you can find a micro-interaction:

  •         Changing a setting
  •         Unlocking your phone
  •         Adding something to a check out
  •         Turning something on or off
  •         Liking or sharing something
  •         Carrying out a single task
  •         Connecting devices together

What makes a micro-interaction?

Dan Saffer, a product designer and author wrote the book on micro-interactions. In it he details the structure of a micro-interaction.  Dan outlines the ingredients to make it effective, if you will. The four main components of a micro-interaction are:

  •         Trigger
  •         Rules
  •         Feedback
  •         Loops and modes

Triggers are what set off the micro-interaction. They can vary between a click, swipe, tap or a pull.

Rules are applied to the micro-interaction, so it responds accordingly. The rules determine what will happen.

Feedback lets the user know something is happening. This could come in the form of an animation, a pop-up or any other range of interactions.

Loops and modes determine the length of a micro-interaction as well as whether it repeats or changes over time.

Designing micro-interactions: best practices

Now you know what a micro-interaction is and what they’re made of, let us look at a few best practices when it comes to designing a successful micro-interaction.

Keep it simple

If you’re interacting with many micro-interactions in any given day, it’s best that those interactions stay as simple as possible. If a micro-interaction is too complex it can lead to exhaustion for the user.

These little interactions can take a toll so avoid gimmicks and trickery and focus on adding value and meaning, instead of interactions for the sake of interactions. Don’t just design for today, design for tomorrow.

Maintain consistency

Micro-interactions should go as unnoticed as possible while still delighting users. Not an easy task but it is made easier if consistency across design is achieved.

If you are using a specific color palette or your app is created using specific guidelines, stay within these boundaries when creating your own micro-interactions.

Nasty surprises can hurt the user experience so if you’ve got a theme, run with it. You can even pair a micro-interaction with some strong microcopy to keep that consistency well and truly alive.

Think of the why

Why are you choosing this micro-interaction? Why is it necessary? Micro-interactions are fun to experience and even more fun to design, but never forget the purpose of the micro-interaction. All too often we designers fall victim to things because they look pretty while losing sight of our design’s intended audience.

Prototype it

It’s one thing to think you have a good idea but it’s another thing to know you have a good idea. That’s where interactive prototyping fits in. Test, retest and test again any idea you have. Download Justinmind and start playing around with micro-interactions using our powerful and effective events.

Conclusion

Micro-interactions are a valuable part of user experience design. They’re robust and shouldn’t be taken for granted – keep this in mind when creating your own.

The point of a micro-interaction is to enhance and not detract from the user experience so attention to detail is advised. Too much and you can overwhelm the user but too little and you may have a boring experience that no one wants to repeat.

download_free

Steven is the web editor at Justinmind

Add comment

Your email address will not be published. Required fields are marked *

Download Free