Microinteractions: Sometimes it's the little things
WRITTEN BY
ROD BLAXELL POSTED ON 6 Nov 2018
CATEGORIES

Microinteractions: Sometimes it's the little things

Microinteractions occur in apps and websites all the time. From Facebook likes to the vibration that occurs when you put your iPhone on silent.

Microinteractions are an essential part of the user experience. The successful ones can enhance the user experience greatly without the user even thinking about them. Badly executed ones can greatly damage the experience.

What are microinteractions?

Dan Saffer, author of the book Microinteractions: Designing with Details, defines microinteractions as “contained product moments that revolve around a single use case.”

In layman’s terms, they are interactive elements within an interface that improve the user experience. Some examples of how they make the experience better are:
  • Providing useful feedback
  • Communicating status
  • Improving the usability of interactive elements
  • Making tasks easier
  • Making interactions engaging and memorable
  • Providing recommendations
  • Enhancing navigation

Let’s take a look at a real-life example of microinteractions.

 

User Experience Microinteractions - Like Button

The Facebook Messenger app’s “Like Button” is a well-known example of a microinteraction that encompasses many of these attributes. By selecting the Like Button (or any of the emoticons that can replace this button) you are indicating that you agree with a comment in a single click. By holding the Like Button longer, an animated version of the emoticon will grow and shake until you let it go, which then adds it to the conversation. Holding it down too long will make it disappear with a pop, which adds a little gamification to the task.

Alternate emoticons like the heart and the red balloon provides animations of little hearts or balloons floating up the screen. This is an example of surprise and delight through the use of a simple, but well thought out microinteraction.

Elements of Microinteractions

In his book Microinteractions: Designing with Details, Dan Saffer identified four distinct parts of a microinteraction: Triggers, rules, feedback and loops & modes. Following is an explanation of each of these parts.

 

Elements of microinteractions

1. Triggers

The trigger is what initiates a microinteraction. It may be a manual trigger such as the user clicking a button. Or it may be a system trigger where the software determines that a particular condition has been met, such as the user being notified that one of their Facebook friends is using the same app as them.

2. Rules

 

User Experience Microinteractions - Rules

Once a microinteraction has been triggered, the rules define what happens next. Following on from our app example above, as Facebook friends have been found using the same app as you, a rule may be in place to alert the user of this.

3. Feedback

Feedback is the way in which the system shows to the user that something has happened. Feedback comes in the following forms:
  • Visual Feedback: This is what the system will display to the user once a microinteraction has been triggered. Using our app analogy, a list of Facebook friends using the same app as you will be displayed. This is the primary feedback method, as people tend to look at what they are doing when interacting with an app or a website.

  • Audio feedback: This is where the system provides an audio cue to indicate that a specific thing has occurred. An example may be where an app sends a notification that is accompanied by a sound such as a bell.

  • Haptic Feedback: This is where the system will provide feedback via the sense of touch. On an app for example, a notification may appear that is accompanied by the device vibrating.

4. Loops and Modes

 

User Experience microinteractions - Loops and Modes

Loops control how long a microinteraction will go for and whether it will change over time. For example, if you were using an app to fly a drone a microinteraction may occur to alert the user that the drone is low on batteries. If the user didn’t react to this information and kept flying the drone, the alert may occur again however may become more urgent as the battery is now more drained.

A mode controls actions that are not as common to the typical functions of a website or app. An example of this may be when the user of an app blocks or unfollows another user of that app. Another example may be where the user can mute the volume of a music app.

Applying Microinteractions in UX

To be successful with microinteractions though, there should be thought put into how they will improve the user experience. Through user research you can better understand your users – their needs, emotions and pain points. You can then use this information when designing microinteractions. This will enable you to make the experience less machine like and more human.

Let’s take a look at some examples:
  • Animation: Animation can be used in a variety of ways to enhance the user experience. Using animated transitions between pages or sections of a page, the user can see that a change from one state to another has occurred. Animation can draw your attention or indicate that something has been selected.

  • Notifications: With well thought out notifications, the user is able to clearly see, hear and feel that there is a notification that needs attention. As notifications can be disruptive, it is important to design them so they are contextual, unobtrusive and warrant attention.

  • Call-to-actions: Well-crafted microinteractions encourage users to interact with a call to action or once they select a call to action they are rewarded with a more engaging experience.

  • Swipe: A familiar microinteraction is swiping on a mobile device to view different content. This allows the user to access content quickly and if designed well can be experienced as a seamless stream of content. The swipe gesture is both easy for a user to perform and doesn’t require a lot of cognitive effort.

 

User Experience Microinteractions - Wireframes

Microinteractions done well enhance the user experience and provide memorable moments that are then associated with your brand. People enjoy the little details that make using a system easy and engaging. By making something easier, faster, more efficient or just more fun, you are improving someone’s experience for the better. Microinteractions can also be the difference between two similar websites or apps, which in an aggressive market can prove to be a competitive edge.

So, sometimes it really is the little things.

Need help optimising the User Experience of your website or mobile app? Book an appointment with one of our Speedwell UX experts.

Rod Blaxell - Speedwell UX Lead Rod Blaxell, UX Lead, Speedwell

CATEGORIES
UX

Ready to advance your digital capabilities?

CONTACT US

X

By continuing to use our site, you indicate your acceptance
of our Privacy Policy and Website Access Rules.

Confirm