Chapter 16. Designing for Distraction: Buttons and LEDs Amid Noise and Clutter

A first screen must not be made for a focused person. We cannot choose where a user will open it, and a considerable number of the people who do are already half occupied with something else. Even the world's answers we worked so hard to clarify in the previous chapter reach only halfway when the person receiving them is only half looking.

When we make a screen, we assume the person who sees it will look at nothing else, just as we do.

Picture the moment a planner examines a first screen. In a quiet office, seated before a large monitor with both hands free and no thought in mind but this screen, they spend hours refining button positions and choosing type sizes. The problem is that the person who will actually encounter the screen is not in that office. They stand on a shaking bus, gripping a handrail with one hand and operating the screen with the other thumb. Between a fellow passenger's phone call and the stop announcement, they watch the screen while remembering where to get off. The maker sees the screen at the far end of concentration. The user sees it in the middle of distraction.

This chapter begins with that mismatch. The most common false premise beneath the design of a first experience is that "the user is concentrating on the screen," so nearly every screen is drawn for someone seated in a quiet room. Yet the ordinary person we are trying to reach is someone who drifted in during one subway stop or a short wait for the elevator. To them, our game competes in the same row as YouTube and short-form video, and it does so while they are only half watching. Make a screen for a focused person, and you miss the distracted person who will actually encounter it.

Of course, not every first launch takes place on a bus. Some people certainly open an app for the first time in a fairly focused setting, such as bed before sleep. But because we cannot choose where the user will open it, design must account for the worst conditions. For the first screen and first session, doing so disadvantages no one. A screen that lets a distracted person pass also lets a focused person pass. A screen that admits only the focused person drops the distracted one. Because this asymmetry leans only one way, treating distraction as the default is an inference, not a declaration. A curb cut was originally made for wheelchairs but also helps people pushing strollers and pulling suitcases. In the same way, design made for the hardest conditions is comfortable for everyone else.

On a first screen, this asymmetry applies to making the core action visible. It does not mean removing even the details experienced users need. Show the core first and let details open when needed, and the same screen can meet the needs of both distracted people and experts.

The Same Screen in a Quiet Room and on a Noisy Bus

Let us enter a fictional character game. It is a mobile game where people collect characters, converse, and watch short videos. On the first screen, the user chooses an animal as their first character, then adjusts its color and pattern. In a quiet room, the screen poses no problem. Six candidate animals stand in a row. Small dots at the top indicate progress. A help question mark and a settings gear sit politely in one corner. With calm attention, everything can be read.

Move the same screen onto a shaking bus. Only one thumb can reach it, and the eyes glance at the screen briefly, look out the window, then return. The six candidates no longer fit into one glance, and it becomes hard to tell which is selected. The progress dots are too small to see at all. The button that advances to "Next" sits in an upper corner, beyond the thumb of the hand holding the rail. The person chooses the wrong color but cannot find where to undo it. After enduring this for a moment, they close the app. Not because the screen is bad, but because a person on a noisy bus encountered a screen drawn for someone in a quiet room.

This distraction is even more pronounced in MEJE IDONG WORLD. A fan caring for a puppy IDONG is not always calm or sitting still with eyes fixed on the screen. Notifications arrive, the fan moves between apps, and a finger taps here and there. Through all of that, "Tap here now" must shine clearly. When the fan looks away and returns, the screen must not ask them to ask, "What was I doing?" When a screen calmly points to one thing for a distracted fan, the fan presses that one thing and moves on. On IDONG WORLD's first-session screen, we therefore locked every upper-right menu and notification badge, leaving only one button at the lower center, within the thumb's reach, shining to invite the fan to pet IDONG. When a fan returns from another app, the screen reopens at the exact place they last touched. IDONG lifts its head first and gestures toward the task they were doing.

Three Things for a Distracted Person: What to Press, the Current State, the Current Problem

Once distraction is treated as the default, the first screen's responsibilities narrow to three: what to press now, what state things are in now, and what is wrong now. If all three register at a glance, even a distracted person can pass. If any one of them requires searching the screen, people leak away there. In the language of Chapter 11, the same screen charges a distracted person twice the fee. Stopping to choose what to press, estimating how far they have progressed, and puzzling over an error message are all fees. A distracted state has the thinnest balance available to pay them.

First, what must be pressed now should shine. A screen may contain ten pressable elements, but usually only one needs to be pressed at this moment. If that one has the same visual weight as the other nine, a distracted person stops to choose. It is an old observation that more choices slow decisions, and in a distracted state that delay becomes departure. Make the one thing to press now the largest and brightest, and put it where the thumb can reach. It is also an old observation that people press large, nearby targets more quickly and accurately. To someone using one hand on a shaking bus, a small button in the upper corner of the screen is effectively no button at all.

