Re-Thinking User Interface Design for the TV Platform

Designing a television user interface is like nothing else and demands another mind set.

This is an updated article that was written in April 2016. There have been many television design blogs and articles written over the years and felt it was time to beef up this one. Molly Lafferty from This Also has done a great job on the pursuit of television UI/UX by going even further. She has a great three-part series on designing and prototyping for TVs and gamepads.

A huge majority of consumers these days are cutting the cord with paid TV but this does mean they have shied away from the big screen to consume their content. According to a data release by Nielsen, the viewing habits of U.S. adults found that 92% of all viewing still takes place on the TV screen. These are pretty huge numbers.

Over 92% of viewing among U.S. adults still happens on the TV screen

The meaning of “watching TV” has changed a great deal over the past few decades. The days of using a remote and a cable box have been replaced by Smart TVs, or streaming using pucks like Roku, Amazon Fire and Apple TV, Xbox and Playstation. With these new products comes a new more powerful user interface.

Paying to watch broadcast or VOD programming via subscription based online-services such as Hulu, Netflix or Amazon represents 26% of global online respondents (Nielsen). This is a significant number. However, 72% of the respondents confirmed they still pay to watch their content via a traditional TV connection.

Does this mean that traditional TV connection is here to stay?

We all seem to think that the cord-cutters out there would represent a higher number. Nielsen reports that 116.4 million homes in the US were expected to watch TV during the 2015–16 season. This is a huge number and the report also found that about 9.5 million of those homes have switched over to free OTA TV. Of all the streaming services out there, Netflix (60.7%) seems to be ahead of the game followed by Amazon Prime Video (49.4%) and by Hulu (26%). I believe one of the biggest reasons people are cutting the cord is that we only want to pay for what we use.

When compared to computers and even mobile phones, designing UIs for TV is still a relatively new area. It’s also a fundamentally different platform and the way we consume our content is different. Design for TV requires a unique set of considerations, including screen size and viewer distance, technical constraints, and context of use. Users are in a “lean back” experience, sitting an average of 10 feet away and the user interface and experience need to reflect this. Contrary to touch-screen tablets and phones, the interactions on a televisions are done via d-dap (directional control pad) using a remote or a video game controller which ads to the complexity.

The Screen

TVs have changed a lot overtime from a huge clunky piece of furniture to a sleek minimalist display hanging on a wall. Back when televisions would take up the entire living room, they used a technology which produced inconsistent images across TV sets, especially close to the edges. To compensate for these issues, CRT TVs were subject to overscan. This just means that the images were slightly enlarged so the edges were not outside the bounds of the viewing area.

Traditionally, broadcasters anticipated this and wanted to avoid any of their critical information being shown too close to the edges of the screen. To solve this issue, they created a title safe area to display the text with no distortion and an action safe area where the image could be safely displayed.

For reasons out of our control, overscan is still a thing… even on your new HDTVs. The amount of overscan is not consistent across TVs. To ensure that all of your primary information such as titles and important actions are safe, keep them inside the safe margins.

There is currently not a set “standard” for safe action areas and is mostly defined by the platform itself. Google keeps their safe area narrow and Apple’s is a little more generous. From my many searches on the web, these zones will vary between 85 and 95% of a television screen from the center. In order to meet the requirements from all different platforms you might be working on, I would suggest using a safe zone of 60px top and bottom margins and 90px side margins. This means that all of your primary information will need to fit within this area in order to accommodate all tv screens and meet every platform requirements.

To start off your new television user interface design, create a new 1920 x 1080 canvas. Your padding (Safe zone) should be 90 pixels on the sides (left and right) as well as 60 pixels for top and bottom. You can get your free file download here.

Navigation

As a designer, the hardware we design against will define some of our design patterns. On mobile, we swipe, tap, long press, pull… to perform actions. Tabs and menus are used as navigation patterns on our devices. Television offers a great big canvas which can easily become overly complex if not done right. Seeing long rows of content in order to maximizes the amount of it visible to the users has become a standard element of television UIs.

Unlike mobile devices which we control with our fingers, the majority of TV UIs are controlled by a D-pad and used at a distance from the screen. Whether on a remote or a gamepad, the D-pad limits navigation to four direction: up, down, left and right. For core functionality, it’s best to stick with the standard button conventions.

The other critical element in TV UIs is the focus state. Without the ability to touch the screen or use a mouse, users must navigate to the element they want to select. As the user navigates within the app, different UI elements should be highlighted indicating that an navigation element is in focus.

