Whitespace in TV Design

Pascal Potvin

Here’s a scenario for you; you’re sitting down to dinner and you’re trying to find something to watch on Netflix. You see row after row of thumbnails, and you’re stuck on deciding whether you should “continue watching”, try a new comedy, action, or drama, or dedicate yourself to a new TV show. You continue to scroll through the homepage, then eventually make your way to the categories and try to specialize your search. Again, you’re met with a page full of choices.

You begin to get irritated, your food starts to get cold, and you decide to ditch your search and just rewatch the last season of The Office for the hundredth time.



Call this over-choice, or choice overload, or decision paralysis. It goes by many names but it’s the inability to make a decision when faced with too many choices. We’ve all been there at some point or another and it’s bad news for users and worse for content providers.

In the attention economy, frustrated, confused, or existing users is poison for businesses. If you’re not garnering ‘eyeballs’, you’re losing out. That’s why designing a wicked user-interface is vital to your strategy. It’s the medium eyeballs interact with and a key business driver. Take the scenario above for example. How would changes to the user-interface enhance decision-making, draw focus, and garner attention? The answer to that is “whitespace”.


App POC for AT&T — You.i TV



What is whitespace? Well, whitespace is an unoccupied piece of real estate with zero text or graphics layered on top. That’s important to note because a background graphic image can be considered whitespace as long as there is nothing added above it.


TV UI concepts — You.i TV


Adding whitespace is design 101. Any UX designer should know the value that whitespace brings to an environment.

It’s a visual separator. It guides the eyes through a design, making sure to amplify only what’s important. It provides relief, breathing room, and an easier way to scan a page. It’s sharp, simple, and it just looks amazing.


FOX Play “For Me” page (tablet) — You.i TV



Unlike game apps, where you’re launched into the content, or music apps, where you have the option to shuffle your playlist, TV apps are designed to be a decision-based experience. You are choosing what you want to watch every time.

Your brain has to process titles, thumbnails, header images, metadata, cast lists, and video playback (in the case of previews) before making a decision. This alone isn’t an issue, but when you multiply it by rows and rows of content options, you’re primed and ready to reach your cognitive load — a term used to describe how much information your brain can process at a time.

Nobody has the time or cognitive resources to be completely thorough and accurate with every decision, and as more decisions are required and more options are available, the challenge of doing the decision making correctly becomes ever more difficult to meet,

– Barry Schwartz, The Paradox of Choice

Tools such as the ever-popular “recommended for you” option are put in place to make the decision-making process easier but you’re still tapped with making the final decision to hit play.

Look, I get it. If you have a large bank of content sitting in your TV app, you want to make sure it’s seen and visible and not lost to another page or “load more” button. Many content providers see whitespace as a big empty space; a lost opportunity to promote more content, a waste of screen real estate. They want to put as much as possible in front of the users.

The rationale makes sense but whitespace is especially important to TV app design because often, users are in a relaxed, laid-back experience, trying to make a decision. By providing them with a nice balance between content and whitespace, we are actually helping them through this process.


And as we all know, a user will judge your entire app based on their negative experience with it. If a user is unable to make a decision on your app, they will feel your service isn’t suiting their needs and will jump ship to another streaming option. In a 2017 survey by Park Associates, 31% of U.S. broadband households have multiple OTT service subscriptions. In short: other options are out there.


When done correctly, whitespace can transform a design and the experience you will get out of it. By applying this simple technique, you actually increase content legibility and user interactions. It achieves this by reducing distractions that stop viewers from making a decision. According to research conducted by Human Factors International, whitespace increases comprehension by almost 20%.

Let’s look at how whitespace helps in creating breathing room and how that transforms the decision-making process.


Sling TV “ALL” tab

POC for Apple Music (Apple TV) — You.i TV


See that? Just by adding some whitespace, the thumbnails and titles pop so much more. The eye can easily scan each card separately without being overwhelmed by rows and rows of colors, cards, and text. Yes, there isn’t as much content on the image with whitespace but the fact that a user is dedicating more attention to each independent card means they are processing information to make a decision.

Whitespace creates clear separations that focuses your eyes on the content you want them to look at.

Here are some examples of TV apps which are taking advantage of whitespace design.

Hulu Live TV

TBS “SHOWS” lander (Amazon Fire TV) — You.i TV


Reuters TV (iOS)
Filmstruck home screen (Apple TV) — You.i TV


Whitespace is an element too often overlooked and underutilized in a lot of today’s television designs. While I get that content is king in TV apps, it doesn’t mean it should cover every inch of the screen. Whitespace is a simple yet powerful addition that should be applied to every TV app in market. It’s modern, sleek, visually stimulating and a proven method for deciding what content to watch.

Related: Re-Thinking User Interface Design for the TV Platform


Here’s something similar we think you’ll enjoy.