Designing for ten feet away changes everything.

Viewing distance

A phone sits 30cm from the eye. A television sits three metres away. The same 16px label that reads comfortably in your hand becomes illegible across a room, and the information density that feels efficient on a laptop becomes noise. Design at 1920x1080, then check your work from an actual couch.

• Body text at 1920x1080 should not fall below 24px; 28-32px is comfortable.
• Primary headings should sit between 48px and 72px.
• Line length should stay under about 70 characters.
• Avoid light font weights; regular and medium read better at distance.

Remote navigation

There is no cursor. The viewer moves a single focus point around a spatial grid using four directions, confirms with OK and retreats with Back. If a viewer cannot predict where focus will land before they press the key, the interface is broken.

• Every interactive control must have a clear focused state that is visible from three metres away.
• Focus must move predictably using up, down, left and right. No focus jumps that a viewer cannot predict.
• The interface must never rely on hover. Hover may enhance desktop testing but must never carry meaning.
• The currently focused element must be visually obvious: scale, border, elevation and contrast together, not colour alone.
• Avoid requiring long text entry using a remote. Offer QR-code or second-device handoff for anything longer than a short search term.
• Back behaviour must be deterministic: back always returns to the previous logical screen, and back on Home exits or prompts to exit.

Focus states

Focus is the cursor. It must be obvious from across the room, and it must never be communicated by colour alone. Combine a ring, a scale change, elevation and a brighter label.

Content rails

Horizontal rails became the television standard because they map perfectly onto a D-pad: down changes topic, right continues along one. Keep the focused item inside the safe area as the rail scrolls, never flush against the panel edge, and never wrap from the last item back to the first without warning.

Safe areas

Overscan is a legacy of analogue television that still bites: some panels crop the outer edge of the signal, and many apply their own scaling. Keep everything that matters inside a comfortable margin.

• Keep all essential content within a 5% overscan-safe margin (roughly 48px vertical and 96px horizontal on a 1920x1080 design).
• Never place text or focusable controls flush to the panel edge.
• Allow room for the focus ring to grow without clipping at the edges of a rail.

Text entry

Typing an email address on an on-screen keyboard takes upwards of forty remote presses and is where sign-up funnels die. Design so that almost nothing needs typing: browse instead of search, scan a QR code instead of entering credentials, and hand off anything longer than a few characters to a phone.

Performance

A television bought five years ago is still a current device to its owner. Assume modest memory, a weak GPU and an older browser engine. Smoothness of focus movement matters more than any visual flourish.

• Budget for hardware several generations behind a modern phone. Assume limited memory and a weak GPU.
• Lazy load artwork below the fold and inside off-screen rails.
• Prefer opacity and transform animation only; avoid animating layout, filters and shadows.
• Virtualise long rails and grids rather than mounting hundreds of nodes.
• Keep the initial payload small so first paint happens quickly after cold start.
• Release video and image memory when leaving a screen.

Accessibility

Televisions are watched by mixed-ability households in rooms with unpredictable lighting. Good television accessibility is largely the same work as good television design: bigger, clearer, calmer, and never dependent on one sense.

• Large readable text with generous line height.
• High contrast: aim well beyond the 4.5:1 minimum for body copy on TV panels.
• Visible focus at all times, never suppressed.
• Respect prefers-reduced-motion and provide a low-motion setting in the app.
• Semantic structure with meaningful roles and labels.
• Captions and audio descriptions for media where relevant.
• Keyboard navigation should approximate D-pad interaction for browser testing.