Tuning In: TV App Design & The 10-foot Design Process

Quick! Name the last 3 TV shows you absolutely loved. How many of those shows were on traditional network or cable TV? If you’re anything like us, chances are good that you’re watching at least one — if not all — of your favourite shows via a streaming service, instead of on traditionally-broadcast TV.

“Over the Top” (OTT) streaming services have moved from being cool disruptive “hipster” tech to being a normal part of living room life. From services like Netflix and Amazon Prime, to hardware like Apple TVs, Roku, and myriad native smart TV apps, it’s safe to say that TV streaming apps have landed.

We know how to create great designs for desktop, mobile, and even wearables now. But how do we shift our design processes so that we can create equally beautiful and usable designs for the kinds of “10-foot user interfaces” that are relevant for Smart TV or OTT streaming experiences?

What considerations do we need to make when designing for TV Apps?

Viewing heights and angles: watching TV is often a shared viewing experience, with users of all ages viewing from different heights and angles

Viewing distances and screen sizes: screens and distances are much larger than for a laptop or mobile device, and also much more varied. We don’t have as many “typical” size/distance statistics for TV as we do for desktop and mobile, and so can’t rely on these standards as much

Viewing environments: different ambient lighting conditions impact viewing and TV placement can make glare an issue at certain times of the day

Accessibility considerations: may change depending on the accessibility features your hardware supports

Interface control conventions: Directional or D-pad style, touch remotes, gestures, or voice control can take the place of pointing and clicking or tapping

Given all these variances, what’s a designer to do? There are lots of great resources available that speak to UX and design best-practices for TV app design (e.g. Apple, UX Design, You.i Labs), but today we wanted to share some process-related considerations that we came across when we designed an app for the Apple TV.

Get it in front of users — all kinds of users

When we were designing our app, we had a specialized audience with a particular focus on accessibility we were gearing towards. But whatever the audience you’re designing for, it’s important keep in mind that you’re not designing for just one user at a time.

When it comes to designing TV app experiences, there may be multiple people in one room using your product simultaneously, so when it comes to validating your design with users, you need to test a diverse user set. Be sure to include people of different ages and language abilities, in particular, to ensure that viewers young and old, and with varying degrees of literacy, are able to find and play content.

Finding a research participant with limited literacy can be difficult. One method to bypass this need if you’re having difficulty is to use Lorem Ipsum for all your menu titles and control labels. If users are still able to navigate around your app and control content, even given nonsense copy and labels, your app will probably be intuitive for someone to use even if they don’t read the language your app is displayed in.

Issues of feedback and focus should also be tested with a wider audience, and under broader situations. The nature of TV watching as a low-effort, relaxing activity means that TV watchers often consume content with split attention. They may be cooking, or texting, or flicking through their social media feeds, or in the throes of illness while watching. If a user momentarily looks away to have a conversation, or to tend to an overflowing pot, they should still be able to immediately know where they are in the app, what elements are currently in focus, and how to get to where they want to go once they come back to the TV.

But, short of forcing your user research participants to cook you a full pasta dinner during your test session, how can you approximate these kinds of scenarios? One technique that we can borrow from Cognitive Psychology research is to put your users under cognitive load. Ask your users to complete a typical task flow or goal on your app, but as they do so, have them do some unrelated, but mentally-demanding task.

You can ask them to repeat a chain of random digits back to you, but in the reverse order that you had initially spoken them. You can ask them to name every food item they can think of that starts with the letter “D”. You can ask them to listen to a recording of speech and hit a big button every time a certain syllable is pronounced. The point is, by actively adding distraction to the task of using the TV app, you can ensure that your app is still easy enough to use even when your users’ attention is split.

Get it to-scale

Thanks to the decreasing price of flat screen technology, more and more homes have large screen TVs. Just as there’s value in creating realistic prototypes for desktop and mobile design, you can learn a lot about the relative proportions of your app design elements when you prototype TV designs out to-scale.

Start by making large paper cutouts that are the size and dimensions of a typical TV screen. Having your early sketches at-scale (or close to it) allows you to sit back and get a true feel for how the design — even at a very rough stage — will look on the TV, and helps you get a feel for how large images, type, and controls need to be. If you’re strapped for space or can’t print your sketches or wireframes out to scale for whatever reason, try zooming out to 25% in your designs (whether on your computer screen or in paper printouts) to see if key components will be big enough.

Get it on a TV

Once you’re at the stage of digitizing your designs, get them up and displayed on a TV screen as quickly as you can. Actually, get them up on multiple TV screens as quickly as you can. You can use Airplay on AppleTV, Chromecast, or an HDMI cable to hook your computer up to a TV to display your comps.