Second, the current state must be visible at a glance. When a user looks away and returns, the screen should say without being asked, "You are here now, you have done this much, and this comes next." If progress is indicated by three dots too small to see, a returning person must estimate their position again, and that estimation is a fee. Do not whisper state in small type. Show it boldly. What is currently selected, whether it was saved, and what comes next must all be legible from the corner of the eye.

Machines have long done this with LEDs. A tiny light on the front of a router or washing machine can communicate, without a single word, whether it is on, running, or experiencing a problem. A person reads it with one sideways glance while passing. Even in an age when we can fill a screen with text, machines insist on one light for an obvious reason: the person who sees it is not standing still before the machine. The model a first screen's state display should learn from is this LED. Before making three progress dots a little larger, make the entire screen emit one state at a glance like an indicator lamp.

Third, the current problem must be visible. When something goes wrong, the user will not stop to read about it. The problem must appear at a glance in the user's language. Think of a car dashboard. Its warning lights are generally said to speak in two levels. An amber check-engine light means "Have this looked at soon." A red light for oil pressure or coolant means "Stop now." In neither case does the driver read an explanation saying that an oxygen sensor's voltage has moved outside its reference range. There is neither time nor need. One color immediately conveys both the existence and urgency of the problem. Error displays on a first screen should work the same way. For a distracted person, one clear signal pointing to where the problem is works better than long gray text explaining what went wrong, why, and how. Better still, use color and visual weight, like the dashboard's two levels, to separate a problem requiring an immediate stop from one that can wait. Explanations are for people who have stopped. Signals are for people passing by.

This sentence should not be read as an aphorism and left behind; it can be used as a tool. Force every piece of text on the first screen into one of two categories. Is it a signal a passing person receives from the corner of the eye, or an explanation a person must stop to read? Move every sentence classified as an explanation to a place where someone willing to stop and read will arrive. Aim for zero explanations on the first screen. That may sound extreme, but count the text on your screen now, and you will first discover how many explanations were inserted under the belief that they were signals.

The principle running through all three is to speak in the user's vocabulary. Every word on the screen should belong not to the person who made it, but to the person who will read it. "Synchronization failed" is the maker's language. "It didn't save. Want to try again?" is the user's language. In a distracted state, words that require a second thought go unread. Only words whose meaning lands in one sideways glance survive.

Information to a Gamer, Noise to an Ordinary Person: Minimap and a Packed HUD

Because this chapter deals with distraction, let us put one gaming convention at the checkpoint: the habit of filling every edge of the screen. Minimap, quest markers, a dense HUD, and red notification badges attached everywhere. To be clear, this book examines "too much at once" three times. This chapter looks at noise in reading. Chapter 19 separately examines the overload of assigning too many tasks at once. Chapter 21 examines the problem of charging in advance for a long explanation all at once.

Begin with what the convention takes for granted. The four corners of a game screen are usually packed with information: health and resources at the upper left, a minimap at the upper right, quest markers and arrows to the next objective throughout the screen, and red dots on every menu icon announcing something new. This density rests on the premise that a gamer can and wants to read a great deal of information simultaneously. That premise grew out of the long traditions of action and strategy games. For someone who can manage more information better, an empty screen is instead a screen with too little information.

Ordinary people do not share that premise. To a gamer, a minimap is a map for finding the way. To a newcomer, it is an incomprehensible picture flashing in a corner. A quest marker is a helpful instruction saying "Go there" to a gamer, but to an ordinary person it is an assortment of unidentified exclamation marks scattered across the screen. A red notification badge signals "There is something new to check" to a gamer. To someone already harried by red dots in other apps, it looks like one more demand for payment on a debt. The same element is information to one side and noise to the other. In a distracted state, every piece of information a person cannot read accumulates as noise.

Even gamers have long complained when this density goes too far. One major open-world series became known for covering its map with dozens of icons. With a blinking minimap and compass added on top, people reportedly said that the world itself had become secondary. Fan-made images circulated that mocked the habit by deliberately wallpapering an empty screen with icons, meaning that the inertia to fill a screen had become a joke even within gaming culture. If this density feels excessive even to gamers, nothing more needs to be said about an ordinary person encountering it on a shaking bus without even knowing how to read it.

