Rethinking TV Platform User Interface Design

Television design has become part of a continuum of devices that require a rethinking of how we approach user interfaces and user experiences.

An Overview of the Basic Elements of a TV User Interface

Despite the shift away from paid television, the majority of consumers have not given up on the television screen as a means of consuming content. According to Nielsen data on the viewing habits of U.S. adults, an astounding 92% of all content viewing still takes place on the TV screen. This is a remarkable statistic that speaks to the enduring popularity of the traditional television viewing experience.

Over 92% of adult viewing in the United States is still done on television.

The concept of “watching television” has undergone a dramatic transformation in recent years. Rather than being restricted to using a remote and cable box, people now have access to a range of options for viewing content on their screens. This includes Smart TVs, streaming devices such as Roku, Amazon Fire and Apple TV, and even video game consoles like Xbox and Playstation. Each of these methods of viewing provide users with a far more sophisticated user interface than the standard on-screen guides offered in the past.

A recent Nielsen study found that 26% of global online respondents pay to watch broadcast or VOD programming through subscription-based online services such as Hulu, Netflix, or Amazon. This figure indicates that a substantial portion of the population is utilising these services. However, the same study also revealed that 72% of respondents are still opting to pay for their content through traditional TV connections.

Is it safe to assume that the traditional TV connection is here to stay?

It appears that an increasing number of individuals in the United States are opting to cut their cable cords and are instead choosing to watch their favourite programs through services like Netflix, Amazon Prime Video, and Hulu. According to Nielsen, an estimated 116.4 million households in the United States were expected to watch television during the 2015-16 season, with approximately 9.5 million of those households having switched to over-the-air (OTA) television. Netflix is reportedly the most popular streaming service, with 60.7% of viewers using this platform, followed by Amazon Prime Video (49.4%) and Hulu (26%). One of the primary motivations behind this shift appears to be the fact that consumers are now more inclined to pay only for the services that they use.

In comparison to computers and mobile phones, user interface design for televisions is a novel area of development. The process of designing for television brings with it a set of unique considerations, such as the physical size of the screen, the distance between the viewer and the screen, and the context in which the user interface will be used. Generally, television users are in a “lean back” state, sitting an average of 10 feet away from the screen, and the user interface must take this into account. This differs from touchscreen tablets and phones, which are interacted with via a D-pad (directional control pad) and a remote or video game controller, further complicating the design process.

The Showcase

Televisions are not the same as tablets and smartphones.

Televisions have undergone a dramatic transformation over the years, going from a large, bulky piece of furniture to a sleek, modern display that can be mounted on a wall. In the past, CRT televisions were notorious for producing inconsistent images, particularly near the edges of the screen. To combat this issue, the technique of overscan was employed, resulting in a slightly enlarged image so that none of the edges were cut off outside of the viewing area.

Traditionally, broadcasters have sought to prevent any critical information from being displayed too close to the edges of the screen, as this could potentially cause distortion. As a result, they created two distinct areas known as the title safe area and the action safe area. The title safe area was designed for text to be displayed without distortion, while the action safe area allowed for images to be safely displayed.

Overscan remains an issue, and we are unable to influence the situation. This phenomenon occurs on modern high-definition televisions, although the degree of overscan varies between models. To guarantee that all essential elements, such as titles and significant actions, remain visible, it is important to keep them within the safe margins of the screen.

At present, there is no definitive “standard” for safe action areas, as it largely depends on the platform itself. For example, Google generally keeps its safe area small, while Apple’s is slightly larger. Through my research, I have determined that these zones typically fall between 85%-95% of a television screen’s width from the centre. To ensure that all platforms are accommodated and requirements are met, I would suggest adhering to a safe zone of 60px for the top and bottom margins, and 90px for the side margins. This will ensure that all primary information is contained within the designated area and visible on all television screens.

