In the information age of today, time is a very valuable commodity, especially for business owners and marketers. When research suggests that humans have attention spans shorter than a goldfish, there is every reason to design your website such that it delivers expected information almost immediately.
Making your website more scannable is one way to achieve that. The goal is to allow new visitors to quickly scan the page and find the information they are looking for. Here are some tips to make your website more scannable:
1. Follow conventions.
Unless you are sure of your drastically different idea, stick to conventions, at least for the most part. Conventions will differ according to the kind of website you have, and they are mostly dictated by the top two to three players in your industry. For instance, if you have an online travel portal, your target audience will expect a search bar at the top of the homepage to filter travel details.
Similarly, if you have a business-to-business (B2B) website, users will expect a “contact us” link at the top or bottom of your webpage. Logos are typically located on the upper lefthand corner of the website, while the main menu is at the top of a page.
2. Use visual hierarchy.
Visual hierarchy is the principle of making certain elements of your website more prominent than others in order to draw users’ attention. There are several ways of achieving this:
Size: This one is the most obvious. The larger the size, the more attention-grabbing it is. However, simply making your call-to-action buttons 10 times bigger is not going to deliver results. In fact, an abnormally large button with too much text can throw users off (remember conventions?). Instead, the perspective of size can be achieved through contrast.
For instance, in order to make your CTA buttons pop out, keep the size of the rest of the text smaller. Similarly, the size of the headings should be slightly larger than the size of the body text.
Color: Much like size, contrasting colors can be used to draw the attention of your users to important parts of your website and, hence, make it more scannable. Typically, reds and blacks can be attention-grabbing. However, even when you are using subtler color palettes, using contrast between different elements can have the desired effect. For instance, a soft yellow against a white background will demand attention.
Layout: Together with size and color, layout can help you define your website’s visual hierarchy. Here, Gestalt’s principles can come in handy. The philosophy was coined by Max Wertheimer to explain how humans perceive visual input. While there are several Gestalt’s principles that can be applied to web design, here are two of the most important ones:
- Things that appear similar tend to be perceived as related. You can use this principle to make clickable buttons on your website stand out. Similarity can be achieved through color, size and shape. For instance, you can make all the clickable CTAs on your website with a blue button that has rounded edges.
- Things that are closer together are perceived to be related. This principle can be applied to separate different sections of your website. For instance, you could have all of your social media links on one side of the website, while navigation controls can be on the other side.
3. Pay attention to your typography.
First and foremost, make sure your text is legible. Use a common web font, such as Helvetica or Verdana. When applying contrast between text and background, make sure you don’t use clashing palettes.
Next, maintain consistency. Important headers should be the same size, font and color. Consistency helps users jump to relevant sections, thus making your website more scannable.
It is also important to use plenty of white space to separate different sections of text. Relevant images are another way to break down your content into smaller chunks.
4. Limit the number of choices.
Paradox of choice is real, and it can wreak havoc with your conversion rates. Simply put, the more choices a user is presented with, the more work he or she has to do to make a decision. In order to make your website more scannable, limit the number of choices you present on each page. Doing so will allow the user to make a quicker decision, which means they are more likely to find the information they are looking for.
5. Cut out the fluff.
Every block of content on your website should deliver useful information. Telling your visitors how much you value your clients isn’t telling them much. Instead, genuine testimonials on your website tell them a lot about your quality of work. Similarly, including any awards or recognition that your organization has won is way better than telling visitors your mission or vision.
It is important to point out that the tips here should be treated as general markers for a more scannable website. Like other web design principles, these, too, should be used in conjunction with A/B testing to arrive at the most optimal design for your web presence. Heat maps are your best friend here.