The fee this convention charges ordinary people is information overload. A distracted person already gives the screen only half their attention. Then some ten elements they cannot read and do not currently need divide that half among themselves, burying the one thing that must be pressed now beneath noise. A full screen does not mean abundance. It means the person can no longer find the one important thing. Gamers are accustomed to cutting through the density and selecting the information they need. For an ordinary person, that act of selection is itself a fee.

Keep the essence and change the form. On the first screen, clear the edges. Turn on minimaps, markers, and badges one by one only when someone who can read them as information has arrived and begins looking for them. A newcomer's first screen gets one thing to press now, one current state, and, if something goes wrong, one problem. Turn everything else off. If a direction must be shown, display the destination directly in the center of the world instead of using a minimap. If there is news, speak once after the user has caught their breath instead of attaching a red dot. Emptying the screen does not deprive anyone of information. It gathers the distracted person's half measure of attention onto the one thing that matters now. The elements we added out of fear that the screen would look sparse were in fact driving that person away.

▶ Three Questions to Apply to My Screen

Is this screen readable with one hand, amid shaking and noise?

Is the single most important thing visible even through distraction?

Does it still communicate with the sound off? If any one of the three fails, the screen admits only someone sitting in a quiet room.

So, Draw Where the Person Is Standing Before Drawing the Screen

Treating distraction as the default changes the order in which a first screen is drawn. Rather than drawing the screen first and asking, "What else should we add here?" begin by drawing where the person who will encounter it is standing. Where are they? How many hands are free? Can they hear sound? How many seconds do their eyes remain? Once that setting is defined, the screen's three responsibilities—what to press now, the current state, and the current problem—narrow themselves, and everything else is postponed or turned off.

The dashboard reveals whether this decision was right. A starting point is to observe what share of people who open the first screen reach the first button and where those who hesitate and leave stop. That rate by itself, however, is merely a general churn metric; it does not measure the premise of distraction itself. To test the premise, separate the same screen by time of day and session context. Compare whether first launches during commuting hours and first launches before sleep become blocked at the same or different places. Observe whether someone returning from another app immediately resumes what they were doing or starts wandering again from the beginning. If people leak away only at distracted times and returners become lost, the screen is not making what to press shine clearly enough or showing state boldly enough. Those numbers illuminate where a screen that looks fine to us in a quiet room fails in a shaking hand. Test the first screen not before a large monitor, but while holding it in one hand and walking.

Reference Content

Examples from other media that reveal this chapter's concepts.

Video Games

Climbing towers and filling question marks in Assassin's Creed and Far Cry: Climb a tall tower and the surrounding map opens, laying down dozens of icons for the same activities all at once. Players end up clearing question marks from the map instead of looking at the world. Criticism of the density accumulated for years, and Assassin's Creed Shadows is reported to have removed the packed activity icons so that players find what exists by exploring for themselves.
Elden Ring's golden guidance: Instead of filling a corner with a minimap, golden rays grow from Sites of Grace toward the next direction to travel, pointing directly to the next step within the world at the center of the screen. It is often cited as a contrary example that clears the edges.
Dead Space's health bar embedded in the back: Rather than placing separate health numbers or bars on the screen, one glowing bar along the protagonist's suit spine shows state. It glows blue when there is plenty, yellow below half, and blinks red near death, making the current state readable from the corner of the eye. Machines / Appliance UX
Warning lights on a car dashboard: They speak through color instead of explaining the voltage of an oxygen sensor. An amber check light is said to mean "Have this looked at soon," while a red oil-pressure or coolant light means "Stop now." One color distinguishes even the urgency in a two-level signal.
Appliance status lights for power, operation, and error: One light color makes whether the appliance is on, running, or experiencing a problem legible in a sideways glance.

The remaining reference content appears in the "Chapter 16 Appendix" at the end of this chapter. (In the print edition, it is collected in Appendix D.)

Design Notes ▶ Try It Yourself

Open our game's first screen on a phone. Stand up, hold the phone with one hand, and use the screen while walking around the room. If possible, play music or a video nearby.

As you walk, check three things aloud. Can I tell at a glance what I should press now? Can I see from the corner of my eye how far I have progressed? If I pressed something wrong, can I see at a glance what went wrong, and is it written in the user's language?

If any one thing made you stop and search the screen, write down that location. That is where distracted people leak away. Put a cross through each thing attached to the screen's edges that a newcomer either cannot read or does not need now. Turn crossed-out items off on the first screen and postpone them until someone who can read them as information arrives. Detailed examination continues with the experience fee table in Appendix B and the convention-dismantling checklist in Appendix A.

A screen that looks fine before a large monitor must be tested again in a shaking hand. Only a screen someone can pass while holding it in one hand and walking also admits a distracted person.

