Okay, as everyone else’s, I assume, my vantage point is based on Dan Saffer’s exceptional work “Microinteractions”. As he puts it, microinteractions are functions that are able to do one thing but one thing well.
The details are mostly those elements that can make a difference in our work if used wisely. They are delighting, natural and still, and invisible. This is what microinteractions are good for, to focus on the details and through the tiny details, turn our work exceptional or just simply good.

I think, the best way to understand the importance of microinteractions in our work is to see examples and by this we are learning the importance of them even though they are almost invisible.
In this article we are going to look into some examples of these microinteractions. This time we will mostly look at user-triggered micro interactions, but in a later post we will look into the even more interesting system-triggered microinteractions.

As a start, I would mention the well-known NEST thermostat which is itself a microinteraction. Even though this is a bit of an exaggeration, it is kinda true. The nest thermostat does one thing, but that one thing amazingly well. Basically, you can set the temperature so simply that it is almost a sin against humanity. It’s one huge, beautiful control that you can use by twirling/rotating in order to set the desired temperature.

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 micro interactions well.

Nest thermostat

In the online magazine Medium, if you click on an in-text picture, the picture will expand and when 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. These kind of experiences are those that bring us some delight in our daily routine activities.

Expansion and collapse of in-text images

Another nice example of a micro interaction which is system generated is the loading visualisation in the Douban App.

Loading animation in Douban App

It is not slowing down the whole process, the movement feels natural and it brings a little joy for the user that is beyond necessary but a must for engagement.

In the well known password creation process there is a contradiction between security and user experience interest. From a UX perspective, the main goal is to make the process as straightforward as possible but from a security aspect the strength of the actual password is 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 above case we see such a solution. As you’re typing in your new password you’ll get instant feedback from 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

In the next example you can see my favourite microinteraction of all. In Macintosh computers, if you highlight a word and right click on it, you can choose the “define” command you’ll see the dictionary entry for that word which is super useful for someone who is not a native English speaker.

Macintosh built-in dictionary triggered by highlighting and right-clicking on a word

In Mac you can install applications by simply dragging them to the Applications folder.

Mac’s application installation made easy

In Google Maps, 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 can directly send these directions to your phone by simply clicking on the “Send directions to your phone” link which saves you some re-typings.

Sending directions to your phone quickly without re-typing the addresses all over again

On Dribbble, you are allowed to see not only the design but also part of the creator’s description about it. This makes easier for us to have an overview quickly, even without clicking on anything.

Dribble’s solution for showing the animation as well as the designer’s description about it

As we can see from the examples above, details are not just details but base on the foundation of these details the product can fail or succeed. In reality, these details can turn a UX into a good UX, since in these cases the designer really puts the thought behind the product, the thought that how they can make the process closer to the working of the human mind.

This, however, doesn’t mean that we should overfill our product without any well-grounded reason. The whole point of micro interactions is that they are only present when they really can make a difference in terms of turning the process simpler and add some delight to our everyday digital activities.




Ergomania Product Design (Gold partner of FinTech Belgium) specialises in FinTech, UX research, UX — UI design and Service design. https://ergomania.eu/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

5 of the Hottest Shoes Trends for S/S 20 That Will Sweep You Off Your Feet

What is a Market Research Brief? (+ Free Template)

5 Benefits Of Storyboards For Graphic Designers

Lucky Lincoln Gaming — Redesigning Loyalty Rewards Kiosks

Reflection Point: Patterns & Flows

How we’re building an accessibility culture

A series of brightly coloured posters on a wall each with advice written on to help teams understand their roles in improving the accessibility of digital products.

Spotify knows you too well…

Amazing House Shaped Like A Cowboy Boot

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ergomania UX

Ergomania UX

Ergomania Product Design (Gold partner of FinTech Belgium) specialises in FinTech, UX research, UX — UI design and Service design. https://ergomania.eu/

More from Medium

Editorial Project: The Economic Catalyst

2022 Web Design Trends

web design

9 Best Wireframing Tools for Designers in 2022 — Bring Concepts to Life

10 Trendiest Illustration Styles in Web Design in 2022