Chapter 19. Colliding Experiences and Layers

This chapter examines failures caused not by inherently bad elements such as errors or slow loading, but by individually good elements that appear simultaneously, collide, and ruin the first screen.

The first screen opens with a beautiful introductory video. A helpful arrow flashes over it, while a first reward sparkles in one corner. All three are well made and all three are right. Yet because they arrive at once, the person misses the video, overlooks the arrow, fails to collect the reward, and stops in a daze.

We quietly believe that including every good element will create a good experience. We want to present the world beautifully, teach the controls kindly, add spectacular effects, offer the fun of comparing with friends, and show where purchases can be made. Because each is right on its own, we put them all on the first screen. But neither a screen nor a person's attention is spacious. When good things arrive on the same screen at the same moment, they begin competing for room. A long sequence intended to present the world blocks someone eager to try the controls; a guidance pop-up intended to teach those controls breaks the immersion of someone entering the world. Good things collide. Chapter 18 examined previews and first impressions before the screen is reached. This chapter directs the traffic among the good things that arrive on the screen all at once.

Two Good Things Arriving at the Same Moment

Let us enter an imaginary game: the mobile game in which players collect characters, talk with them, and watch short videos. Our team is proud of its world, so opening the first screen starts a beautiful introductory video. Music plays, characters appear, and the story of this world unfolds slowly. At the same time, ours is also a considerate team, so the message “Tap here” appears over the video, an arrow flashes, and a finger icon points to the place to press.

Both intentions are good, but they collide on the same screen. The flashing arrow breaks the immersion of someone trying to enter the world, while the long video prevents someone eager to press from interacting. Direction that seeks to reveal the world and guidance that seeks to teach controls fight over the same moment. We did not want to diminish either, so we included both, and now neither can do its job. Guidance obstructs the person focusing on the video; the video obstructs the person trying to interact. As the price of overlapping two good things at the same moment, the person receives neither in full.

The same conflict occurs in MEJE Aidong World. The desire to show a warm introduction in which puppy Aidong first appears meets the desire to teach customization immediately on the same first screen. If “Tap here next” interrupts the brief moment when a fan is falling for puppy Aidong, the fan misses Aidong and tunes out the guidance as well. Aidong World therefore decided to hide every guidance element during the first-appearance sequence. Its first lesson—petting—is embedded not in a flashing arrow but in Aidong's gesture of pushing his head toward the fan's finger. When direction itself also serves as guidance, the two intentions no longer fight over the same moment.

Experience Is Not Flat

To resolve this collision, we must first see that experience has more than one layer. The five layers from Chapter 4 now take up the baton. We deferred “directing traffic among the five layers” to Chapter 19, and now we do that work. Several layers of experience overlap on one screen. At the innermost is the world: the worldbuilding, story, characters, and the user's identity and location. Above it is the system: rules, goals, screen structure, and what to do and how. Above that is the sensory layer: imagery, sound, vibration, speed, and what reaches fingertips, eyes, and ears. Above that is the social layer: other people, comparison, sharing, rankings, and where I stand among everyone else. Outermost is the business layer: purchases, advertising, conversion, and the money that keeps the experience running.

These five layers are not spread out flat but overlap, and a single screen speaks through all five at once. An introductory video belongs to the world layer and flashing guidance to the system layer. Their collision was not merely between two good elements; two layers were fighting for the same moment. Once the layers are distinguished, the collision becomes clear. Are world and system competing? Is the sensory layer obscuring the system? Is the social layer entering too early? Is the business layer breaking trust first? When we know which layers are in conflict, we can see what must be delayed.

Where Good Things Collide

Now that we know the layers, let us identify the points where they often collide. This chapter targets conflicts between good elements rather than between good and bad ones, which is why they are hard to resolve.

Story and control compete. Showing the world at length delays the moment when a person can act; letting them act quickly leaves no time to enter the world. Freedom and guidance compete. Open everything and a newcomer is overwhelmed, unsure where to begin; lead them down only one path and they feel constrained. A fast start and world explanation compete. Make people hear the full explanation before starting and they tire before beginning; start without explanation and they do not know where they are. Surprise and understanding compete. Give many new things and the experience feels fresh but difficult; offer only familiar things and it feels comfortable but dull. Comparison and intimidation compete. Introduce comparison early and a brand-new beginner first sees that they rank last. Cinematic appreciation and game input compete. Increase the pleasure of watching and the hands have less to do; increase what the hands do and the spectacle diminishes. Personalization and fairness compete. Tailor the first screen to each person's taste and it fits some better, but treating people differently may look to someone else like discrimination that disadvantages only them (we return to this conflict in Chapters 26 and 27). The appendix C conflict-adjustment table handles the detailed work of diagnosing and tuning these conflicts point by point (→ Appendix C).

