Coming up with the right colors, images, and content for your website can be difficult. Once you've got that covered, you still have to decide the best way to lay all the information out on your website. There are endless choices for your website layout, but I recommended two commonly used choices: the f-pattern or the z-pattern.
F-Pattern Layout
Jacob Nielsen conducted an eye-tracking study to record how 232 users looked at thousands of web pages. This study found that the eye starts in the top left, moves horizontally to the top right and then comes back to the left edge before making another horizontal scan to the right. This second scan won’t extend as far as the first one. Any additional scans won't extend as far as the previous scan, and for the most part the eye stays close to the left side of your page.
.jpeg)
The f-pattern study suggests that:
- People don't read your web content. They scan through it.
- The most important information on your website should be placed across the top of the design
- Any lesser information should be placed in a list form across the left edge
The f-pattern is good for text heavy websites. Your content should guide the eyes down the page on the left edge. If someone finds the content they are scanning through interesting, they will read through the whole page so don't place all your content in the F.
Z-Pattern Layout
The Z-pattern, sometimes referred to as the reverse S pattern, is a great pattern to cover all the bases. Viewers start in the top left, move horizontally to the top right and then diagonally to the bottom right before finishing with another horizontal movement to the bottom right.
The z-pattern suggests that:
- People don't read your web content. They scan through it
- You should place a strong call to action at the bottom of your page
- Information to support your call of action should be included along the Z pattern in a logical order to back up the call to action
It's important to keep in mind that both of these patterns focus on where people's eyes naturally go. If you want to lay your content out in a different patter that is fine as long as you use a hierarchical design to guide viewers along the path you would like them to go.
.jpeg)
Related Posts
Performance Testing Tools to Revamp Your Website
If you haven’t already heard, KP Kreative is about to undergo a full rebranding to become Page One Digital. We’re in the midst of updating our website and improving it, so we've got performance testing on the brain. Because it’s so important if you want to revamp your website, and because it’s just so front of mind for me these days, I thought it would be a great time to share some website performance testing tips.
Tools to Test Your Website Performance
Quality website performance is essential since most business is being done online. The best way to confirm that your website is performing as you want it to, is to use data to measure performance. There are so many tools available to measure website performance, it can be hard to know what to measure and what tools to use to do so.
3 Tips for Professional Web Design
Everyone is using websites these days to promote their business or sell their products, but most do not succeed because they fail to consider some of the basics that really make a website stand out and look professional while doing it. These are the three most common tips missed opportunities we find with websites: