We’ve written in a general sense on why providing a good website user experience will build your customer base and increase conversions. In this article, we explore in more depth some of the web design fundamentals of how you present your web content and how you structure a web page. The idea is to do it so that your users will feel good about visiting and using your site and at the same time, will efficiently direct them to the information you want them to see.
It is well known by now that people generally scan a web page first, and, if they think it will offer them some value, they may then read the whole thing, or at least some valuable bits of it, with attention. The trick with business web design, is to make this tendency work for you. Of course, enticing, informative web content is critical, but first you need to write it and position it on the page in a way that plays into people’s tendency to scan, so they will actually see, read, and process your important information. In this article, we’ll look at three design elements to structure your web page to allow for efficient scanning of your web content and still communicate the information you need people to read.
Scanning Patterns
We scan a web page in definite patterns. The best-known pattern is the F-shaped pattern scan, but there are other patterns as well. The F-shape pattern of scanning was identified in 2006, using heatmaps to study how people read web content. In a nutshell, this is it:
- First, we scan horizontally across the top of the content area,
- Then we do another horizontal swipe, slightly lower from right to left,
- Lastly, we scan vertically down the left of the page.
According to the F-shaped scanning pattern, you should place your most important web content at the top of the web page’ and along the left side. Of course, the same content will flow differently on different devices, and the information the user sees in the F-pattern scan will be slightly different depending on their device. Still, this scanning pattern is still alive and well on the web, even on mobile devices, and is most often used when a user is faced with a large block of text or if the user is looking for quick answers to their questions. In left to right languages such as Arabic, the F-shaped pattern is flipped.
Is the F-shape pattern of scanning an efficient way of gleaning information? The short answer is no. Much important information is missed if you mostly read the left side only. But website users are, in a way, betting on the big data approach to gaining the information they seek. They scan many websites, often leaving several tabs open at once to refer back and forth, and these sites are usually ones that have been vetted and ranked higher, since these are the ones that come up first in search results.
But all is not lost — you can modify the scanning pattern and help direct attention to important web content by using certain design elements strategically. Blocks of text and headings will help direct attention so people scan in more of a layer cake or spotted pattern. But first we must talk about white space, because it is our best friend in web design (or any design), making different scanning patterns possible.
White Space Provides Breathing Space and Directs Attention
Opening a web page and being confronted with an impenetrable block of text or a page that is cluttered with many web content elements all vying for attention is overwhelming and fatiguing right from the start. Many users simply won’t put in the effort and will leave your website. White space is absolutely essential to provide a relaxed user experience, giving visitors the visual break they need to take in and process all the information on the page. White space isn’t necessarily white, by the way, it can be any colour as long as it is empty and contrasts with the element you want to highlight.
From your perspective, as the business website owner, white space is the most important way to reduce distraction and bring attention to elements you want people to see. If you want a user to click on a button to buy your products, give it space; space brings focus to this element and makes it more legible.
Format Written Web Content Into Easy to Scan Blocks
While it is still important to respect the F-shaped scanning pattern by placing your most important information at the beginning of the content section, formatting the text to facilitate scanning will help direct attention throughout the webpage.
- Break your text up into blocks.
Let white space to do its job by breaking text up into smaller blocks, rather than long paragraphs. Even better, if you want some textual information to stand out, use formatting such as different coloured background or a border, to group related blocks of text to bring attention to this area.
- Use bulleted or numbered lists.
Using bullet points or numbered lists makes your web content easier to scan. They naturally make great use of white space, making their condensed information highly legible and efficiently understood. They work with our tendency to scan for information, instead of against it. Especially in the context of outlining a process, or highlighting just a few items, lists are invaluable.
- Highlight links and words or phrases.
Highlight items that you want to stand out even further. This will result in more of a spotted scanning pattern with the user jumping from one highlighted word or link to the next. Used sparingly, this can be a useful technique to bring attention to specific words. You must, of course, make sure the words or link anchor text is informative and worth the attention.
Use Headings to Help Organize Web Content
Headings and subheadings are gifts to scanners looking to get as much information as they can with the least amount of reading. Headings help break the text into blocks, prompting more of a layer cake type of scanning, where most of the attention rests on the headings with a less intense skipping through the blurb below. In this way, a scanner receives quite a bit of information.
Headings also give hierarchical structure and clues as to the importance of the associated text. They provide a sort of a frame to understand the text that follows and how it fits within the context of the totality of information on the page. To make sure headings are effective, they must stand out, using size or colour to give them importance. And to be on the safe side, give respect to the F-shaped pattern scan by putting the most important words at the beginning of the headings, so the reader will get the gist of it right away, in case they read no further than that.
Headings are important not only to the reader, but to the search engines. Headings can help the search engines know what your web content is all about, and whether it is relevant to an individual’s search intent.
In Conclusion
By understanding and working with the user’s tendency to scan a web page for information, you can use design to bring their attention to the web content you want them to see. Not only is this more rewarding for them, since the entire experience will be more ordered, efficient, productive, and less stressful, it will also benefit you as the business website owner.
After all, the journey to buying your products or engaging your services often starts with your website, and if the user experience is good, those customers are that much closer to converting. Happy customers are more likely to purchase your products or services.
