Stop for one second. Now imagine that you’re navigating a website and you find it difficult to find the menu, the main features or the contact information. Painful, right?
This happens though. More than it should. Those first few seconds in the navigation will determine if people will return to your website or not. To help you make the most of those seconds, today we”ll talk about a little thing we like to call: Scannability.
First things first, let’s dive head first into the main principles: What it is scannability?, Why is it important?, and last but not least, How to make the best of it?
What is it?
Good scannability example A: FINIS, Inc.
Consider scannability as your website’s first impression on the users. It’s how the content is presented and how it’s processed during the first few seconds of navigation.
We don’t often talk about scannability, yet it’s the most important aspect to take into account when designing a website. Maybe we take it for granted, maybe we consider it too basic of a principle to even pay attention to it, but bad scannability will render your content irrelevant, no matter how brilliant.
Why is it important?
Good scannability example B: Slingshot Sports
When we first look at a website -or anything else, for that matter-, we first take a quick glance at all the main features that catch our eye, to later inspect them one by one.
We scan the page to find what we’re looking for, we don’t read every word. Considering that screens are more tiring to read than paper, users want to find the information they’re looking for ASAP.
How do I use it to my advantage?
Good scannability example C: CLUSE, Europe Watch Group B.V.
The good news is that scannability is quite easy to master. First of all, you need to understand how people navigate websites. We tend to notice the top left first and then scan horizontally the top of the page. That’s a no-brainer, really.
The basics
This is quite the standard for most people and we will use this as the basis for three different scanning patterns:
- Z pattern: a. User starts at the top left of the page and scans horizontally. b. User immediately drifts attention to the bottom left of the page, to then scan horizontally, creating a “Z” pattern with their eyes.
- ZigZag pattern: Same principle as the “Z” pattern, but repeated multiple times along the page creating a -surprise!- zig zag pattern.
- Last, but not least, “F” or “E” pattern: First read top of the page horizontally, then the left side of the screen top to bottom, with additional quick scans of those sections that catch our eye along this column.
Good scannability example D: VHC Brands
Now this is where it gets interesting and where you can get really creative:
- Stick to what you know. You’re an experienced browser yourself. You know what works and what doesn’t. Logo positioning, search bars, icons and menus are very similar from one site to another, so unless you have an incredibly creative idea that is guaranteed to be an innovative success, don’t try to re-invent the wheel.
- Group anything that is related. Close together. Put the core navigation features in the menu bar.
- The Paradox of Choice is a real threat. The more choices you offer, the more difficult it will be for users to decide and find the one most suitable for their needs. Keep it simple and research which are your website’s the most common features in order to make navigation more intuitive.
- Know your target audience. Make sure that the first information available on your website matches their interests.
- Invest time to improve scannability. We guarantee that it will increase conversions, bounce rates will be reduced, SEO rates will be affected positively and user retention will increase.
- Negative space is your friend. Negative space -or white space- is the area of the layout that is left empty. This clear space between text and images provides breathability and will help when you later check readability and legibility. Yeah, you’ve got to do that too.
- Use numbered and bulleted lists. [Hey, even we have to follow our own advice.]
Summing up
Making your website more scannable is a good exercise in intuition. In addition to evident tactics like noticeable CTAs, good readability, identifiable clickable parts and other basic website design notions, it’s the user’s experience while navigating your website that must carry the heavier weight in your design decisions.
Before finishing, ask yourself: Can you find all the relevant features of your business on the first few minutes of navigation? Can you understand your brand in the first few minutes of navigation? There’s no other acceptable answer but yes.
Let us help improve your website’s scannability, drop us a line and let’s get started!
