How people interact with your website is quite different to how you probably expect.
And yes, it can be quite disheartening knowing you’ve spent ages on a part of your website that people don’t use the way you wanted.
But one area we’ve never covered is how people actually see your website. What people are looking at.
Through modern heatmapping and eye-tracking systems, researchers are able to identify how we physically see websites. What we look at the most and where we focus our gaze.
But, at the end of the day, we need to consider how people use a website and design according to those actions.
The results are shocking. And probably not what you expect.
Yet this research can help us identify what areas of web design we should be focusing on most to get business results.
So how are people viewing your website in ways that you might not know about?
People start in the top left
Ever wondered why most websites out there have their logo in the top left-hand corner? You’d think having it slap bang in the middle would be the most effective place to have it. Straight in front of you when land on a website.
It might come as a surprise, but there is actually a reason why your logo is in the top left-hand corner.
In the Western world at least, our eyes are always instantly drawn to the left-hand corner of a screen.
This is a trait that comes from our reading habits. We read left to right and top to bottom. Eye-tracking studies have shown this to be true. Indeed, the folks over at Eyequant put together this useful guide to highlight where eye focus tends to fall:
Notice how the top left-hand corner is red – where the logo typically goes – and then how the surrounding areas start to drop off?
I’ve mentioned previously that people typically scan-read on websites. But is there a way we can utilise how people scan-read to make more effective designs?
Just so happens there is and it’s called the Gutenberg Diagram.
A Gutenberg Diagram breaks down a user’s visual flow as they scan-read into 4 simple quadrants:
Primary Optical Area – In the top left-hand corner, this is where your eyes land instinctively
Strong Fallow Area – This receives much less visual attention but noted by a user
Weak Fallow Area – Eyes typically don’t pick up on any information located here
Terminal Area – This is where our eyes ‘end’ their journey. As a result, this area also gets noticed
The thing about the Gutenberg Diagram is, once you know about it, you see it everywhere in web design.
Take the Facebook homepage for example:
Notice how the logo, the main intent, the main message, is always in the left-hand corner and the call to action always in the bottom right?
Meanwhile, the top right always has a prompt to action and the bottom left is… well, empty?
This is because it follows the standard scan-read pattern. Now, 99.99% of the time, we may not even notice our eyes flow in this pattern, as it can happen in a split second. Yet in that split second, we instantly know what the proposition is, what we need to do and how we action it.
But, the Gutenberg Diagram helps explain another key way we look at websites. A way that even changed the way we design websites. You see…
Navigation bars are looked at more than any other part of your website
Navigation menus are incredibly important to a website. Yet for the most part, they’re put together on a whim – almost with a ‘we should have XYZ on here’. Or, in some cases, can even be put together by sales teams wanted to push a product or service.
So, why do we at Epix Media, on average, dedicate 3 meetings to a navigation bar?
The reason is that the navigation bar is a powerful asset on your website. More so than people realise.
A navigation bar does more than help a user move around your website. It can also help guide and inform your users as to what your website is about.
Take this navigation bar from the Newark Showground website:
This navigation bar does several things:
- It establishes that it is an events venue with terms like ‘What’s On’, ‘Plan Your Event’, ‘Venues’
- It filters different types of users to different areas of the website (i.e. those looking to attend events can go to ‘What’s On’ and ‘Visiting Us’, while those planning events can go to ‘Plan Your Event’ or ‘Venues’
- It provides easy and quick access to key contact information by adding the phone number, email address and even the postcode for those looking for driving directions
You’ll also notice that things like ‘About Us’ or ‘Contact Us’ pages have been completely demoted to a mini utility navigation at the very top right.
Why? Because these don’t help the vast majority of users visiting the website. It’s not what they are there for. Those that need that information will find it because they need to.
Despite this navigation bar being incredibly simple and straightforward, it took days of planning to get it right.
So why do we commit so much time on navigation?
Well, the facts speak for themselves really. 94% of people – that is almost everyone – say that an easy to understand navigation is the most important element of a website. Similarly, 55% of people will abandon a website if they think it’s irrelevant.
So by ensuring that your navigation clearly indicates what you do, and is easy to understand with simple concise language, you can help improve retention rates.
Shall we throw in some science too? A 2012 study by Missouri University did some eye-tracking research into what area of a website people look at, and for how long. This is what they found:
- Logo – 6.48 seconds
- Navigation Bar – 6.44 seconds
- Search box – 6 seconds
- Social Media Icons – 5.95 seconds
- Main Image – 5.94 seconds
- Written Content – 5.59 seconds
- Bottom Footer – 5.25 seconds
Notice how the navigation bar gets just as much attention as the logo and more attention than the written content? Despite the written content likely being far longer.
In fact, if we go back to our Gutenberg Diagrams, what do we typically see for a normal website structure? Logos sit in the top left-hand corner, the Primary Optical Area. Meanwhile, the navigation bar usually crosses over from the Primary Optical Area to the Strong Fallow Area.
Science and research studies can help direct the way creative elements can be used to increase business performance.
By understanding how users see your website, creativity can step in to utilise those findings and improve usability and accessibility. Ultimately making your website easier for people to use.