Television has become the newest member of devices which challenge our perception of what a good user experience is. Creating an application which has the potential to live on a wrist, in a pocket and in our living room simultaneously is something which requires an in-depth understanding of the different experiences each device offers.
While other devices are designed for touch, the 10 Foot or ‘Lean Back’ experience tackles design for viewing - applications that create a social event of browsing. In most cases, the interface will be explored using a remote or game controller and often a combination of both. This leads to a level of ambiguity about your user’s context, which can be quite a challenge.
Overcoming this challenge requires a couple of clever design techniques.
Stay in Focus
The user should know where they are in the flow of the application at all times, without too much thought. Using clear distinctions between what is in and out of focus and what is interactive or not is crucial. The layout should be instinctive, using familiar elements like grids and legible labels, removing clutter and focusing on navigating to where your user needs to be.
Another key feature of the lean back experience is that it is inherently social - while mobile devices are quite personal, Smart TV's bring a communal aspect to browsing and interactions. The UI and tone of voice must reflect this, taking into consideration the social groups who will be experiencing them and bringing value to all of the potential users.
Moving through a TV app is quite different to any other device in that there is no traditional ‘scrolling’. Instead, the user has to jump through elements to move down the screen. This can be particularly challenging to design for when there is no certainty which remote will be used to navigate with - toggling may be easier when using a joystick on a game controller, however this context is not guaranteed.
A section of the screen with no interactive elements may lead to the user ‘popping’ from one element to another that is out of view, losing their place in the flow. Keeping this in mind when designing a screen, particularly it’s length and navigation structure, will lead to a better user experience.
After wearables had us designing for glances, Smart TV’s can seem refreshing in their resolution and size. However, distance introduces a limit to your user’s cognitive load. Text should be kept to a minimum and broken into relevant blocks.
Colours should allow readability for the text on the screen. This is done best by having light text on dark background, similar to Netflix’s design which avoids the use of white in all of it’s elements.
Along with this, a safe region of padding should be included around the main content of the application. This removes a few pitfalls where your user could be using a standard TV or a HDTV or where the frame may be obscured by a frame bevel. Generally, keeping all critical UI elements within the inner 85 percent of the frame buffer is a safe zone for all aspect ratios.
And remember, just because you have more space for elements doesn’t mean you should include them - a simple, uncluttered UI is the best UX solution for all devices.