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't always just white

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.

A busy screen causes decision panic

Throwing too much on the screen overwhelms your user and causes decision panic.

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.

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

An interface with good balance and hierarchy between elements

A TV interface with good balance and hierarchy between elements

An 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 their 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.

About the author

Pascal Potvin, Canada
member since October 20, 2016
With 12 years of experience in UI/UX and art/creative direction, Pascal has practiced, led, and built design teams in diverse environments—leaving him with a versatile skill set, strong work ethics, and a wide breadth of knowledge. He balances well between honoring users, achieving business objectives, and delivering immersive experiences. He's crafted experiences for Sony, Turner, TCM, TNT-TBS, Fox, NBA, NFL, Nickelodeon, Disney, and more. [click to continue...]
Hiring? Meet the Top 10 Freelance UI Designers for Hire in December 2017

Comments

brianm101
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.
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).
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?
brianm101
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
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
Subscribe
Free email updates
Get the latest content first.
No spam. Just great design posts.
Free email updates
Get the latest content first.
Thank you for subscribing!
Check your inbox to confirm subscription. You'll start receiving posts after you confirm.
Trending articles
Relevant Technologies
About the author
Pascal Potvin
Designer
With 12 years of experience in UI/UX and art/creative direction, Pascal has practiced, led, and built design teams in diverse environments—leaving him with a versatile skill set, strong work ethics, and a wide breadth of knowledge. He balances well between honoring users, achieving business objectives, and delivering immersive experiences. He's crafted experiences for Sony, Turner, TCM, TNT-TBS, Fox, NBA, NFL, Nickelodeon, Disney, and more.