Design Guidelines

Introduction

Designing for television is different than designing for other platforms. The bigger screen size, limited input methods and social context make it a different experience to use than for instance a mobile phone or a tablet. Because of this, a different set of rules apply when designing for TV. In this document we guide you through that process.

Operator Disclaimer

Operators might have specific rules to which apps need to apply and limitations in hardware might disable features on certain boxes. Contact our support team when developing for specific operators. A list of common limitations can be found here.

Apps on TV

Focus points for a TV App

Casual: TV is a lean back platform. The user will probably want sit back and consume content without too much effort. Make sure the app accommodates for this.
Cinematic: One of the biggest advantages that TV has over mobile phones is bigger screen real estate and a better sound setup. This provides a more Cinematic experience, your design should align with this.
Easy to Use: With only a remote control, input on TV is limited to other platforms like cellphones or tablets. How to use the app should be self explanatory.
Livingroom Experience: More than other devices, TV is a group platform. Often more than 1 person will be looking at your app. Keep this in mind when designing it.

Information Density and Input

TV Apps offer a different experience than a mobile device or a computer. Therefore they require a different approach in design. Because of the viewing distance the amount of information on screen should be limited to what's acceptable on a mobile device. The input with a remote control is less direct than for instance a touchscreen, so this requires a clearer use of visual cues.

Even though the screen is bigger, you shouldn’t show more than you would on a smartphone screen.

Try to keep your interface clear. Focus should always be clearly identifiable.

Do: Make the app simple to setup and easy to use. Focus on key functionality and don't try to blindly copy all features from an app on mobile or desktop. Rather focus on key features and executing them really well.
Don't: The screen size of a TV App is limited because of viewing distance, so don't use too much text. Text input is also harder because of the remote control so try to minimize required text input.

Live Television

One of the advantages of building an App on MAF is the integration into set-top boxes that provide live television streams and contextual data. When designing an App for TV, you should consider:

Is it relevant to show TV in the background?
Should the App block the TV experience?
Could the App show data contextual to the TV?

Consider the relation between your content and live television.

Designing for TV

Layout

Depending on the purpose of the app, you can design your app in 2 different types of layout. More information about the technical implementation of these layouts can be found in the Getting Started guide.

Sidebar

A sidebar app uses a layout provided by maf. Handling of TV in the background is provided by MAF.

Fullscreen

A fullscreen app uses the entire screen, the TV feed can be blocked completely, but it’s also possible to show the TV feed in the background and place elements of the app on top of it. This could be useful for contextual apps. In this scenario, always consider if it doesn’t interrupted the TV experience.

Resolution and Image Handling

We recommend you design your app in a full HD 1080p resolution. MAF scales the app to the appropriate TV output. Due to performance limitations of several set-top boxes, you should consider not using images that are too big. Consider where you need high res images or when to upscale them. Optimizing this can improve the performance of the app considerably.

Focus

One of the biggest differences in designing an App for TV is the focus. The user can’t click or tap anywhere in the app because he/she isn’t in direct contact with the device. Instead, controlling the app is handled through a remote control. This is why it’s important to always have one item focussed. This element should always be easily distinguishable. For example by using a high contrast color and/or by using a large surface to display you focus.

Use an easily distinguishable focus. Make sure contrast is high enough.

Make sure only one item is focussed.

Typography

TV is not the best platform to read large amounts of text, so try to minimize the amount needed. For the text you do use, make sure to follow these rules.

Font-size: Because of the viewing distance, font size really matters. The text should always be legible. That’s why font-size should never be smaller than 22 pixels when designing for a 1080p resolution.
Text-width: When displaying larger chunks of text, make sure text columns aren’t too wide. Limit the amount of words to around 10 per line. This will make your text more legible from a larger distance.
Line-height: Using a line height of 125% will increase the legibility of text from a larger viewing distance for larger chunks of text. MAF does this by default in the multiline component.

Branding

Try to resist using your logo on every page. Once the user is inside your app the user experience is more important than your logo. You get a better user experience by limiting the amount of information on screen and creating a clear user interface. Your visual identity can also be communicated by using colors and fonts.

Color

Colors can look very different on TV than they do on a computer monitor. Some TV’s have a limited color space compared to computer monitors, which can cause colors to bleed into each other while they are clearly distinguishable on a monitor. Make sure there is enough contrast between the colors you use.

Do not use clear white

Clear white (#FFFFFF) is too bright when displayed on most TV’s. Instead you should use off-white (for example #f1f1f1). But even when using off-white, try not to fill the screen with bright colors, since this will quickly be too bright.

Overscan

Older TV’s can crop the image shown. Because of this you should keep important information away from the edges of the screen. The safe margin to account for this is 70px on the left and right, and 50px on the top and bottom. This way you won’t lose content. Off course it’s fine to set your background outside this safe area.

Loading and Error Handling

For an optimal user experience, make sure the user knows what’s going on at all times. Because interaction with TV is less direct than with other devices, it’s extra important to make sure the user knows when the app is loading content or when something is not working the way it should.

Loading: Show the user content is being loaded. This can be anything from a screen blocking view to a loading indicator on a content cell.
Splashscreen: When opening the app, show a splash screen while the main content is loading.
Missing Images: Make sure there is a replacing image in place for when you cannot load it from an API or when no image is available. Not doing so can make your app look broken.
Error Message: If there is any kind of error. Let the user know what is happening. This could be a pop-up giving the user alternative options, but just stating that an item failed loading could be enough. Consider what is best for the user.

Icon

At this moment we only have icons that are 192px by 192px. This is without the usual shadow and transparency margin. An icon template can be found at GitHub in PSD format.

Flow

Because of limited input methods it should be very clear what button does what. You can achieve this by keeping a clear and simple flow in mind. When designing consider how a user would reach all areas of the app.

In the first situation the top two buttons are easy to reach with one button press up. In the second situations this would take a lot of button presses. (situation two is not wrong, but the first situation makes for an easier to use app).

Navigation

Because you control the app with a remote control instead of mouse, keyboard or touch input. Navigation is less flexible than on other devices. Because the app could be used with a diverse range of remote controls, you should limit the controls to the directional keys, the OK button and the BACK button. Other buttons can be used, but the functionality of the app should not be blocked if these are not available.

Connecting Mobile Devices

If you need more control of your app you could control it with a mobile device. This provides a much broader range of control. This could be a good solution for games that require a more complex input from the user. Make sure that the user always has a way to close the app with the remote control.

Input

Some set-top boxes have a remote control with a keyboard on it. However, those might not be available for all users. Therefore, when a text field is selected, an onscreen keyboard should appear.

Animation

Some set-top boxes don’t support animation, so when not designing for a specific box make sure the app doesn’t break without it. Also be considerate of the limitations of certain boxes as too much animation can decrease performance and interrupt the user experience and flow of the application.

Subtle animations can communicate status and provide feedback to the user. An animation can also be used to get the user's attention. A good case for this would be the focus within the menu.

Remote Control

Even though all apps should be controlled with directional keys, BACK and OK, other buttons can be used. In order to make a proper functional design. We provide an overview of common remote control layouts and configurations, together with their default mappings. You can download this document here.