Because you can’t predict how users will have their TV sets calibrated, nor the lighting and viewing conditions they’ll have, test your designs out on TVs with different colour settings, and under various ambient lighting conditions. To do this more quickly, you can connect your computer to an HDMI splitter that’s hooked up to multiple TVs, or use Chromecast to cast to multiple screens at once using this beta by Greenscreen.io.

Having your designs up on a real TV also allows you to check how things will look when the viewing angle changes: What does it look like sitting on a sofa versus a chair? Or reclining, lying down, or sitting on the floor? Set up your viewing area to mimic a living room, and look at your work through the lense of someone as they would actually experience it. After putting our designs up on a TV, we noticed that some button treatments looked too heavy, and that we needed to increase the size of in-focus elements. We also decided to increase the font size for greater legibility.

When it comes to designing for the AppleTV specifically, there is just 1 resolution at 1x 1920x1080. This means you won’t have to replicate your designs at multiple resolutions the way you would when designing for multiple desktop screens and device formats.

However, unlike designing for other Apple devices, where Apple provides the complete software and hardware, the Apple TV is a box that connects to third-party TVs. Because you can’t predict or control the eventual TV on which the app is viewed and used, you’ll need to emphasize to stakeholders that the colours they see on demos should be thought of as relative (or in contrast) to the other colours on the screen, rather than thinking about them as absolute. There are also certain colours to avoid (e.g., pure white, oversaturated reds) as these can appear too painfully bright or vibrant when viewed on a TV. For instance, we deepened some of our background colours on our app, to keep things from feeling too eyeball-searing even on TVs that had overly-bright settings.

Get it on a live prototype

Once you’ve got the interaction model, app architecture, and visual design to a fairly finalized state, it’s time to turn your comps into a live prototype. Our dev team used our designs and Apple’s Xcode IDE to create a working prototype of our app that pulled in live data. (Read our own Rafael Silva’s take on the process here.) Again, this prototype should be run on as many different TVs as you can feasibly get your hands on, to get a fuller understanding of how your app will look in the wild.

Right away, running our prototype on several TVs demonstrated that you can’t predict the margins/overscan on different tv screens/sizes, because they can all have different measurements. Apple’s guidelines recommend 60px side margins and 90px top/bottom for a safe viewing area. To avoid any cut off due to random overscan setting and the different screen sizes, we decided to add a slightly larger safe area. We opted for the 85% rule where 85% of the screen’s real estate is dedicated to content and 15% to safe area. (81px side margins and 144 top/bottom is a recommended best practice from You.iTV as well.)

Looking at the prototype, we also noticed that some content preview thumbnail tiles needed to be smaller, to ensure that it was obvious across several TV screens that there was scrollable content further to the right. We saw that, on some TVs, it wasn’t clear that there was more content below our main feature image. So, we reduced the height of our feature panel to make sure the content below it would peek up from the bottom of most TV screens, cueing the user that there was more to see underneath.

The prototype also allowed us to observe how the the AppleTV handled the more interactive elements. Apple has pre-defined how tvOS handles movement and transitions, but because we were designing our app with accessibility as a key focus, we needed to override some of these settings in favour of increasing accessibility.

For instance, we nixed the automatic scrolling of show titles in favour of a static display to increase readability. And when we enabled voice-over mode, it not only reinforced the importance of having pithy content titles and descriptions, but it also revealed that some show descriptions were read twice, even when those descriptions weren’t being focused. This oddity is also part of Apple TV’s out-of-the box behaviour, and we’re currently exploring ways to bypass it to create a smoother experience for users — visually impaired or otherwise — who choose to enable the voice-over functionality.

From a visual design perspective, AppleTV automatically makes small visual changes when voice-over is activated (e.g., a bolder highlight around focused elements, eliminating some of the animation effects), and we were able to validate that our design still looked good with those settings.

Finally, being able to click through a full workflow helped us to vet one last time that our interaction model made sense, and that the controls and navigation structure in our app felt intuitive. As well, we could check to see that the design was appealing even when the Apple TV was in dark mode.

Ultimately, designing a good TV app relies on a lot of the same principles as designing a good web or mobile app. You want to make sure that it’s intuitive and frictionless for your target audience to use, in the contexts that they most frequently use it. You also want to make sure your work looks as intended across as many variants of your device as reasonably possible. Tweaking your research and design processes to account for the TV-specific considerations we discuss above will help ensure your TV app designs look and work as flawlessly as your web and mobile designs do.

Have you worked on streaming TV apps, or other 10-foot user interfaces? What unique challenges and solutions have you come across? Tell us below in the comments or apply to join our team!