Top 5 UX Mistakes Made when Designing for TV

Posted on November 8, 2017

According to Nielsen’s 2016 Comparable Metrics Report, 92% of US content consumption still happens through a TV screen. Clearly, when it comes to video content consumption, North Americans are nowhere near ready to kick their TVs to the curb in favour of their tablets and smartphones.

Today, viewers rely on Smart TVs, gaming consoles and controllers, OTT services and streaming players such as Roku and Amazon Fire to get their fix. Adding to the fun of it are handy features like remote apps and voice command functions – elements that are quickly becoming the norm. With the rise in popularity of these TV add-ons and features that ensure we can watch the shows and movies we love whenever we want to, comes a unique set of design considerations specifically for TV interfaces.

Whether you’re a UX designer that creates TV products and services or a service provider looking to launch or improve a TV product offering, it’s essential that you familiarize yourself with the do’s and don’ts of 10-foot experience design.

Why Call it the 10-Foot Experience?

When designing any product interface, we as designers tend to perch ourselves attentively and in close proximity to our well-calibrated computer screens. When watching TV; however, the context differs dramatically. Not only do we sit much further away from our screens, but our attentiveness is significantly reduced (the psychological state of TV consumption referred to as “Lean Back”). There are also a number of environmental factors that impact our view, such as lighting and glare.

The average distance between a viewer and their TV measures 10 feet. This standard, along with screen size, use context, peripheral interactions and tech compatibility, must all be taken into consideration when designing for TV.

This article covers some of the rookie mistakes (the “don’ts!”) we’ve spotted on the TV app market. More specifically, here are five common mistakes that occur when the considerations listed above are not kept top of mind throughout the design process.

1. Underestimating the Value of White Space

White space refers to the unused “real-estate” that lives between various elements on a page or screen. When accounted for, the resulting interface is clean, clear and easy to navigate; while the experience it provokes is intuitive and fosters quick decision-making on the part of the user.

This interface was designed by LVL's UX and UI teams for Blue Ant Media's Love Nature Samsung Tizen app

Though seemingly easy to grasp, you’d be shocked at the number of TV apps that do not leverage the power of white space. Such products end up looking cluttered, are tricky to navigate and contribute to decision paralysis ¬– a major cause of search abandonment and, over time, customer churn.

There are a number of reasons why the white space design principle is too often overlooked. For one, many product owners come from mobile or tablet design backgrounds. Since these devices are smaller in size, designers are forced to cram a ton of information into a tight space – an exercise that should be avoided at all costs when designing for TV.

Second, we all have an instinctive desire to provide as much information as possible, no matter the context. The more content the merrier, right? Wrong! Being presented with too many options can cause confusion, frustration and indecision. Feelings you do not want your users to experience as a result of using your product.

Robert Browning said it best – less is more. Respect the value of white space and speed up your users’ content discovery journey. It’s a win/win for all!

2. Throwing Aesthetic Rationale to the Wind

From font size and weight to contrast and colour, the choices UX teams make that affect interface appearance have a direct impact on the experience a product provides. All too often, designers and product owners alike find themselves blind to the need for clear visual hierarchies and contrast. As such, TV apps are designed using small font, low contrast and clashing colours.

Before drawing on a mix of best practices and orders from a product owner or client; it’s important to take a moment to consider use context. When do people normally watch TV? Most tune in between 6pm and 12pm, after long work day. They’ve most probably been staring at a screen for hours, are suffering from tired eyes and, seeing as it’s night time, are immersed dim light. Add to this the golden “10-foot” standard distance and what you get is a perfect storm of factors affecting interface readability.

Just like a car’s dashboard at night, a TV interface should be highly legible even in the worst conditions. The focus should remain on the most important cues (such as the speed and fuel gauges), yet such elements should still take a back seat to the view of the road, or in our present case, the TV programming.

3. Forgetting that the Interface is the Cursor

TV screen navigation is dictated by a remote’s D-Pad (UP/DOWN, LEFT/RIGHT). Consequently, a TV product’s interface should be designed in grid format to facilitate D-pad navigation and expedite user comprehension.

D-Pad navigation also impacts the time elapsed between a user’s action (selecting an episode) and the screen’s reaction (moving the Focus State to the desired episode). To put this into perspective, the Action/Reaction distance of an iPad is 0. In this “Free Navigation” context, users are able to move in any direction and select items at the simple touch of a screen. It’s just not that simple when it comes to TV.

In addition to a distracting video playing within the UI, TV navigation models have a unique need of always exposing the user to what element is actually “in focus”. If you press the Left arrow, where are you coming from? If you press OK, what exactly are you agreeing to? A very distinct and obvious focus state is required for every interactive screen element. Colour, size or fill qualities must be exaggerated to let the user know which screen element you are about to interact with.

When a product owner or designer fails to take distance, navigation format and focus state into consideration, the product interface is not intuitive. A disconnect forms between the user’s actions and their impact on the screen and mass frustration, or in extreme cases, product abandonment can ensue.

4. Overlooking Safe Zone Margin Requirements

When Cathode Ray Tube televisions were the norm, much of a video’s outer edges risked being cut off. To ensure that titles and important visual elements wouldn’t get cut, safe zones with generous margins were established.

The good news is that today’s TV monitors are much more precise; however, there’s still a slight chance that a small percentage of an image may not display. Most viewers’ TVs are set with a small “overscan” as a factory default, causing a very small part of the video feed to be lost. The current recommendations call for a Safe Title Area of 90% and Safe Action Area of 93% so that the video feed displays accurately and entirely. Designers should heed these margins to ensure that critical UI elements do not get clipped.

5. Bypassing the Prototyping Process

There’s no denying the value of mock-ups and wireframes; however, relying solely on these static arrangements to guide the creation of a 10-foot experience can cause long-term problems.

For one, designers sit no more than 2 feet away from their computer screens when creating these visuals – that’s 8 feet closer than the standard distance a user would be sitting at. What’s more, mock-ups and wireframes don’t provide enough insight into what a product’s user flow or overall user experience resembles.

This is where prototyping comes in handy. For one, it allows designers to create screen-by-screen user flows to ensure that each step a user must take to get to an end-point is logically structured. As for the overall user experience, prototyping can give you a better feel for the end product before the development phase begins. This, in turn, allows for adjustments to be made before it’s too late. Lastly, such a process facilitates user testing, which is a critical step to gaging stakeholder buy-in and customer validation.

Want to know more about our experience in TV app design and development? Check out our work.

Recent news

BRBR Takes Home a Gémeaux Award!

September 21, 2017

This past Sunday marked the 32nd annual Gémeaux Awards, and we are thrilled to let you know that TFO’s hit music app, BRBR, which was designed and developed by our very-own in-house talent, took home the award for Best Digital Component of a TV Episode or Series!

Mid-February is upon us and while many have Valentine’s Day or winter’s imminent end on their minds, the only thing those of us working in kids’ entertainment can think about is the 2017 edition of the Kidscreen Summit in Miami.

As you may have guessed, LVL is off to the sunshine state to join the industry’s major movers and shakers. As for what’s in our luggage? Over 13 years of media and entertainment technology experience and an extensive portfolio of successful children’s transmedia projects that range from awesome second screen experiences to educational games, engaging apps and more. We certainly aren’t packing light!

LVL is headed to CES 2017 in Las Vegas this January to showcase E2, our rapid app development and deployment solution.

Built within the Unity 3D environment and designed with storefront operations in mind, E2 offers premium content publishers the full set of integrated tools needed to continuously provide modern media consumers with the most innovative viewing experiences.