In One Line: The user is not quietly focused, but standing in the middle of distraction and noise. For that distracted person, the first screen must show three things at a glance and in the user's language: what to press now, the current state, and the current problem. Minimaps, markers, packed HUDs, and notification badges are information to gamers but noise to newcomers. Clear the edges of the first screen and gather attention on the one thing that matters now. Next Chapter: A distracted person will certainly press something wrong. How the screen answers at that moment can keep them or drive them away. Next, we examine the moment of error. Is failure an enemy to prevent or part of the fun? And how do we avoid taking control away from someone who made a mistake?

Chapter 16 Appendix: Reference Content Collection

The cases collected here show how this chapter's premise—that a user encounters a screen in the middle of distraction—is handled across different media and machines. They are grouped by medium, from video games to broadcasting, print, and real-world guidance systems. Each entry ends with "What to Observe." Keep in mind the distinction established in the main text between a signal a passing person receives from the corner of the eye and an explanation read by someone who has stopped, as well as the asymmetry through which design made for the worst conditions helps everyone else. You will then see what each case leaves as a signal and what it postpones as explanation. It is also useful to read while identifying which of the three responsibilities—what to press now, the current state, or the current problem—each device performs.

Video Games

Tamagotchi's call sound and attention icon: This portable virtual-pet device from the mid-1990s plays a short call and lights one attention icon in the corner when the creature is hungry or needs care. Without explaining at length what is needed and why, one signal says, "Look at me now." Even a distracted person busy with something else returns because of that single signal. What to Observe: The signal follows the person into a pocket and only calls them back. Explanation waits until they take out the device and look at it. See the division of labor between signal and explanation implemented throughout a single device.
Packed HUDs and red notification badges in MMORPGs: A screen where information to gamers accumulates all at once as noise a newcomer cannot read. What to Observe: See the asymmetry through which the same screen is information to someone who knows how to read it and noise to someone who does not. It is training material for looking at your own screen again through eyes that have not yet learned how to read it.
Candy Crush's simple first screen: Only the one thing to press now shines large, so even after looking away and returning, the next action is immediately visible. What to Observe: Treat it as a model of a screen where "what to press now" shines. Its score is whether a returning person moves to the next action without hesitation.
Journey's HUD-free screen (2012): With no health number, map, or score, the length and shimmer of the character's scarf show how much flight remains available. What to Observe: Treat it as an example of moving state display from a gauge at the screen's edge into an object within the world. It shares the character of the main text's LED story, in which the whole screen should emit one state like an indicator.

Live-Action Film

Frantic rapid-cut editing in action movies: When too many things are shown at once, the audience misses the one shot that matters. What to Observe: See the paradox that increasing the amount of information decreases what is conveyed. Well-made action instead clears the screen immediately before the most important action to focus the eye in one place.

Live-Action Television / Drama

Dense caption strips and breaking-news tickers: The more information fills the screen, the more the single important line becomes buried for someone watching from the corner of the eye. What to Observe: Notice the trap that every item is important from the channel's perspective. The sender's importance and the receiver's attention move in different units.
Home-shopping screens covered with prices, captions, and phone numbers: Some instead show one large reason to buy for distracted viewers. What to Observe: Treat this as a field where two strategies—covering and clearing—divide over the same distracted viewer. Compare which one more accurately assumes the viewer's state.
The score bug in sports broadcasts: Score and time or inning remain in one corner, allowing someone who joins midway to understand the situation with one sideways glance. This permanent on-screen score display is said to have become established in broadcasts during the 1990s. What to Observe: Treat it as an original device that states "the current state" without being asked. A design that lets someone catch up whenever they join does the same work as a screen that receives a user returning after looking away.

Comics

Focus lines in comics: Lines converge toward one point in a panel, drawing the reader's eye to the one place that matters now. The panel does not render everything at equal weight; it is a spotlight on paper that gathers attention only at the most important point. What to Observe: See that the principle of suppressing the rest to make one thing shine is the same on paper. A panel where every element carries equal weight leaves no room for focus lines.

Music

Background sound and announcements in stores and airports: Because people listen only halfway, truly important guidance is reduced to a short signal sound and one sentence. What to Observe: Examine the structure reduced to one signal and one sentence on the premise of a half-listening person. The key is that more important guidance becomes shorter, not longer.

Theater / Performance

A stage spotlight: Instead of illuminating the entire stage, it gathers light only on the one performer the audience should watch now. What to Observe: Notice that illuminating and leaving dark form one operation. What a first screen decides to turn off is its lighting design.