One heavier conflict remains: purchases against trust. It differs in weight from the others. The other conflicts ask which side should come first; in this one, one side can break the other. Show places to spend money to someone who does not yet like the experience, and they become conscious of their wallet before receiving any pleasure. If the business layer speaks before the world layer, users feel not like guests but targets. The business layer should therefore remain outermost among the five and speak last.

One Criterion for Setting Priorities

Which of two colliding good things should come first? There is one criterion: what does a newcomer need more urgently to take the next step? A first experience cannot satisfy every layer simultaneously, so put forward the layer that moves the person one step farther at this moment and delay the rest.

Apply this criterion to each conflict and an answer emerges. When story and control compete, control usually moves a newcomer forward, so let them act once first and unfold the world slowly after their hands have moved. What should be delayed, however, is the world's backstory, not its face. Signals of identity that show what kind of place this is must inhabit the screen's expression from the first moment—this belongs to the first thirty seconds discussed in Chapter 21. What moves later is the longer story the world has to tell. When freedom and guidance compete, a newcomer needs guidance more urgently than freedom. Open one path first and let them taste an initial achievement; offer freedom after they have learned the way. When comparison and intimidation compete, delay comparison until people feel that what they own has grown substantially. And when purchases and trust compete, there is no hesitation: trust comes first. Only after a person has come to like the experience enough should the business layer speak carefully.

Here we face the strongest practical objection directly. The argument says marketing costs must be recovered quickly and statistics show that most payers convert early, so the business layer must come first. Yet those statistics can be read in reverse. A product that pushes the payment path early will naturally observe only early payments. “Payments happen early” may not be a fact but the shadow of a structure we created. Only those who paid early after being prompted early remain; those who left because payment was pushed too early are not recorded as payers. We establish a rule by looking only at the survivors. Statistics from such a product cannot tell us what the payment curve would look like for a product that built trust first, until we actually build one that way. “Trust first” is therefore not moralizing but a business argument that bets against a biased sample. Priority is not the order of spectacle, but the order in which a person can take the next step.

The Game Convention of Unfolding Every Menu on the First Screen

Since this chapter deals with collisions, it is time to inspect one game convention: the habit of showing every feature and menu on the first screen and in the tutorial, then marching the user through all of them once. Chapter 16 also targeted “too much at once,” but there the issue was noise in reading. Here it is overload in what must be done.

What does this convention take for granted? Many games have first screens packed with menus: store, inventory, characters, quests, guild, mailbox, events, and settings. The tutorial takes the user's hand and makes them press each menu in turn. This is the store, this is the inventory, and this is the quest screen. The convention had a basis. When gamers launch a new game, they want an overview of the whole. Knowing where every feature is located reassures them, and more menus signal richer content. To gamers, a full first screen is evidence of abundance, and a tutorial that tours the whole is considerate guidance.

Newcomers do not share that premise. To them, a dense menu means not abundance but bewilderment. Faced with a screen that does not say where to begin, more options slow decisions and weigh down the mind. A tutorial that tours everything is harsher still. Show someone eight menus in sequence before they like anything, and they cannot even remember what they saw. Someone who drifted in while swiping through short-form videos tires of the dense screen before pressing one menu. Someone who came from watching dramas expected the next piece of story, but a menu tour begins instead, making them feel they took a wrong turn. Gamers read a full first screen as “abundance”; newcomers read it as “information overload.” The same screen reassures one side and overwhelms the other.

The price this convention charges ordinary people is overloaded attention and getting lost. Put every function from every layer on one screen and the user is crushed by all five layers speaking at once. A tutorial that tours the whole consumes all their time and attention without leaving even one initial achievement. Preserve the substance and redesign the shell. Instead of unfolding every menu on the first screen, leave only what is needed for the next step and hide the rest. Instead of taking a complete tour, let the user perform one core action first and reveal the remaining features one by one at the moments they become necessary. The familiarity to borrow is the simple first screen people already know from other apps; what we newly offer is depth that opens appropriately when needed. An overview of everything can wait until the user has settled into the world and begun to enjoy managing it. Showing less is not laziness. It is the fastest path to the next step.

▶ Three Things to Apply to Your Screen

