Using Spaces Correctly to Enhance User Experience

White Space

Consider the below stated clothing stores to shop for apparels. Where do you think the user would be satisfied and have a pleasant shopping experience?

Consider the space inside each of the stores. Where do you think the products would be sold more easily with a better ability to capture user’s attention and provide them with a better shopping experience?

You’re right! The image on the left would provide a better user experience. It aids the consumer’s attention and decision making process since the environment is uncluttered and breathable.

Whitespace is a design element that refers to the empty space between pictures, paragraphs, icons, buttons and other elements on the webpage. In simple terms, it is that portion of the webpage that is usually left blank and untouched in order to make the page more readable and easier to interpret.

Apple effectively utilizes whitespace in order to garner attention and impacts sales. The way Apple advertises its product is an art in itself by using whitespace. No distractions at all.

Have you ever considered whitespace as ‘spaces between the design’? While that may be a prevalent line of thought, however, it is vital to understand that whitespace isn’t just a filler between the design elements.

As much as design is about shaping and organizing, it equally entails what fills the space. It is perhaps the most important design element.

“Whitespace is to be regarded as an active element, not a passive background.” – Jan Tschichold

In technical terms, designers refer to white space as ‘negative space’. This term does away with the usual misconception about white space: white space needs to be white in colour. It could be blue, brown, yellow, red or any colour. Even a pattern/texture/background image that fills the background could be a whitespace or negative space.

What does space do?

First and foremost, space contrasts non-space. Think about your favourite music track. Music is created by a contrast of sound/tune against silence. Different sounds occur at different intervals; and the blend of both creates a melody.

Music is ultimately a patterned blend between sound and silence. Visual spaces are the silence in the music. It connects elements by being sparse and separates elements by being vast.

When the designer masters the art of contrasting the space between elements, he/she can control the aspects of the design entailing:

• Direction
• Flow
• Rhythm
• Balance
• Motion

Apart from this, whitespace also impacts:

• Aesthetics of the website
• Improves focus of the users
• Leads to effective communication

“It helps us understand what we see because it separates information and helps create a hierarchy. Without the appropriate use of white space, one thing flows into another with no relief, ideas merge, and the message becomes confusing. When that happens, communication ceases, and the design fails in its purpose.” – Alvalyn Lundgren

Types of Whitespace

Typically, we divide white space in two types:

1. Micro Space

Micro white space entails the smaller gaps and buffers in between the content. Micro space can be found between:

• Words
• Paragraphs
• Navigation links
• Letters
• Images or content in a grid

The aim of micro white space is to improve the readability and legibility of the content.

2. Macro White Space

In contrast, micro white space is the space between major elements in a design. It separates the elements by appearing in abundance. This can be found –

• In the margins of the website
• Around CTA buttons
• Around images
• Encircling the logo
• Separating the main content from other content
• Between the sections of a page

Lets understand this better by doing a little exercise. Open a new tab in your desired browser and search for google.com. What’s the first thing you observe? I bet it was the brightly coloured Google logo right? Where was this logo placed? What was around the logo? How did your attention get drawn immediately at the centre of the webpage?

Google uses an abundance of macro white space to naturally draw the user’s attention towards the centre of the page where the minimalistic design resides. The purpose of the macro white space is to enhance the website layout and make it easier for the user to navigate. This also helps guide the user’s eyes in the desired direction.

Active White Space

Active white space refers to the empty areas intentionally added to a webpage to aguide user’s eyes down the page or through a funnel of conversion and reach a conclusion. It helps create structure and flow on the page while guiding the user through the content.Active white space is typically asymmetrical and leads the user from one part of the design to another.

For example, a coconut tree centered in the canvas leads to symmetrical and passive space

Passive White Space

This white space refers to the gaps that naturally occur in design. They will be there with or without the designer placing them and do not guide the users. It is a leftover byproduct and does not contribute to the meaningful whole. It exists because the positive elements do not consume that space.

Passive white space is usually symmetrical.

For example, coconut tree when placed off centre, it creates asymmetrical space making the composition more active.

Passive White Space

White spaces play a pivotal role in empowering the designers to communicate and focus on the features of the web page that actually need to stand out as vital aspects. They help create a welcoming layout, thereby inviting users to stay on the website for longer durations. Below stated are some ways that allow a designer to design a website that is capable of enhancing user experience and creating a lasting impression:

i. An increased level of comprehension

According to recent research, it has been found that white space between paragraphs in the right and left margins increases comprehension of the content by almost 20%. In addition, users find it easier to process and focus on well-spaced content.

To best use this concept, designers could also:

• Colour code the content and group information.
• Pictorial / graphical representation of long areas of text
• Abundant space in between texts and paragraphs.

ii. Highlight the Call to Action (CTA)

Users have an average level of attention. They cannot recall more than one or two highlighted items while skimming through a website. Whitespace around the Call to Action (CTA) buttons and highlighted items tends to increase their prominence.

White spaces around CTA gives it room to breathe in and drives the potential customers in the conversion funnel. If the marketers want to make a product stand out, they could add white space around the product name and/or the product image or CTAs like “Buy now”, “Add to Cart” button.

iii. Guide user’s eyes

Designers can do this by organizing the webpage’s content into no more than 15 points on a single page. Further, the designer can set the order of priority for those 15 points, for example:

• Logo
• Navigation bar
• Hero image or hero header
• Text or paragraph

While positioning the content, designers need to decide on where the micro and macro space would be, that is, where each piece of content or group of elements would be placed on the screen.

Conclusion

White space refers to the emptiness of a webpage but there’s a lot of meaning and purpose behind that emptiness.

Whitespace is undoubtedly a vivid element that allows the designer to meet the site’s objectives in the best possible manner. By understanding and incorporating micro and macro space in the website design, designers can not only make the website user friendly but also enhance attention and decision making of the clients.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]