Cover image
UI Design
5 minute read

TV UI Design: Working with White Space

White space is an often overlooked and underutilized element in many TV UI designs. However, using white space intentionally improves comprehension and focus and enhances the user’s experience.

Read the Spanishes version of this article translated by Yesica Danderfer

Designing for TV requires a comprehensive, disciplined understanding of UX principles. One of the elements that is a constant concern when designing for TV is the use of white space in design. There are too many TV apps on the market that don’t know how to (or consciously choose not to) properly harness white space. The result is cluttered eyesores that actively undermine business objectives.

Here is an explanation of what white space is and how using it in your TV app is best for business.

White space is our friend

First and Foremost…

What is white space?

White space is an unoccupied piece of real estate with zero text or graphics layered on top.

This is important to note because a background graphic image can be considered white space as long as there is nothing added above it.

White space isn
White space isn’t always just white.

What’s the Big Deal?

Why does something so simple make such a difference? Business owners often see white space as a lost opportunity to promote more content—a waste of valuable screen real estate. Their objective is to put as much content as possible in front of users, which, on some level is understandable. However, when too much content is made available to customers, they face what’s called decision paralysis—a complete lack of the ability to decide.

Hick’s law, or the Hick-Hyman Law, named after British and American psychologists William Edmund Hick and Ray Hyman, describes the time it takes for a person to make a decision as a result of the possible choices he or she has: increasing the number of choices will increase the decision time logarithmically.

That’s actually a big deal when you factor in the whole concept of TV apps—CHOICE! How many times have you browsed an endless library of TV show and movie thumbnails only to find yourself unable to decide on anything at all? It’s not because the content isn’t great. It’s because there’s no breathing room—no significant separators. Your mind sees so many options, it shuts down.

To designers, white space is the negative space on a page which provides visual breathing room for your eyes.

Designers know that white space helps the user focus and absorb the content they want them to see.

US-based full-time freelance UI designers wanted

Say Yes to White Space

White space is especially important to TV app design because typically, users are relaxed, enjoying a laid-back experience—trying to make a decision at a distance. By providing them with a nice balance between content and white space, we are actually helping them through this process.

When used correctly, white space can transform a design and the experience a user will get from it. Designs and layouts need room to breathe in order to be easy on the eyes and help facilitate decisions. By utilizing white space, you actually increase content legibility and user interactions. This is achieved by reducing the distractions that are preventing viewers from making a decision.

According to research conducted by Human Factors International, white space increases user comprehension by almost 20%.

Let’s look at how white space helps to create breathing room, and how that transforms the decision-making process.

A TV interface seemingly designed to cause anxiety
A TV interface seemingly designed to cause anxiety.


A TV interface trying to do too much at the same time
A TV interface trying to do too much at the same time.


Aesthetically well executed but lacking white space between content
Aesthetically well executed but lacking white space between content.


An interface with breathing room
An interface with breathing room.


A TV interface with good balance and hierarchy between elements
A TV interface with good balance and hierarchy between elements.


A TV interface with good balance and hierarchy between elements
A TV interface with good balance and hierarchy between elements.


See that?

White space creates clear separations that focus a user’s eyes on the content you want them to look at.

Hulu does a great job of using white space in its Hulu Live app. Check out the large background image that is used instead of traditional poster art—it’s immersive and beautiful to look at. This is a great example of how to use the huge retail space available.

Hulu draws you in with immersive white space
Hulu draws you in with immersive white space.

White space reduces cognitive load and speeds up decision-making. As described by Fast Co Design, adding white space does much more than just remove clutter—it serves these essential functions:

  • Improves comprehension
  • Clarifies relationships between interactive elements
  • Attracts and focuses users’ attention

White space isn’t just about aesthetics, it’s the key to a successful user interface. By focusing on visual white space, layout white space, text white space, and content white space, we dramatically improve user comprehension. This adds emphasis and positions your content front and center. Images that are close to each other will appear similar; thus, clarifying relationships to users will allow them to navigate in confidence. As you’ve heard before, “less is more.”

Use the power of white space to elevate your designs and help with decision-making.

Reducing cognitive load will make the UI not only more usable but also more enjoyable to use—white space will help create a sense of harmony and fluidity throughout the user’s experience.

Effective Use of White Space

Here are some more examples of TV apps that use the power of effective white space to create interfaces that are enjoyable to use.

These TV interfaces allow the user to focus on one, rather than dozens of choices
These TV interfaces allow the user to focus on one, rather than dozens of choices at a time.

White space is an element that is too often overlooked and underutilized in many of today’s television designs. While content is king in TV apps, it doesn’t mean that we should clutter the screen by covering every inch of it. White space is a simple yet powerful design device that should be applied to every TV app in the market. It’s modern, sleek, visually stimulating, and proven to help users decide what content to watch.

The use of white space in design allows your content to shine on any size screen
The use of white space in design allows your content to shine on any size screen.

• • •