Are good things colliding at the same moment on our first screen? Are direction, guidance, and rewards all appearing at once?

Have we chosen one protagonist for this screen and this moment, or allowed everyone to speak at once?

Have we released the overlapping layers over time instead of piling them onto one screen? If good things collide, first give them separate turns. If that still fails, merge them into one action or remove one from this first experience.

Therefore, Put Only One Protagonist on Each Screen

Once we see experience as five layers, the order of designing the first screen changes. Instead of asking whether to put every good thing on it, first decide which layer is the protagonist at this moment. One layer is the protagonist of one screen and one moment. When it is time to present the world, the world is the protagonist and guidance stays quiet. When it is time to teach controls, the system is the protagonist and direction withdraws. Once the protagonist is chosen, the other layers quietly step aside for that moment rather than speaking together. We are not removing good things, but giving each one its turn. Making something simple does not mean making less; it means letting things speak one at a time.

Separating turns through delay is the basic skill, but it is not the only tool for resolving collisions. There are three rungs on the ladder. The first is delaying: give two layers different moments and let them speak one at a time, this chapter's basic prescription. The second is merging: an advanced technique that combines two layers inside a single action. The prologue of The Last of Us merges direction that depicts the world's collapse with learning how to examine things by letting the player touch objects in a young daughter's bedroom. Mario's first screen teaches the world's rules and jumping controls at once through a single Goomba. When done well, merging removes the need to delay, but refining one action until it performs the work of two layers takes substantial effort and cannot be used everywhere. The third is removing: omit the layer itself from this first experience. If delaying does not solve the conflict and there is neither skill nor time to merge, move that layer outside the first experience and let it appear in the main experience. Social rankings and the business-layer store are common candidates for this third rung. Delay, merge, and if that still fails, remove. Apply those three in order and every collision yields at least one exit.

Whether the traffic has been directed ultimately appears in the numbers. We can tell whether collisions were resolved by whether people stop or move forward on the first screen. If the screen is busy but people hesitate for a long time and then leave, several layers may have spoken simultaneously and brought them to a halt. Observing which screen prevents the next action reveals the collision that held people there. Place a blocked screen beside the number of things it says at once, and we can see where we spoke too much.

A “thing said simultaneously” is counted as one instruction that asks the user to perform a different action, one attention signal that asks them to look at a different target, or one question that asks for a different judgment. Sound, color, and vibration that reinforce the same action are expressions of one statement, so do not count them again.

Reference Content

Examples from other media that reveal the concepts in this chapter.

Video Games

The prologue of The Last of Us: Rather than the hardened Joel, the player first controls his young daughter Sarah, seeing the world's collapse through a vulnerable person's eyes. Touching the bedroom mirror, telephone, and birthday card teaches examining controls without a separate guidance pop-up. This merges the world and system layers within one action instead of overlapping them at the same moment.
Super Mario Bros., World 1-1: On the first screen, movement, jumping, and item collection are taught one at a time and in sequence without a single word. The first enemy is a Goomba so the player first learns to stomp, placing only one function at a time. Instead of unfolding every menu, it shows only the one thing needed for the current step.
Diablo Immortal: Although free to start, its monetization structure comes to the foreground early. It is often cited as a case in which user ratings hit bottom soon after launch and the business layer spoke before enjoyment. Making people conscious of their wallet before they even like the experience is a counterexample that makes guests feel like targets.

Animated Film

Staging in Disney's twelve principles of animation: A scene is composed to show the audience only one idea at a time. When several actions happen simultaneously, the eye does not know where to look and misses the point. Contrast directs attention to a single protagonist: the still object in a busy scene or the moving object in a quiet one.

The remaining reference content is collected in the “Chapter 19 Appendix” at the end of this chapter (grouped as Appendix D in the book edition).

Design Note ▶ Try It Yourself

Open one of our first screens and sort everything on it into five layers: world, system, sensory, social, and business. If all five appear on one screen, choose the one that should be the protagonist at this moment. Mark every element in the other layers that obscures or obstructs that protagonist, then ask whether it can be delayed to the next moment.

Next, count how many menus and features our first screen or tutorial shows the user at once. Leave only the one truly needed for the first step and cross out the rest. Beside each crossed-out item, write the moment when the user will need that feature, then delay its appearance until then. Finally, check whether any business-layer element appears on the first screen. If it does, ask whether it can wait until after the moment when the person comes to like this experience. The detailed work of diagnosing the five layers by conflict and setting priorities continues in the Appendix C conflict-adjustment table (→ Appendix C).

