Microinteractions

Microinteractions

Microinteractions take animation one step further in terms of user engagement. These are animations that respond to what the user does on the page. If you notice a website changing when you mouse over a particular spot, or an animation that’s triggered by scrolling down – those are microinteractions.

These create a positive user experience because they hand visitors power over what they see as they interact with the site. Knowing your actions shape the design in front of you is a good feeling, even if it’s only in minor ways.

Microinteractions are becoming more common around the web, making them a good web design trend to have on your radar in 2018.

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.

This animation is a good example of micro-interaction, because it fulfills three important functions:

  • Communicating status and providing feedback
  • Enhancing the sense of direct manipulation
  • Helping people to see the results of their actions

Micro interactions have four parts:

  • Triggers initiate a microinteraction. Triggers can be user-initiated or system initiated.
  • In a user-initiated trigger, the user has to initiate an action.
  • In a system-initiated trigger, software detects certain qualifications are being met and initiates an action.

Why the Micro Interaction is used?

  • They improve a website navigation
  • They make it easier for users to interact with your website
  • They provide instant and relevant feedback about a completed action to a user
  • They give tips to your users
  • They communicate information about certain elements, like whether or not it’s interactive
  • They make the user experience much more rewarding
  • They encourage sharing, liking, and commenting on your content
  • They direct users’ attention
  • And, finally, they just make your site more emotional

Well-designed microinteractions are a clear sign of a care of a user. That’s why they value so much. A user gets what to do and whether or not their action was correct and approved by the system — an app or website provide an immediate visual feedback and teach a user to work with the system.

When microinteractions are done right, they can give positive feelings about your brand and influence users’ actions, often without people even realizing why. If you like or dislike one aspect of a product, you have a positive or negative predisposition toward the product in general. This so-called Hallo Effect can play both for and against you. In wise hands, this knowledge can help to improve a user’s feedback from your website — by paying proper attention to details, it is possible to leave your users satisfied.

When to use them ?

Few examples

In the UX/UI world, although tiny, microinteractions are touted as the powerhouse when it comes with communicating with the user. Below are top seven microinteractions and their impact on user experience:

Swipe The Swipe action eliminates tapping and is much more interactive and smooth. It helps the user quickly switch between the tabs and acquire more information about the product. 

How to design micro-interactions?

  • Making micro-interactions is exciting for designers, because it is possible to experiment new design solutions and look for new ways to surprise the users. But for doing it you must keep in mind a few things :
  • Put yourself in the users shoes and use all that you have to figure out how they use your app.
  • Create functional animations. Animations which have not only an aesthetic but which are able to enhance the user experience.
  • Have fun and entertain your users. What the user feels when he uses the app is the reason behind the fact that he keeps using it. If the user enjoys the experience and finds it pleasant, he returns.
  • Do not be annoying. Too many animations have the opposite effect on users. Annoying users make them stay away from your app.
  • Use a human language and non-technical. A funny and ironic copy can make you forget for a moment how frustrating it might be a blank page within the app.

Tools to design Micro Interactions

So, what kinds of prototyping tools should designers familiarize themselves with? There are many tools out there but not everyone knows what works best for specific micro-interaction tasks. Here are my recommendations based on my personal experience designing these elements.

  • Mobile: Xcode, Android studio
  • Mobile or Web: Framer
  • Web: CSS animation