UX Encyclopedia

TV & 10-Foot Interface Design (tvOS, Android/Google TV, Fire TV)

Viewers sit ~3 m / 10 feet away, hold a remote with five useful buttons, and are in lean-back mode — often with other people in the room. Every TV design decision derives from distance, D-pad, and shared context.

Try it — on TV, focus is the cursor. Tab into (or click) the TV, then drive the highlight with the arrow keys — or the D-pad buttons — and press Enter/OK to select “Nature docs”. Then switch on the weak focus style, restart, and try to track the highlight from across the room. Left/Right wraps within a shelf; Up/Down keeps your column — the convention tvOS and Android TV users expect.

Continue watching

The Chef
Night City
Space Race
Cook Fast
Late Show

Documentaries

True Crime
History Now
Deep Ocean
Nature docs
Kids Corner

Focus-based navigation (the interaction model)

  • There is no cursor and no touch: a focus highlight moves between elements via D-pad/remote-swipe, and Select activates the focused item. tvOS formalizes this as the focus engine (the system moves focus; apps describe focusable regions); Android TV and Fire TV use the same D-pad model.
  • The focused element must be unmistakable from across the room: scale-up, elevation/shadow, border, or brightness shift — tvOS's signature is scaling plus parallax "lockup" artwork that tilts with the remote's touch surface. Amazon explicitly tells Fire TV devs to replace default browser-style focus (yellow border/blue background) with custom styling.
  • Lay content out on a strict grid so focus moves predictably: every actionable element reachable by D-pad (Fire TV guideline, but true everywhere), no focus traps, no diagonal-only paths, and Back always retreats one level (system back on Android TV must never be hijacked).
  • Never let focus get lost: on screen changes, land focus on the most likely next action; on return, restore prior focus position.

Platform guidelines (all three exist; verify live docs)

  • Apple — HIG, "Designing for tvOS" section of the unified Human Interface Guidelines (developer.apple.com); tvOS 26 adopted the cross-platform Liquid Glass material.
  • Google — TV design guidance at developer.android.com/design/ui/tv (Material 3–based, covers Android TV and Google TV) plus the TV app quality checklist; Google TV's content-first design principles also at tv.withgoogle.com.
  • Amazon — "Design and User Experience Guidelines (Fire TV)" (developer.amazon.com/docs/fire-tv) — focus styling, D-pad reachability, layout, and Alexa voice remote integration.

10-foot legibility (numbers from platform docs — verify current)

  • tvOS type runs enormous by phone standards: Apple's tvOS type scale sets Body at 29 pt (headlines 38+ pt) at 1920×1080. Do not port phone type sizes to TV.
  • Amazon: body text at least 14 sp (~28 px at 1080p, since Fire TV renders 1080p at 2× density). Google's current TV guidance publishes a Material 3 TV type scale and says to "prioritize larger typography"; its legacy Android TV guidance set a 12 sp floor / 18 sp default — treat larger-than-mobile as the rule, exact scale per live docs.
  • High contrast is mandatory at distance; TVs also vary wildly in calibration, so avoid pure white (#FFF glows/blooms on many panels), fine hairlines, and thin light-on-dark type. Dark UI themes dominate TV because bright full-screen white is fatiguing in living rooms — convention, but near-universal.

Overscan & safe areas

  • Some TVs still crop edges (overscan). Keep critical content inside the title-safe zone: Apple HIG — inset 60 pt top/bottom, 80 pt sides (1920×1080); Android TV — 5% margin: 48 dp left/right, 27 dp top/bottom; Fire TV — keep UI out of the outer 5% of every edge (inner 90% is the safe zone). Backgrounds may bleed full-screen; text and controls may not.

Content-forward browsing

  • The dominant IA is shelves/rails: horizontally scrolling rows of artwork grouped by category, stacked vertically — it maps 1:1 onto D-pad axes (left/right within a row, up/down between rows). Artwork does the talking; minimize on-screen text (Google: "minimize text and reading on TV").
  • A hero/billboard area on top for featured content is standard on all three platforms; tvOS adds the Top Shelf (app-supplied featured content above the app row on the home screen).
  • Long rows need peeking partial cards and fast traversal (long-press jump); show focused-item metadata in a fixed detail zone, not per card.

Text input avoidance (design around the keyboard)

  • On-screen grid keyboards driven by D-pad are the worst text input in consumer tech — treat every required keystroke as a design failure.
  • Preferred paths, in rough order: voice search (Siri Remote, Google Assistant, Alexa Voice Remote — all three platforms ship mic-first remotes); phone handoff (tvOS prompts the user's iPhone as a keyboard; platform companion apps do the same); and for sign-in, the activation-code pattern: show a short code and/or QR code on the TV, user authenticates on their phone at a URL. This is standardized as the OAuth 2.0 Device Authorization Grant (RFC 8628) — use it rather than making users type an email and password with a D-pad.
  • If a keyboard is unavoidable: prefill aggressively, show suggestions after 2–3 characters, and support search-as-you-type so users can bail out early.

Autoplay previews, profiles, shared context

  • Autoplay preview etiquette (convention, driven by loud user backlash — Netflix added a global off switch in 2020 after years of complaints): delay before playing (~2+ s of sustained focus), start muted or low-volume, never autoplay on mere focus-pass-through, and provide a setting to disable it entirely.
  • The TV is communal: support profiles (all three platforms have multi-user/profile systems, including kids profiles with PIN-gated exit), pick-a-profile on launch, and per-profile watch history and recommendations. Don't surface one person's private queue to the room — Google's TV guidance explicitly flags privacy on a shared screen.
  • Purchases and account changes on a shared device need PIN/confirmation gates (kids with remotes are a well-documented purchase vector).

Accessibility on TV

  • Screen readers exist on every platform — VoiceOver (tvOS), TalkBack (Android/Google TV), VoiceView (Fire TV): label every focusable element, announce focus changes, and make custom focus visuals accompany (not replace) accessibility focus.
  • Captions are non-negotiable: in the US, the CVAA and FCC rules require closed captions for covered video content and user-customizable caption rendering (size, color, background) — honor system caption settings rather than baking in your own style.
  • Also: audio-description tracks, high-contrast settings, text scaling where offered, and generous focus indicators — a low-vision viewer at 10 feet is the design target, and helping them helps the whole room.

Sources

↑↓ to navigate · Enter to open · Esc to close