Website trends come and go, but some old-school best practices endure well past their expiration dates, and age just about as well as your middle school mullet.
Our Busting Website Myths series helps agencies find a better path to website usability, and relegate outmoded myths to the rubbish heap of history. Our Certified User Experience expert, Uriz Goldman, takes on a new UX myth this week – Empty Space is Waste.
Simply put, white space (or negative space) is the spacing between different elements on the website that contains nothing. Contrary to what one might think, white space doesn't necessarily have to be white. In website lingo, it simply refers to the empty space around design elements or a page layout that can positively affect your site’s readability. Examples of whitespace include:
- Space around images and buttons
- Page margins, gutters and paddings
- Space between columns
- Line-spacing and letter-spacing within text
What is white space?
In an effort to share information with the public, many local government web managers have forgotten the importance of protecting the white space on their homepages. While on the surface it may seem placing information on the homepage means it will be more frequently seen, overcrowding this area will actually make it significantly less useful and usable.
White space is as important as the content on your page. In fact, it’s an essential design element that creates balance and readability. Just as white space can draw a reader’s focus to specific content, it can also help guide the reader’s eyes from one point to another. Additionally, white space provides:
- Increased Content Readability: When users are on your site, they should be able to see where they are going and be given a reason to keep reading. White space between and around blocks of text make it easier for people to read and scan a web page.
- Guidance and Focus: White space is an effective tool to guide your visitors through your website and help them find what they’re seeking. Padding around images and blocks of text help focus the reader’s attention on the most important content.
- Ability to Highlight Call to Actions (CTAs): White space can be just as effective around calls-to-action as making them bigger to increase their prominence.
- Balance: Too little whitespace leads to confusion, disorganization and unreliability – qualities you don’t want associated with your site’s brand. On the other hand, too much could highlight a lack of content and a lack of user guidance. The key is to balance your designs and let white space act as an effective tool to separate chunks of content for easy accessibility and improved user experience.
- A Break: Content overload is real, and too much of it without proper spacing can become overwhelming to the reader. A long page full of text without spacing between paragraphs, padding around images, or even page margins can be distracting and uninviting to read.
How Can You Use White Space?
Don’t confuse or distract your readers with unnecessary clutter. Help them focus on their goals by:
- Adding space around images to separate them from other images and text
- Setting page margins and paddings
- Using line-spacing, letter-spacing, breaks and bullets
- Creating space between columns
The City of Provo, Utah adds plenty of white space on its pages to separate different topics, images and widgets. The reader can easily scan this page to find specific information like who to contact, types of neighborhood events, and related neighborhood topics.
Call-to-action buttons don’t necessarily need to be big or flashy to capture the reader’s attention. Having a good amount of padding around the button – like the “Learn More” button on the Orange County Sanitation District homepage – can be enough to make it stand out.
Use White Space Strategically
When used correctly, white space can improve user experience, create visual balance, and guide the reader throughout your website. If you’re considering a redesign but don’t know where to begin about using white space on your website, contact us to schedule a consultation to see how Vision can help.