Microinteractions

Sst Sabrina Strebel

Microinteractions: Not a secret, not a trend

- But important for great designs

Microinteractions play a large role in designing great products even if users can’t notice or see them all the time.

The mostly inconspicuous animations serve as feedback and belong to the user experience of a product. As the UI elements of a user interface become more and more uniform, they only differ in terms of user interaction (click, hover, swipe etc.). What is the goal of creating microinteractions on a website or app? Exactly - It should offer users an added value, be helpful and fun to use or create a memorable experience. It also sets our product apart from the competition (I recommend the book: Hooked - How to build habit-forming products).

What are microinteractions?

Microinteractions are small animations or visual feedback users see when they perform certain actions and have immense psychological impact. For example:

Check ok

(Picture: Aaron Iker on dribbble.com)

When a user clicks on the download icon, he receives feedback indicating that the file is downloading and later that the download was successful..

Twitterlikebutton

Twitters like button

“Microinteractions are not a trend. People just started to realise how important they are.” - Sabrina Strebel, UI/UX Designer at Panter AG

We can break it down into 4 stages crucial for this kind of animations:

Triggers: This is the event that starts the microinteraction. Triggers can be divided into two groups: Manual triggers and system triggers. Manual triggers are when users are interacting with the product intentionally like “I want to hang up my call”, “I want to buy this top”. For a manual trigger we need to understand what a user wants and needs. System triggers on the other hand are automatic, which means they occur whenever certain conditions are met, such as the sound of your alarm clock on a set time or the notification when you get a message and so on.

“The trigger has to initiate the same action every time. This is so users can create an accurate mental model of how the microinteraction works.” (Source: Microinteractions by Dan Saffer, Chapter 2: Triggers)

Rules: Rules are what happens once a microinteraction is triggered. What happens when you lock your phone? What happens when you click on a like icon? For example, you want to save a file to a certain folder when you hit “save file” with right click and then choose the folder your file will be saved in the chosen folder.

Feedback: A feedback is a signal to the users and tells them what’s happening. Feedbacks are usually visual, auditory or haptic that means anything a user can see, hear or feel while a microinteraction is happening.

Loops and Modes: A loop determines the length of the microinteraction in a repetitive cycle. Loops are indicated by rules (directly or indirectly),e.g. a users sets his alarm clock to 7 a.m. for every day so his clock will ring every day at 7 a.m.

Instagram’s notification about incoming likes or comments is a good example of a (habit) loop: A Red badge and grey icon (visual cue) indicate there are new likes or comments, which makes the user click the icon (routine) to see who liked and commented, which may lead toan interaction with other users (reward). After a while, users automatically click on the icons when they see the red badge.

Modes change the typical way things function and operate. Examples of this are tooltips, changing a location in an app or setting your phone to ‘silence mode’, hidden navigations and so on. Most microinteractions should be mode-free, but sometimes they are necessary.

“Microinteractions are the secret ingredient when it comes to creating an addictive app.” - Nick Babich

Notifactioninstagram

Notifications on instagram.com are a loop

Switchtogglesininstagram

Instagram’s switch menus are a mode

Why are microinteractions important?

Microinteractions are not just great looking animations they contribute heavily to the user experience if used correctly (less is more). Microinteractions are also designed to provide the right feedback to users so they can understand the results of their actions (clicking on a button).

“The greatest joy of using computers comes through user empowerment and engagement. It’s very enjoyable to visit a website that works, where everything just clicks for you.” - Nielsen Norman Group

Those small animations are a great way to communicate with your users and to improve a product’s user experience by:

  • Encouraging engagement
  • Displaying system status
  • Providing error prevention
  • Creating a habit-forming product (users are keen to use a product over and over again ‘cause they love it)

It also means that your product will be joyous to use and be engaging. Why do we prefer certain apps over others? The reason is pretty simple: good apps are fun, easy to use and generate added value. All in all, a great holistic experience.

“Microinteractions are a great communication tool to let your users interact with your product and enjoy it.” - Sabrina Strebel, UI/UX Designer at Panter AG

Conclusion

Keep the KISS principle in mind while designing. Less is more and it is easier for a user to use the product. What matters in user experience (that means in your product) is how users feel, what they need and how they use it: Find your users, talk to them, understand them. If you can create a great experience for your users, they will love your product. Good examples are social media apps, shopping apps, fitness apps etc. You can also use some humor to create a personal touch (Mail Chimp did a great job).

Mailchimp

MailChimp’s confirmation view

Sources: O’Reilly Series, Microinteractions from Dan Saffer Hooked - How to build habit-forming products from Nir Eyal Nielsen Norman Group - Microinteractions in User Experience Nielsen Norman Group - 10 Usability Heuristics Nielsen Norman Group - User Empowerment and the Fun Factor

« Zurück zur Übersicht