white-space-matters-large

Why white space matters

Rebecca Huehls's Layout avatar

You already know that people increasingly access web content on smartphones and tablets — and phablets and watches and smatchlets. (Okay, smart watch browsers are still in their infancy, and smatchlets is just a fictional portmanteau of smart, watch, and tablet . . . but just you wait!)

What you — or more likely your clients — may not know is that these changes in web browsing behavior have also changed some of the conventional wisdom about web design. You no longer need to cram all the content that you want website visitors to see above the fold.

(For the uninitiated, above the fold refers to the point where a monitor cuts off a web page and visitors need to scroll in order to see more. The term was adapted from the newspaper industry: A newspaper’s fold cuts off the bottom half of the front page.)

These days, users aren’t afraid to scroll. (That’s one of the newer mantras in web design and content organization.) Mobile screens simply don’t hold that much content. Or if they did, the content would have to be so small, you’d have to squint to read it.

white-space-matters-mobile

On desktop computers, scroll wheels, trackpad gestures, and Apple’s Magic Mouse all make scrolling much easier than it used to be, when your only options were clicking a browser’s scroll bar or using the keyboard’s Page Up and Page Down keys.

Users’ willingness to scroll means that web designers have space. Space to make content easier to understand. Space to separate and organize key areas on a web page. Space to draw attention to special features.

Technically, this space is called white space, but you can use any color you like.

Does your site need more white space? Try these tips!

The following sections take a closer look at how white space can enhance your web designs. You’ll find details that can help you use white space effectively in your designs and help you explain how white space works to clients who may be clinging to outdated principles with their newspaper ink–stained fingers.

Break website content into brain-friendly chunks

In grade school, to help you sound out words or decode their meaning, your teachers probably taught you to break long words into smaller words. Although you’ve clearly progressed beyond your humble beginnings as a young reader, this learning strategy works in all sorts of contexts, including web design.

When you break content into manageable chunks, website visitors have an easier time understanding the content — and remembering it.

In your web page designs, white space defines chunks of information and gives your audience the space to understand and remember that information.

white-space-matters-white

Ideally, white space surrounds just one chunk of information at a time. However, if you have a list or group of closely related items that makes up one chunk of content, try to limit the list or group to no more than four items. (Four items is a safe bet on what a person’s working memory can hold.)

Tip: If visitors encounter content in a logical, progressive sequence, visitors are likely to connect one chunk of information to the next. Building these cognitive connections increases visitors’ ability understand and remember website content.

Define relationships between content on the page

When your design adds more white space around one page element than nearby elements, visitors intuit that the elements that are closer together are related, whereas the element separated with more white space is somehow different.

For example, extra white space can signal the following:

  • One article or blog post ends, and another begins.
  • An image illustrates an idea in a specific block of text.
  • A web page is transitioning from the navigation and page header to content that’s specific to the page.
  • A group of ads is separate from web page content.

Guide visitors through the website

White space guides a web page visitor’s eye toward where to look next. For example, if white space flanks both sides of a page element, visitors are likely to scroll down for more content.

Similarly, white space can help visitors scan the page for specific content or features. Here are a few popular page elements that might deserve extra white space so they’re easy to find:

  • A business’s hours, address, and phone number
  • Navigation bar
  • A search box that enables visitors to search the website
  • A special page or group of links that introduces new visitors to an online community or highlights a website’s most popular articles

Emphasize important areas or features

A tagline, a call to action (like a Buy or Sign Up button), a critical event update — some web page elements need to capture every visitor’s attention.

Remember: When a page element stands alone in a field of white space, visitors will see that element, whether or not they’re looking for it.

white-space-matters

Build trust with your audience through a polished design

Website visitors trust good design.

White space gives a website an open and airy feeling, inviting visitors into a virtual space.

When a website uses white space thoughtfully, visitors also sense that the site owner cares about how well the website works for them. As you’ve learned in this article, white space enhances the user experience in the following ways:

  • Visitors feel at ease taking in the content the website provides.
  • Every page feels organized.
  • Visitors can easily find what they need.

White space also helps a website work for its owner by highlighting areas any area the owner wants visitors to see or interact with.

As you build websites and communicate how your designs work with your clients, remember that sometimes, “the best way for a website to do something is to allow places for nothing. ”

Comments ( 0 )

Join the discussion