Six timeless tips for designing TV apps with great user experience.
Long gone are the days when TVs were just “boxes for watching the news.” With the rise of Smart TVs, the use of TV apps is skyrocketing. In their recent report, Inscape notes that the average number of apps used by a smart TV user has doubled, with viewers in Q3 2023 using an average of 5.4 apps per person, up from 2.6 apps per person in Q4 2021.
Yet, despite this growth, there’s an obvious lack of comprehensive guides and articles on designing apps for TV platforms. Sad but true: many designers face anxiety when approaching TV app design. In this article, I’d love to share my insights and tips, which I’ve identified over my 8+ years in designing TV applications, to help you tackle these challenges and create amazing user-friendly TV apps.
Test stand in the office of Okko, video-steaming platform
Understanding Smart TV Platforms
Before starting to work on a Smart TV app it’s crucial to know that Smart TV is more than just a television set. The technology that enables smart TVs is also incorporated into external devices such as set-top boxes, game consoles, digital media players, and other network-connected devices that utilize television-type display outputs.
These devices can run on various operating systems, the most popular globally are Android OS (38.1%), Samsung’s Tizen (21.3%), and Roku (12.5%). LG’s webOS, Amazon’s Fire TV and Apple’s tvOS follow with smaller shares. The diversity of operating systems presents certain challenges in app development. However, most TVs can work with web technologies in one way or another. Therefore, to optimize development resources, most companies are developing web applications that will work on most TVs.
For example, the Sony PlayStation gaming console has its own operating system, but developing a native application for this OS is impractical. Native development is needed for Roku and tvOS, while Samsung and LG support only web development, and Android TV supports both.
2023 Smart TV OS market share. Source: tvtechnews.uk
Below, I have summarized key tips for app design that can be applied to both native and cross-platform development, and included some important insights from my own practice.
Viewing Distance is Key
Viewing Distance is the first thing that sets Smart TV user experience apart from a smartphone or laptop. The typical viewing distance for a TV is about 3 meters. This means that component sizes and text styles must be legible from afar. Designing for this distance requires a keen understanding of visual hierarchy and readability.
Another important thing to keep in mind is that TV screens are exposed to significant light during the day (sunlight can be a major challenge) and high contrast at night. Therefore, you should always test the legibility of your fonts and the color contrast during the design process.
Insight 1: You might worry about having to adapt layouts for TVs of different sizes, as seen in rows at appliance stores. Fortunately, all TVs share the same aspect ratio, so using a Full HD size (1920×1080) as a starting point, you can easily scale it up or down as needed.Single mockup transforming to common TV screen sizes
When selecting a font, opt for one with large typography and thickness. That ensures readability, considering the various nuances of TV displays. For Full HD models, I suggest sticking to a minimum text size of 22 pixels, give or take 2 pixels, depending on the font and style.
Focus in a Chilled Environment
Users often watch TV in a cozy home setup, lounging on the couch or lying down, chatting with friends or family. In this laid-back atmosphere, the design should work, even if the users aren’t fully paying attention to the screen or get distracted. Keep it simple and tidy. A clutter-free interface makes it easy for users to find their way around without getting annoyed.
Visualisation variants of focused elementInsight 2: For easier navigation, a focusable element should have the 3 main states: default, focused and pressed. You can use contrasting colors, frames, shadows or sizes to help the user focus on key elements. It’s important that you use one or maximum two of these techniques throughout the app, to maintain a clear and systematic UX.
Mind the Eye Comfort
Since Smart TVs are primarily viewed during the evening hours, a dark color scheme is easier on the eyes. If your brand usually leans toward light colors, think about creating a dark theme specifically for TV. While it’s possible to have a theme that switches between light and dark based on the time of day, it’s not widely supported outside of tvOS. In addition to the evening time frame, there are other factors to consider, such as color rendering (which can be unpredictable across different displays), picture modes (which can alter the image’s contrast and brightness), and color contrast (which may be significantly worse on low-quality displays).
Insight 3: With so many nuances to consider, it’s essential to test how colors appear on various TVs and in different environments to avoid any surprises.Popular TV apps with a dark color scheme: Netflix, Youtube, Hulu and Spotify
In her article on TV guidelines, Andrea Pacheco offers tips on how to set up your workspace effectively to ensure a realistic perspective of your design.
Consider Remote Control Navigation
TV interfaces must be designed for navigation using a remote control. Users should be able to easily determine their position on the screen and move between components seamlessly. Unlike touch or mouse navigation, remote controls operate on a limited set of directional inputs, making it crucial that the navigation flow is straightforward.
A variety of remotes for TVs and set-top boxesInsight 4: Since most standard remotes only move in four directions, shifting content diagonally can confuse users. However, if your app has features with complex controls, you can “outsource” navigation to a smartphone
In the article by Nielsen Norman Group, Kim Salazar examines the crucial importance of well-designed remote navigation, using a TV guide app as a case study.
Stay Away from Safe Zones
TV safe zones are areas around the edges of the screen that may be cut off by the device. Different manufacturers provide different guidelines for safe zone dimensions. For instance, Apple recommends keeping components at least 60 pixels away from the top and bottom edges, and 80 pixels from the sides. Since Apple TV can be connected to any TV model, these recommendations are considered universal.
Safe areaInsight 5: When designing the screen, ensure that safe zones are considered. Components should not be trimmed at the edges, and elements like side cards in a carousel should not extend beyond the visible area.
Ensure Privacy and Parental Control on Shared Devices
Unlike smartphones, which are usually personal devices, TVs are often shared among household members. Therefore, it’s crucial to protect users’ personal information within the design. This involves considering features like user profiles, seamless switching between users, and ensuring that sensitive data such as watch history and preferences remain private and secure.
Profile switching screen on NetflixInsight 6: If your app contains user personal information, it should not be visible on initial screens.Additionally, it’s important to implement parental controls to protect children from undesired content, ensuring a safe viewing environment for all family members.
Conclusion
While Smart TVs offer a flexible platform for engaging experiences, their modest technical specifications need a thoughtful approach to design. Therefore, when developing applications for these platforms, it’s essential to prioritize simplicity over complexity. Utilizing standard platform capabilities like CSS animations and avoiding resource-heavy graphic effects such as blur ensures optimal performance across devices.
The connected TV market is predicted to double within five years, so now is the perfect time for designers to position themselves at the forefront of this expanding market.
By understanding the platform, considering the user’s environment, and adhering to best practices, you can create engaging, user-friendly TV applications. Embrace the nuances of TV design, from viewing distances to remote control navigation, and you’ll be well-equipped to deliver outstanding experiences.
Happy designing!
Mastering TV app design: key tips for creating engaging experience was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.
