Skip to contentHome

Designing for Split Attention: Two Screens, One Story

The user holds a phone and watches a large screen playing a narrative. They can look at one or the other. Every pixel on the phone competes directly with whatever is happening on the big screen. That constraint rewrites almost every assumption I had about interface design.

This isn't responsive design, where one layout adapts to different sizes. Split-attention design means two layouts need to work in concert while fighting for the same pair of eyes. Here's what I'm learning.

Audio is the cross-device bridge

Vision is exclusive. You look at the TV or you look at the phone. You cannot do both. But hearing works differently. Sound reaches you regardless of where your eyes are pointed.

This makes audio the only reliable channel for directing attention between screens. I'm designing around audio cues as the primary signaling mechanism, not visual ones. A short chime on the phone means "look down now." A tonal shift in the big-screen audio means "your phone doesn't need you for a moment."

The sound design has to register without being consciously processed. I'm working with two tonal families: warm, rounded tones for "come to the phone" and sharper, higher tones for "something just changed." The goal is Pavlovian. After a few minutes, users respond to the cue before they've consciously identified it.

This reframes the hierarchy. In most product design, visual layout is the primary attention tool. Here, sound design is. The phone's UI exists to reward you once you've already looked down, not to pull your gaze there in the first place.

The 3-second glance constraint

Once the user looks at the phone, I'm designing for a 2-3 second glance. Any longer and they lose the thread of whatever is playing on the big screen.

Three seconds changes everything about the interface. Text-heavy UI is out. Scrolling during critical moments is out. Anything that requires reading, parsing, and then acting won't survive the constraint.

What works:

  • Touch targets at 64px minimum. Standard 44px targets require aiming. At 64px, you can tap with peripheral vision doing most of the work.
  • Binary choices only. During time-sensitive moments, the phone presents at most two options. Two large regions, left or right, each with a single clear label.
  • Haptic confirmation over visual feedback. When the user taps, a strong haptic pulse confirms the action. They feel the confirmation while their eyes are already traveling back to the big screen. Two short pulses for success, one long pulse for "try again."

I'm also staggering the phone's interactive moments so they never overlap with narrative peaks on the big screen. The content itself has to be authored with these windows in mind. The phone goes quiet during climactic scenes and becomes active during natural pauses.

Absorbing latency without breaking immersion

The two devices connect over a network. They will drift. Bluetooth, Wi-Fi, cellular: there is always latency, and it is never consistent.

The conventional solution is a loading spinner or a "syncing" indicator. But in a narrative experience, any visible loading state shatters immersion. You cannot show a spinner in the middle of a story beat.

So the design has to absorb latency invisibly. I'm building this around "designed pauses": moments in the narrative that are slightly elastic. A held shot that can stretch by 500ms. An ambient sound loop that extends naturally. A slow camera push that looks intentional whether it lasts 3 seconds or 4.

On the phone side, I'm buffering the next interactive moment ahead of time and holding it locally until the trigger. The phone already knows what it needs to show. It's just waiting for the signal. If the signal arrives 200ms late, the user never notices because the narrative absorbed that gap upstream.

Timeline:    [big screen narrative]---[pause]---[narrative continues]
Phone sync:  ............[buffered]---[show]---[confirm]---[idle]...
Latency gap:              ^ absorbed here, invisible to user

The hardest edge case is recovery after a long drift. If someone's phone loses connection for 10 seconds, the experience re-syncs without a jarring jump: the phone skips non-critical interactions and rejoins at the next natural sync point rather than trying to replay everything it missed.

These patterns are going to matter

None of this is proven yet. I'm designing around these constraints, testing with prototypes, adjusting when things feel wrong. The 3-second glance number came from watching people use early builds, not from a published study. The audio cue families are on their third revision.

But the problem is getting wider. As interfaces spread across watches, car dashboards, and ambient displays, split-attention design will stop being a niche scenario. The phone-plus-TV setup is just an early, clear version of it.

The principles that keep holding up: use non-visual channels to direct attention. Design for glances, not sessions. Absorb infrastructure failures into the content layer rather than surfacing them as UI states. Start with those three and the rest tends to follow.