Why White Space is crucial to UX Design

Share this:

First of all, you may be thinking about how this space are co-related to the designing analogy and how it pays attention to UX? If you are a good visual artist you may understand the importance of negative space, the empty area that draws attention to, and accentuates, the actual subject. Negative space we may consider it as the artistic equivalent of a designer’s white space, for example like the supporting cast whose duty is to make the star of the show stand out more by not standing out so much themselves. Can you understand the essential need of white space by this example trying to say is you may not be the star but your presence is important? If you don’t think any part of your design should be intentionally blank, take a look at the World’s Worst Website Ever for an extreme example of the damage caused by too many objects competing for attention. In interaction design, white space isn’t just an aesthetic choice— it serves three essential functions.

“White space is regarded as an active element, not as a passive background.”

-Jan Tschichold

Let’s look into  the power of white space:

1. Improving Comprehension:

Suppose if you are clustering your information with lots of information it makes users confusing and not pay attention and then reducing the clutter will improve comprehension. Properly, In fact, using white space between paragraphs and in the left and right margins has been proven to increase comprehension up to 20%, as pointed out by Dmitry Fadeyev. The skill of using white space lies in providing your users with a digestible amount of content, then stripping away extraneous details.  

Not this much but with the use   White space can be broken down into four elements: visual white space (space surrounding graphics, icons, and images); layout white space (margins, paddings, and gutters); text white space (spacing between lines and spacing between letters); and content white space (space separating columns of text).

The best example of the combination of the four elements of white space can be seen in the Medium Platform.

Medium:

Medium is a great example of striking a nice balance with all four elements of white space. First, think about the goal of the user from an interaction standpoint: users want to access interesting content as quickly as possible. The homepage immediately facilitates that goal by placing content front and center, with plenty of white space on either side to add emphasis. There is ample space around visuals and between lines of copy, although the padding around images could be more uniform (notice how the space to the left of each image is not consistent with space below.

Even they used the background as a combination of the white screen highlighted by light white space.

2. White space helps to create mind maps

Beyond improving comprehension, white space also helps create mental maps. Minimal white space is used between the top navigation and content stream since both serve similar functions in driving the user deeper into content and similar functions should be grouped. Because the right-side navigation focuses more on creating and saving content, more white space separates it from the content stream. In this case, white space helps users assign different functionalities to different parts of the interface. Once users click through to an article, white space helps them focus on what they care about most: the content. Notice how the extra spacing between each line of text improves readability.

“White space is like air which is necessary for designing to breath .” 

3. Clarifying Relationships

When we are observing any image which is created by visual information it becomes somehow difficult to understand by observing it, can say the difference in terminological words we say Gestalt psychologists stumbled on what they call the Law of Proximity, which states that images near to each other appear similar. For example, take a look at this picture: Almost everyone sees two groups of dots, rather than simply 20 dots.                       

 The dots are all identical and the only thing differentiating them is the white space that separates them. This behavioral observation has several important applications for interaction design, especially with regards to input forms. Here are two to remember: Place labels closest to the relevant fields. Information is communicated far more clearly when labels are placed closer to the fields they relate to. Group related topics together. When dealing with long forms, the task of filling them out can Break the information up into appropriate groups that can help make it feel more manageable. 

4. Attracting Attention.

As we noted above, the lack of other elements will only make existing elements stand out more. Our redesign for Yelp is a case in point. In the high-fidelity prototype, we added plenty of white space to separate the categories from the search function. In doing so, the category icons are much more noticeable and less cluttered than their current vertical format. Combined with an animation-like color fill that’s triggered on hover, the category section now attracts even more attention while providing better feedback to the user. But because humans have a selective attention that leads to tunnel vision—like tuning out banner ads, known as “banner blindness“—you also need to know when the spacing between content should be reduced and altered.

“If everything yells for your viewer’s attention, nothing is heard.”

  -Aarron walter 

5. Limits of human attention and memory

Ultimately, you need to understand that the power of white space comes from the limits of human attention and memory. Just compare the Yahoo and Google interfaces. Yahoo tries to get the user to consider too many actions at once. Google understands the bottom line that people just want to use search engines to find stuff. By being realistic about the user goal, Google’s design encourages more effective interaction.

Most designers subscribe to the “don’t make the user think” school of thought. It’s not that users are just lazy, it’s that they already have a lot on their mind, and cramming extra information just makes it harder to complete their tasks. The amount of strain an interface design creates is called “cognitive load.”

Over the years, designers have developed strategies for minimizing cognitive load without sacrificing features. As complicated as the human brain is, its shortcomings are surprisingly predictable. In 1956, scientist George Miller released his findings that our short-term memory can usually retain data of between five and nine items an average of seven before forgetfulness sinks in. While the exact number has been contested (three to six items is the current ideal), Miller’s findings have proven effective and led to important IxD methods, including so-called “chunking,” the practice of grouping relevant information together to make it easier to process and remember. 

Reducing the cognitive load will make the UI not only more usable but also more enjoyable to use, and it’s white space that will help to create this sense of harmony and fluidity throughout the user’s experience.

Want to learn UX? Apply Now

Posted in UX
Leave a Reply

Your email address will not be published. Required fields are marked *