Think about putting your best foot forward when designing your website with the best user experience in mind. A good website should emphasize it’s most important features and content.
The human mind wants to read web pages much like a book — from top to bottom, left to right. Research done by Nielsen Norman Group has proven this with eye-tracking research. The research shows that above the fold content (top 1/3rd of the page) sees 80.3% viewing time and everything below that sees 19.7% of the viewing time.
They have identified patterns which can be utilized in design to bring attention to important and useful elements on a page.
The F-Pattern
The most basic, most important pattern to understand. It gets its name from the pattern drawn that starts from the top to bottom and left to right. Utilizing this pattern accentuates top-of-the-page elements which should be reserved for things like navigation that give the user a better experience finding what they want.
As you move down the page you should consider placing copy and visuals that inform the reader. This information should be something that highlights the page’s value to the user. Keep it brief.
The remaining tail end of the F shape should be reserved for everything else. Group related content together, use white-space to avoid visual fatigue, and use headlines or images to segment different sections of page content.
The Layer-Cake Pattern
The layer-cake pattern is best utilized with two or three imagery-heavy columns that categorize different things. Content should make sense when reading it top to bottom, but users may scan in a z-pattern rather than an F-pattern. Either way, content on should be prioritized with a hierarchy starting the most important things on top.
Designing with this pattern in mind can make swapping out content cards seamless. It’s best used when you want the user scanning and only noticing headings and subheadings.
Spotted Pattern
This pattern happens when the user skips big pieces of content, looking for something such as a link or other info.
Marking Pattern
The marking pattern happens when the user keeps their eyes fixed in place as they scroll. This is most prominent on mobile and social media apps that encourage scrolling.
Heatmap produced by NN Group for Nest displaying layer-cake pattern prominence