{"id":55700,"date":"2021-04-29T07:00:37","date_gmt":"2021-04-29T14:00:37","guid":{"rendered":"https:\/\/www.eigene-homepage-erstellen.net\/?p=55700"},"modified":"2021-04-27T13:18:47","modified_gmt":"2021-04-27T20:18:47","slug":"less-is-not-always-more-how-too-much-white-space-can-harm-user-experience","status":"publish","type":"post","link":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/content\/less-is-not-always-more-how-too-much-white-space-can-harm-user-experience.htm","title":{"rendered":"Less Is Not Always More: How Too Much White Space Can Harm User Experience"},"content":{"rendered":"\n

White space, also known as negative space, is one of the most vital design principles in modern web design. It’s also one of the most complicated usability elements to nail down. If used well, users can immediately notice important information on any given interface. But if used poorly, users may need to work harder to find what they need.<\/p>\n

It’s important to note that there’s more to white space than just aesthetics. White space is not actually<\/em> white; it can be any color, pattern, image, or shape. It’s also not an “empty” space. White space creates intentional negative space between user interface elements such as text paragraphs, imagery, buttons, and forms to ensure that each element is legible.<\/p>\n

To understand how white space impacts user experience, we must first understand its purpose and origins, starting with the rise of minimalist art.<\/p>\n

What Is Minimalism, and Why Is It Trendy in Web Design?<\/h2>\n
Minimalism was an art and music movement that began in the U.S. in the late 1950s and continues to play an important role in today’s digital and physical design spaces. While its predecessor abstract expressionist art embraced intense colors, spontaneity, and improvisation (think: Jackson Pollock), minimalism strives to achieve simplicity, order, and harmony by utilizing geometric shapes and monochromatic palettes.<\/p>\n
Today we see and use minimalism’s concepts everywhere, and it’s even become a lifestyle. In 2015, Nielsen Norman Group analyzed 112 minimalist websites to identify some of the common characteristics of minimalist web design<\/a>. They found over 90% of minimalist websites had flat patterns and textures (not using gradients or shadows to appear three-dimensional) and used limited monochromatic color palettes. Over 80% of the sites had minimal features and elements (including menu items, images, and links) and featured maximized use of negative space.<\/p>\n
Embracing “Less Is More” In Web Design<\/h3>\n
Minimalist art was influenced by the famous German art school, Bauhaus<\/a>, which focused on design functionality and inspired a generation of designers and artists to craft useful and beautiful objects.<\/p>\n
The unofficial minimalist motto, “less is more,” is widely attributed to one of Bauhaus’s owners and famous minimalist design architect Ludwig Mies van der Rohe<\/a>.<\/p>\n
In web design, we achieve less with more by not overwhelming users with options. In other words: by presenting users with less, we are helping them achieve more.<\/p>\n
Principles of Minimalist Web Design<\/h3>\n
There’s a range of minimalist design guidelines that offer best practices around the use of typography, gridlines, graphics, imagery, and of course, white space. To keep things simple, know these three core principles of minimalist web design:<\/p>\n
\n
Keep only the essentials:<\/strong> Include the most vital pieces that are important for the core use of your product or design.<\/li>\n
Focus on function and usability:<\/strong> Your product’s content and design systems should work cohesively to create a seamless user experience.<\/li>\n
Make it simple and clear:<\/strong> Use white space, flat patterns, and contrasting colors to draw attention to foundational elements such as headings and call to action (CTAs).<\/li>\n<\/ul>\nWhat’s the “Right” Amount of White Space in Web Design?<\/h2>\n
White space is key to both usability and design: But when does white space become too much that it’s harmful to user experience?<\/p>\n
In Jesse James Garret’s book The Elements of User Experience<\/a>, he notes that “one of the most complicated parts of designing web interfaces is figuring out what should stay and what should go.”<\/p>\n
Though there isn’t one “right” way to approach this quandary, there are five steps you can take to figure out how much white space will best aid your users’ experience across your site.<\/p>\n
1. Highlight the Most Important Elements<\/h3>\n
White space is used to direct users’ attention to the most important contents of a page: The information your users need to achieve a task or a goal.<\/p>\n
To discover what your users care about most, answer the following questions:<\/p>\n
\n
What is the first thing a user is looking to find or do on this page?<\/li>\n
Where on the page would the user expect to find the information they need?<\/li>\n
Where on the page would the user expect to complete a specific task on the page?<\/li>\n<\/ol>\n
2. Prioritize the Top of the Fold<\/h3>\n
The top of the fold<\/a> is the welcome mat of every page, making it the most important real estate in your design.<\/p>\n
If there’s too much white space at the top of the fold, users may not be compelled to scroll to find what they need. However, if there’s too little white space on the top of the fold, users may feel overwhelmed and quickly bounce.<\/p>\n
Before adding or removing white space to the top of the fold, consider the following:<\/p>\n
\n
Without scrolling beyond the fold, can users tell what the page is about?<\/li>\n
Without scrolling beyond the fold, do users have a clear idea of what task they can achieve on the page?<\/li>\n<\/ol>\n
The information at the top of the fold should always be self-explanatory, including the global navigation labels. Make sure you’re using descriptive and clear language across all labels and CTAs. Don’t leave your users guessing!<\/p>\n
3. Focus on Findability<\/h3>\n
When treating unique elements in relation to one another, follow the law of proximity<\/a>. The closer elements are—the less white space there is in between elements—the more they’re perceived as related to one another.<\/p>\n
Before adding or subtracting white space around a specific element, consider whether the additional space will help users quickly locate the information as they scroll through the content on the page. Remember, not all elements have the same level of importance to your users.<\/p>\n
Let’s take a look at Costco Optical’s<\/a> use of white space. We can assume the goal of this page is to show users what type of products Costco Optical offers and help users shop for and purchase lenses. The following image shows a mobile view of a section of the page:<\/p>\n

What’s the “Right” Amount of White Space in Web Design?<\/h2>\nWhite space is key to both usability and design: But when does white space become too much that it’s harmful to user experience?<\/p>\n