SmartTV User Interfaces

From SAM
Jump to: navigation, search

This page describes the concept of a User Interface for Smart TV services/Apps. This page assumes background knowledge on what a Smart TV service is, and which type of data it contains. This page assumes the browser based Smart TV App, but the concept is similar for other types of applications.


Some of the terms used in this page:

  • Content Page - an individual page of rendered content, containing various UI elements such as text, pictures and media (video/audio)
  • Remote control (method) - the means by which an Application can be controlled, examples are pointer or key-based control methods.
  • Page elements - parts of the Smart TV App page, such as images, text, hyperlinks and media (video).
  • Focused element - the current active element on a page

The User Interface of a Smart TV App can be broken down in a number of key concepts:

  • Visual Design - the look and feel/representation of the App as it is rendered by a Smart TV platform browser
  • Page Navigation - navigating inside a Smart TV App content page using the provided Smart TV remote control methods
  • App Navigation - navigating between Smart TV App content pages

Below an explanation of these concepts.

Relevance to SAM

A Smart TV can be a device representation for SAM, and this page is part of the "Multi-device Representation and 2nd Screen" RTD work package. This page specifically focuses on the user interface of the representation layer, which should be compatible with Smart TV devices.

State of the Art Analysis

Visual Design

Smart TV Applications need to be adapted to 'fit' a Smart TV device. This is required as the physical distance from the user to the Smart TV is often not the same as the distance to a regular monitor setup or smart phone/tablet. The term that is used for this type of adaptation is "10-foot user interface[1]".

A consequence of such an adaptation is that, while the display pixel-size is similar than desktop PC monitors (and the physical size often much larger), the actual "screen real estate" (number of elements on a page) is less than that of a desktop PC. Typically the number of individual elements on a page is comparable to that of a tablet or phone. A good example of the difference between a "regular" web page and a Smart TV content page is shown in the picture below:

Smart TV 10 foot UI versus regular web page

This adaptation can furthermore be split up in a few distinct design concepts:

  • large elements, such as text and images. For the text to be readable, it has to be of sufficient (font) size, typically 16-18 points. Images should be of sufficient size to be shown, and for images that also serve as button these should be of sufficient size to be selectable by a pointer device.
  • fixed resolution, including the removal of scroll bars. As the (Smart) TV is a Social platform, and multiple users may be watching the screen at the same time, scroll bars are not preferred. Additionally, most Smart TV Platforms offer a fixed resolution of 1280x720 or (in newer platforms) 1920x1080 pixels that the App must support.
  • element highlight - when the application is controlled/navigated using remote control keys (refer below to Page Navigation), the page must provide a form of visual feedback to the user in the form of a visual highlight of the active/focused element on the page.

Element Highlight

  • safe area - on some Smart TV devices, most notably devices that do not offer their own screen (such as e.g. Blu-Ray devices), over scan[2] must be assumed to be present. This means that a portion of the edge of the screen, say 5%, is not usable for the application as information displayed there could not be visible to the user.

Page Navigation

When the user navigates inside a Smart TV App page, she can make use of different navigation methods to focus and select page elements:

  • key based remote control, also known as Spatial Navigation[3]. This navigation method uses the up-down-left and right keys of the remote control to shift the position ("focus") to other navigable elements inside a page. By pressing the OK key on the remote control, the focused element is selected and any action linked to the element (such as navigating to another page) is executed.
  • pointer based remote control, similar as navigating a web page with a mouse inside a desktop web browser. As indicated above in the Visual Design paragraph, the navigable element needs to be of sufficient size to allow easy selection by the user, also because most pointer based interfaces for Smart TV platforms are less fine grained than a regular mouse interface.
  • advanced navigation methods, described below such as Gesture Control and Voice Control.

App Navigation

Navigating between content pages inside a Smart TV app is similar to a regular web page, but there are some advanced concepts that a Smart TV App can offer to make it easier to perform this navigation:

  • hierarchical back navigation - normally, when a user jumps between pages, the last visited page is remembered in the browser history. When the user uses the remote control function to navigate to the last visited page (the "back" key), this last visited page is shown. However, when navigating through a complex set of pages, organized in different levels, such basic navigation concepts can quickly become tedious to the user, who has to perform multiple "back" navigation steps to get to the place of origin. Instead, a better method of navigating is "hierarchical", which jumps between levels of content pages, rather than individual content pages. See the picture on the right for an example of the difference between both concepts.

Hierarchical Back Navigation Concept

  • deep linking - when the Smart TV platform offers a method to aggregate content from different Smart TV Apps into one "App" page, that page can then be used to directly jump to the content inside the relevant Smart TV App and start e.g. play out of media. This concept is called deep linking, and is offered on some Smart TV platforms.

Technical implementation

As described in the Smart TV services page, the most common form of Smart TV App is browser based. Technically, implementing the above concepts using such a browser based standard would mean the following:

  • Spatial Navigation - this can be implemented using CSS3 spatial (or: directional) navigation [4]. As an example, this is a CSS3 navigation tag:
<a href="#" id="#up" nav-down="#down">up</a><a href="#" id="#down" nav-up="#up">down</a>

Alternatively, some browsers offer what is called 'built-in' or 'automatic' spatial navigation, where the browser analyses the <a href> links on a page, indexes these and logically tries to offer a key-based navigation to the user based on the elements surrounding the active element. The disadvantage of this method to CSS3 is that the automatic indexing can sometimes not be logical, miss certain links, or create a navigation structure with dead-ends that the user can no longer jump out of.

  • Hierarchical back navigation - this is often implemented using specific Javascript code, in combination with certain variables (aka "bread crumbs"[5]). There are some Javascript libraries that help the developer in creating such hierarchical navigation concepts in their page.
  • Key-based remote control - can be implemented using CSS (key) Events in Javascript, in combination with e.g. a key constant (as defined in e.g. Smart TV Alliance) such as VK_PLAY:
document.addeventlistener('keydown', function(e){if (e.keyCode==VK_PLAY){action();}}, true); // will execute action() when the key VK_PLAY is pressed on the remote control

Other concepts such as static screen size and removal of scroll-bars can mostly be implemented using regular HTML, CSS and Javascript.

Advanced User Interface Concepts

Newer platforms expose more advanced UI concepts that allow the user to control and experience the Smart TV App in different ways. Examples of new control methods:

  • Voice control - applications can accept voice input for navigating inside a page or app ("go back", "up"), or offer text-to-speech recognition engines that allow for input of complete blocks of text.
  • Gesture control - by waving or otherwise providing hand, arm or face signals to the Smart TV device. An example of such a gesture control method is the Kinect [6] interface.
  • User recognition - performing actions inside an app based on the user(s) that stands in front of the Smart TV platform.
  • Multi-screen control - using an external device such as a Smart Phone, a user can control the application. Refer also to Multiscreen (App-to-app) Communication. Next to offering control methods, using a multi-screen interface also allows for a secondary Visual Representation of the App to the user. This offers for example the possibility to offer a list/selection of content inside the Smart Phone device visual design, with the Smart TV App playing the content on the large-screen TV device.


  1. 10-foot user interface
  2. Over scan
  3. Spatial Navigation
  4. CSS3 Spatial Navigation
  5. Bread crumbs concept for hierarchical navigation
  6. Kinect