Further reading on the Toptal Design Blog:

Comments

brianN2
As an engineer, and sometimes UI designer understand and agree with everything you say. However as a TV user everything you say is wrong! White space just drives me crazy, it means more pressing of buttons or scrolling - Hate it Hate it Hate it! Leave white space to the advertising boys and gals, for TV information want as much information as possible - Now!
brianN2
As an engineer, and sometimes UI designer understand and agree with everything you say. However as a TV user everything you say is wrong! White space just drives me crazy, it means more pressing of buttons or scrolling - Hate it Hate it Hate it! Leave white space to the advertising boys and gals, for TV information want as much information as possible - Now!
Pascal Potvin
I like your point of view. I believe the goal is to strike the best possible balance between white space and content to ease decision making. Not always easy as their is no "one size fits" all model.
Pascal Potvin
I like your point of view. I believe the goal is to strike the best possible balance between white space and content to ease decision making. Not always easy as their is no "one size fits" all model.
Kagai
Design balance can be complicated. Whether to use white space or give a customer as much info in the shortest time possible, is something that has to be agreed between the business owner and the designer. The business owner will look at the design based on their target market and they might have data on how their customer behave online. A designer might look at it from an angle of latest trends online. So, along as the two parties can find a parallel that works, that is all that matters at the end of the day.
Kagai
Design balance can be complicated. Whether to use white space or give a customer as much info in the shortest time possible, is something that has to be agreed between the business owner and the designer. The business owner will look at the design based on their target market and they might have data on how their customer behave online. A designer might look at it from an angle of latest trends online. So, along as the two parties can find a parallel that works, that is all that matters at the end of the day.
Thrawn05
As a TV user, I say you're completely wrong. When I see Sling and the other UIs that you say cause anxiety, I see a UI that provides me with a quick overview of all available choices. Netflix and the prior version of Hulu allows one to glance ahead to see what other options might be available to view. I see the new Hulu, and I see wasted space, truncated text and deprived of information (not to mention that the coloring system has an effect on those with visual impairments).
Thrawn05
As a TV user, I say you're completely wrong. When I see Sling and the other UIs that you say cause anxiety, I see a UI that provides me with a quick overview of all available choices. Netflix and the prior version of Hulu allows one to glance ahead to see what other options might be available to view. I see the new Hulu, and I see wasted space, truncated text and deprived of information (not to mention that the coloring system has an effect on those with visual impairments).
Denis Kobylinskiy
What if the issue of buttons or scrolling is not in the TV's interface but in the bad TV's remote controllers design, please imagine that you could choose not by pressing a button thousand times but by simply swiping like at the mobile interfaces and one long swipe can smoothly scroll a few items at the time, does this make sense?
Denis Kobylinskiy
What if the issue of buttons or scrolling is not in the TV's interface but in the bad TV's remote controllers design, please imagine that you could choose not by pressing a button thousand times but by simply swiping like at the mobile interfaces and one long swipe can smoothly scroll a few items at the time, does this make sense?
brianN2
That sounds terrible! Mobile phones tend to be two handed use (except when on a call) so swipes etc. are fine. A remote TV controller on the other hand is a one hand device so not a good UI idea -not going to put down beer/pizza etc.. Plus a swipe is a lot harder work then a press - so couch animals will not be impressed.
brianN2
That sounds terrible! Mobile phones tend to be two handed use (except when on a call) so swipes etc. are fine. A remote TV controller on the other hand is a one hand device so not a good UI idea -not going to put down beer/pizza etc.. Plus a swipe is a lot harder work then a press - so couch animals will not be impressed.
Paul Neervoort
Although you may be right, that is your opinion. The thing with design is what do real users who are not engineers wamt and prefer. Let me tell you, with 20 years of tv ui design experience, if you design an easy navigation model, there is no real difference between navigating berween 20 items if they are on one screen or 2 or 3. What makes a difference is flat and wide versus narrow and deep. Even though on button count it is the same amount of clicks. Believe me we have tried and tested it. And that has to do with the psychology of navigation.
Paul Neervoort
Although you may be right, that is your opinion. The thing with design is what do real users who are not engineers wamt and prefer. Let me tell you, with 20 years of tv ui design experience, if you design an easy navigation model, there is no real difference between navigating berween 20 items if they are on one screen or 2 or 3. What makes a difference is flat and wide versus narrow and deep. Even though on button count it is the same amount of clicks. Believe me we have tried and tested it. And that has to do with the psychology of navigation.
Paul Neervoort
I like your point on the whitespace. Totally recognize the struggle. But i have to say, it took me some years to understand the issue. The psychology of users, their mental models , interaction technologies and commercial requirements often appeared incompatible :)
Paul Neervoort
I like your point on the whitespace. Totally recognize the struggle. But i have to say, it took me some years to understand the issue. The psychology of users, their mental models , interaction technologies and commercial requirements often appeared incompatible :)
comments powered by Disqus