How people really see your website

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.

 

We’ve previously looked at how you can format your website’s copy to help aid how people use your website. In fact, we’ve looked at it a few times now.

 

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.  

Take this navigation bar from the Newark Showground website: 

 

 

This navigation bar does several things:

 

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: 

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.