Bring delight to your products with microinteractions
Some of the best products do 2 things well:
1. Features:
- Features are what drive customers to your product
2. Details:
- Details are what keep your customers engaged
- They make your products stand out amongst competitors
Your products can have amazing features, but if your customers don’t know how to use them, they will become frustrated and switch to another product they can use.
Focusing on details will keep your customers happy and engaged with your products. And a good way to design with details is with the use of microinteractions.
What are microinteractions?
Microinteractions are structured product moments that do one small task, and they usually serve the following functions:
Provide feedback
- Communicate feedback or the result of an action
Complete a task
- Accomplish an individual task
Enhance direction
- Lets users know where they are going to and from with direction manipulation
Visual results
- Helps users visualize the results of their actions and prevents errors
We use them every day
We’re surrounded by microinteractions everywhere, but we don’t usually notice them until something goes wrong. There’s a microinteraction when you put your phone on silent — it vibrates to let you know your action was done. It happens when you turn on/off a faucet. And it happens when you adjust the volume of your stereo. Whenever you interact with something, you expect some sort of feedback that what you have triggered has started and has been completed.
2 Types of microinteractions
1. Functional:
- Helps the user better understand how to use the product effectively by
- Building meaningful transitions
- Providing visual feedback
- Showing system status
- Helping users get started
2. Delightful:
- Focuses on user’s emotions by
- Demonstrating polish
- Rewarding the user
- Bringing personality and humanity
- Entertaining users
Why microinteractions work
Acknowledgement
- The user instantly knows their action was accepted and wants to be delighted by visual rewards
Guidance
- They help users better understand how to use the product effectively
Structure of microinteractions
- Triggers initiate a microinteraction
- Rules determine what happens
- Feedback lets user know what’s happening
- Loops and modes determine how long they last
Triggers
The trigger is that moment when the microinteraction begins
Manual
- It may be triggered by users, when a user clicks a button or icon, swipes, or fills out a form
System
- System triggers happen automatically and occur once certain conditions are met
- The most effective system triggers predict what the user wants, based on the user’s activity data
Rules
Rules determine which actions happen, and in which order
Invisible and natural
- They are invisible and guide the users through the interaction
- Users want a feeling of natural flow that takes them from the Trigger to Rules to Feedback
Feedback
Feedback is knowing how to understand the rules
Visual
- Usually the most dominate because it is what the user is focusing on
Audio
- Certain actions may have a sound associated with it when the action is initiated
Haptic
- A phone usually vibrates at the start of an action or after the task is completed
Loops and modes
Loops and modes determine how long the microinteraction lasts
Loops
- Cycles for a set direction
Modes
- An interaction that involves infrequent changes
- Usually a one-time task
When to use them
Show system status
- Keep users informed
- Users expect to get responses immediately, but there are situations when an app needs some time before an action is completed
Highlight changes
- Attract attention
- Sometimes we have to show notifications to make sure the user sees it
- Animation can help, it will attract a users’ attention and not let them overlook what you think is important
Keep context
- Transitions
- Use motion to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen
Visualize input
- Data input is one of the most important elements of any application and microinteractions turn this process into something special
Things to think about
Details matter
- Paying attention to details makes all the difference between a product we love and a product we tolerate or pass-up
Customer loyalty and brand
- A well designed microinteraction not only increases adoption and customer loyalty but elevates a brand’s identity.
