Microinteractions: Detail in Design

User experience is an integral part of any design project, and there are many elements to design that can be overlooked or not considered as important. Microinteractions are one of these elements.
They make a huge amount of difference to users interacting with the design, irrelevant of whether it’s on a social media platform, full website, microsite, interactive guide etc.
So, what are microinteractions?
Microinteractions are the fine details that keep a user interested and guide them through a design. These tiny interactions are so small, such as clicking on a button to take you to the next page, that sometimes you don’t really think about the effect they have on a user. However, they can be responsible for holding the whole user experience together.

It’s crucial as a designer that these microinteractions feel human and don’t require any explanation or guidance.

As the interactions are so tiny, the finer detail can easily be forgotten. This can be disastrous, as it’s these finer details that can make users love or hate a website/app.
Microinteractions are present in so many different formats. We’ve listed a few examples below of what a microinteraction might be:

  • Liking a Facebook post
  • Turning off the alarm on your mobile
  • A drop down menu on a site so the user can view more details of a product
  • Making a change to a setting on a site
  • Doing an online search

microinteractions
And why should I include microinteractions in my design?

  • They give control via instant feedback – e.g. the user will know immediately that their action was accepted, giving them more confidence to explore further into the site
  • They offer subtle guidance through a site
  • They make the user experience much more enjoyable and visually rewarding
  • They encourage sharing, commenting or liking of content

What considerations should I make when designing microinteractions?

  • Simplicity – simple type, colour and design. The design shouldn’t be any more complicated than the action
  • Think of the design as a human voice not a computer
  • Animations can make the actions smooth and let the user know that their action has been recognised – ensure the animations are elegant, and not too complicated
  • The microinteractions should be in-keeping with the design – use the same colour scheme, style and font

A well-designed microinteraction can be the difference between that eCommerce store you love and revisit regularly to the blog you tolerate to find information only when you need it. Microinteractions are all about taking what might be dull or confusing and turning it into something more enjoyable. So if you care about user experience, it’s worth making a note of how microinteractions can make a big difference.

Written by Hayley Sackett

Lead Digital Designer