Size Matters: Designing Connected Experiences for 10-feet + Beyond
The home entertainment marketplace looks much different today than it did even a decade ago. The booming sales of connected devices, Smart TVs and OTT (Over The Top) streaming services gives users a much richer viewing experience. In 2015 there were 220 million streaming devices sold, and today more than 3 out of every 5 households have a broadband-enabled television.
There are four primary segments of Connected Entertainment:
- Smart TVs
- Blu-Ray Players
- Streaming Devices
- Gaming consoles
These connected devices give users full control over their experience, interacting with their content when, and where they want to watch it.
Design principles for large screen
- Connect your users with content.
- Integrate the application into your brand’s eco-system.
- All of these applications should be simple, both in terms of content and expectations.
- Keep your application lightweight.
Five Common Pain Points
1. Information Density
As the viewer moves further away from the screen, the amount of data you can clearly display decreases, we call this information density.
2. Margins + Safe Zones
Large screens vary in the precise dimensions, so center all of your important data in the “title safe zone,” and away from the margins. Most guidelines recommend a margin of around 5%, so for a 1080p display, 90px on the left/right and 60px on the top/bottom.
3. Colors
Due to the wide color range of uncalibrated television manufacturers, there can be a lot of inconsistency. A few tips:
- Don’t overuse white. Try slight off-whites and grays, to avoid “halo effects.”
- Cool colors (blue, purple, gray) bleed less than warmer (red and orange) ones.
4. Reading + Typography
Reading from 10-Feet away is not easy or fun, so keep things simple:
- Break text into small, digestible chunks.
- Avoid Lightweight fonts.
- Never, ever, ever use type below 24px!
5. Navigation
With native device remotes, video game controllers and universal remotes, there are many ways for users to control their devices. To accommodate the variety of control types, make sure all primary functions of the application can be handled by the D-Pad (direction pad), select button and back button.
Make navigation simple and obvious.
Navigation patterns should follow a simple grid, using primarily left, right, up and down. Forcing users to move in angled directions can be visually confusing, and may be difficult to achieve with standard controls.
Always hint additional items to remind users where there is more to see.
The platforms, today
The current landscape of Connected devices is broad, and ever evolving. Each device has its own benefits, rewards and pitfalls, so know your audience before committing to a single (or multiple) device(s).
In 2015 the key players, by sales, were Roku, Amazon Fire, Chromecast and Apple TV.
However, these statistics may not be parallel to actual usage. Both Roku and Fire TV have lower cost “stick” versions driving sales. The low cost of Chromecast also gets the device into a home, but may not have the same popularity in usage.
The cumulative device ownership looks a little different with Apple TV the clear winner.
Each platform does have their own native styles and recommendation, so check their guidelines for specific recommendations. To make your design and development experience smoother, all the platforms offer:
- Standard UI Patterns
- Device Type Standards
- Default Settings flows and screens
- Unique Keyboards
- Navigation patterns
Diving into the devices
Roku
Since its inception, Roku has been one of the market leaders in the Streaming space. Currently, there are a few versions of the hardware, including a basic, and inexpensive, stick on up to a more powerful 4k set-top device. The Roku OS has been added as the native smart TV OS on a few manufacturers.
Design for Roku can be a little cumbersome, with its proprietary language called Brightscript being very limiting on design capabilities. Fortunately, side-loading and testing your application is pretty easy with Roku’s development mode.
Apple TV (tvOS)
Apple’s tvOS has been one of the leaders in connected entertainment, since its inception, and has the largest penetration of any device.
Design and development is pretty straightforward, and is native in Xcode. Apple’s Human Interface Guidelines are well-defined and easy to follow. UI templates are also fairly prevalent and simple to customize.
Fire TV
Consumers can purchase Amazon’s Fire TV in a few varieties. The biggest difference is the basic stick or the set top version.
Fire TV design guidelines are fairly well defined, and the native aesthetic is clean and straight-forward. Applications can be developed in Android or HTML5, giving designers greater control and flexibility.
Android TV
Android TV, not to be confused with Chromecast, is Google’s full-featured entry into the Set top world. The OS is native on multiple devices from companies like Nvidia and is native on a few Smart TVs.
If you are familiar with Material Design specifications, Android TV will look familiar. It can be designed and developed in Android or HTML5, and there are a number of UI kits available on GitHub, like the Leanback Library.
Samsung TV
Samsung is one of the leaders in the smart TV space, and in 2015 the company switched to their own Tizen OS. This is the same OS they use in some of their phones and tablets and wearable line of products. Naturally, this can lead to fragmentation amongst Android and Tizen units.
Samsung provides good design standards, and they make it pretty easy to test your app out of the box.
Gaming Consoles
Designing for gaming consoles can be a challenge, and the two key players in field, Microsoft’s Xbox and Sony’s Playstation, both have a high cost of entry and an elaborate approval process.
Microsoft Xbox
Microsoft’s Xbox uses the Universal Windows Platform (UWP), so if you develop for one Windows device, you can develop for all of them.
When designing for Xbox, do not forget about the option of Snap mode.
Design Guidelines | UI Guidelines | Design Templates
Sony Playstation
Playstation, especially PS4 offers well-laid out pattern libraries, navigation structure design guidelines. The main pain point is the cost, and effort, of entry. The development devices are expensive, require a lengthy approval process.
UX Guidelines (login required)
When designing for the 10-foot experience, make sure you test your application on the appropriate devices, verify the colors, fonts and other graphical elements across multiple screens and sizes.
The landscape for connected entertainment is ever changing. New Smart TVs streaming device technology keep the industry moving forward. By making sure your users come first by bringing them key content, setting clear expectations and creating an easy-to-use application you will always have a winning application.
Have fun out there, getting connected.