Once a screen is arranged so that only one layer speaks at a time, good things no longer obscure one another.

In One Line: The belief that including every good element creates a good experience causes collisions. Experience consists of five overlapping layers—world, system, sensory, social, and business—and good things collide when one screen speaks through all five at once. Set priorities not by the order of spectacle but by the order in which a person can take the next step, and let the business layer speak last so it does not break trust. A dense first screen and a tutorial that tours everything signal abundance to gamers but information overload to newcomers. Put only one protagonist on each screen and reveal the rest one by one when needed. Next Chapter: Once the collisions on a screen have been organized into five layers, a larger question remains. Where does the first experience begin, and where does it end? Does our responsibility start with the first ad, or the first launch? And what must the user accomplish before we can say the first experience is over? The next chapter of Part IV brings the scattered pieces of the first experience into one scope and declares its starting and ending points in a single sentence.

Chapter 19 Appendix: Reference Content Collection

These examples show how collisions between good elements are directed outside games: by appointing only one protagonist for one screen and one moment, then delaying the rest, merging them into one action, or removing them from the current first experience. They span not only video games and apps but also film, broadcasting, music, comics, theater, consumer devices, and offline spaces. Each item ends with a “What to examine” note. Read by identifying which of the five layers—world, system, sensory, social, and business—are in conflict, and whether the conflict was resolved through delaying, merging, or removing. Stories from other media then become tools for repairing our first screen.

Video Games

Half-Life 2 (Valve, 2004): Rather than taking control away in cutscenes, it leaves the screen in the player's hands and maintains a first-person view from beginning to end as the story unfolds. New tools such as the Gravity Gun are learned naturally by playing catch with the robot Dog rather than through a separate lecture. World explanation and control learning continue in one uninterrupted flow. What to examine: This resolves conflict between world and system through merging rather than delay. Find where one action does the work of two layers at once, then consider which guidance on our screen could merge into direction.
Portal (Valve, 2007): Whenever a new mechanic appears, it provides one clean test chamber with every other element removed and locks the path forward until that concept is understood, handling only one concept in each room. Rather than unfolding everything on the first screen, it reveals things one by one when they become necessary. What to examine: The structure enforces one protagonist per screen at the spatial level. Ask whether our first experience contains a stage equivalent to “a room with everything removed except one concept.”
The opening Great Plateau of The Legend of Zelda: Breath of the Wild (Nintendo, 2017): Before entering the vast main game, the player stays on an isolated plateau and learns one ability in each shrine rather than seeing every menu. Only one layer becomes the protagonist at a time. What to examine: It compromises between freedom and guidance through “freedom within a narrowed area.” Read it as a middle solution that prevents overload without delaying everything.
The first level of Candy Crush Saga (King, 2012): Instead of a dense menu, it first asks the player to perform only one action—matching three of the same color. Features such as boosters appear one by one in the levels where they become necessary. What to examine: This is a classic delay that spreads feature disclosure across the timeline of level progression. Count how many of our menus are truly needed in the first round.

App UX

Duolingo's first-use flow: It does not place account registration first. The user tries a short lesson, and only when they want to save progress does it suggest signing up. Industry discussions often cite this delayed registration requirement as reducing drop-off. What to examine: This is an example of making the business and registration layer speak last. Compare whether sign-up, payment, or permission requests on our first screen arrive before trust.
Google's first search screen: In the late 1990s, when portals packed their first screens with news, weather, stocks, and directories, Google began with only a logo and a search box. That emptiness became its identity, and the skeleton remains today. What to examine: This applies removal to the entire first screen. Read the composition as every other function withdrawing behind the screen for one protagonist: search.

Live-Action Film

Film mise-en-scène: Even when a frame contains light, people, and background, composition, lighting, and focus gather the eye around one protagonist. What to examine: This proves hierarchy alone can appoint a protagonist without removing elements. Ask whether the size, color, and movement on our screen point to the protagonist of this moment.
Over-expository dialogue that crowds information into one scene: Several good pieces of setting are spoon-fed simultaneously, collide, and leave none of them memorable. What to examine: This is the film version of the proposition that collisions occur not between bad elements but between good ones. Count how many things one piece of our guidance tries to say at once.

Animated Film

The opening of WALL-E (Pixar, 2008): For roughly the first thirty minutes, it nearly empties the film of dialogue and shows only a devastated Earth and one cleaning robot. The world layer speaks alone before the other layers interfere. It creates immersion by appointing only one layer as protagonist at a time. What to examine: This is an extreme delay that gives one layer an uninterrupted block of time. Ask whether our first experience gives the world layer even a few seconds to speak alone.

