Pump life into your website with microinteractions

Lew Slade
By Lew SladeDesigner
6 minutes to read

There’s a ‘little’ feature in web design that you see on a daily basis while using various digital devices that you might not notice.

I emphasise the word ‘little’ because they are small. So small, in fact, they’re nearly invisible to you and yet they have such a big impact on how users interact with your product. What is this miniature magic I hear you cry?

This ‘little’ feature is known as a microinteraction.

What is a microinteraction?

Every time you perform a task on a device, such as double tapping a picture on Instagram to like it, you are performing a microinteraction.

Microinteractions provide visual feedback to users when they interact with your site or app. They can help convey a system’s status, highlight changes made by the user and visualise calls to action.

It’s an element of web design that serves to enrich the user’s experience by making your site or app feel like it’s a living, breathing thing. Microinteractions take real world interactions and convert them into the digital space so they feel very familiar to us.

Take the humble toggle button, this feels very much like the familiarity of turning on a light switch. It’s instantly recognisable and doesn’t need explaining, which is the mark of a great interaction. The user also sees the result of their manipulation of the toggle.

 

Through mirroring real world actions, the very best microinteractions have become second nature to us so we’ve developed a blindness to them.

Best described by Dan Saffer in his book ‘Microinteractions’, each microinteraction should have three parts: Trigger, Rule and Feedback.

Quote - “A Trigger initiates a microinteraction. The Rules determine what happens, while Feedback lets people know what’s happening.”

He does mention a fourth part known as ‘Loops and Modes’. Loops determine if a microinteraction should repeat itself in a loop cycle and for how long if so. Modes are when an action will do something different due to a change in the state of that page. For example, when toggling the edit button in an app, selecting an item could now delete it.

Examples of microinteractions

Now of course you’ll experience microinteractions across the web but you’ll notice them most in apps. Below are some examples of microinteractions that we have implemented into some of the work we have done at Enjoy.

Peter Bull's hover reveals

When hovering over the image based links towards the bottom of the homepage the width of the image increases and reveals text and button providing focus on that particular object. 

Peter Bull - http://ownership.peterbullresorts.co.uk/

Costcutter's custom loading wheel

The store locator on the Costcutter site shows a loading animation made up of the CC mark in their logo while the site brings in the search results. This provides the user with an acknowledgement that something is happening in response to their submitted search.

Costcutter – http://www.costcutter.co.uk/location-finder/

Hudson Contract's Health Checker Progress

The progress bar gradually increases equal to the users progress through the questions in a smooth transition. This is giving the user feedback as to where they are in the process of the health checker and how many questions they have left to complete.

Hudson Contract - http://www.hudsoncontract.co.uk/our-tools/health-check/

Give a little, gain a lot.

Despite their size, microinteractions can jeopardize your project if poorly executed. You should only implement a microinteraction into your design if it enhances the user experience. Here are a few tips for creating effective microinteractions:

Use animated feedback

CSS and JavaScript are both brilliant tools to add subtle animated feedback to attract attention and breathe life into the user interface. This leads us on to the next point…

Make it fun

Humour can go a long way when used correctly and appropriately. It helps to keep users entertained while executing dull tasks and adds to your brand’s character.

Manage your user’s expectations

Keep an air of predictability about the interactions you are including. As we touched on before, you want them feel familiar in a sense that the user will have an expectation about what’s going to happen next.

Play it smooth

Ensure that the interaction you’ve designed runs smoothly. Microinteractions will smooth out clunky functionality and make for a more seamless experience. Get the balance right though; too fast and users will miss it but too slow and it will look like your site is struggling.

Keep it simple

Simplicity is key. Poorly designed microinteractions will push users to stop using your product. Any over complication to what should be a simple process creates an air of dislike around performing that action.

Think about your favourite apps on your phone. Besides the content they provide, what is it about each that you enjoy? What makes that app so convenient for you? It’s probably down to how streamlined, simple and fun it is, which will boil down to the microinteractions.

A small but mighty tool

At the heart of it, microinteractions changed the way websites and apps work and we’re getting better and better at them as time goes on. Through giving a little extra bit of time and care towards these small details we can create better overall picture for the users experience while using your product. All the while keeping it fun and fresh.

comments powered by Disqus

Articles by Lew Slade

Hey! I'm Lew a Creative Digital Designer at Enjoy Digital with a dedicated attitude to creative mastery in all fields of design.