Jakob Nielsen’s How Users Read the Web turns 25 this week, and one look at an eye-tracking study will tell you that his key insights are still relevant today.
Simply put, users don’t read a web page; They scan it for individual words and sentences.
A typical pattern shown in eye tracking reports is that users will quickly scan a page, scrolling down to do so. Then hit the back button and pump up your bounce rate, or scroll to the top and re-engage with the content.
Even when content, volume and quality tick all the user’s boxes, and they choose to stay on your site, they still don’t read; they scan; scan a little deeper, but still scan.
As a result, it is essential to design websites to be easily scannable, in a second scan to determine if your page is worth the reader’s time and a second or third pass.
Clarify the Purpose of the Current Page
Each page should have a main goal. Most of the time, that goal is contained in a CTA (Call to Action).
The good news is that if your SEO (Search Engine Optimization) has gone according to plan, your goal (ie to sell something) and your users’ goal (ie to buy something) will be aligned. By clarifying the purpose of the page, you can show the user that your goals are aligned.
You can be experimental if you are an established company and if the user knows what to expect. But if you’re new to the market or have a lower profile, you need to stick to established design patterns. This means that SaaS should look like SaaS, a store should look like a store, and a blog should look like a blog.
If your CTA is included above the fold – meaning in the context of the web, the user doesn’t have to interact to see it. That makes it easier for the user to progress and clearly tells the user what you have to offer.
The landing page for next month’s Webflow Conf 2022 clarifies the content of the page, with a clear CTA above the hour.
Employing a Visual Hierarchy
The Von Restorff effect states that the more something stands out, the more likely we are to notice and remember it.
Visual hierarchy is excellent for guiding a user through content. HTML has the heading levels h1-h7 – although, in reality, only h1-h4 is used a lot – giving you different heading levels that different readers can scan at different rates.
For example, we know that subheadings don’t have much impact if a user diligently reads the page from top to bottom, but they are great for catching the eye of casual readers.
Amnesty uses a very simple hierarchy, the only change to its subheading is increased weight. But it is enough to catch the user’s eye.
You can also create a visual hierarchy with other types of contrast; weight and color are often used as well as size. For the sake of accessibility and comprehensive design, it is wise to combine visual indicators when creating a hierarchy; for example, headlines are usually bigger, bolder and more colorful.
Use Negative Space
Imagine a person standing in a crowd. Let’s say they’re wearing a red and white striped jumper and a red and white bobble hat – pretty distinctive. But if they’re surrounded by hundreds of other characters, it might be hard to spot them.
Now imagine that the same person is dressed the same, standing alone. How long will it take you to see them? Even without the stripy outfit, it’s not much of a challenge.
Not only are individual features easier to see, but they draw the eye because the negative space (sometimes called white space) around them creates contrast.
When using negative space, the key is to give elements enough room to breathe and attract the eye without giving them so much space that they are disconnected from the rest of your content.
Throughout his site, Moheim uses negative space to highlight UI elements while grouping related content.
Use F Patterns
Users scan a page using F-pattern or Z-pattern.
Because users scan your page in predictable ways, we can use a layout that accommodates this tendency.
Designers have been aware of F and Z patterns for some time, and because they have been used for a long time, they can become self-fulfilling, training users to scan a page on the this way. However, both patterns are similar to how the eyes travel from line to line in horizontal writing systems.
Whatever the reason, by placing key content on these paths, you increase the chance of capturing a user’s attention.
Kamil Barczentewicz uses a beautiful, natural layout that also adheres to the classic F pattern.
Include Images with Faces
Images are a great way to communicate brand values and make a site attractive. But when it comes to scanning a user’s eye for design, the best images include faces.
For example, a testimonial with an image of the customer will catch the eye more than a text-only testimonial.
The Awwwards Conference uses a computer animated face to attract attention. And large images of speakers making eye contact.
This is almost certainly due to social conditioning; we see a face, and we touch it to see if it is a threat or not. Most of us naturally look to expressions of emotion to understand situations, and the distinction between a real person and an image has not yet made its way into our mental programming.
You do not need to use photos. Illustrations are fine. The key is to make sure there is a face in the image. That’s why character illustrations are so successful.
Copy Print Design
Print design is centuries older than the web, and many print applications, from newspapers to advertising, developed design elements to attract the eye of readers scanning the design.
Subheadings, lists, block quotes, and quotation marks draw the eye. Heading paragraphs in larger size or even in italics draw users into the text. Shorter articles encourage users to keep reading.
Horizontal rules used to define sections of text act as breaks for eyes traveling over content with momentum. They are a good way to reach a scan reader who is losing interest.
You can use a horizontal ruler or break up your layout with bands of color that divide content sections.
Omono uses horizontal bands to highlight different parts of the content.
Mass, No Weight
We often discuss design aspects such as weight; font weight equals the thickness of the strokes.
But it’s more helpful to think of design elements as mass; mass creates gravity, drawing a user’s eye towards them.
The trick is to design elements with enough mass to attract the user’s eye as they scan at speed without forcing the user to change how they engage with your content.
Image featured via Pexels.