Create a new 1920×1080 canvas to commence your television user interface design. Ensure that a safe zone of 90 pixels is present on the left and right sides and 60 pixels on the top and bottom of the canvas. To acquire a free file download, please click on the provided link.

Navigation

The influence of up-down-left-right on TV interfaces.

As designers, the hardware that we create with will shape some of our design patterns. On mobile devices, actions such as swiping, tapping, long pressing, and pulling are utilised. Tabs and menus are employed as the main navigational components. When creating user interfaces for television, it is essential to be careful in order to prevent complexity. Having long rows of content to make the maximum amount of content visible to users has become an established feature of television user interfaces.

Unlike mobile devices, which are typically navigated and operated with finger gestures, the majority of television user interfaces are designed to be operated with a directional pad, or D-pad, from a distance. The D-pad, which appears on both remote controls and gaming controllers, allows users to move in four directions: up, down, left, and right.

Every gaming platform has its own set of conventions and rules. For instance, on Xbox consoles, the triggers are used to navigate between pages with the “Page Up” and “Page Down” functions, while the bumpers are used to toggle between content views. Additionally, more experienced gamers will recognise the additional “power user” buttons associated with each platform.

The focus state is an essential element of television user interfaces (TV UIs). As users cannot touch the screen or use a mouse to select the element they want, they must be able to navigate to it. Therefore, UI elements should be highlighted as the user moves through the application, indicating that a navigation element is in focus. This will ensure that the user is aware of which element is currently in the focus state.

When designing for television, the focus state and highlight state are essential components to consider. The focus state is the element that highlights a selectable component and indicates the user’s current location on the screen. Although the form of the focus may vary, it is important to remain consistent with its design. It should be clear and visible to the user, enabling them to easily identify their current on-screen location and navigate with ease. When the user looks away from the TV for a moment and then returns to the screen, it should be obvious which navigation option is currently selected. Furthermore, the cursor should be able to reach every item on the screen, and the user should always be aware of where the cursor can move next.

Designs that lack clear visual indicators of focus state can lead to confusion for users, making it difficult for them to understand where they are in the application. This can be especially problematic if users need to look away from the screen or navigate up or down in order to determine their current position. To ensure a positive user experience, it is essential that the design of the application provides sufficient visual cues that enable users to quickly recognise their current position without having to take additional steps.

Typography

Reading from a distance of ten feet.

Television applications are often referred to as “ten-foot experiences”, in reference to the typical distance between the viewer and their television set. Compared to other devices such as mobile phones and desktop computers, television is designed to be an environment in which the user can relax and unwind. Due to this distance, we must consider user interfaces differently than what we would typically use on the web or on mobile devices.

Television screens are usually larger than those of mobile phones and desktop computer monitors, but they are typically viewed from a greater distance. Therefore, legibility is an important factor when it comes to designing the size of text and other elements. As a general rule of thumb, the minimum font size recommended to ensure that all users can read the text should be 24 points. Depending on the age of the viewers, 18 points may be the smallest readable size, but this should only be used for non-essential labels, such as a browser tab.

Regular testing is essential to ensure optimal readability of typography when displayed on television. If the type is too thin or small when displayed on a computer monitor, it may appear crisp and clear, but on a television screen, it can appear blown out or difficult to read.

Lines of Scan

What exactly are scan lines?

In contrast to desktop, mobile, and tablet displays, television screens are composed of alternating odd and even scan lines. These scan lines are projected in alternating phases, which can cause an element that falls on a single scan line to flicker. As such, it is important to keep in mind that when transferring designs from touch devices (mobile and tablet) to television, any lines should be kept to even numbers and no thinner than 2 pixels in order to avoid flickering. This is especially pertinent for any designs involving 1px border buttons.

It is essential to guarantee that designs are pixel perfect to avoid any fuzzy lines or shapes. A great example of a line made with uneven numbers can be seen below, where the effects are unmistakably clear and aesthetically jarring.

Colour

TV displays have their limitations.

