10 Tips for UI/UX Design on Smart TV

by Yuliia Brokhina, UI/UX Designer and Stefania Gancitano, Marketing Associate, Norigin Media

Designing streaming TV Apps on Connected TVs or Smart TVs differs majorly from design efforts on other devices such as mobile or PC web browsers.

While there are many established UI/UX guidelines and extensive research available for web and mobile apps, the same can’t be said for apps on large screen devices.

In this blog, we’ll dive into the top 10 things you should consider when designing apps specifically for Connected TV!

1. Understand your user

First of all, who is the user? Unlike mobiles, tablets and PCs, TVs are not usually personal devices — they are most commonly shared by members of a household, of different ages, genders or even disabilities. The interface should thus be accessible and intuitive for all demographics.

TVs are static devices which tend to stay in one place. Designers must therefore consider reflections from windows, lamps and other household items when designing the app. The interface must be legible from many different angles. You also have to consider the lighting of the room (both daylight and lights off) when choosing the colour palette for your app.

TVs allow for a more entertaining, cinematic experience, so the main thing here is to create the easiest and fastest way for the user to discover and watch content. The more research you have available, the more you will understand your target audience, which will allow you to find better design solutions to create the richest user experience.

2. Screen size

Connected TVs come in many different screen sizes, ranging from small TV monitors to Smart TVs that are close to 100 inches!

While screen size may differ from device to device, the international standard aspect ratio is agreed to be 16:9. The app is usually designed in 1920x1080px screen size, then all elements can be easily resized proportionally for HD or 4K screens within the code.

If you use .JPG, .PNG or videos within the App-UI, remember to provide them in double resolution for 4K screens, so they are displayed in the highest possible quality.

3. The 10 foot rule

When designing for large screens, bear in mind that most users are sitting roughly 10 feet, or 3 metres away from the screen. Styles such as colours, fonts and element sizes should be tested on screens from up to a distance of 3 metres.

Remember that users watch TV from different angles and so the interface needs to be legible from anywhere in the room.

4. Safe Zone

Some Smart TV devices still have overscan, which was an old practice to ensure that the content filled the entire screen. On some devices, UI elements are therefore cropped if they are very close to the screen edges. Safe zones can vary, but it’s usually around 90px. The exact margin from the screen edges can be checked in device platform guidelines.

5. Remote Control Navigation

Users have a variety of tools for navigating through apps on TV, from basic remote controls (RC), gamepads and RC apps on their phones. Some of the same platforms have different RCs, such as LG’s basic Conventional RC and Magic RC. Navigation thus needs to be planned with the specific platform & RC in mind.

There are always four-directional navigation keys, but some platforms have RC specific features. For example, on Apple TV, the RC with touch surface supports swiping and touch gestures; on LGs Magic RC, there is a scroll wheel and pointer mode, which has a similar performance to the basic mouse pointer we are all used to from our PCs.

Keeping the target platform RC in mind will help to build a good app layout, so users don’t need to make extra unnecessary gestures to select the most basic elements. If you are creating a cross-platform app, it’s better to use the basic four directional keys, OK, Play/Pause and Back buttons.

6. Input methods

There are several ways of ‘typing’ on TV screens using:

• Virtual keyboards that require navigating via the remote control (RC) with a regular PC keyboard layout or other custom layouts. This is the most complicated, time consuming and tedious.
• RC mobile apps have become popular, using a mobile keyboard on a personal device. This is an easy solution for one to control with a mobile device.
• Voice control for speaking commands into your RC. This may not be supported by certain devices and there is a higher risk of errors, as it may not recognise speech properly.

For choices of virtual keyboards, one can choose either a native keyboard from a specific device or a custom keyboard.

Users are accustomed to native keyboards of the device but custom keyboards allow you to design your TV Apps to keep it consistent across all different platforms.

As far as keyboards are concerned, always help users reach their goals faster. For example, show suggestions while typing, implement external login (via the website), or remember usernames, and so forth.

7. Colours

Colours on TV tend to be brighter than other screens. Since many users watch TV in the evenings, in darkened rooms, large amounts of bright colours can strain the eyes and mind.

The main purpose for apps on TV is entertainment, while creating a relaxed, cinema-like experience. The main colours of the UI, such as the background, for example, should usually be calm and dark. This also helps not to take focus away from the content.

8. Device Manufacturer Guidelines

Almost every platform has its own specific development and design guidelines. These guidelines provide a basic understanding of the TV experience, tech specifications, as well as design recommendations for specific screens. Device manufacturer mandatory checklists must be followed to ensure that your application is accepted and certified to be on an app store.

If you are developing a single multi-platform app across connected TVs, you may be concerned about adhering to the guidelines of every platform simultaneously. But a comparison will show that they are all based on similar principles and a good design can check all requirements off if considered at the onset. We recommend reviewing the Apple TV and Android TV guidelines as they are great sources, for the best UX and UI practices on large screens.

9. Technology

Designing your app is one thing, but executing your design during development should consider knowledge of the technology being used to develop the app. Each of the development frameworks, technology and architecture choices will showcase it’s strengths and its limitations.

This is where design and development directions must be correlated at the onset. Different development technologies may require unique design approaches. For example, if you plan to use Native SDK, then specific features may not be supported by some device templates. Native technologies with custom designs gives you full support of UI and animations. And there might be some design and animation limitations when using cross-platform technologies. We’ve written a blog about this here.

10. Memory Limitations

Usually TVs have less memory than PC or mobiles, so the apps should be generally light. Depending on the device, you might consider going with less features, animations and simpler UI to avoid poor performance.

Specific features can also be designed as “removable” for some legacy devices, which means that they will be available on the newer TV models, but disabled for the ones with lower technical capabilities.

And that’s that! Designing for large screens is very different to designing for PC browsers or handheld devices — but as long as you keep the points above in mind, you’ll be on the right track.

Let us know if you have any other comments or questions!

Read it also on Norigin Media blog page.

P.S. Check out the Tech Choices for Connected TV Development blog — should you go native or cross-platform?