Live-Action TV / Drama

News lower thirds and breaking-news tickers: Scrolling tickers at the bottom of the screen have been criticized for pushing in too much information at once and creating overload. CNN removed its scrolling ticker in 2008 and replaced it with a static caption that changed one sentence at a time, then returned to a ticker in 2013; MSNBC also removed its lower ticker in 2018. What to examine: The same broadcasters moved between showing everything and showing only one thing. Traffic direction is not a single decision but a conflict that requires continued management.

Music

Frequency masking and EQ cleanup in mixing: When instruments overlap in the same frequency range, good sounds obscure one another and become muddy. A subtractive EQ cuts overlapping bands, or the arrangement moves an instrument by an octave to create space in advance. The other sounds are cleared away so one can lead in a passage. What to examine: Good sounds obscuring one another is the same phenomenon as this chapter's definition of collision. Consider which element on our screen needs the equivalent of “subtractive EQ.”
Arrangements that clear the accompaniment for a vocal: The other instruments briefly quiet down for the one layer that should be heard most. What to examine: The protagonist changes within a song second by second. Ask whether the other elements on our screen truly withdraw when its protagonist changes.

Comics / Comic Books

Panel divisions and eye guidance on one page: Several events occupy one page, but one large panel determines the visual protagonist, while panel size and placement guide reading order. What to examine: This technique creates sequence while showing things simultaneously, suggesting that spatial hierarchy can imitate a time difference.
Overcrowded panels in which sound effects, speech balloons, and backgrounds cover the art: Trying to show everything causes collisions that hide the important picture. What to examine: This is a collision in which the sensory layer obscures the world layer. Ask whether our effects and notifications cover what should actually be seen.

Theater / Stage

Follow spots and blocking on stage: Even with several actors present, the follow spot tracks only the designated performer. When two actors cross, the lights change direction to illuminate the respective characters. Placing a performer at downstage center, close to the audience, gathers attention on the one person who should be watched now. What to examine: Lighting the protagonist and leaving the surroundings dark form one action. Emphasis is completed not by addition but by subtracting the surroundings.
The stage convention that supporting actors step aside when the lead speaks: One person is the protagonist at a given moment, and the rest withdraw. What to examine: A protagonist exists only when those stepping aside follow a discipline. Ask whether the supporting elements on our screen have a defined “promise to withdraw.”

Devices / Consumer-Electronics UX

Automotive infotainment and the return of physical buttons: As every function was placed on one large touchscreen, criticism grew that drivers had to stare at the screen too long for one action and became distracted. Beginning with its 2026 assessment criteria, Euro NCAP reduces scores when core functions such as turn signals, hazard lights, the horn, and windshield wipers lack physical controls, making the highest rating harder to receive. What to examine: Safety is evaluated partly by whether one urgent action is directly within reach. Check whether the “one urgent action” on our screen is buried several menu levels deep.
Devices that sound every warning and notification at once: Sending every signal simultaneously makes the truly urgent one impossible to hear. What to examine: This counterexample shows that notifications also need a hierarchy of protagonist and supporting roles. Ask whether our notifications all sound at once at the same intensity.

Offline / Everyday Life

IKEA's one-way store path: The whole store is arranged as one path that leads newcomers through showrooms in a fixed order, with occasional shortcut doors instead of forks. With no route to deliberate over, displays enter view in sequence. What to examine: The design tilts the conflict between freedom and guidance heavily toward guidance. Also observe the other side: the same route can frustrate regulars who already know it.
The London Underground map: In 1933, Harry Beck discarded real geographic distances and curves and redrew the system as a diagram using straight lines, 45-degree angles, and even station spacing. When two kinds of good information—geographic fact and transfer information—competed, he removed one. What to examine: Removal does not mean damaging information. It means surrendering other good information to answer the current question: “Where do I transfer?”
The “one slide, one message” principle in presentations: Widely recommended in presentation design, it teaches that if a slide contains several points, audiences cannot listen while reading. Leave one message on each slide and move the rest to the next. What to examine: Reading and listening compete for the same attention in a collision of the sensory layer. Apply it directly to our tutorials when screen and voice speak simultaneously.
White-cube museum exhibitions: White walls are left empty and works are spaced apart so that only one work enters the field of view of a visitor standing before it. What to examine: Empty space is not decoration but a device for appointing the protagonist. Ask for which protagonist the empty space on our screen has been cleared.