Thinking on UX design, white space isn’t just an aesthetic choice— it serves three essential functions.
If cluttering your interface overloads your user with too much information, then reducing the clutter will improve comprehension. In fact, properly using white space between paragraphs and in the left and right margins has been proven to increase comprehension up to 20%. The skill of using white space lies in providing your users with a digestible amount of content, then stripping away extraneous details.
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).
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).
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 together). 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.
When observing how individuals organize visual information, Gestalt psychologists stumbled on what they call the Law of Proximity, which states that images near to each other appear similar.
Place labels closest to the relevant fields. As you can see in the below example, information is communicated far more clearly when labels are placed closer to the fields they relate to. Research has shown that even the slightest hesitation can hurt form completion. In this case, merely adjusting the spacing increases the user’s confidence in filling out the form, which of course improves completion rate.
Group related topics together. When dealing with long forms, the task of filling them out can seem so overwhelming, some users will quit before even trying. Breaking the information up into appropriate groups can help make it feel more manageable. In the form on the right, just categorizing the 15 fields into three groups makes the process feel easier. The amount of content is the same, but the impression on users is much different. Form fields usually present the most friction to users, but the same principles can also apply to navigation and site content. Instead of a top navigation menu with 20 items, you can create a dropdown menu with four to seven top-level items and the rest categorized under submenus.
Ultimately, you need to understand that the power of white space comes from the limits of human attention and memory. Just compare the Yahooand 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.
Reducing cognitive load will make the UI not only more usable but also more enjoyable to use, and it’s white space that will help creating this sense of harmony and fluidity throughout the user’s experience.