In the information age, time is a valuable commodity and something people don’t want to spend too much of. As a result, the average visitor only reads about 20% of the content of a page. 

For web designers and developers, that means a few things: first, you need to ensure that the web pages you create are as engaging as possible; secondly, you need to find a way of making the critical information on any page stand out; thirdly, every modern designer needs to create assets that are easy for today’s fast-paced customers to use. 

Making websites more scannable is how you do your part as a designer to ensure that the customers who come to a page get the quick and convenient experiences they need. 

So, how do designers embrace scannability?

Designing for Scannability: An Introduction

At first glance, the concept of creating a website for scannability is strange. 

Most designers start their projects with the aim of making customers stay on a page for as long as possible. So it’s odd to think that you would want to make it simple for end-users to skip from one page to another on a website in a matter of seconds. 

However, scannability isn’t just about delivering information and getting users off a page. When sites are scannable, they make it quicker and easier for customers to slide down the purchasing funnel. A quicker and more convenient customer journey leads to a stronger user experience and more conversions. 

Look at Netflix, for instance. It doesn’t give interested users a ton of information on its homepage. Instead, the key USPs of the product are laid out bright and bold in the middle of the screen, along with one simple call to action: Get Started.

Designing for scannability means making it easy for users on a page to glance at a screen and instantly access all the information they need to take the next step in their buyer journey. 

There’s no needless scrolling or wondering what to do next. 

According to analyst Jacob Nielsen, scannability is essential because people look for specific things on every page they visit. 

Customers don’t read through web pages word by word. Instead, they scan through the content, plucking information out that serves their requirements. 

Questions to Ask When Designing for Scannability

So, how do you know if your web pages are scannable?

Start by asking the following questions:

• What’s the intent of the people who arrive on this page?
• What kind of information needs to be conveyed instantly?
• Can the visitor see the next step in their journey immediately?

For instance, when someone arrives on the Evernote homepage, you can assume that they want to:

• Find out about Evernote
• Learn how to sign up
• Jump to other pages to find out about features, and contact details

That’s why the designer behind the Evernote website placed an immediate piece of useful information at the top of the page: “Tame your work, organize your life” tells customers exactly what the entire product is all about. The brief paragraph of information underneath can provide a few more details if customers need it, then there’s an immediate call to action: Sign up for free. 

Not only does the call to action tell users what to do next, but it tells them the most important information they need straight away: it’s free. 

Scannable pages like this are useful because:

• They help users complete their tasks quicker: Whether you want to sign up or learn more about the product, everything you need is available instantly, with no scrolling required. 
• The bounce rate is reduced. Customers don’t get confused and hit the back button. That’s good for your client’s SEO and their bottom line. 
• The website looks and feels more credible: Because customers get all the answers to their questions immediately, they’re more likely to trust the website. 

So, what are some of the best things you can do to make your sites as scannable as possible?

Use Visual Hierarchy

Visual hierarchy is a way of organizing the content on your website in a way that adheres to how people use the website. For instance, if you land on a blog page, you expect to see the headline first, maybe some information about the writer, and any other essential information, followed by the body content. 

Although it’s tempting for designers to try and surprise users with new visual strategies, the best way to make your content more scannable is to give end-users precisely what they expect. 

If you’re not sure what a page should look like, try checking out the competition. 

One of the most obvious visual hierarchy rules is that the main navigation should always go at the top of the page. 

Customers will expect to look at the top of the page to find navigation. They don’t want to have to scroll through your website, searching for a way to get to another page. If you want to make it as easy as possible for end-users to jump from one page to another, you can pin the navigation bar to the page so that it stays with users as they scroll. 

Maintain Negative Space

White space, negative space, or whatever you call it – is the part of your design that’s left empty. 

White space is crucial because it gives all of the objects on your page some much-needed breathing room. Without enough negative space on your pages, it’s impossible to embrace scannability because there’s too much information for a customer to take in at once. 

For instance, notice how there are big gaps of space between every element on a Forbes website post. A proper amount of negative space on your site ensures that users can quickly take in chunks of information and use that information to decide what to do next. 

To ensure there’s enough negative space on your website pages, ask yourself what the key elements visitors will notice when they come to a website. The essential items should be:

• A title or header to confirm that the user is in the right place
• A CTA that shows your user what to do next
• A navigation header or menu
• Critical information includes an introduction to what a page is about or an excerpt from the blog post they’re about to read. 
• A visual component: A picture or image that gives context to the page. 

Anything else can usually be removed. So, for instance, if Forbes wanted to make the page above more scannable, they could easily remove the ads and social media sharing buttons.

Make the Next Step Obvious

Every page on a website exists in a hierarchy within the customer journey. 

A homepage leads customers to product pages, which leads to a checkout page, which connects to a thank-you page that sends the visitor back to another product page, and so on. 

When designing for scannability, it’s crucial to make the next step in the journey as obvious as possible. Usually, this means placing the call to action “above the fold,” where the customer can see it immediately.

Ideally, scannable pages should have just one CTA. This will stop your audience members from being confused or overwhelmed by choice. 

However, if you’ve got multiple CTAs, think about the average customer’s journey and what they’ll want access to first.

If those buttons don’t appeal to the customer, they can scroll a little further and see other “next step” options, like shopping for “self-isolation essentials” or browsing other popular product categories:

Test Every Page

Testing for scannability means examining every page and making sure that it’s as easy as possible for customers to move through the buying process as fast as they want to. 

Visit each page you design in a buyer journey and ask how quickly it would take end-users to get from point A to point B and beyond. Here are some of the common issues that might slow the customer’s journey and harm scannability:

• Readability: Is the font legible? Is it large enough to read on all screens, including mobile devices? Legibility in the design world measures how quickly and intuitively your users can distinguish what’s going on any page. Remember that the color of the background, the amount of negative space around copy blocks, and even font pairing can impact the readability of the content. Show your pages to multiple people and time how long it takes for them to grasp the message that you’re trying to convey. 
• Fluff: Fluff and extra features can make your pages more intriguing, but they can also slow users down. For instance, one picture at the top of a blog page can add context to the article. A slideshow of pictures stops the customer from progressing and keeps them stuck at the top of the page for longer. 
• Words instead of numbers: According to Nielsen, eye-tracking studies show that numerals often stop the wandering eye. Numbers are compact and more regularly associated with statistics and facts, so they’re more likely to grab attention. If you want to get important points across to end users fast, use numbers, not words. 

Creating Scannable Pages

Scannability is becoming an increasingly important concept in today’s busy landscape. 

Now that more customers are browsing websites from their smartphones or checking out products on the move, designers need to think more carefully about adjusting to this agile environment. 

Scannable pages that move visitors along the buying cycle and into the next stage of the funnel will deliver better results for your clients, and therefore better outcomes for you. 

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

The post Quick Ways to Make a Webpage More Scannable first appeared on Webdesigner Depot.

Source: designfaves.com