Z Patterns
How to Use Z-Patterns to Grab the Attention of Your Website Visitors
When a visitor lands on your website they should quickly understand what you do and how to get it. Creating better content is critical but it also matters how you lay the page.
Grab the attention of your website visitors with Z-pattern
When you first come across a website, where do your eyes go?
What is the first thing you read or see?
Where is your attention drawn?
It’s easy to imagine that every user will excitedly read every letter you write or consume all the content on your website.
Forget it; the truth in this is… they won’t!
Initially people scan the words on your website; they don’t read every word. Meaning they only stop to read when something catches their eye. Unfortunately for us, making something catch someone’s eye can be difficult without understanding how our brains process information and create patterns for optimal scanning.
Several patterns have been recommended to take advantage of how people scan or read, and one of them, which is used even with big brands like Facebook, it’s called Z-pattern layout.
What is Z-Pattern layout?
The Z-Pattern layout is a pattern that shows how eyes scan content and offers advice for where to place important information. This pattern suggests readers’ eyes will start scanning your page in the top left, move horizontally across to the right side, and then diagonally down toward the bottom left before finishing with another horizontal movement from up towards down on an imaginary “Z” shape.
The top-to-bottom left-to-right pattern is the most intuitive for our eyes because we read books in that manner.
How do you improve your website’s design so that it catches more eyeballs?
First, answer these questions:
1) What information do you want people to notice?
2) What do you want them to do?
After that, applying the Z-Pattern layout is a very straightforward process. All you have to do is imagine a letter “Z” onto any page and then arrange it in order of most important information first, followed by second-most important next, etcetera. Only the most important things make it into the Z pattern. Keep the “fluff” outside of the pattern.
What to include at the top of your Website Homepage using the Z Pattern
The top of your home page is all of the content “above the fold”. (Meaning what you can see on screen above the fold of your laptop.)
Top Left
Top Right
From Top Right to Lower Left
Lower Left to Lower Right
Keep the Z’s Goin!
The Z-Pattern doesn’t just end there with a single “Z.” It can be extended to create a series of Zs, also called Zig-zag. The reader moves in small zigzags back and forth instead of one long horizontal movement.
In Conclusion
Here are some other patterns to consider: Gutenberg, F-Pattern, Pattern of Focal Point. But for my money, the Z pattern is the best.