Skip to content

Beyond Touchscreens: Designing Great TV Apps

We were honored to present at an invite-only product design and development event in San Francisco last month. Alongside great presentations from Google and YouTube, one of our talented UX leads presented a case study on Gaiam TV – and the considerations involved with bringing a great user experience to the world of TV apps.

In short if you just port your tablet app to TV you will fail. In some ways, TV apps have more in common with the old arcade game Frogger than they do tablet apps.

The presentation is available here on SlideShare, and broken out for the sake of convenience below.

Enjoy.

image

image

After bringing Gaiam TV to iPad and Android we were very familiar with the brand, but had to completely rethink the user interface approach for TV.

image

The remote control constrains the navigation model in the user interface. Up/Down and Left/Right are your primary options.

image

Tablets allow for direct access to any navigation item on the screen with one touch. Not so, with a remote control, where moving across the screen might require multiple touches on a vertical and horizontal grid.

image

One of the ways we over come this challenge is by the use of default selected states. These as  similar to those “you are here” graphics you see on maps at the mall. It is a visual representation of where to begin to navigate.

image

We like to think of navigation for TV apps as similar to the old video game Frogger. Television interfaces navigate on an x/y axis so we approach TV app design with a clear grid in mind.

image

image

Location of core functionality is key. For example, we placed the See All button on the far left as opposed to the far right. This reduces the amount of button clicks with the remote.

image

Complex tasks require simplicity. On this search screen, we let the user focus on search without any other distractions. This makes calling the keyboard to enter data much more simple.

image

An obvious consideration that has to be taken into account is the distance a user is from the interface. Unlike a desktop display or handheld device, a TV can be 10’ away from the viewer.

image

Make prominent graphics large enough to be seen.

image

The right font face is super important. It needs to be sharp enough to be legible from the couch and the colors need to be right to ensure proper hierarchy on the page. Generally serifs work better for smaller, detailed content.

image

Contrast helps make things clear. From this screen it is clear we are in the yoga section and that the style filter at the top is highlighted. The color choice of the section allows Yoga to stand out from other sections. Color reinforces the section header.

image

Every platform is different. Apple TV, Roku, Amazon Fire TV and Comcast Xfinity X1 all vary significantly. Remotes, processing power, and primary user interface conventions all vary.

image

If you are building across platforms, keep in mind important elements that require consistency. These could include naming, colors and section structure.

image

Try to avoid heavy data entry in the user interface. Other than search, we try to keep complicated tasks to nothing more than user name and password entry.

image

Televisions have different color profiles than most computer monitors. Background colors and textures must be considered that avoid color banding or distortion.

image

In summary.