Designing User Experiences for the 10-Foot UI
In 2010, 25% of TVs sold were connected to the Internet. Now, 3 out of 5 households with a broadband connection have their TV connected to the Internet for content viewing and social interaction. Television has become part of the continuum of devices that require a rethink of how we design and share web content. Designing and building web content for SmartTVs has many design caveats, compliance issues, and browser fragmentation.
The main design considerations for the 10-foot UI are simplicity and lightweight interaction.
When users sit in front of their TVs, their approach to thinking and interaction changes – they are in a different mental head space. How we present information and interfaces changes with the context of use, location and, according to Netflix, posture. A recent Nielsen study found that TV viewing preferences changed depending on the type of devices, type of content, and where it was watched. Both YouTube’s Lean Back and Vimeo’s Couch Mode are examples of user interfaces that have been redesigned for the 10 foot viewing experience and take into account the user’s head space.
Devices and social media have made watching TV a more interconnected social event. There are opportunities for augmenting the watching experience through second screen experiences. Web applications can bridge content and social interactions. Second screen experiences are revitalizing watching television as a social event.
Pain Point: The Remote
When using a TV remote there is a lack of mouse/keyboard input and heavy reliance on on-screen Alpha numeric input via the D-pad. In addition, traditional vertical scrolling does not have the fine movement that we have come to experience with the mouse on the desktop or trackpads on laptops. The interaction and navigational models are similar but are different enough that they require a rethink. The “how to” video from Samsung illustrates the difference in patterns based on the need to use the TV remote. When designing experiences for TV, you should use horizontal navigational patterns instead of traditional vertical scrolling.
Another pain point is browsers that load the mobile site instead of the desktop site onscreen. This commonly happens with social networks and email clients on a variety of TV web browsers.
As a general rule, text should be broken up into smaller chunks for the web versus print. For a TV-friendly site, content should be broken down into even smaller chunks to increase readability and ease in scanning. Keep the information presentation clutter-free with light text on a dark background. Keep the information density low. Distance will limit the user’s ability to process information. Think in terms of Fitt’s Law – larger scaled elements will allow users to identify and target buttons and interactions faster.
When using the Opera TV design guidelines, graphics and text should be considerably larger with a minimum font size of 22px with short copy (10 words or less) and generous leading/line-spacing. Using a modular scale can help make font and typography design decisions easier and provide a consistent visual hierarchy.
There are no set scales for TV resolutions but a general rule is to make page elements 1.5x bigger for 720px; 2x for 1080p and 4x for 4K (2160p) resolutions relative to the size of that element in a desktop browser. With any design project, test your design style tile concepts early on a few different TV models to see the type of scaling and image rendering that occurs on each TV.
These are guidelines for design decisions, not hard fast rules. Remember you are dealing with 9:16 aspect ratio. Designing on the desktop can make things tricky, especially for 4K as you will find your UI layouts overwhelming your screen with the larger elements and font sizes. However, once, you move to the actual TV screen, you will find the rending of the elements, with the overall viewing distance and screen resolution will put your UI work in context.
As mentioned earlier, you’ll want to increase readability by using light text on a dark background. Avoid over-using saturated colors (especially red) and heavy use of white in large elements or backgrounds. Pure white will create halos and other visual distractions. Most HDTVs are not calibrated with narrow primary colors causing issues of color perception. High contrast will also create haloing. Colors should be muted (think tints and tones) over pure colors (see Movies in Color or my favorite Wes Anderson Color Palettes). Color contrast ratios for TV are an indicator of the image color and show how true blacks will be rendered by the TV. Remember contrast ratios are indicators and only matter when viewing TV in a dark room. Color contrast can be checked with the WebAIM Contrast Checker. Web accessibility guides recommend a contrast ratio of 3:1 for large text. Test your color contrast in context of use. Is the site going to be used in a boardroom or living room? Context of use will require a change in color contrasts.
Relying on media queries will create its own design problems as responsive design works with pixel resolution and not device size (in inches). A 21-inch iMac screen resolution is 1920 pixels by 1080 pixels, the same as a 1080p HDTV television. A 4K 21.5 inch retina iMac display is 4096 x 2304 while a 4K Ultra HDTV resolution is 4096×2160 and iPads are somewhere in between with a standard resolution of 2048×1536.
To illustrate, a 1080p television size can range from as small as 25 inches to over 75 inches, with an optimal viewing distance of 3 feet to just over 9 feet, respectively, while the resolution remains 1920×1080. Viewing angle and distance will also change the user’s perception of pixel density and overall image quality.
|Screen Size||Optimal Distance
|25″||3.3′ (1 m)|
|30″||4′ (1.22 m)|
|35″||4.6′ (1.40 m)|
|40″||5.3′ (1.62 m)|
|45″||6′ (1.83 m)|
|50″||6.6′ (2.01 m)|
|55″||7.3′ (2.23 m)|
|60″||8′ (2.44 m)|
|65″||8.6′ (2.62 m)|
|70″||9.3′ (2.83 m)|
Using @media TV or media types to specify media-dependent style sheets can be problematic as media types are mutually exclusive and using @media will register false-positives for the TV media type. SmartTVs are treated as screens.
SmartTV browsers are becoming better and more compliant. In a quick visit to an electronics store, you can run HTML5Test.com or CSS Media Queries Overview tests on some of the SmartTVs in the store. Older, smaller (2012) SmartTVs generally score under 290 on HTML5Test compared with scores over 410 for the current generation of TVs, with Tizen based TVs scoring upwards of 465 (out of a total score of 555).
The key to a good TV user experience is to avoid the temptation to fill the large screen with content. Less is more. Don’t think of the SmartTV as another desktop. Although there are similarities, TVs have less resources to manage downloading images and utilizing local storage. As with mobile, performance is a design consideration.
As when developing mobile/adaptive/responsive content, remember to test early and test often on TV displays. There are often subtle differences between models from the same brand that add another level of complexity to designing TV friendly web content. SmartTV browsers are still rough around the edges, but should not be discounted in the new continuum of devices we need to design and plan content. SmartTV browsers will only get better.