Physical Arcade Machines

Large buttons and a blinking "INSERT COIN" in an arcade: A design that makes the one action to take now shine large even in a loud, chaotic place. What to Observe: Examine the size, blinking, and position of signals refined in an environment where noise and competition are at their worst. Imagining a screen drawn in a quiet office placed in the middle of an arcade makes a useful test.

Real-World Procedures

Airplane cabin exit lights and pictograms: For a panicked person, one pictorial signal points only to where to go now instead of using text. What to Observe: See the asymmetry through which design made for panic, the most severe distracted state, remains legible to everyone in ordinary conditions. The curb-cut principle has long been common sense in safety design.
Colored route guidance in hospitals and airports: Instead of explaining an entire complicated route, one colored line on the floor can be followed without getting lost. What to Observe: See the method of providing one next step after another instead of making someone memorize the whole map. It does not merely reduce explanation; it removes it and leaves only the signal.
From dot to dot on a subway map: It discards real geography, leaving straight and colored lines so that a person only needs to follow one color from the current dot to a destination dot. This approach is said to have originated with the diagrammatic London Underground map of the 1930s. What to Observe: See how deciding to discard accurate geographic information does not deprive people of information but gathers their attention. A signal becomes clear only to the extent that someone chose what to remove.

General Apps

One next instruction in car navigation: Instead of displaying the entire route, it shows only "Turn right next" in large type, remaining legible while driving. What to Observe: See the restraint that distinguishes what the system knows from what it should show now. A system that possesses the full route tells the driver only the next move.
Apps with one-handed mode and large bottom buttons: They place what must be pressed now where the thumb can reach in a shaking place, rather than turning an upper-corner button into no button at all. What to Observe: Confirm with your hands the main text's sentence that an unreachable button effectively does not exist. Hold the phone in one hand and press each button on your screen.
Google's empty first screen: One search box sits in the center of a white background, so even a newcomer knows at a glance what to do. The empty space around it is not vacant but a device that gathers the eye on that one thing. What to Observe: See how emptiness itself is a function. It is a model for how far one can resist the urge to add things out of fear that a screen will look sparse.
Error screens rewritten in human language: More screens now say, "We couldn't find that page. Return to the start?" instead of codes such as "Error 404." The maker's language requires another thought, but the user's language lands in one sideways glance. What to Observe: Reread the sentence through the main text's criterion separating signal and explanation. If its meaning lands in a glance, it is a signal. If it requires thought, it is an explanation.
One-line state displays in delivery and taxi apps: They display only the current stage in large text—"Your order is being prepared" or "Your driver is on the way"—and fold the details away until pressed. What to Observe: Treat this as a state display built directly on the pattern of users glancing, checking, and returning to something else. The assumption that a user does not stand watch over the screen reaches all the way down to the sentence.
Continue Watching in video apps: The content someone was watching appears in the first row and resumes from the scene where they stopped. What to Observe: Treat it as a device that prevents a returning person from asking, "What was I doing?" Whether a returner immediately resumes their task or wanders from the beginning is the indicator recommended in the main text.

Machines / Appliance UX

Master caution and warning lights in an airplane cockpit: Whatever system develops a problem, a large light in the pilot's line of sight first says, "Look now." A two-light arrangement is generally said to assign immediate action to a red master warning and inspection to an amber master caution. Which component failed and why is checked on the next panel. The first signal consists only of color and blinking. What to Observe: See the two-stage division of labor in which attention is captured first and content is left to the next step. It also lets us infer in reverse what breaks when the first signal tries to carry the explanation too.
The iPhone's silent switch: For many years, it was a physical switch on the side. Without turning on the screen, a person could feel its position with a fingertip to know whether silent mode was active and confirm it at a glance through the exposed orange color. Recent models have replaced it with a pressable button. What to Observe: See a design that makes one state legible through two channels: touch and a sideways glance. The sense that even turning on a screen is a fee is inscribed in the hardware.
Distinct left and right vibrations in smartwatch navigation: Wrist-device navigation is said to use different vibration patterns for left and right turns, telling people which way to turn without looking at the screen. What to Observe: Treat it as a design that moves the signal into touch under the worst condition, when the eyes are fixed on the road. Signals can change senses, and the signal that avoids the busiest sense survives.
Completion melodies on rice cookers and washing machines: When cooking or washing ends, a melody reaches someone doing something else in another room. What to Observe: Treat it as a design that fully accepts the premise that the user is not standing in front of the machine. It is the appliance version of the main text's claim that the person is not looking only at that screen.