Analysts and designers typically focus first on big picture use cases and application flow, leaving the details to later. While this is understandable, that often means that tiny and important details get overlooked or rushed.
Micro-interactions are the small focused instances where users and the website (or application) intersect. They are a way to actively interact with users in a simple, clear, and engaging manner.
The micro in micro-interactions implies that it's about the small things. While micro-interactions aren't complete features they are still important. Features tend to be a full use case or multi-use case processes that are time consuming and require a fair amount of effort on the part of the user. Micro-interactions are simple, brief, and ideally effortless. Often they represent only partial use cases. Enhancing UX micro-interactions can make the difference between a user that stays engaged and one that doesn't. If the micro-interactions are poorly designed then the main features of the application will be cumbersome and frustrating.
Examples of micro-interactions that users regularly encounter include:
- Adjusting the ringer volume on a mobile phone
- Adding an item to a virtual shopping cart
- Sending/receiving a text message
- Scrolling a webpage
- Selecting a Facebook post "reaction"
Micro-interactions can be structured and organized into four parts: the trigger, the rules, the feedback, and loops & modes. An example micro-interaction that can help readers understand and describe each of these might be: adjusting the ringer volume on a mobile phone (one with a split up/down volume rocker button)
The Trigger is what initiates an interaction. You can have user or system triggers. When a user presses the volume rocker button on their mobile phone, either up or down, the micro-interaction is triggered.
Rules determine what happens when the micro-interaction has been initiated. Rules start off invisible to the user, but can often be inferred based on the result (or feedback) of the interaction. What starts as a seemingly simple interaction often grows into a complex set of rules. For example, rules that define the behavior when the user presses the down volume button will answer the following questions:
- Does the button have tactile feedback? A click, a vibration?
- Does the phone produce a tone?
- Does the tone volume get softer with each press?
- What if the volume is as far down as it can go?
- Does the phone produce a vibration?
- Does the phone give a visual message or display on the screen?
The rules define all of this.
Feedback is how the system informs the user of what is happening. A single trigger can initiate a micro-interaction that kicks off set of rules that produces multiple forms of feedback. For example, when the user presses the down volume button the following feedback may occur.
- The button produces a haptic "click" in response (informing the user that the press was of satisfactory intensity to be registered)
- The phone produces a single beep or tone which indicates the current volume level
- The screen turns on and shows a volume indicator with the specific level identified
Loops & Modes
A Mode is a context in which an application operates. An application may behave differently from one mode to another. Usually this means that an action, such a pressing a button, does one thing in one mode and something different in another mode. Some of these differences in behavior are more noticeable than others.
For example, the volume rocker button controls the level of the ringer in "phone call mode", but when in the "music playing mode" it controls the volume of music. And when in the "screen brightness mode" may adjust the illumination level of the screen. These are three totally different modes. If the ringer volume is set at level 10, but the music volume is then turned down to level 3, when a phone call is received, the phone enters "phone call mode" and the ringer volume will have remained at level 10 and then can be adjusted.
Modes should be used very sparingly in micro-interactions in order to avoid confusion. Most of the time micro-interactions are small enough to exist completely within a single mode rather than across modes.
A loop should be self explanatory. It is a series of commands that are repeated.
The volume control micro-interaction loops through the same steps each time the volume rocker button is selected until the volume has reached it's lowest level, then it may behave differently such as turning on vibrate or turning to full silent mode.