011 min
A microinteraction at work: pull-to-refresh
In 2009, a developer named Loren Brichter was building Tweetie, a Twitter app for the iPhone. The app showed a list of posts, and the list needed a way to load newer ones. The usual answer was a refresh button in a corner of the toolbar. Brichter could not find a place on the screen where a refresh button would fit.
So he gave the job to the list itself. A person puts a finger on the list and drags it down. When they let go after dragging far enough, the app loads new posts. Twitter bought Tweetie the next year and added the gesture to its own app. Many other apps copied it, and people now call it pull-to-refresh.
This small exchange is a microinteraction: one task, started by one action, answered by one response. The rest of this article follows the pull to show how such a moment is built, how fast it has to answer, and where it goes wrong.
The button that became a gesture
The change freed a corner of the screen for other controls, and it cost the person nothing to learn. Dragging down from the top of a list is a move that scrolling already teaches. Brichter did not add a feature. He moved an existing job to a place where a gesture could do it.
022 min
The four parts of a microinteraction
Designer Dan Saffer gave moments like this a working model in his book Microinteractions: Designing with Details. The model splits every microinteraction into four parts: a trigger, rules, feedback, and loops and modes. This is a framework that designers use, not a research result. No experiment sits behind it. It earns its place by giving a team four questions to ask about any small moment.
Nielsen Norman Group, a UX research firm, uses a shorter definition. It describes a microinteraction as a trigger paired with feedback, where the trigger can be an action by the person or a change in the system's own state.
Trigger
The trigger starts the moment. In pull-to-refresh, the trigger is the drag at the top of the list. A trigger can also come from the system, such as an alarm that goes off at a set time. A person must find a manual trigger before they can use it. An unlabelled gesture therefore needs some hint that it exists. A signifier is that kind of hint: a visible clue about what an element does.
Rules
Rules decide what happens after the trigger, in what order, and under what conditions. The rule in pull-to-refresh is a distance. If the person drags past a set point and lets go, the list reloads. If they drag less, the list returns to its place and nothing happens.
Feedback
Feedback tells the person what the system did with their action. It can be a movement on the screen, a sound, or a vibration. In pull-to-refresh, it is the spinner, and the list that holds in place while new posts load.
Loops and modes
These two decide how the moment changes over time. A loop sets how long the moment repeats, such as a spinner that keeps turning until the data arrives. A mode is a state in which the same trigger behaves differently. A phone set to do not disturb still receives a message, but it shows the alert differently. Many microinteractions need neither.
031 min
Tuning microinteraction rules and feedback by feel
Brichter's first version of the pull used an invisible line. Cross it, and the list reloaded. Nothing on the screen showed that a reload had started. He decided that people needed a visible response, so the second version added feedback while the list loaded. This is the first lesson of the feedback part: the system has to show that it heard the trigger.
Feedback that explains a new gesture
The second version also added a line of text. It told the person that letting go past the line would reload the list. Brichter added it because the gesture was new, and most people had never seen anything like it. A familiar trigger such as a button needs no explanation. A gesture nobody has met needs one, at least until it becomes common.
Distance rules are tuned by hand
The rule needed tuning too. If the distance was too short, people triggered a reload by accident. If it was too long, the gesture was hard to complete. Brichter built both versions in one afternoon and adjusted the distance by hand until it felt right. Any rule that depends on a distance or a delay has the same problem. A calculation cannot give the right value, because it depends on how a thumb moves across a particular screen. Trying it with real hands is the test.
041 min
How fast microinteraction feedback has to be
A trigger with no quick answer feels broken. Jakob Nielsen summarised three response-time limits that designers still use. He drew on work by Robert Miller in 1968 and by Stuart Card, George Robertson and Jock Mackinlay in 1991.
The first limit is 0.1 second. Under it, a person feels the system reacted instantly, and only the result needs to show. Between 0.1 and 1 second, the person notices a delay, but they can keep thinking about their task without a break. They lose the feeling of acting directly on the thing in front of them. At about 10 seconds, attention leaves the task, and the system should show how far along it is.
Apply this to the pull. The list should move the moment the finger moves, and the spinner should start the moment the finger lifts. Fetching posts over a network can take longer than that. This is fine, because the feedback only has to show that the system heard the trigger. It does not have to show that the work is finished. The Doherty threshold is a related time limit, taken from IBM research on how response time affects the work people get done.
052 min
Gmail's Undo Send: rules that protect a person
Pull-to-refresh is a moment that a person starts on purpose. Gmail's Undo Send is built around a mistake. In March 2009, Michael Leggett, a user experience designer at Google, described it in a post on the Gmail blog. It first appeared in Gmail Labs, a settings area where Google tried out features before they were final. Leggett wanted to undo sending the way he could undo almost any other action in Gmail.
The rule he chose was simple. After a person pressed Send, Gmail did not send the message at once. It held the message for five seconds, and the confirmation showed an Undo link. If the person clicked Undo, Gmail returned them to the compose window with the message still there.
A hold, not a recall
This looks like an undo, but it works differently. The feature only delays sending. Gmail cannot pull back an email that has already left, so the time to change one's mind is short and fixed. Leggett's reason for five seconds was a theory: that it was enough time to catch most regretted emails. The post gives no measurement, so the number is a design bet, not a finding.
What happens when the page closes
A rule also has to cover cases nobody planned for. If the person closed Gmail or the browser crashed during the five seconds, Gmail still sent the message. The designers chose to send the message rather than lose it. That choice keeps the promise that pressing Send means the email goes out.
062 min
What microinteractions do in a product
The pull and the five-second hold show two of the jobs this kind of moment does. Nielsen Norman Group names three: show the state of the system, prevent errors, and express a brand. Practitioners also use them to reward progress.
| Job | A common example | What the person learns |
|---|---|---|
| Show system status | A spinner, a progress bar, a typing indicator in a chat | The system received the action and is working |
| Prevent errors | A check on a form field as the person types, a confirmation before a delete, Undo Send | A mistake can be fixed before it costs anything |
| Express a brand | A sound or motion style that repeats across a product | Who made the product, and how it behaves |
| Reward progress | A short animation when a task is completed | The task is done, and it was done right |
Status is the most common job. A skeleton screen is a grey layout shown while content loads. It tells the person the page is coming, and where each part will appear. Checking a form field while the person types is the error-prevention version. It lets them fix a mistake before they press submit, so no form comes back with a list of problems.
Each microinteraction also has a cost. It takes design time, development time and later maintenance. Animation can run slowly on older devices. It must also behave the same way on every screen size and platform, or people learn one behaviour and meet another.
072 min
When a microinteraction goes wrong
A microinteraction can fail in three ways. Its trigger can stop being needed, it can hold attention longer than the person wants, or it can move in a way a person cannot tolerate. The pull shows the first two.
The trigger that outlives its job
Years later, Brichter said he was puzzled that the gesture lasted so long, since apps can now update content without being asked. A trigger that exists mainly because it has always been there is a sign to ask what job it still does.
The pull that people repeat
Tristan Harris, a former design ethicist at Google, compares the pull to a slot machine. The person drags, waits, and does not know what will appear. Sometimes it is a photo and sometimes an advertisement. Brichter said he never meant the design to be addictive, but he did not dispute the comparison. The mechanism is a variable reward: a payoff that arrives at unpredictable times, which makes the action that produces it hard to stop. The loop part of the model is where this risk sits. A loop that invites repetition and rewards it unpredictably is not a neutral choice.
Decoration
A microinteraction with no job is decoration. If it does not show status, prevent an error or confirm progress, ask whether it should exist. A page full of reacting elements also competes with the task the person came to do.
081 min
Microinteractions and motion sensitivity
Many microinteractions rely on movement, and movement is not harmless for everyone. People with vestibular disorders, which are conditions of the inner ear that affect balance, can feel dizzy or sick, or get headaches, when elements move on screen. WCAG 2.2, the W3C's accessibility standard, addresses this in success criterion 2.3.3, Animation from Interactions, at Level AAA. It asks that a person be able to turn off movement an interaction sets off, unless the movement is essential to the function or to the information shown.
What counts as essential
The exception matters for design. The W3C gives the movement of scrolling a page as an example that is exempt. A decorative bounce is not essential. A list that must follow the finger during a drag is closer to essential. Most microinteraction motion falls on the decorative side, so most of it can be switched off without losing a function.
Browsers pass the person's operating-system setting to the page through the prefers-reduced-motion media feature. When it is on, swap the movement for a fade or an instant change. Reduced motion should not remove the feedback itself. The person still needs to see that the action worked.
092 min
How to design a microinteraction
Say a designer is adding a delete button to a list of saved files. They start with one task, written as one sentence: remove a file. If the sentence needs the word "and", the moment is two microinteractions and should be split.
Then they answer one question per part.
| Part | Question to ask |
|---|---|
| Trigger | Can a person find it, and use it without help? |
| Rules | What decides the outcome, and what happens in the cases nobody planned for? |
| Feedback | Does it start within 0.1 second, and does it say what happened? |
| Loops and modes | How long does it repeat, and does it behave differently in another state? |
For the delete button, the rule could hold the deletion for a few seconds, as Undo Send does. The feedback names the file that was removed. The moment ends when the time runs out.
Next come the steps that are easy to skip:
- Choose the quietest feedback that does the job. A change of colour is enough more often than a sound.
- Set every distance and delay by hand, on a real device, before asking anyone else.
- Write a reduced-motion version at the same time as the normal one.
- Keep it the same everywhere in the product, so people learn it once.
- Count what the moment was built to change: accidental triggers, errors at that step, tasks completed. Use an A/B test to compare two versions when the difference shows in numbers, and watch people use it when it does not.
101 min
Microinteractions vs. animations, features and flows
Four neighbours are often mistaken for a microinteraction.
| Neighbour | What separates it |
|---|---|
| Not in the library yetAnimation | |
| Not in the library yetFeature | |
| DesignUser flow | |
| ProductFeedback loops |
?4 questions
Questions people ask
Do microinteractions need sound or vibration?
Which tools are used to prototype microinteractions?
Is a hover effect a microinteraction?
Does every microinteraction need loops and modes?
§9 sources
Sources
Nielsen Norman Group (2018). Microinteractions in User Experience.
Nielsen, J. Response Times: The 3 Important Limits. Nielsen Norman Group.
Cieden. What is the general structure of any microinteraction? A summary of Dan Saffer's four-part model.
Leggett, M. (2009, March 19). New in Labs: Undo Send. Official Gmail Blog.
Show all 9 sourcesShow fewer sources
Lewis, P. (2017). 'Our minds can be hijacked': the tech insiders who fear a smartphone dystopia. The Guardian.
Pull-to-refresh. Wikipedia, which draws on an interview with Loren Brichter.
W3C. Understanding Success Criterion 2.3.3: Animation from Interactions, WCAG 2.2.
MDN Web Docs. prefers-reduced-motion.
The Decision Lab. Microinteractions.