It is essential to keep in mind that televisions have a significantly higher gamma value than desktop, tablet, and smartphone devices. Gamma is a measure of the level of luminance difference between each step on the grayscale, or how quickly the dark shades become lighter. Our vision perceives twice the luminosity to be only slightly brighter. When it comes to brightness, contrast, and other settings, there is a wide variation between different brands and models of televisions. In order to obtain the best results, it is advisable to test the colours and types on the TV at the beginning of the process and regularly afterwards.

When selecting colours for your project, it is important to take into consideration the environment in which it will be viewed. When watching television in a dark room, select colours that are not too bright, as this can be irritating to the eyes. Additionally, avoid using too many saturated colours, especially red, as well as too much white in large elements or backgrounds, as this can create halo effects and other visual distractions. For whites, it is recommended to use the hex value #f1f1f1 in order to avoid flickering. Furthermore, make sure to provide enough contrast between elements to increase readability.

Generally, it is recommended to avoid creating a stark contrast between colours that differ greatly in tone and brightness, particularly between bright colours and dark colours. Additionally, it is advisable to avoid the use of highly saturated colours such as strongly saturated reds and yellows, as these colours have a tendency to bleed more easily than colours with less saturation or cooler colours such as blues and greens.

It is recommended that you always test your colour choices on an actual television to gain a better understanding of how they appear on a larger display. Whenever possible, it is advisable to test your application on multiple televisions since the colours may differ significantly across different models. To do this, simply connect the HDMI cable from your television and run the tests.

The Fundamentals

Consider the minor details.

When designing a television user interface, it is critical to take into account several key elements. To ensure an optimal user experience, one should prioritise simplicity and a streamlined interaction. Keeping the design succinct and straightforward will help to maximise user satisfaction.

Despite the fact that the fundamentals and best practices for interaction design remain relevant, the way in which people interact with televisions is generally more relaxed than the way they interact with computers or mobile devices. Consequently, the user interface of a television should be uncluttered, straightforward, and visually appealing. The design ought to be uncomplicated and clear, with low information density. The elements should be large and spaced out adequately so that they can be read from a distance. Additionally, each screen should have its own specific set of actions or options.

This design is uncluttered and neat, featuring prominently-sized cards with focus states achieved by employing scaling and drop shadows that are in line with the overall clean aesthetic. Metadata is only visible when the user hovers over the card, thus allowing them to focus solely on the card they are currently viewing.

It is essential to ensure that the most crucial content or options are located at the top of the screen, making it easy for the user to locate and access them. To improve the user experience, any unnecessary levels of the screen should be eliminated. Furthermore, it is important to make it straightforward and apparent to navigate in and out of the various levels.

When creating a television application, it is essential to ensure that the navigation is both clear and precise. Doing so will grant users an effortless experience, preventing any confusion or uncertainty during their operation.

Users should always be mindful of their current location within an application and be equipped with the necessary knowledge to use basic navigation controls such as Move, Return, and Enter. It is essential that these fundamental navigation functions are obvious and straightforward, enabling users to perform the operations they desire with ease.

As designers, our ultimate goal is to create user interfaces that are intuitive and straightforward, allowing users to access content with ease. We must acknowledge that users are not likely to alter their behaviour to view our content, and instead, we should tailor our user interfaces to accommodate those with limited resources, such as those using a device with limited input capabilities in low-light conditions. It may be challenging, but the potential benefits of our efforts are extraordinary. Enjoy designing!

Join the Top 1% of Remote Developers and Designers

Works connects the top 1% of remote developers and designers with the leading brands and startups around the world. We focus on sophisticated, challenging tier-one projects which require highly skilled talent and problem solvers.
seasoned project manager reviewing remote software engineer's progress on software development project, hired from Works blog.join_marketplace.your_wayexperienced remote UI / UX designer working remotely at home while working on UI / UX & product design projects on Works blog.join_marketplace.freelance_jobs