Skip to content

Contact us

Sydney

Phone (02) 9261 4624 Fax (03) 9684 3434 Level 1, 26-28
Wentworth Ave
Surry Hills
NSW 2010
Sydney map

Melbourne

Phone (03) 9684 3470 Fax (03) 9684 3434 Ground Floor
119 Ferrars St
South Melbourne
VIC 3205
Melbourne map

Get in touch

At U1, we love hearing from people. So whether you have a query about the work we do, who's on our team or when's the next training event, contact us via email or phone.

3 reasons why whitespace matters to UX

Kristina Former UX Consultant 18th Dec, 2013

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.

Final thoughts

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.


About The Author

Kristina Former UX Consultant

An avid user of technology both at work and at home, Kristina always has her finger on the pulse. Her passions lie in analysing the social and cultural aspects of technology. She is an acclaimed mobile media expert in areas such as location-based applications, mobile interaction/UX, and smartphone ethnography. Kristina also has outstanding skills in corporate communication, content strategy and project management.

Related

Visit our website if you'd like to learn more about U1 Group     U1 Group