loading gif

The design is in the details

“These small interactions are the things we take away and remember. They show us that the people designing the websites care, that they thought about the user. They provide little moments of delight.”

Ever sent an email on Gmail and forget to attach your document? Well guess what, Google saves your blushes by popping up the following message:

Google Attachment Pop up notification

This is the perfect example of a great micro interaction.

What is a micro interaction?

It's just what it sounds like - a small, sometimes tiny interaction that can be triggered by clicking a button or come as a pop-up gesture on your smartphone. Generally, micro interactions follow the same couple of 'rules', as laid out by design guru and UX expert Dan Saffer. Firstly, micro interactions have triggers that initiate them, there are rules that determine how they work and then they provide feedback. Saffer has written about this in great detail in his book Microinteractions (Check out the info graphic at the end of this article).

Why are micro interactions so important?

Well, architect and interior designer Charles Eames nailed it when he said "The details are not the details. They make the design."

These small interactions are the things we take away and remember. They show us that the people designing the websites care, that they thought about the user. They provide little moments of delight. Sometimes we can't even put our finger on it, but we keep going back. Micro interactions should never be in your face, and in fact, often they won't even get noticed - they simply add to the user experience.

Research tells us that sites that invest in their UX get a considerable return on this investment. According to recent industry surveys, every dollar invested in user experience returns between 2-100 dollars. It goes without saying that it's worth putting some thought into the details.

Some successful examples

Sometimes micro interactions are incredibly helpful to the user (and these are arguably the best ones). At Indietech we're using project management system Asana, and little features like the pop-up option to 'Undo' an action - unobtrusively in the bottom left hand corner of the screen - has been a lifesaver at times.

Another favourite is the feature that comes up when I'm reading a blog post on the online collaboration site InVision [invisionapp.com]. When I navigate to another tab the title tag temporarily changes in the browser to 'Don't forget to read this', like this:

UX inspiration: 'Dont Forget' tab in web browser

One really useful micro interaction is the credit card that flips around on certain e-commerce sites. As you enter your details, rather than just ask for you CVV (which some people might not know what it is) the virtual credit card flips around and highlights the three numbers on the back. Useful and playful, this ticks all the boxes.

How about those interactions that people typically don't like? Ever been asked to review an app in the app store? Usually you're midway through reading a news article when something pops into your way asking you to rate it. Do the designers really think an app will gain a 5 star rating this way? The guys at news site Circa News have found a way to gain both friends and high ratings by interacting their rating requests in a very clever way. Read and learn from this excellent article they wrote about the experience.

Sometimes micro interactions are just thoughtful and almost act as Easter eggs. For example, did you know that when Google Maps displays shadows they change depending on the time of day? Or that when you drag the Google Map pegman over Area 51 it turns into a UFO? This doesn't necessarily helps the user in any way, but it certainly gives you an idea of the level of thought designers and developers put into these websites.

But getting micro interactions wrong can cost. Luke Wroblewski, currently working with Google, has a fascinating example of this on his Twitter. It shows how when Polar Polls (subsequently bought by Google together with then employer Wroblewski) changed the way they displayed their filter, this had a massive impacted upon engagement. This is a great example of why we should be testing everything, micro interactions included, and make data driven decisions.

In short, micro interactions are just one tool we can use to help guide users through our websites. But just because of their 'size' their importance should not be underestimated. It is just these small parts that make up the whole design experience and make us love using certain websites. For some great examples of micro interactions take a look at Little Big Details, or why not submit your own?

Bonus: Download a PDF infographic on microinteractions from Saffer's book by following this link.

Indietech blog article author - Digital Marketing and Web Design insights
Noted by Vincent Feeney

Marketing & design inspiration
direct to your inbox