Photo by Thought Catalog from Pexels.

Great design isn’t just about making things look nice. It’s about understanding the mechanics and processes that make up the user experience. By learning how people interact with what they see, we can adjust our designs to enhance the quality of the final experience.

One fundamental aspect of this experience is how people actually reada page. And once we know how the eye interacts with visual stimuli, we can manipulate that stimuli to be more visually appealing. 

So in this post we’re going to look at how the eye reads a page, and how we can use our own visual tendencies to make better, more effective designs.    

Saccadic eye movement 

First of all, let’s take a very brief look at how our eyes work when we read… 

Among the four main types of eye movement (pursuit, vergence, vestibular, and saccadic), saccadic is the most important when it comes to reading. 

Saccadic eye movements are the rapid movements our eyes make whenever we’re exploring a visual scene. Generally speaking saccades usually last around 20 – 200 ms. Between each saccade is what’s known as a “fixation”, which is when our eyes are (generally speaking) still. These fixations last around 200 – 300 ms.  

When it comes to reading, we rely so heavily on saccades because they bring objects into the centre of our perception. This is important because the centre of our visual field is highly accurate, and the further away from the centre you go the less accurate your vision becomes. 

By rapidly moving our eyes over a body of text we allow ourselves to directly perceive, and therefore process, more information. 

The average saccade size is, apparently, 7-9 letter spaces (variable depending on the font size and type). 

Predicting eye movements

Luckily for us designers, science not only helps with the how of reading but also the what. As it turns out, the majority of people follow certain patterns when it comes to how they direct their attention. 

For cultures that read from left to right there are, according to Alex Bigman, two major types of reading patterns. These are the F-patterns and Z-patterns. 

F-patterns apply to traditional pages which tend to be more text-heavy. This includes blog posts and articles. In the F-pattern, a reader will scan down the lefthand side of a page searching for key information. Once something of interest has been identified, the reader will typically stop and begin reading from left to right in order to acquire more information. 

Z-patterns are used for other types of content, typically adverts or website home pages where there’s usually less text. Here the eye goes from left to right across the top of the page, then skips down to the bottom left corner where it once again scans to the right. 

Z-pattern eye movements are the reason why you’ll often find web pages laid out in a similar way, with a lot of important information placed along the top and bottom of the page.

Tips for directing the eye

Size as an attractor   

It seems that when we look at something we’re naturally drawn to its biggest and most standout element. So in advertising, when someone’s looking at a design, whether it’s a poster or a webpage, their eye will almost always be drawn to the biggest thing first.  

This may seem like an obvious point, but it’s worth mentioning. Because when you keep this rule in mind you have an incredibly simple but effective tool at your disposal for directing attention. 

In essence: whatever you want the reader to read first, simply make it bigger. 

Enticing colours

Another obvious but important point to cover is the fact that, as well as size, our eyes are also drawn to colour. There’s a lot of logic to this, and it’s easy to apply. 

Bright colours are more attention-grabbing than muted colours. They also standout more against black and white. So vibrant colours, used sparingly, can be very visually commanding. 

Space

We’ve talked about the importance of negative space before, but it applies just as much here. Imagine a white sheet of paper with a single red dot in the centre. You can be almost certain that anyone who glanced at that paper would look at the red dot first. 

Empty space directs attention by diverting it. Where there’s empty space, there’s nothing. When you look at a poster, you typically expect to see something. So naturally your eye will ignore the contents of the empty space and move straight to wherever the content is situated. 

The fundamentals of design

Learning how people interact with design is a great way to deepen your knowledge and enhance your skillset. For more fundamental knowledge, take a look at our posts on the psychology of shapes and colours and brand storytelling.