Design series: Why we care about Micro interactions
“When I woke up this morning, the first thing I did was grabbing my iPhone to open my Coffee app. I pressed the button ‘make coffee’ and kept snoozing a little longer. A few minutes later I got notified with the joyful message: ‘coffee is ready’. My day had begun great! On my way to work, I opened the Strava app on my Apple Watch and tapped the ‘Start Tracking’ button to track my kilometers. Later on, I realized that I had forgotten to switch off the lights at home… So I said: “Hey Siri, turn off my lights.” At lunch time, I received a push notification from my robot vacuum cleaner with the question: ‘I see that you are not at home. Start vacuuming?’. I pressed ‘Yes’ (please!). With one tap I instructed the device to stop vacuuming by the time I’m close to home.”
Obviously, this is a dream scenario full of ‘dream machines’, a perfect world of Internet of Things, which we’d like to see ourselves interacting with. Often smaal acts or things that we might already do automatically. In this episode of the design series it’s our interaction designer Hugo who will share his experience with micro interactions that are taking place all around us. Whether you’re turning off the sound of your phone or pressing the play button of your TV.
Moments of interaction
Micro interactions are moments of interaction between you — as a user — and a small task-oriented component. A micro interaction has one main task. You find micro interactions in user-friendly apps and websites. One of the best known micro interactions is the Facebook ‘like’ button. Through a simple click the user can indicate whether he or she likes a status.
Nowadays you more and more see the use of micro interactions outside an app environment, such as on the notification screen of your smartphone. For example, by carrying out a simple tap you can easily check-in to the Swarm app when receiving a notification on your home screen. The smart thing here is that the user does not have to unlock his smartphone and open the app, but directly from the notification screen.
Also on smaller screens micro interactions do get more important. The Apple Watch is a great example of the smart use of interactions on screen with limited space. An enhanced experience is given to the user by adding 3D touch. By pressing harder on your screen, you get to choose from other interactions than when you press gently or tab. Subtle actions and movements with your device can thus provide different micro interactions.
User and device
Micro interactions are everywhere: in the devices we carry, the appliances in our house, the apps on our phones and desktops, even embedded in the environments we live and work in. Most appliances and some apps are built entirely around one micro interaction. Before you use micro interactions, you have to understand how the user walks through a process. In the following acts we see how we engage with micro interactions:
- Accomplishing a single task;
- Connecting devices together;
- Interacting with a single piece of data such as the temperature;
- Controlling an ongoing process such as music volume;
- Adjusting a setting;
- Viewing or creating a small piece of content like a status message;
- Turning a feature or function on or off.
How to use micro interactions
Dan Saffer, author of the book Micro Interactions, has developed a model that consists of four parts that are important in designing micro interactions: the Trigger, the Rules, the Feedback and the Loops and Modes. Let us now walk you through each one of these parts that will give a comprehensive image of how we can use micro interactions.
The trigger is what starts the micro interaction. This can be initiated by a person or system. For example, a person can put his phone on mute, and a system can activate a trigger when a certain value is achieved. These systems are becoming smarter. Think about the fan of your Macbook that slows down to reduce the noise when you are going to make a call.
The rules define what can and can not happen in the micro interaction.
The rules also determine in what order they occur, for example when a user presses a button, what happens next?
From the feedback we get all kinds of metaphors to understand the micro-interaction. For example, an hourglass when something is loading, the ‘whoosh’ sound when an email is sent or your phone that vibrates when you turn it on mute. Feedback forms may include visualization, sound, vibration, animations and transition effects. Overall, feedback lets the user know what is happening.
In loops and modes we take a look at what happens when a micro interaction is interrupted or what happens after a certain time. Do they remain active interactions or will they expire after a while?
“If you care about user experience, you care about micro interactions” (Dan Saffer, Micro Interactions, 2013).
In short; micro interactions simplify user tasks by smart triggers and enhance the user experience. Although micro interactions are everywhere around us and, despite their small size, we don’t always notice them, they are incredibly important. They can make our lives easier, more fun, and just more interesting if micro interactions are designed well. Then they are signature moments for your brand that increase adoption and customer loyalty.
In our design series we hope to address all aspects of the design process. From strategy to concept, to the creation of a user centered design. Where we first set the strategy of defining personas, mapping the clients’ customer journey, and using all kinds of tools and knowledge in order to apply the service design, we now will dive deeper into the process, appealing and meaningful designs. Our visual and interaction designers would love to tell more about their daily work. In our next blogs we’ll discuss ‘the top 5 meaningful animations in mobile’ and ‘how icons can make a difference’.
Originally published at afrogleap.com on May 19, 2016.