menu

Contact us

If you’d like to find out more about how our creative muscle can help you grow your business through great design, please get in touch.

Contact us

If you’d like to find out more about how our creative muscle can help you grow your business through great design, please get in touch.

How users scan a website: z and f shaped patterns

Z & F shaped patterns are attention grabbers, learn how and when to use them to attract and keep your audience on your web page.

Let’s start out by debunking a myth: users don’t read your content, they scan it. This basically means that they will stop and read-only when something grabs their attention. The Nielsen Norman Group, probably the most eminent research company in the UX community, found out that users have time to read at most 28% of the words during an average visit on a website, but 20% is more likely.

You need to make that 20% count!

The NNGroup also conducted several eye-tracking studies that recorded how users looked at thousands of web pages. It was found that their reading behavior was fairly consistent across different sites. These reading patterns were influenced by the type of content present on the page and the NNG identified two main patterns: the Z-shaped and the F-shaped.

When should you use a Z-shaped pattern?

In most Western cultures, the text is read from left-to-right and up-to-down. On a web page, this pattern creates a Z-shaped layout.

Always keep in mind your audience: remember that Eastern cultures - like Arabs and Chinese - read from right-to-left so you need to accommodate the page structure to the mental model of your target.

The human eyes follow this pattern mostly on pages that have large and predominant graphical elements, while the written text is scarce.
So, while scanning this type of web page, your eyes usually:

- scan from the top left to the top right
- go down diagonally to the left side of the page
- go back across to the right again

An imaginary Z shape is thus formed.

Create a flow!

Designers usually take advantage of this cognitive model by creating a flow that your eyes automatically follow: the most important elements are placed along the scanning path in a precise order.

1. First, you want to present yourself: place your logo on the top-left spot. Secondly, add a sing up button on the top right spot.

2. You should insert an impactful image along the diagonal.

3. In the bottom left you need to include some helpful info about your product or service and finally on the bottom right conclude the page with a call to action.

When should you prefer an F - shaped pattern?

As several studies have found, heavily written pages are scanned following an F-shaped pattern. In mere seconds visitors oversee your web site focusing on different points of it. For this very reason, before creating your page, you need to decide which is the most and the least important information you want to convey to your target.

Follows these 3 Tips:

1. Go straight to the point: try to place the fundamental message in the first paragraph of your text. Be brief and concise.

2. Create a structure: utilize titles, subtitles, paragraphs and bulleted lists to create a simple and clean layout.

3. Focus on the title: catchy titles with relevant keywords become the main elements, which will serve as focal points for your users and set their expectations for the rest of the content.

Conclusion

Now that you know the main reading behaviors of the human eye, guide your users in their scanning with the Z and F shaped patterns and create a web page layout that grabs their attention.

- - - 

Learn more at Nugno services or follow us on Linkedin, Facebook, Instagram Twitter, #bynugno.

Start a conversation

Luca Amoriello, Director
Tel: +353 (0)87 383 2134
Email: Luca@bynugno.com