Designing a 10ft UI

Designing a television user interface is like nothing else and demands another mind set. To start off, your users are in a lean back experience and in a passive mind set. They are are sitting 10 feet away and need a UI that reflects this. The interactions on a television are done via d-pad which bring in a new challenge when comparing to touch devices and websites.

Safe Zone

Most consumer TV sets use a process called overscan, which cuts off a portion of the outer edges of the picture, allowing the centre of the picture to be enlarged. The amount of overscan is not consistent across TVs, so to ensure that titles and important actions fit within the area that most TVs display, keep text within the safe title margins and all other important elements within the safe action margins.

The industry has not defined a current set “standard” for safe action areas. The zone will vary between 85 and 95% of a television screen. We’ve collectively decided, at You.i, that our safe zone would be 85% and that all our designs need to fit within this area in order to accommodate all tv screens and meet every platform requirements.

Flicker

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 transferring your designs from touch devices (mobile and tablet), where we can often find ourselves creating 1 pixels border buttons, to television.

Colours

The first element to keep in mind is that televisions have a much higher gamma value than desktop, tablet and handset devices meaning that pure white surfaces might be too bright, especially in a dark room. Avoid over-using saturated colors (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.

Font size

The average distance between a TV and it’s viewers is 3 meters (10ft). Contrary to other devices such as mobile and desktop, television is set to be more of a lean back and relax environment. 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. As a general rule of thumb, your chosen font sizes should never be lower than 24 pts. This is what we consider the minimum font size to accommodate every type of user.

General Principles

These designs should be used to guide your designs as a whole. The biggest considerations for the 10-foot UI 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.

Focus and Selection

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 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.

Our challenge

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!