Design guidelines

Layout

An application is more than looks on the television. It's also a way to show which elements are important and to create a flow through the application.

  • Alignment. Good alignment indicates the relation between different elements within the application. It also gives the application a clean and organized look.
  • Visual weight. Smaller icons seem less important than larger ones. By using this concept you can steer users within the flow of your application.
  • Consistent. Keep the functionality of your application consistent. Elements with the same functionality should look the same. This will keep the functionality of your application clear to the user.
  • Font-size. Keep in mind that font-size should be readable from your couch on different television sizes.
  • Grouping. By grouping different elements together its easier for users to find specific items.

The sidebar view is mainly used for – side by side – and – contextual – applications. The content view is free to fill in for the developer.

  • Navigation bar. The navigation bar helps users navigate through the application. The bar also contains contextual informations that tell users where they are.
  • Content view. The content views contain app-specific content and can enable behaviors such as scrolling and input fields.
  • Footer bar. The footer bar always contains pre-defined functions such as close, about, user profile and resize. The application developer has no functional influence on this part of the sidebar.

Fullscreen

Fullscreen can be used for overlay applications or for applications that need the users complete attention, for example games and applications for video streaming. It's possible to mute background noice form the television.

  • Content view. The fullscreen content view does not differ from the sidebar content view, although some store providers can have their own guidelines. For example; Liberty Global prefers to have an about button.

Overscan

With the overscan in mind its best to keep a safe area of 5% / 7.5% per side. This way you wont lose your title or other content after the overscan of the television. Off course its fine to set your background outside this safe area.

Overscan - Safe area

In most applications the user wont even notice the navigation and the experience it brings with it. Only when the applications doesn't meet the navigation standard it will be noticeable for the end user. The navigation should support the structure and flow of the application.

Lets take a look at three applications with a different flow:

  • Lets start with a game, typically a game is experience-driven. For example a map can be used to guide the user trough its levels, extending the game experience.
  • The second style is category-driven. A news application is driven by its hierarchy, the user makes a choice (or multiple) until they reach the article they want to read.
  • The third possibility a flat version of the category navigation, but all categories are directly accessible. A good example of this structure is the Deezer application.

Interactivity

Subtle animations can communicate status and provide feedback to the user. Keep in mind that you don't want to overdue the animation, this can decrease performance and interupt the user experience and flow of the application. An animation can also be used to get the users attention, a good case for this would be the focus within the menu.

Focus

The biggest difference between a mobile or tablet application and a television application is focus. The user wont be in direct contact with the device and there will be some distance between the user and his or her television, which makes it hard track focus. This is why its important to keep a bright (high contrast) color for focus. Also make sure to use a large surface to display your focus instead of using a (small) icon or text.

Color

Clear white pops out of the television screen. Instead of using clear white, its better to use off-white (for example #f1f1f1).

Typography

  • Font-size. Because of the viewing distance, font size really matters. The text should always be legible. Thats why font-size should never be smaller than 18 points.
  • Line-height. Using a line height of 125% will increase the readability of text from a larger viewing distance. This is recommended for applications with large chunks of text.
  • Font usage. In general, MAF applcations use a single font. Instead of mixing fonts, it's better to mix different font sizes and weights.
  • Alignment. For a clean design it's important to align the text and images by using a good grid structure.

Branding

For most applications the color and font usage will fill in your branding. Try to resist using your logo on every page. Make sure you give your header or logo enough spacing withing the navigation bar.

Icon size

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