Website design elements can create a great user experience. In some cases, they create a bad one. While many people spend time considering typeface, color palette, and layout, they spend little considering the cognitive load requirement of their choices. Cognitive load is the amount of mental effort needed to learn something new. In essence, it’s how much mental work is needed to understand something. Websites requiring a low cognitive load keep visitors engaged longer and convert well. A website requiring a high cognitive load will result in low session times and high bounce rates.
It seems like an easy concept. Follow guidelines that keep webpages clean and simple, but too often, web designers don’t follow this concept. As a result, pages often run deep, are exhausting to consume, and can send visitors clicking toward an exit. In this article, we will discuss three design elements and how they impact cognitive load and the user experience.
Estimated reading time: 6 minutes
1. Set Column Widths with Cognitive Load in Mind
According to Winterpm, when people read, their eyes jump across a line of text, pausing momentarily to take in groups of three or four words. Studies have shown that readers can make only three or four of these jumps, called saccades, per line before reading becomes tiring. Long lines with too many words also make it harder for the eyes to find the correct spot when they sweep back to the left to pick up the next line of text. To optimize readability, use moderate line lengths within the range of 40–70 characters.
Here is a line of 40 characters:
XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX
Here is a line of 70 characters:
XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX
Since each character equals 8 pixels, and the most popular desktop screen size is 1920 pixels wide, place text in columns no wider than 1/3 of the screen size. If columns are wider and 1/3 of the screen size, text can be hard to read and demand more cognitive load.
Suppose a webpage is divided in half. One side is used for text, while the other is used for an image or a video. In that case, a designer needs to get creative with the font, character size, and character weight to reduce cognitive load. Another option is the divide the space intended for text into two columns. Run headlines across the two columns but keep the text inside them to improve user experience.
2. Aim for a Reasonable Scroll Depth
Another issue to be aware of is the amount of content that appears vertically on the page. A study by the Nielsen Norman Group found that users spent about 57% of their page-viewing time above the fold or within the screen view. Additionally, 74% of the viewing time was spent in the first two screenfuls, up to 2160 pixels. All this time spent toward the top of pages indicates that most viewers only look at the content at the top of the page.
Some web pages are very long, chock full of information that is sometimes related and sometimes random. For instance, webpages based on services a company offers sometimes include things other than their services. A good example of this is including customer reviews on product or service pages. This adds to the page depth. It would be better to create a page dedicated to testimonials and add a link from the services page. It results in two shorter pages that will hold the viewer’s interest better than a single page with services and testimonials. Not to mention, there are SEO benefits to splitting unrelated or thinly related content into separate pages.
If the goal of a webpage is to lower cognitive load, the best strategy is to prioritize the most important content and display it at the top of the page. Then keep the remaining content concise. Planning for a scroll depth of less than two full viewports is the right strategy in modern webpage design.
3. The Importance of Negative Space in a Great User Experience
The terms “negative space” and “white space” are pretty much the same. They both mean the blank or empty space around text and image elements, but the space doesn’t have to be white in color. So to avoid confusion, the term negative space is better. Negative space not only defines the limits of objects but also creates the necessary bonds between them. Negative space is a design element that delivers a great user experience and big factor in the usability and navigability of the website.
According to Tubik Studio, a company that focuses on UI/UX, graphic and motion design, mobile and web development, and digital art, negative space is beneficial because:
Negative space enhances visual hierarchy and allows users to focus on the key elements. Helping the visitor focus on what’s most important reduces the cognitive load and enhances the user experience.
Conclusion on Design Elements that Create a Great User Experience
It’s pretty simple. If you want a great user experience, design pages that minimize cognitive load. Make it easy to consume content with reasonably sized column widths. If your page content requires visitors to scroll more than the length of two screens, consider breaking the content into more than one page. Offering a button or embedded link gives the visitor’s mind a pause and opportunity to refresh before consuming the content on the next page. And finally, negative space is critically important to help focus attention and minimize cognitive load. Websites that consider these three design elements create a great user experience. They are rewarded with longer session times and lower bounce rates. And most importantly, happier site visitors and better conversion rates.
Sand Key Ventures is a website company that focuses on user experience every day. We build new websites and provide SEO services to keep websites running clean and Google happy. Call us at 727-249-2749 to discuss what Sand Key Ventures can do for you. Thanks for your time, but now we’ve gotta run. We have websites to build and audit, blogs to write, eCommerce to manage, and photos to edit. Until next time, take care.