Overview
In today's digital age, TV viewing is no longer limited to cable and broadcast channels. With the rise of streaming services and smart TVs, viewers have access to a plethora of content at their fingertips. The global smart TV market size reached USD 187.81 billion in 2021 and is projected to grow at a CAGR of 10.9% from 2022 to 2030. With the smart TV market expanding rapidly, there is a growing demand for smart TV apps. As a result, designing a user interface (UI) and user experience (UX) for TV has become a crucial aspect of the modern app and website development.
Unlike the web and mobile, TV comes in various sizes, has different input methods, and has a distinct usage pattern, making it challenging to replicate the same experience as on the web and mobile. As a prominent provider of TV solutions, TecAce recognizes the significance of TV as one of the primary platforms for content, second only to web and mobile platforms. Unfortunately, the design and development of TV apps have limited available information compared to web or mobile apps. However, TecAce has a vast R&D experience in this area and has created unique UI/UX considerations for TV apps.
In this article, we will explore some key considerations for designing effective UI/UX for TV, including design principles, resolution, typography, and remote-control functionality. We also have created a UX/UI checklist to aid in designing TV apps after examining critical factors and reviewing several TV apps on the market.
Viewing Distance
The average viewing distance for most users is approximately 10 feet (3m) from the screen. Therefore, it is essential to test the legibility of fonts, images, and other UI elements while keeping this distance in mind. The user interface should be designed with larger and less dense elements to ensure that any intricate objects can be detected by viewers from across the room. See the figure below to check out the viewing distance depending on the screen size.
Safe Area
Modern TVs have an age-old practice of automatically applying overscan to adjust the entire content to fit the screen. This process involves cropping and scaling the image to fill in all the pixels, causing it to exceed the boundaries of the viewing area.
To prevent any loss of content, images, or UI elements due to cropping, it is advisable to set a safe area with a margin of at least 5%. For example, Apple suggests a margin of 60px from the top and bottom edges and 90px from the left and right edges, while Android recommends a minimum of 27px from the top and bottom edges and 48px from the left and right edges.
Remote Control Navigation
Being mindful of the various types and limitations of remote controllers, including game console controllers, smartphones, keyboards, and TV remote controllers, is crucial. Regardless of the type of remote controller used, there is usually a four-directional pad (also known as a d-pad). Users generally anticipate that common buttons, such as "OK," "back," play/pause, and arrow buttons will have the same functionality across all apps.
To simplify navigation within the UI or when using an on-screen keyboard, avoid using complicated navigation and instead consider adopting a grid structure for content layout. It is imperative to ensure that the navigation structure and content complement each other seamlessly.
Text Input Methods
To enhance user experience, minimize the amount of typing required by providing autocomplete or word suggestion features (Figure 3-2). Some platforms, such as Apple TV, have integrated touch input into their remotes, while others are experimenting with voice control. However, there is a high risk of inaccuracy with voice control when speaking directly into the remote. An alternative is to use mobile devices, which can make the slow and inconvenient typing process more manageable.
You can provide a QR code (Figure 3-1) for users to scan and log in quickly using their mobile devices or offer a mobile touchpad app as an option for text input. Although on-screen keyboards are the primary method of text input, many users are accustomed to physical keyboards from laptops and PCs. Therefore, it is recommended to design the on-screen keyboard to resemble the layout of physical keyboards for a more familiar experience.
Focus State
Unlike the mouse cursor on a computer screen, the TV uses what is known as the focus state which allows the user to navigate the interface. Always provide the user with visual feedback on the currently selected element. Generally, the focus state is achieved by highlighting, enlarging, or adding a border with a high-contrast color around the UI element.
Providing audio feedback also helps users navigate when the focus changes. If items are stacked on top of each other and the user cannot see the full list, provide an indicator to inform them of additional information. The carousel indicator can be used in scenarios where there is a set number of contents or UI elements and to indicate when the user has reached the end of the content cycle, such as the content category.
Color and Brightness
TV screens typically display more saturated, vibrant, and brighter colors than PC or mobile screens. To prevent eye strain, avoid using pure white or overly bright colors. Be cautious when using gradients or deep blurs, as the limited color range of the TV may result in banding. Additionally, since viewers often watch TV in a dimly lit room and desire a cinematic experience, consider using cooler, calmer, or darker colors for major UI elements or backgrounds.
Typography
To ensure optimal results on TV, it is recommended to use a minimum text size of 28px for a 1920 x 1080p resolution. It is crucial to continuously test typography to achieve good results. While thin, small type may appear crisp on a monitor, it may appear unclear or washed out on a TV screen. For body text, it is recommended to limit the number of characters, including spaces, to less than 170 and keep it to a maximum of 3 lines.
To avoid confusion in information hierarchy and readability issues, it is advisable to limit the use of different typefaces. Overusing typefaces may also disrupt the app's consistency and damage the brand's image and identity.
OS Specific Requirements
Design approaches may need to be tailored to fit the specific technology and environment used in app development. It is crucial to consider the capabilities and limitations of the development technology during the design phase. Certain features may not be supported by device templates when working with native SDKs. Native technologies with customized designs offer full UI and animation support, while cross-platform technologies may have design constraints.
Information Architecture
To minimize confusion and excessive clicking caused by the diversity of remote controls across TV brands and models, interface design should be straightforward with minimal steps and quick response times. It is recommended to include only essential functions to avoid overwhelming users and causing fatigue or frustration.
To avoid overwhelming users or causing confusion, content should be organized with relatively shallow levels of hierarchy. Based on research, it is suggested to limit the number of depths to a maximum of three. Providing a list of related or suggested content (Figure 8) with equal hierarchy is advised, especially when video content is being played.
Final Thoughts
In this article, we've explored crucial design considerations for developing a TV app. By analyzing existing TV apps and conducting extensive research.
TecAce has compiled a UX/UI checklist that can be used to enhance the design process for TV apps. Whether you're new to designing for TV or a seasoned professional, hope our checklist can help streamline the process and ensure optimal user experience right edges.
Smart TV UX/UI Checklist
Click HERE to download the checklist