UX is essential to how users interact with and perceive our brands. The more we understand about our users, the more it allows us to give them what they need in the ways they want and expect them to happen. As technology progresses, providers are expected to make the customer journey simpler and more enjoyable at every stage, and often without knowing it, for the user, these smaller interaction design details make the difference between an acceptable or functional product and a great one.
What are Microinteractions?
According to the Nielsen Norman Group,
Microinteractions are trigger-feedback pairs in which (1) the trigger can be a user action or an alteration in the system’s state; (2) the feedback is a narrowly targeted response to the trigger and is communicated through small, highly contextual (usually visual) changes in the user interface.
Microinteractions are (generally) small, subtle animations that make digital applications more interesting, intuitive, engaging, and efficient. They raise the quality of the user experience, adding validation to actions and often with entertainment that enhances brand strength.
They aren’t always visual animations; they can be haptic or audio-driven. Your sports watch might buzz when you’re approaching a turn or entering a different heart rate zone, or your notifications play recognisable sounds you associate with particular messaging apps, email accounts, or accomplishments.
Benefits of Microinteractions
Despite looking like tiny touches that enable the creator to ‘show off’ a little, the benefits are many and of real value. We experience hundreds of these neat little touches throughout our everyday lives, most of the time without noticing them.
- Encourage engagement
- Increase user satisfaction
- Reduce frustration
- Provide system feedback
- Keep users informed in real time
- Display system or process status
- Enhance usability
- Make products more intuitive and interactive
- Reduce usability flaws
- Introduce smoother UI interactions
- Speed up the customer journey
- Prevent user errors
- Simplify complex tasks
- Gamify processes, making them more fun, sticky, and interesting, boosting retention
- Enforces the brand theme, voice, and tone
Microinteraction Design Best Practices
Identify and Understand the User’s Problem
Every good product, experience, or service is designed to solve a problem. While designing microinteractions, defining those problems and addressing how to solve them may be obvious, yet they’re more likely revealed during user research.
Keep Microinteractions Natural
Designers should avoid strange animations that complicate or confuse the process. Microinteractions are natural and fluid, providing simple visual feedback and adding value to the process. They should never be overly complicated, detract from the true focus, or feature unnecessary details. Most importantly, they should focus on a single task.
Test and Iterate Findings from User Research
The user research phase creates an ideal opportunity to locate issues and opportunities and to ensure the best results. As UX research specialists, we can’t stress how important this part of the UX process is.
Deconstructing Microinteraction Design
Microinteraction Structure
Despite our earlier Nielsen Norman Group definition suggesting microinteractions are a two-stage system, each interaction has four crucial parts.
- Triggers – Whether user- or system-triggered, it’s the first part of the process, alerting the user to an important tool, action, or information. A user-initiated trigger is set off by, as implied, a user request by clicking, swiping, or other. A system-initiated trigger is set off when the software detects certain qualifications being met.
- Rules – The rule determines what happens after the initial trigger. If the user clicks, swipes, taps, or speaks, will an animation play, a helpful process launch, a reminder be set, or an item added to a basket?
- Feedback – Keeping users informed ensures they feel safe and their request is being processed. Validation and security are big psychological players in user experience, so keeping everyone informed at every stage provides an update on the system status and the tiny dopamine hit that keeps users happy.
- Loops and Modes – The final stage determines whether the act is repeatable or a one-off transaction. Loops and modes determine the meta-rules of each mircrointeraction: a swipe to reload a page or asking Siri to answer your questions can be actioned as many times as necessary (loops), whereas adding an item to a basket only happens once (unless, of course, you add an option to ‘buy another’ or ‘edit purchase details’).
Examples of Microinteractions
Our selection of examples is by no means exhaustive; it’s merely a range of common uses. They’re simply some of the digital elements you’re likely to experience each day that add value to your online experience yet, more often than not, get taken for granted.
Scrollbar
In the early Internet years, a scrollbar had a physical function: to be grabbed and moved to navigate through the page. Now, they’re an animated feature that shows us where on the page we are and how much more content the page contains.
Pull to Refresh Animation
A common feature on smartphones, the pull-to-refresh microinteraction can reload a page, pull in new emails, update weather forecasts, and more. A spinning wheel, branded gif, or progress bar lets us know it’s recognised our request and is processing it.
Swipe Animation
Where would the dating apps be without their infamous swipe? Animating a cross, a tick, or a flutter of hearts provides real-time feedback on our decisions.
Digital Alarm
An example of an auditory response to a system-initiated trigger: at a specific time, your alarm will sound. However, on your smartphone, tablet, or computer, it’s backed by visual feedback demanding a response to its task completion.
Notification
The same goes for notifications. Audio and visual feedback deliver updates and alerts regarding requested events, options, or promotions (and often, for those you didn’t think you’d signed up for!), designed to draw back a disengaged user.
Password error
Instead of jumping to a new error page requiring you to complete input fields repeatedly, inline validation saves time and frustration. Also, setting up new accounts can be streamlined with inline password error feedback, such as ensuring the correct number of letters, digits, and special characters.
Onboarding hotspots
There’s plenty to learn as you explore a new software or platform. Whether a tiny pulsing dot or a well-placed speech bubble, the user instantly knows how to follow this system-initiated tutorial. Too many animations on the page at once would be overwhelming and clumsy, so following a set path, new users learn how to navigate features and digest them in the easiest way possible, one at a time.
Online chat and messaging status
Giving visual feedback to messaging app users is a great example of how to make an app sticky. With three bouncing dots, we immediately recognise that the recipient has read our message and is responding. Alternatively, in WhatsApp, for example, the visual feedback is at the top of the page, telling when the recipient is online, away, or typing. Love or loathe them, those double-blue ticks provide immediate information about your message.
Many websites have vast amounts of information to share, requiring a well-structured information architecture that’s easy to navigate. With so much information and only one, often tiny, screen available, tucking it all neatly behind a recognisable icon (the three horizontal lines known as the hamburger), they can be animated to slide into view as the user clicks on each category, to make finding what we want simple and straightforward.
Making form-filling and checkout processes more efficient
Getting an unexpected error message can be incredibly frustrating, so plenty of forms and online checkouts have user-triggered microinteractions to add error prevention, simplifying their processes. Whether it’s inline validation for email formats, required field suggestions, or introducing calendar boxes to specify precise dates—they’re each designed to get us to the finish line without returning to rectify errors we might have overlooked. This technique also streamlines the account creation process, making signups easier and user abandonment less likely.
Mouseover effects and cursor changes
We’re used to rolling over images, information boxes, and slides to test whether they’re clickable, but having an instruction animated into it—’click to visit our contact page’ or ‘hold and move to reorder your choices’—gives the engaged user the exact type of feedback they’re looking for.
Seach box expansion
An expanding search box with pre-defined options or automatically presenting suggestions as you type is another great example of adding function and value to the UX of your products and your users.
Chatbox humanisation
To create a more emotional chatbox experience, the animation of its response is timed to be efficient but also to represent human behaviour. After a user sends a question or request, they’ll see the three bouncing dots suggesting someone is typing despite it being an AI response. Giving your chatbox a human avatar delivers the same emotional connection as you’d feel for a person.
Clever Ways to Use Animation
Adding information, promotions, or information to waiting screens as your progress bars expand, spin, or bounce across the screen adds value for your users. It’s a great opportunity to upsell or educate shoppers, users, or members about products they might not have explored.
If it fits your brand, adding whimsy or a joke (we’ve all seen a tastefully fun 404 page that made us smile) might not add anything immediate to your user’s visit but will strengthen your user relationship, adding to customer loyalty.
Successful Microinteraction Examples to Inspire You
We all know which website and app elements impress us the most, which add value to our experiences by making our interactions easier, more fun, and ultimately more rewarding. Here are a couple that significantly changed how we use our digital products.
The Facebook React Feature
When Facebook replaced its like-button from a simple thumbs-up to a choice of reactions—by pressing and holding the original icon—each new emotive option had a unique tiny icon and animation. Undoubtedly, it changed how we let others know how we felt in the fastest and simplest way possible.
Apple and Google’s Solution to Voice Control
Both Apple and Google needed to let users know that their voice control requests were being dealt with. The whole process is done with minimal but simple and smart visual feedback.
As you make your request, the Google Assistant floating dots appear to let you know it’s listening; the dots turn into sound waves to let you know it’s picking up your voice as you speak, and it delivers the feedback with its response. Siri does the same thing, albeit with its abstract brand image, vibrating and changing form to show you it’s locked onto your voice.
Summary
Creating smooth interactions that reduce frustration and allow users to seamlessly flow from one state or stage to another is essential for the ideal user experience. Well-designed and delivered microinteractions provide precisely that.
As UX researchers, it’s our role to determine the ideal version for those designing microinteractions. User research and testing allow us to hone in on the best performers with A-B and prototype testing. The user research phase reduces flaws in delivery in the same way many of the microinteractions that end up in our form submissions and checkout processes do.
If you would like to know more about user research can help you uncover innovation opportunities to improve your micro-interaction and user experience design email us at hello@ux247.com.
[…] recently published a page exploring microinteractions in UX design, as we believe, as such important elements of user […]
[…] Confirmation animations and certain microinteractions […]