The best examples how to use microinteractions to enhance your ux design

The best examples how to use microinteractions to enhance your ux design

Anna Regeni • Aug 1, 2018

Microinteractions are functions thatare able to do one thing but one thing well. Microinteractions feel natural and thus remain uncovered; they’re making people feel delighted without making them realize how much thought went into one single step. Microinteractions are focusing on one task and try to make that specific task as natural as it can get. To understand the importance of microinteractions in our designs the best way is to see examples and learn their importance.This time, we will mostly look atuser-triggered microinteractions.As a start, I would mention the well-knownNEST thermostatwhich isa microinteraction itself. Even though this might be an exaggeration, there is truth in this statement. Although it is a bit of an outlier in my pool of examples since it is a real-world physical product, it shows the essence of microinteractions well.You can set the temperature so simply that it is almost a sin against humanity. It’s one big, round control that you can use by rotating until the desired temperature is reached. Nest alsotakes into account the distance between you and the thermostat and adjust the display accordingly.Moreover, you don’t need to pre-program it,it learns by itself and sets itself.When nobody is at home, it automatically turns itself off. If you are saving energy, Nest is displaying you a leaf which you can also collect and see how your energy saving abilities has improved over time.
Nest thermostat
In the online magazine Medium,if you click on an in-text picture, the picturewill expandandwhen you make a scrolling movement, it will collapse into its original size. In this way, you don’t have to find the close button to return to the article you’re engaging with.
https://youtu.be/SNW9OIM05QMMedium - Expanding and collapsing imagesA much appreciated feature of the Apple Watch is the Find My iPhone feature.If your phone is nearby, you can make it ping. The sound your Apple Watch inducing your phone to produce is quite loud, so you’ll definitely hear it.
You can find your iPhone by playing a sound on it with your Apple Watch
Another nice example of a micro interaction which is system generated is the loadingvisualisation in the Douban App.
https://youtu.be/r7XROr8M7ykDouban App - loading animationIn the process of password creation there is acontradiction between security and user experience interest.From a UX perspective, the main goal is tomake the process as straightforward as possiblebut from asecurity aspectthestrength of the actual passwordis the most important thing.If we take a closer look, these two are not really against one another, you just have to find a way to align the two. In the the picture below we see such a solution.As you’re typingin your new passwordyou’ll get instant feedback about the strength of your passwordand what kind of character still needs to be added.  This instant feedback, saves you from experiencing rage when even after the third time you’re typing a new extra-difficult password, it’s still insufficient for the site’s requirements.
Instant feedback on password strength.
My favourite microinteraction of all is the dictionary feature in Macintosh computers;if you highlight a word and right click on it, you can choose the “define” command andyou’ll see the dictionary entry for that word.
Macintosh built-in dictionary triggered by highlighting and right-clicking on a word.
On Mac you can install applications by simply dragging them to the Applications folder.
Mac’s application installation made easy.
In Google Maps web version, you can simply change the direction to the opposite by clicking on the arrows. This is quite common now, but it wasn’t always like this.
Google Maps - changing directions made easy
Moreover, you candirectly send these directions to your phone by simply clicking on the “Send directions to your phone” linkwhich saves you some re-typings.
Sending directions to your phone quickly without re-typing the addresses all over again
In iOS, there is a built-in feature which helps you positioning the cursor by only tapping on the space button, holding it and moving your finger on the screen. The previous solution used a magnifier you could activate by keeping your finger on the text.The newer version lets you move your cursor more freelyand actuallysee what you are doing.
https://youtu.be/DYqI0nJ39EwiPhone - cursor relocationOnDribbble, in the default mode, you’ll be presented with the visual design and by hovering over the picture, you’ll see the short description of that particular design. This makes easier for us to have an overview quickly, even without clicking on anything.Main aspects of a good microinteraction
  1. Single task completion -It focuses on a single task and designed to complete only that
  2. Make it functional -Microinteractions should be invisible which means they must not be kitschy but purely functional. Not more and not less that is necessary
  3. Think ahead- They should expect the mistakes people may make and act to either prevent them or make them reversible. Make your design forgiving
  4. Use it wisely -Don’t overpopulate your product with microinteractions, only use them if they can really make a difference
As we can see from the examples above, details are not just nuances butthey are the foundation of a good product. They, in essence, can decide about the fall or success of a service. In reality, these details can turn UX into a good UX, since in these cases the designer really puts the thought behind the product. The designer really has to think how topresent a processon the surface in a way it istaking into account the operation of the human mindinstead of mirroring the operations happening in the background.This, however, doesn’t mean that we should overfill our product with microinteractions without a well-grounded reason.The whole point of microinteractions isthat they are only present when they really can make a difference in terms ofturning the process simpler and add delight to our everyday digital activities.

About the authors

Anna Regeni thumbnail
Anna Regeni
Junior UX researcher

undefined

Related posts

Top 3 UX-UI challenges in the process of buying a motorway vignette in a mobile banking application
Jul 26, 2022

Top 3 UX-UI challenges in the process of buying a motorway vignette in a mobile banking application

Users are increasingly conducting their digital transactions via mobile applications. The number of users who also perform their financial or banking transactions on banks' own mobile applications (mo...

Spanish Fintech - A bridge to bigger goals
Dec 9, 2021

Spanish Fintech - A bridge to bigger goals

Look, I know it’s not a good thing to resort to easy stereotypes when speaking of different nationalities. Generally I would steer very well clear of, ‘All Swedes are…’ or, ‘Greeks are usually disting...

Hungarian Fintech - Going the extra distance
Nov 9, 2021

Hungarian Fintech - Going the extra distance

“We always say that we were a Fintech company since before the term was invented, because we've always been a technology provider for financial services.” Head of Marketing at Dorsum, Greg Csorba, mak...

Related case studies