The Macro Impact of Microinteractions
04/05/2018
I’m a firm believer in what this quote means, and that often it’s the little things that can elevate our products from good to memorable. In a world where customisation, personalisation (and several other things that end in -isation) are just expected, it’s these little details that help form a point of difference or give your customers a positive experience.
When creating digital products these details can be in the form of Microinteractions. Microinteractions are the small and often-not-thought of interactions that occur when the user executes a single task. Imagine you've just filled out an online form and hit the submit button... nothing happened... has it submitted? should I do it again? If the submit button reacted in a similar way to the illustration below by Colin Garven it would remove this confusion by giving feedback to the users action.
At best microinteractions add to the experience, are intuitive and can give feedback to an action. Dan Saffer, author of the book Microinteractions, defines microinteractions as “contained product moments that revolve around a single use case—they have one main task. They are everywhere: in the devices we carry, the appliances in our house, the apps on our phones and desktops. Most appliances and some apps are built entirely around one microinteraction.”
An everyday example of this is when you slide the button across on your phone to turn it on to silent and it vibrates. That vibration is giving you feedback, assuring you that something has happened. These small details can remove a lot of frustration for users. We’ve all clicked a button on a webpage and if something hasn’t happened within a few seconds (or less!) logic tells us that maybe if I click it 15 more times really fast then it will definitely work… A microinteraction here such as a loading bar would save both frustration and a trip to your local tech store for a new mouse.
Another example of common microinteractions that you’re probably familiar with already are icons that you see on some of your favourite websites. Perhaps you’ve seen the “hamburger” button which is three horizontal lines that suggest you’re going back to a menu. Or the progress button when you’re making that exciting online purchase and have to fill in your details into yet another form. Knowing how far through you are gives you that extra resolve to keep going. Or maybe that’s just me.
When considering microinteractions they shouldn’t feel strange or take too much time to load. They serve a purpose and seamlessly integrate into the user journey. When done well, they add to a richer experience and can be the difference between a product your user likes to something they love!
In other words, microinteractions have the potential to magically bridge the gap between the user and technology through an emotional and human connection. They should feel natural so make sure they fit within your overall interface design. Don’t go overboard with the amount of interactions you have, one or two well executed interactions will leave a far better impression than several poorly executed.
Written by Kyle Turner