The design of television is now part of a continuum of devices that demand a reconsideration of our approach towards user interfaces and user experiences.
A Summary of the Fundamental Components of a TV User Interface
Even with the shift towards unpaid television, a majority of consumers still prefer using the television screen for consuming content. According to Nielsen data on the viewing habits of American adults outlined on TechCrunch, an astonishing 92% of content viewing is done on the TV screen. This incredible statistic shows the enduring popularity of the traditional television viewing experience.
Television viewing still accounts for more than 92% of adult viewership in the United States.
The traditional concept of “watching television” has undergone a significant transformation in recent times. Instead of being restricted to a cable box and remote control, individuals now have access to a variety 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. All these methods of viewing offer users a more advanced user interface than the basic on-screen guides offered in the past.
Based on a recent Nielsen study, 26% of online respondents worldwide pay for watching broadcast or VOD programming via online services like Hulu, Netflix, or Amazon. This statistic indicates that a significant portion of the population is using these services. However, the same study also found that 72% of respondents still prefer paying for their content through conventional TV connections.
Can we assume that the conventional TV connection is here for the long haul?
In the United States, an increasing number of people are choosing to forego cable and instead view their favourite programmes through services such as Netflix, Amazon Prime Video, and Hulu. Nielsen data suggests that around 116.4 million households in the country were expected to watch television during the 2015-16 season, with 9.5 million households opting for over-the-air television. Netflix is reportedly the most commonly used streaming service, with 60.7% of viewers tuning in, followed by Amazon Prime Video (49.4%) and Hulu (26%). One of the primary drivers of this shift is consumers’ preference to pay only for the services they use.
In comparison with computers and mobile phones, user interface design for televisions is a relatively new area of development. Designing for television requires an understanding of unique factors such as the size of the screen, the distance between the viewer and the screen, and the context in which the user interface will be utilised. Television users are usually in a “lean back” position, sitting nearly ten feet away from the screen, and the user interface should reflect this. This is in contrast to touchscreen tablets and phones, which require interaction through a D-pad (directional control pad) and a remote or video game controller, thereby further complicating the design process.
The Display
TV screens differ from tablets and smartphones.
Over the years, televisions have undergone a significant transformation, evolving from large, cumbersome pieces of furniture to contemporary displays that can be mounted on walls. In the past, CRT televisions were known for producing uneven images, especially towards the edges of the screen. To address this problem, the technique of overscan was utilised, leading to a slightly enlarged image so that none of the edges were cropped outside of the viewing area.
Historically, broadcasters have aimed to avoid displaying essential information too close to the edges of the screen, as this could 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 created for text to be displayed without any distortion, while the action safe area was designed to allow images to be safely displayed.
Although the degree of overscan varies between models, it continues to be a concern that we are unable to control. This phenomenon is present in modern high-definition televisions, and to ensure visibility of all important elements, such as titles and significant actions, they must be kept within the safe margins of the screen.
Currently, there is no absolute “standard” for safe action areas, as it depends largely on the platform in question. For instance, Google generally maintains a small safe area, whereas Apple’s safe area is slightly larger. After conducting research, I have found that these zones usually range between 85%-95% of a television screen’s width from the centre. To guarantee that all platforms are compatible and that requirements are met, I would recommend using a safe zone of 60px for the top and bottom margins, and 90px for the side margins. This will ensure that all essential information is within the designated area and visible on all television screens.
To begin your television user interface design, create a new canvas with dimensions of 1920×1080. Make sure that a safe zone of 90 pixels is included on both the left and right sides, and 60 pixels on the top and bottom of the canvas. For a free file download, please follow the link provided.
Navigation
The impact of directional navigation on TV interfaces.
As designers, the tools we use to construct our designs will influence some of our design approaches. Actions such as swiping, tapping, long pressing, and pulling are used on mobile devices. Tabs and menus serve as the primary navigational elements. When designing user interfaces for televisions, it is critical to be cautious to avoid complexity. Having long rows of content as a means of displaying the highest amount of content to users has become common in television user interfaces.
Unlike mobile devices, which are typically navigated and controlled via finger gestures, the majority of television user interfaces are intended to be navigated via a directional pad, or D-pad, from a distance. The D-pad, which is present on both remote controls and gaming controllers, enables users to navigate in four directions: up, down, left, and right.
Each gaming platform has its specific set of conventions and regulations. On Xbox consoles, for instance, the triggers are used to browse through pages using the “Page Up” and “Page Down” functions, while the bumpers are used to switch between different content views. Besides, seasoned gamers will be aware of the “power user” buttons specific to each platform.
The focus state is an integral component of television user interfaces (TV UIs). Since users cannot touch the screen or use a mouse to select the element they desire, they must be able to navigate to it. Therefore, as users move through the application, UI elements should be highlighted to indicate that a navigation element is in focus. This will ensure that the user is aware of the element currently in the focus state.
When designing for television, the focus state and highlight state play critical roles. The focus state refers to the element that highlights a selectable component and indicates the user’s current position on the screen. Although the focus’s style may differ, it is essential to maintain consistency in its design. It should be visible and clear, allowing users to easily identify their current on-screen location and navigate with ease. If the user glances away from the TV momentarily and then returns to the screen, the selected navigation option should be apparent. Additionally, the cursor should be able to reach every item on the screen, and users should always be aware of where the cursor can move next.
Designs without clear visual indicators of the focus state can create confusion for users, making it hard for them to comprehend their location within the application. This can be especially troublesome if users need to look away from the screen or navigate up or down to determine their current position. To ensure a positive user experience, it is necessary for the application design to offer adequate visual cues that allow users to promptly identify their current position without requiring extra steps.
Typography
Reading from a distance of 10 feet.
Television applications are commonly described as “ten-foot experiences,” alluding to the typical distance between the viewer and their television set. Unlike other devices like mobile phones and desktop computers, television is designed to be a calming and unwinding environment for the user. Consequently, we must approach user interfaces differently than we would typically do on the web or on mobile devices, given this distance.
Television screens are often bigger than those of mobile phones and desktop computer monitors, yet they are usually viewed from a more significant distance. Hence, when deciding on the size of text and other elements, legibility is a crucial factor to consider. In general, the minimum font size recommended to ensure all users can read the text should be 24 points. Depending on the viewers’ age, 18 points may be the smallest legible size, but this should be reserved for non-essential labels, such as a browser tab.
Frequent testing is critical to ensure that typography remains optimally legible when shown on television. If the typeface is excessively thin or small when displayed on a computer monitor, it may appear sharp and readable. However, on a TV screen, it can seem blurred or hard to read.
Scan Lines
What are scan lines, precisely?
Differing from desktop, mobile, and tablet displays, television screens consist of odd and even scan lines that alternate. These scan lines are projected in alternating phases, causing flickering of an element that falls on a single scan line. Therefore, when moving designs from touch devices (mobile and tablet) to television, lines must be kept to even numbers and no less than 2 pixels in thickness to prevent flickering. This is especially crucial for designs that involve 1px border buttons.
Ensuring pixel-perfect designs is vital to prevent fuzzy lines or shapes. A perfect demonstration of a line made with odd numbers can be observed below, where the consequences are unquestionably apparent and aesthetically unpleasant.
Colour
TV displays possess limitations.
It is crucial to consider that televisions have a much higher gamma value than desktop, tablet, and smartphone devices. Gamma represents the amount of luminance disparity between each step on the grayscale, or how fast the darker hues become brighter. Our eyes see twice the luminosity as only moderately brighter. Concerning brightness, contrast, and other settings, there exists a vast range across different brands and models of televisions. To achieve optimal results, it is advisable to test the colours and types on the TV at the outset of the process and periodically thereafter.
When choosing colours for your project, it’s imperative to factor in the setting in which it will be viewed. When watching TV in a dimly lit room, select colours that aren’t excessively bright, as they can be strenuous on the eyes. Additionally, avoid using too many highly saturated colours, notably red, and reduce the amount of white in large elements or backgrounds, as they can generate halo effects and other visual disturbances. For whites, it’s advisable to use the hex value #f1f1f1 to prevent flickering. Additionally, ensure sufficient contrast between elements to enhance readability.
As a general guideline, it’s best to steer clear of creating a sharp contrast between colours that differ significantly in tone and brightness, especially between bright and dark hues. Also, highly saturated colours should be avoided, such as deeply saturated reds and yellows, since these hues tend to bleed more easily than colours with less saturation or cooler colours like blues and greens.
It’s recommended to test your colour selections on an actual television to gain a better comprehension of how they appear on a larger display. Whenever conceivable, it’s advisable to test your application on multiple televisions, as hues may differ greatly across various models. To carry this out, simply connect the HDMI cable from your television and conduct the tests.
The Basics
Take into account the small details.
When developing a user interface for a TV, it’s vital to consider several essential components. Prioritizing simplicity and simplified interaction is critical to ensure the best possible user experience. Keeping the design succinct and straightforward will assist in maximizing user satisfaction.
While the basics and best practices for interaction design remain applicable, the way people interact with televisions is generally more relaxed than with computers or mobile devices. As a result, the user interface of a television should be visually pleasing, uncluttered, and simple. The design should be clear and straightforward, with low information density. The elements should be large and sufficiently spaced so that they can be read from a distance. Additionally, each screen should possess its specific set of actions or options.
This design is simple and tidy, showcasing prominently-sized cards with focus states achieved by implementing scaling and drop shadows that adhere to the overall clean aesthetic. Metadata is solely visible when the user hovers over the card in order to direct their focus solely on the card they are currently viewing.
To enable users to easily locate and access important content or options, it’s crucial to position them at the top of the screen. To enhance the user experience, any extraneous screen levels should be eliminated. Additionally, it’s important to make navigation in and out of the various levels apparent and simple.
When constructing a TV application, it’s crucial to guarantee that the navigation is both straightforward and accurate. This will enable users to have a seamless experience, avoiding any confusion or uncertainty during their usage.
It’s vital for users to remain aware of their current position within an application and be proficient in using basic navigation controls such as Move, Return, and Enter. Fundamental navigation functions are required to be clear and simple, enabling users to effortlessly perform desired operations.
As designers, our ultimate objective is to create user interfaces that are simple and easy to understand, allowing users to effortlessly access content. We need to recognise that users are unlikely to adapt their behaviour to access our content, and hence we should tweak our user interfaces to accommodate those with limited resources or using devices with limited input capabilities in dimly lit environments. It may be a challenge, but the possible benefits of our efforts are enormous. Happy designing!