Focus and highlight states when designing for television are very important. That focus state is the element that highlights a selectable component and signifies the user’s current on-screen location. The form in which the focus is displayed may vary, depending on the component however, consistency will always be key. A clear and highly visible focus helps the user to quickly recognize their current on-screen location, and eases navigation. When a user glances away momentarily from the tv and then return their gaze, it should automatically be clear what option is currently selected for navigation. Every item on the screen must be reachable by the cursor, and it should always be clear where the cursor can move next.

Examples of designs which could leave users wondering where they are in the app.

Typography

We often refer to TV apps as 10-ft experiences. Contrary to other devices such as mobile and desktop, television is set to be more of a lean back and relax environment. Because of this distance, the user interface has to be treated differently.

TV screens are generally larger than mobile devices and desktop computer monitors, but are viewed from a greater distance. Legibility becomes an important feature which means that the size of text and other elements must be adjusted accordingly. Depending on your age, 18px would probably be the smallest readable size but this is not something I would recommend. As a general rule of thumb, your chosen font sizes should never be smaller than 24 pts. This is what I would consider the minimum font size to accommodate every type of user.

As a fellow designer, Molly Lafferty explains it is better to always test your designs on a television set and see for yourself.

The key to good typography on TV is to test constantly. Thin, small type on your monitor will look clean and crisp, but once on a TV it may appear blown out or become unintelligible.

Scan Lines

Unlike desktop, mobile and tablet screens, the image on a television screen is composed of odd and even scan lines. The television renders these lines in phases alternating rapidly between odd and even scan lines. Any single pixel (or line of pixels) falling onto a single scan line will flicker. In order to avoid flickering of your items on screen, you should always keep your lines to even numbers and no thinner than 2 pixels. This is something to consider when working on a cross-platform projects and you are about to transfer your designs from touch devices (mobile and tablet), where we can often find ourselves creating 1 pixels border buttons, to television.

Another way to avoid these blurry lines or shapes is to make sure your designs are always pixel perfect. The example below is a good example of lines that are created using uneven numbers. As you can see, we can clearly see the effects of this and it becomes unsettling on the eyes.

Color

The first element to keep in mind is that televisions have a much higher gamma value than desktop, tablet and handset devices. The best way to describe how gamma affects picture quality is that gamma represents the level of brightness difference between each step in the grayscale, or how “fast” blacks get brighter. We perceive twice the light as being only a fraction brighter.

A few guidelines to follow: Avoid over-using saturated colours (especially red) and heavy use of white in large elements or backgrounds. Pure white will create halos and other visual distractions. When choosing whites, it is recommended to pick a #f1f1f1 hex value to avoid any flickering. In order to increase readability by using light text on a dark background.

The general rule is to avoid sharp edges between highly-contrasting colours (especially bright colours next to dark colours), and to avoid ‘hot’ colours such as very saturated reds and yellows. These will bleed more easily than less saturated colours, or cooler colours such as blues and greens.

Always test colors on an actual television to understand how your color choices translate to the big screen. If possible, preview your app on multiple TVs because colors can vary dramatically between television models.

The Basics

These elements should be used to guide your designs as a whole. The biggest considerations when designing your TV UIs are simplicity and lightweight interaction.

The television is used in a more relaxed fashion unlike a computer or mobile device. The UI on a television should be clear, simple and visual. The design requires simplicity and clarity, with low information density. The elements need to be large and spaced far enough apart to be read from a distance. Present a clear set of actions or options for each screen.

Place the most important content or options first on the screen so they are easily viewable and navigable by the user. Unnecessary screen levels must be removed. Going into different levels and getting out again must be easy and obvious.

The most crucial factor when designing a TV application is to include clear and accurate navigation for user operations. If navigation is ambiguous, users will feel confused and insecure.

In short, users should always know exactly where they are within an application. Remember, the user is only using basic controls to navigate. Move, Return, Enter, and other basic navigation functions must be clear. The users should be able to use the operations they want with these actions.

As designers, our job is to create and design user interfaces that give users access to content in a way that’s clear and easy to navigate. We can’t expect the users to adapt new habits just so they can see our content. Rather, we have to adapt our user interfaces so that they can be operated in the dark by somebody who’s giving us less than their full intention, and with a very limited input device. It’s quite a challenge, but the potential payoff is enormous. Have fun designing!