More does not always equate to better. When creating a website, too much information can lead your user to be confused, overwhelmed, and eventually drive them to exit your website. The solution: whitespace.

Whitespace is the empty design between elements. It gives your content and users room to breathe. Contrary to its name, whitespace does not have to be white. It can be any color, pattern, texture, or even a background image. The correct use of whitespace can increase legibility, give a sense of navigation, and improve website performance. Some people refer to it as visual silence, and who doesn’t like a little silence every once in a while?

Why Use Whitespace?

When utilized appropriately, whitespace improves the navigation of a web page. Whitespace guides the user through the page, showing them the proper progression of the website. Whitespace also boosts legibility of the page. Be mindful of the whitespace between everything, even the letters in a word. Give your content room to breathe.

The image above shows three variations of the same exact content; however, the whitespace has been adjusted in each example. Which of these three is the easiest to read?

Whitespace Example

The Google Homepage is a popular example of whitespace in web design.

Google could put numerous other elements on their webpage such as Google Mail or Google News, but by taking a minimalist approach to design, Google makes the purpose of this web page obvious. They want the consumer to use their search engine, and they convey this message with the use of whitespace.

Where to Utilize Whitespace

1. Beginning and End of Lines of Text

One important place to include whitespace is before and after lines of text. The optimal amount of characters, including spaces, is between 50 and 75 per line. If lines of text are too wide, the reader’s focus will wear off by the end of the line. If the lines of text are too narrow, the reader’s eye will travel back too often and break their reading rhythm.

In the picture above, Volkswagen uses three columns to make sure their reader will not lose focus. They added just enough whitespace between each column to ensure that the reader understands how the text is organized and that all of the information goes together.

2. Between Sections

Again, whitespace is like visual silence. Breaking sections up with whitespace will give that feel of visual silence before the next topic. The use of headers or headlines with large text is a common way to break up sections. The larger the text, the more whitespace there should be surrounding it.

From the Volkswagen example above, the text that says “Yes, it’s a Volkswagen. Yes, it costs $65,000” is cushioned by a significantly larger amount of whitespace than the three columns of text. Not having enough space around headers or headlines will cause them to lose their power.

3. Around CTA’s

Always assume the user does not know where to go next. Whitespace can help encourage your user to look and click where you want them to. You want the user to easily see your call to action or CTA. An example of a CTA is a “Learn More” or “Buy Now” button. To help direct your user’s attention to your websites CTA, leave whitespace encompassing it.

In this example, notice that the image with less whitespace hinders the user’s view of the CTA. The image with more whitespace around the CTA is easier to detect and is, therefore, more prone to an interaction.

It may be tempting to fill your webpage with as much information as possible, but you must remember empty space is not wasted space. The best way to highlight an important item is to put nothing around it. To ensure that your whitespace is being used effectively, use Discida. Discida will take a critical look at the user experience of your website. View our user experience research options.

Danielle Heiken contributed to this article.

Sources:

  • https://www.interaction-design.org/literature/article/the-power-of-white-space
  • blog.teamtreehouse.com/white-space-in-web-design-what-it-is-and-why-you-should-use-it
  • blog.usabilla.com/5-ways-whitespace-can-impact-ux/
  • https://baymard.com/blog/line-length-readability
  • www.sitepoint.com/using-white-space-how-emptiness-can-give-so-much-to-design/
  • blogs.adobe.com/creativecloud/the-importance-of-whitespace-in-web-design/

Also published on Medium.