Keyboard Navigation

Only use the default keys

Spatial Navigation: provides a JavaScript framework which implements Spatial Navigation.

The default keys are UP, DOWN, LEFT, RIGHT and OK. Some remotes have a special BACK key, which may be labeled EXIT, BACK, or MENU. However, the purpose is the same, undoing the last action (for example, going back one level).

OK is primarily used to activate or apply an action such as clicking a button. The main navigation is done using the navigation keys (UP, DOWN, LEFT, RIGHT).
If you are designing for a traditional set-top box, there are some extra keys you can use such as the number keys (0-9). Some newer remote controls also display characters above the number keys, allowing you to implement SMS/t9-typing as used in mobile phones.


Most remotes also have color keys. These allow the user to perform an action without navigating through the whole interface, such as using the BLUE key to go directly to the Help information. Note that the color keys might not always be usable, even when they are present on the remote. For example, there are providers who use the colors for a special purpose (such as advertising or going back to a channel) and it is not possible to overrule them. Therefore It is a good idea to make the number and color keys redundant (duplicating the function). An example of redundant number keys is to use them for SMS typing but also to provide an onscreen keyboard.

Give users a clear return path

There must always be a clear 'escape route' to return to the main menu or another part of the application that the user knows and understands (such as the normal television channels). Avoid breaking the expected behavior of the BACK key, which is one of the most useful 'quick escape' keys.

Simply by pressing the BACK key the user can go back to a root menu screen, when lost in the application. Disabling or hampering this mechanism could be very harmful to the perceived user friendliness of your application.

Keep the user informed if the system is busy

When an action may take longer than the preferred loading time (300ms) display a friendly message with text like "loading... one moment please". It is also possible to add an animation which shows that the application is busy. An even better approach - if practicable - is to show data asynchronously, for example, if you are loading a set of images, show the images which are already loaded before the whole set is ready to display. This gives the user the feeling the interface is much more reactive.

Provide facilities to undo the last action

Provide an UNDO function, such as in text input, a means of deleting the last character. When navigating to the next screen, UNDO means returning back one screen.

Respect default actions for keys

Do not remap keys that already have a 'default action' associated with them (such as the video control keys or the BACK key) to have a significantly different action. It could be tempting to remap the stop key to exit an application and go back to the initial menu. However, this is confusing as the user expects the stop key to do one very specific thing: stopping a video. Also, remapping the stop key in your application might lead the user to think this action is applicable to all applications, which it is not, and therefore breaks the consistency of the interface experience.

Always make it clear where the focus is

Be consistent in using color for the navigation and do not use other elements with the same color as the focus color. If color alone is not enough to distinguish the focus, try to apply other styles to make it clear, such as shadows, borders or possibly a small animation.


Do not add too many features

It is better to ensure that the core functionality of your application is solid than to add a lot of features. Each feature will increase the complexity of your application, which then requires more effort for users learning to use your application. This then clashes with the "lean back" or passive aspect of television.

Display only information needed in the current context

A common mistake in television applications is to try to add as many options as possible in one screen. Due to screen resolution limitations as well as for ease of use, it is better to keep a limited set of options on a single screen and selectively show other options when needed. In video applications the main functionality is browsing and viewing video. Additional options such as rating a video can be placed on a separate screen after viewing the video, not on the main interface screen.

Place frequently-used elements in the same place in the interface

Users expect elements with the same action to be positioned in the same place in the interface. If the main screen has a search button located in the top right corner, do not put it in the bottom left corner in a second screen.

Use hints where applicable

For lists, give a hint if there are more items outside the visual parts of the list, items that do not yet display. A common way of doing this is using an indicator such as "3/4" meaning that the selected item is the 3rd item in a list of 4 items. Other indicators are simple arrows or more subtle techniques like a showing a gradient on the end of a list.

Use an intuitive navigation direction

Structure your application and navigation to fit with the expected reading direction of your audience. This may mean making your navigation go from right to left.


  • Thursday, 15 September 2011

Your destination to find out more about just how easy it is to develop advanced applications that leverage the “write-once, deploy-everywhere” content creation environment of ActiveVideo’s CloudTV™ platform. You will be able to significantly reduce app time-to-market for connected devices of all types, as well as cable settop boxes that have no additional connectivity. Manufacturers and virtual service providers, as well as cable and IPTV operators around the world are currently benefiting from the advantages of ActiveVideo’s CloudTV platform.

© 2019 Active Video Networks. All Rights Reserved