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 Interface

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.

UX guidelines

Apple TV

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.

UX Guidelines

Fire TV Interface

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.

UX Guidelines

Android TV Interface

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.

UX Guidelines

Samsung TV

Samsung TV Interface

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.

UX Guidelines

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 Interface

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 Interface

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.