Web Design Trends Demystified: Microinteractions

At the end of 2016 we shared a list of some of the web design trends slated to make it big in 2017. Among them were trends like video marketing, bold typography and hand drawn graphics, which we’re all familiar with. However, some additions to the list aren’t quite so familiar: artificial intelligence, microinteractions and mobile first design, to name a few. Before you can incorporate certain trends into your work you need to understand their history, their rise to popularity and what value they can add to your designs. In a series of posts we’ll be sharing throughout 2017 we want to delve under the hood of some of this year’s biggest web design trends and get into the nitty gritty, arming you with all the information you need to include these trends in your designs in an effective way.

To kick things off we’re going to be looking at microinteractions, defined by Microinteractions.com as the following:

“Microinteractions are contained product moments that revolve around a single use case—they have one main task.”

The website goes on to explain that “Every time you change a setting, sync your data or devices, set an alarm, pick a password, log in, set a status message, or favourite or “like” something, you are engaging with a microinteraction”. Using this definition, it becomes apparent that we’ve actually been featuring microinteractions in web design for many years, we just weren’t necessarily aware of it.

The idea of creating a contained, single-use product moment isn’t a new one, so why are microinteractions suddenly being included on every ‘design trends of 2017’ list (including ours!)? While microinteractions aren’t a new thing, their design and inclusion in web design and physical products is becoming more and more elegant, resulting in modern, beautifully-designed moments that have been steadily gaining attention in recent months.

What are they used for?

So what are microinteractions used for? There are infinite uses for microinteractions but they usually fall into one or more of the following categories:

• Completing a singular task
• Interacting with a singular piece of data
• Switching a feature on or off
• Making an adjustment
• Sending or displaying a short piece of content

Next, let’s look at some real world examples of microinteractions you probably use in your own life as a consumer:

• Google’s ‘Translate this page’ option
• Switching the mute button on your iPhone or iPad on/off
• ‘…is typing’ notifications on Facebook Messenger or other private message services
• Google’s autofill service
• Refreshing your mobile Twitter or Facebook feed through the ‘pull-to-refresh’ functionality

And, possibly, the most famous microinteraction of all that’s taken the world by storm in the last couple of years:

• Tinder’s swipe left/right action

Should I be using them in my designs?

Microinteractions are there to enhance user experience so you should be including them in your designs, right? Well, as with all design elements, only if they serve a purpose and add value. It’s tempting to cram as many trendy elements into your work as possible but it’s always worth taking a moment to step back and analyse whether or not they really need to be there or if you just want to add them in because they look cool. Looking good is a big part of web design, of course it is, but functionality and performance should always come first. Would the inclusion of a couple of well-placed microinteractions delight your audience and make their experience on your website memorable and enjoyable? If the answer is yes, then go for it.

How do I use them?

Whether it’s your newsfeed refreshing with a quick drag of your thumb or a bathroom tap switching on when you wave your hands underneath, microinteractions are there to make life simpler and/or more enjoyable for consumers.

The main point to take away when adding microinteractions into your design is that they should always make life simpler, never more complicated. They should work seamlessly with your existing design and complete a single task for the consumer. It’s a smart idea to start with something small that users interact with on a regular basis but something that isn’t crucial to the core of your design – for example, a shortcut to switch a specific setting on or off is a good starting point.

The more you look out for microinteractions in your every day life, the more you’ll notice these little snippets are an extremely valuable part of the web design and development process. In today’s fast-paced world where everybody has a to-do list as long as their arm, anything that makes life simpler and makes us smile at the same time is a-okay in our book.

What are your favourite microinteractions? We’d love you to share some examples in the comments or let us know how you’re using microinteractions in your own work.