Microinteractions
User experience is made up of many small moments and tiny decisions that product designers make. Although microinteractions may be small in scope, they can result in large impacts to user experience and can make or break a product or feature.
Microinteractions: Full Color Edition: Designing with Details
Although they are usually not complete features, microinteractions are essential parts of the full product experience. Microinteractions can enable interactions with a single piece of data, control an ongoing process, adjust a setting, turn something on or off, and display or create a small piece of content. Sometimes, a microinteraction can govern an entire product, like a toaster.
Microinteractions consist of a trigger, rules, and feedback. Triggers initiate the microinteraction, the rules govern the behavior, and the feedback tells the user what has just happened.
Microinteractions are the functional, interactive details of a product, and details, as Charles Eames famously said aren’t just the details; they are the design.
Many of the examples in the book come from Little Big Details, a great design inspiration site that focuses on microinteractions. In addition to providing immediately useful design principles and examples, Saffer breaks down three applications: a mobile app, an online shared playlist, and a dishwasher control.
The design of your product is only as good as the smallest part.
Triggers
Triggers are the initiators of action. Triggers can be user initiated or system initiated, visible or invisible, and started by any number of user interface elements or behaviors. An operating system menu bar is a common set of triggers.
Many microinteractions are triggered by the person using the device or application. Turning something off or on is a common microinteraction triggered by a human need. Understanding what the person is trying to achieve, why, and how often, will help create the appropriate trigger.
For a trigger to be effective, it must be recognized by the end user as a trigger in the context of use. If your target users do not perceive the trigger, they will likely walk away from or ignore your product. Kiosk designers described in the book learned that their customers did not initially know how to initiate a touch screen trigger. Determine what knowledge and experiences your end users bring to the interaction before deciding on the trigger. Triggers which are obvious to one set of users may not be so obvious to everyone.
Once you have created your trigger, make sure it does the same thing every time. A trigger should not initiate different microinteractions. Ambiguous triggers can create confusion.
Triggers can be used to bring forward information about the state of the system. Showing information about the system, such as a market indicator for a stock market app, can assist the end user in deciding when to use the trigger. Every time you walk near a nest thermostat, it turns on and shows you the temperature.
Because a user interface can contain only so much information, some triggers will necessarily be invisible. In that case, make sure the trigger is discoverable–a truly invisible trigger will not help anyone. Special behavior when a user right-clicks a UI element is an example of an invisible but discoverable trigger.
Rules
Rules define the way the microinteraction works. Mapping out the complete rule and interaction scheme for your product will help you discern the totality of the interaction between your system and your end user. If there are gaps in your interaction design, the users will not be able to achieve their goals.
Start designing the rule by identifying the goal of the microinteraction. The rule should guide the user through the interaction, helping them along the way to their goal.
Rules will determine:
- What happens when the trigger is initiated
- How much control, if any, the user has over the microinteraction
- The sequence and timing of available user actions
- What data informs the microinteraction and the source of that data
- What feedback is conveyed to the user and when
Don’t start from zero
You know something about the user at the beginning of the microinteraction. You may know their location, behavior, or system context. Use that information to make the microinteraction more intelligent.
Absorb complexity
According to Tessler’s Law of Conservation of Complexity, “every application has an inherent amount of irreducible complexity. The only question is: Who will have to deal with it–the user, the application developer, or the platform developer?” The more complexity you absorb, the better it is for your users and partners.
Feedback
Feedback should provide insights to the user about how the system works and what possible states there are for the functionality. If an end-user cannot discern how the system behaves, they will become frustrated or, worse yet, stop using the system. The counterexample to this given in the book is slot machines. Slot machines provide feedback which is counter to their actual functioning. They appear to be random and encourage hopeful behavior.
To design good feedback, begin by asking what information the user needs and when. The purpose of feedback is to help the user understand the rules of the system. Consider which rules of your system require feedback.
Feedback should never be arbitrary. The trigger and the feedback should be related in a way that conveys information. A beep doesn’t always tell the end user what just happened or indicate anything about the change of system state.
The feedback mechanism should convey the most information with the least feedback. Don’t duplicate feedback through more than one design element.
Common feedback messages to the person using your system are:
- something just happened
- you just did something
- a process has started or ended
- a process is currently in progress
- you can’t do that
Think of each element of a product as microinteraction and the details will add up to a great experience. Saffer says “if done well, micro interactions can be signature moments [such as facebook’s Like button] that increase adoption and customer loyalty.” Even great features and products can be weighed down by poor microinteractions.
Everything’s a detail, everything’s a microinteraction: a chance to delight, a chance to exceed users’ expectations.
Microinteractions: Design with Details
The difference between a product you love and one you tolerate are often the microinteractions you have with it.
In this talk from User Experience Design Lisbon, Dan Saffer begins with the story of Patron X, illustrating the consequences of microinteraction design, in this case silencing your cell phone. He touches on all the major concepts from the book in this presentation.
