We recently did research for a government agency. One of our findings was that the agency’s website was overly cluttered. There was simply too much content packed onto the individual web pages, leaving users feeling overwhelmed and confused as to where to focus, let alone where to click, on the website.
Users found the website did contain useful information, but they felt unmotivated to read on when faced by dense pages of text. Part of the problem was the way content was presented on the website and that there just wasn’t allowed for sufficient whitespace.
What is whitespace?
Whitespace is not a new design principle and it has been used in visual arts and print design for many years. It is basically the space between elements in a composition. In web design, the core characteristic of whitespace is that it surrounds the screen elements and allows for users to better distinguish between the elements and sections of content.
Like the example of the government website shows, whitespace is sometimes underrated in design and this at the cost of the users. At times, the majority of content is cramped onto the area above the fold of a website because there is a fear that users won’t scroll down to the bottom of the site. This is a myth and studies have shown that users do scroll to the end of a page.
So here we list three key reasons to why you should always value whitespace highly in your design.
1. Whitespace guides users
Above all, you want to know who your users are before you start applying whitespace throughout your website. You want to know why they visit your website and which content they expect to find during their visit.
Once you have identified users’ needs and goals, you can then use whitespace as a way to guide them through your website. Whitespace can give users a better idea of where to focus, find what they are looking for and make interactions stand out.
Keep in mind though that despite the wording, whitespace doesn’t have to be white. It can be colour or texture; as long as it makes the content you want users to focus on to stand out.
2. Whitespace improves readability and scannability
A key aspect of good usability is the readability of content. Reading a computer screen is harder than reading paper. Also, when we read a printed newspaper, we are familiar with the columns of text with minimum line spacing. On the web, users often want to scan through the copy to quickly identity those areas of content that are of interest to them. You can apply bite-sized chunks of text and apply bullet points and short paragraphs to help minimise eye strain, and surround this content with enough whitespace to make it more scannable.
Designers often refer to ‘macro’ and ‘micro’ whitespace. Whitespace can range from the spacing between the different sections of a homepage (macro-spacing) to the spacing between letters (micro-spacing). Research shows that use of whitespace between paragraphs and in the left and right margins of a website (i.e. macro-spacing) can increase comprehension by nearly 20%.
Line spacing can also drastically change the legibility of a body of text. Line spacing is the micro-white-spacing between lines of text and by implementing line spacing, we can improve the user’s experience whilst reading. Similarly, letter spacing can improve legibility.
3. Whitespace can add to a sophisticated look and feel
Whitespace can not only improve usability of a website, its minimalist appearance can also add to a sophisticated look and feel. Just think of the simplicity of the modernist design principles created by the Bauhaus movement.
An example is how whitespace is used on e-commerce sites as a way to accentuate products. This doesn’t mean all websites should be almost completely stripped of content. The way you apply whitespace to your website depends on the message and quantity of content you would like to share with your users.
Whitespace unclutters design and helps draw attention to the content that you want your users to focus on. It is an important design element that can help you deal with unnecessary clutter, bring balance to a website and make it easier to use.