Your users don’t read your website. They scan it.
This isn’t a criticism of your content. It’s just how humans process information on screens. Eye-tracking research shows that people spend less than 10 seconds on most pages before deciding whether to stay or leave. In those precious seconds, they’re not carefully reading every word. They’re hunting for signals that your page has what they need.
Understanding how eyes move across screens lets you design layouts that work with natural scanning patterns instead of against them. You’ll place important elements where users actually look, not where you hope they’ll look.
This guide breaks down the actual science of how people scan websites, backed by eye-tracking research from Nielsen Norman Group, Google, and academic studies. No guesswork. Just proven patterns you can apply today.
TL;DR: Eye-Tracking Essentials
- F-pattern dominates text-heavy pages – Users scan horizontally at top, then vertically down left side
- Z-pattern works for visual layouts – Eyes follow a zigzag path across sparse content
- Layer-cake pattern applies to modern web – Horizontal scanning across distinct sections
- First 2-3 words of headlines matter most – Front-load important information
- Left alignment captures more attention – Western readers start from the left
- Images attract eyes first – Especially faces and people
- White space guides attention – Empty space directs focus
- Users ignore banners – Banner blindness is real
The Science Behind Scanning Behavior
People scan rather than read because of how working memory functions. Your brain can only process a limited amount of information at once. When faced with a full webpage, your visual system looks for patterns and shortcuts.
Why Users Scan Instead of Read
Time pressure. Users are busy. They want answers fast. Careful reading takes time they don’t have or don’t want to spend.
Information overload. The average webpage contains thousands of words and hundreds of elements. Reading everything would be exhausting.
Task-oriented behavior. Most users come with specific goals. They’re not browsing leisurely. They’re looking for something specific and ignore everything else.
Screen reading is harder. Research shows reading on screens is approximately 25% slower than reading on paper. Users naturally compensate by scanning more and reading less.
Trust issues. Users don’t trust everything online. They scan to evaluate credibility before investing time in careful reading.
What Eye-Tracking Studies Reveal
Eye-tracking technology records where people look and for how long. Researchers have mapped thousands of users scanning thousands of pages. The patterns are remarkably consistent.
Key findings from research:
Users look at less than 30% of words on an average webpage. They cherry-pick information that seems relevant and ignore the rest.
The first few words of headlines and sentences carry disproportionate weight. Users decide whether to continue based on these opening words.
Position matters enormously. Content at the top and left of the page gets far more attention than content below or to the right (in Western left-to-right reading cultures).
Images attract attention immediately, but only relevant images. Stock photos of smiling business people get ignored. Product photos, real people, and informative diagrams get views.
Users spend most time in the first two paragraphs. If you don’t hook them early, they’ll never see your brilliant conclusion.
These patterns hold across different types of sites, different audiences, and different tasks. They’re rooted in how human vision and cognition work.
The F-Pattern: Text-Heavy Pages
The F-pattern is the most famous scanning pattern, documented extensively by Nielsen Norman Group in 2006. It appears primarily on text-heavy pages like articles, blog posts, and search results.
How the F-Pattern Works
Users follow an F-shaped path:
First horizontal movement: Eyes scan across the top of the content area, typically reading a headline and the first sentence or two. This is the top bar of the F.
Second horizontal movement: Users move down the page slightly and scan across again, usually reading less than the first pass. This creates the middle bar of the F.
Vertical scanning: After these horizontal movements, users scan down the left side of the content, looking for interesting starting points. This forms the stem of the F.
The pattern isn’t a perfect letter F. It’s more like an F-ish shape with irregular horizontal movements that get progressively shorter.
Why the F-Pattern Occurs
In left-to-right reading cultures, we’re trained from childhood to start at the top left and scan rightward. This deeply ingrained habit influences web scanning.
The pattern also reflects efficient information foraging. Users sample the beginning of each line or paragraph. If it seems relevant, they read more. If not, they move down and sample the next section.
Headlines and the first few words of paragraphs naturally get the most attention. This is where writers traditionally place the most important information, so users have learned this is where to look.
Designing for the F-Pattern
Front-load important information. Put keywords and key points at the beginning of headlines, paragraphs, and bullet points. Users who scan in an F-pattern will catch these.
Write scannable headlines. The first 2-3 words should convey the main point. Users may never read past them.
Use meaningful subheadings. These create new starting points for horizontal scans as users move down the page. Each subheading is an opportunity to hook scanners.
Left-align text. The F-pattern relies on a consistent left edge. Centered or right-aligned text disrupts the pattern and slows scanning.
Place important elements on the left. Navigation, calls-to-action, and key content should be left-aligned or in the left column where the vertical stem of the F concentrates attention.
Make the first two paragraphs count. Most users who leave will do so before reaching your third paragraph. Hook them early or lose them.
F-Pattern Examples
Search results pages: Google results follow the F-pattern perfectly. Users scan across the first few results horizontally, then start scanning down the left side, looking at just the beginning of each result title.
Blog posts and articles: News sites and blogs naturally accommodate the F-pattern. Headlines span the width, introductory paragraphs get full attention, then users scan down looking for subheadings and interesting sentence starts.
E-commerce category pages: Product listings often show the F-pattern. Users scan across the first row of products, maybe the second, then scan down the left column looking at product names and prices.
The Z-Pattern: Visual and Minimal Layouts
The Z-pattern appears on pages with less text and more visual elements. Landing pages, hero sections, and simple layouts often show this pattern.
How the Z-Pattern Works
Users’ eyes follow a Z-shaped path:
Top left to top right: Eyes start at the top left (where reading typically begins) and scan horizontally across to the top right. This might be scanning a navigation menu or headline.
Diagonal to bottom left: Eyes move diagonally down to the bottom left quadrant. This diagonal movement is less focused attention, more of a transition.
Bottom left to bottom right: Eyes scan horizontally again across the bottom of the visible area, often encountering calls-to-action or additional information.
The pattern then repeats as users scroll, creating multiple Z shapes down the page.
Why the Z-Pattern Occurs
The Z-pattern reflects natural reading direction combined with minimal text. When there isn’t enough text to create the F-pattern’s vertical stem, users still start top-left and generally end bottom-right because that matches reading direction.
Visual hierarchy guides the Z-pattern. Designers often place important elements along the Z path (logo top left, menu top right, hero content in middle, CTA bottom right), and users naturally follow this visual flow.
Designing for the Z-Pattern
Place logo top left. This is where users look first. It anchors the page and starts the Z.
Put navigation top right. Users’ eyes naturally travel across the top, making the top right an ideal location for menu items.
Hero content in the center. As eyes travel diagonally, place your main message and value proposition where they’ll encounter it.
Call-to-action bottom right. The Z-pattern naturally ends in the bottom right quadrant, making this a strong location for your primary action.
Repeat the pattern. Create multiple Z patterns as users scroll. Each screen-height section can have its own Z with important elements at the anchor points.
Use visual cues. Directional elements like arrows, pointing images, or sight lines (where people in photos are looking) can guide eyes along your intended Z path.
Z-Pattern Examples
Landing pages: Simple, single-purpose landing pages often show strong Z-patterns. Logo top left, headline and benefit in the center, CTA button bottom right.
Homepage hero sections: The above-the-fold section on many homepages follows the Z. Company name top left, menu top right, main headline and value proposition center, “Get Started” button bottom right.
Simple product pages: Minimalist product pages with a large product image and minimal text often show Z-pattern scanning.
The Layer-Cake Pattern: Modern Web Design
The layer-cake pattern is a more recent observation, reflecting how modern websites are structured. It appears on pages with distinct horizontal sections, each with its own background color or clear visual separation.
How the Layer-Cake Pattern Works
Users scan horizontally across each distinct section (layer), then move down to the next section and scan across again. Each layer gets a horizontal sweep before the user moves to the next layer.
Unlike the F-pattern’s diminishing horizontal movements, the layer-cake pattern shows relatively consistent horizontal scanning across each layer because each layer feels like a new context.
Why the Layer-Cake Pattern Occurs
Modern web design often uses card-based layouts, distinct sections with different backgrounds, and horizontal content groupings. Each section signals a new topic or content type, prompting users to scan across it before moving down.
The clear visual separation between layers helps users mentally reset. Each layer feels like its own mini-page, so users give it fresh attention rather than progressively scanning less (as in the F-pattern).
Designing for the Layer-Cake Pattern
Create clear section boundaries. Use background colors, significant white space, or borders to distinctly separate sections. This triggers the horizontal scanning behavior.
Make each layer self-contained. Each section should have a clear purpose and all related information grouped together. Users will scan that layer as a unit.
Place important information at the start of each layer. The left side of each layer gets the most attention, so put headlines, key points, or images there.
Balance each layer. Don’t make one layer overwhelming while others are sparse. Users allocate attention based on how much content appears in each layer.
Use consistent patterns across layers. If layer one has an image on the left and text on the right, consider alternating this pattern in subsequent layers (text left, image right) to maintain visual interest while keeping the structure predictable.
Layer-Cake Pattern Examples
Marketing websites: Modern marketing sites often use distinct sections for different value propositions. Users scan across “Features,” then down to “Benefits,” then to “Testimonials,” giving each section fresh attention.
SaaS product pages: Product pages frequently use the layer-cake pattern with sections for “What it does,” “How it works,” “Who it’s for,” and “Pricing,” each with distinct visual treatment.
Portfolio websites: Creative portfolios often show projects as distinct layers, each with a project image, title, and description that users scan horizontally.
Other Common Scanning Patterns
Beyond the main three patterns, researchers have identified other scanning behaviors in specific contexts.
The Spotted Pattern
On pages with numerous elements competing for attention (like news homepages or dashboards), users’ eyes jump around in a spotted pattern, fixating briefly on individual elements without following any clear linear path.
When it occurs: Dense pages with many images, headlines, and competing elements. News homepages, Pinterest-style layouts, and busy dashboards.
Design implications: Make the most important elements stand out through size, color, or position. Clear visual hierarchy becomes critical when users are jumping around rather than following a pattern.
The Commitment Pattern
When users are deeply engaged with content they care about (like reading an important article or researching a purchase), they switch from scanning to more careful reading. Eye movements become more linear and thorough.
When it occurs: When users have decided the content is valuable and are invested in understanding it fully.
Design implications: Don’t assume users will always scan. Once you hook them, your content needs to deliver. Well-formatted body text, clear explanations, and logical flow matter for engaged readers.
The Bypassing Pattern
Users develop “selective attention” to ignore repeated elements like navigation, sidebars, and ads. Their eyes skip these familiar elements entirely.
When it occurs: On sites where users have learned the layout. After a few page views, they know where the content is and ignore everything else.
Design implications: Don’t put critical information in areas users learn to ignore. Navigation is fine in predictable locations. Important calls-to-action should not be in those zones.
Banner Blindness: What Users Ignore
Banner blindness is users’ tendency to ignore banner-like elements, whether they’re actual ads or just designed to look like ads.
What Gets Ignored
Research shows users skip:
Anything in typical ad positions. Top banner spaces, right sidebar rectangles, and in-content blocks that resemble ads get ignored even if they’re not ads.
Content that looks promotional. Elements with bright colors, borders, animation, or promotional language trigger banner blindness even outside ad zones.
Repeated elements. Sidebars, footers, and navigation that appear on every page get less attention on subsequent page views.
Stock photography. Generic smiling people or obvious stock photos get ignored. Users have learned these images rarely convey useful information.
Designing Around Banner Blindness
Don’t make important elements look like ads. If your call-to-action has bright borders, flashy colors, and is placed in a sidebar, users may ignore it automatically.
Integrate CTAs into content. Calls-to-action within the main content area get more attention than those in typical ad zones.
Use real images. Authentic photos of your product, team, or customers get attention. Generic stock photos don’t.
Avoid animation in peripheral areas. Animated elements in sidebars or headers trigger ad-filtering behavior. Users have learned to ignore movement in these zones.
Test your design with fresh eyes. Show your page to someone unfamiliar with it and ask what they notice first. If they skip your important elements, you may have a banner blindness problem.
How Images Affect Scanning
Images powerfully influence where users look. Eye-tracking shows that relevant images attract immediate attention, while irrelevant images get ignored or briefly glanced at.
Images That Attract Attention
Faces, especially eyes. Human faces draw attention automatically. We’re wired to look at other people’s faces and especially their eyes.
People in action. Images showing people doing things get more attention than static portraits. Users want to see products being used, not just posed with.
Product images. On e-commerce sites, product photos get intense attention. Users examine them before reading descriptions.
Infographics and diagrams. Visual information gets attention when it’s clearly relevant. Complex data presented visually is more engaging than text.
Unusual or unexpected images. Anything that stands out from the expected captures attention, at least briefly.
Images That Get Ignored
Generic stock photos. Smiling business people shaking hands, people pointing at whiteboards, or any obvious stock photography gets skipped. Users have learned these images convey no information.
Decorative images. Pretty but irrelevant images get brief glances at most. If an image doesn’t help users accomplish their goal, they ignore it.
Images in ad positions. Even real, relevant images placed in typical banner ad locations may get less attention due to banner blindness.
Using Images to Guide Attention
Direction of gaze matters. If your image shows a person looking toward something, users’ eyes will follow that gaze. Use this to direct attention toward headlines or CTAs.
Faces toward content. Position images of people so they face your content, not away from it. Users naturally look where the person in the image is looking.
Action-oriented images. Show your product being used or results being achieved. This tells a story that text-only layouts can’t.
Image placement affects text scanning. Large images on the left can disrupt the F-pattern by pulling attention before users scan text. Images on the right work with the F-pattern, catching attention after users scan the left-aligned text.
White Space and Visual Hierarchy
White space (negative space) is empty space around elements. It’s not wasted space. It’s a powerful tool for guiding eye movement.
How White Space Guides Scanning
Grouping. Elements surrounded by white space are perceived as related. White space between groups creates clear sections that users scan as units.
Emphasis. More white space around an element makes it stand out. Important calls-to-action benefit from generous surrounding space.
Rest. White space gives eyes a break. Dense layouts without adequate spacing create fatigue and encourage users to leave.
Flow. Strategic white space creates paths that guide eyes through content in your intended sequence.
Applying White Space to Scanning Patterns
Support the F-pattern with spacing. Add space between paragraphs and sections so the left edge of text remains clear. This makes the vertical stem of the F easier to follow.
Separate Z-pattern elements. Give each element along the Z path adequate space so they read as distinct stops rather than blurring together.
Define layer-cake sections. Generous space between sections reinforces the layer-cake pattern and triggers fresh horizontal scanning for each layer.
Balance information density. Areas with less white space signal “more important” or “more information here.” Use this strategically to guide attention.
Mobile Scanning Patterns
Scanning behavior changes on mobile devices. Smaller screens, touch interaction, and different contexts create different patterns.
Thumb-Zone Priority
On mobile, the bottom third of the screen gets more attention than on desktop because that’s where users’ thumbs naturally rest. The “thumb zone” is easily reachable with one-handed use.
Design implications: Place important interactive elements within thumb reach. Navigation often moves from top to bottom on mobile for this reason.
Vertical Scrolling Dominance
Mobile users scroll freely. The “fold” matters less on mobile than desktop. Users are comfortable scrolling long distances on small screens.
Design implications: Don’t cram everything above the fold on mobile. Use vertical space generously. Create a clear path downward rather than forcing everything into the first screen.
Simplified F-Pattern
The F-pattern still appears on mobile but is less pronounced. The narrower screen means horizontal scanning movements are shorter, and the pattern becomes more of an “I” shape (vertical scanning with brief horizontal glances).
Design implications: Front-loading information matters even more on mobile. The first word or two of each line is all users may see before deciding to continue.
Tap Targets and Spacing
Touch interaction requires more spacing than mouse interaction. Users can’t hover, so visual feedback and adequate target size become critical.
Design implications: Minimum 44x44px tap targets. Increase spacing between interactive elements. Make it obvious what’s tappable.
Accessibility and Scanning Patterns
Scanning patterns change for users with disabilities. Design inclusively to serve all users.
Screen Reader Users
Screen reader users don’t scan visually. They navigate through content structure (headings, landmarks, links). Visual scanning patterns don’t apply.
Design implications:
- Use proper heading hierarchy (h1-h6) so screen reader users can jump between sections
- Provide skip links to bypass repetitive navigation
- Use semantic HTML (nav, main, article) to create clear page structure
- Don’t rely on position alone to convey importance
Low Vision Users
Users with low vision often use screen magnification, which shows only a small portion of the page at a time. They can’t see the overall layout to understand scanning patterns.
Design implications:
- Ensure each section makes sense in isolation
- Don’t use only spatial position to convey relationships
- Provide clear headings and labels
- Support keyboard navigation for users who can’t see cursor position
Cognitive Disabilities
Users with cognitive disabilities may find complex scanning patterns overwhelming. They benefit from simplified, predictable layouts.
Design implications:
- Use consistent patterns throughout your site
- Limit the number of elements competing for attention
- Provide clear hierarchy with obvious most-important elements
- Break complex content into smaller chunks
Cultural Differences in Scanning
Scanning patterns vary based on reading direction and cultural background.
Right-to-Left Languages
Users who read Arabic, Hebrew, or other right-to-left languages show mirrored scanning patterns. The F-pattern becomes a mirrored F starting from the top right.
Design implications: If serving RTL audiences, mirror your layouts. Elements that work on the left for English work on the right for Arabic.
Vertical Reading Cultures
Some East Asian users, particularly older generations, are accustomed to vertical reading (top to bottom, right to left). This influences scanning behavior even on websites designed for horizontal reading.
Design implications: Test with your specific audience. Don’t assume Western scanning patterns apply universally.
Information Density Preferences
Cultural preferences for information density vary. Some cultures prefer dense layouts with lots of information visible simultaneously. Others prefer minimalist layouts with lots of white space.
Design implications: Research your specific audience’s preferences rather than applying universal rules.
Practical Framework: Applying Scanning Patterns
Here’s how to use scanning research in your actual design process.
Step 1: Identify Your Dominant Pattern
Look at your page type:
Text-heavy (articles, blog posts, documentation): Design for F-pattern Visual/minimal (landing pages, hero sections): Design for Z-pattern
Sectioned (marketing pages, product pages): Design for layer-cake pattern Dense (news, dashboards): Minimize competition, use strong hierarchy
Step 2: Map Your Content to the Pattern
Place content where users will naturally look:
For F-pattern:
- Most important information in the first two paragraphs
- Keywords at the start of headlines and paragraphs
- Key points along the left edge
For Z-pattern:
- Logo top left
- Navigation top right
- Main message center
- Primary CTA bottom right
For layer-cake:
- Clear section divisions
- Each layer starts with its most important element
- Consistent pattern across layers
Step 3: Test with Eye-Tracking or Proxies
Actual eye-tracking is expensive, but you can approximate:
Five-second test: Show users your page for five seconds. What do they remember? This reveals what catches attention.
First-click test: Ask users to click where they’d go to accomplish a task. Do they click where you expect?
Heat map tools: Services like Hotjar or Crazy Egg show where users actually click and scroll on your live site.
User testing: Watch real users navigate your site. Ask them to think aloud. Note what they notice and what they miss.
Step 4: Iterate Based on Findings
If users aren’t seeing important elements:
- Move them into natural scanning paths
- Increase contrast or size
- Add white space around them
- Use directional cues (arrows, gaze direction)
- Remove competing elements
If users are getting distracted by unimportant elements:
- Reduce visual weight (smaller, less contrast, less space)
- Move them out of primary scanning paths
- Consider removing them entirely
Conclusion
Users don’t read websites. They scan them following predictable patterns based on how human vision and cognition work. Design with these patterns in mind, and your layouts will work with users’ natural behavior instead of against it.
Key takeaways:
- F-pattern dominates text-heavy pages with horizontal scans at top and vertical scanning down the left
- Z-pattern appears on visual, minimal layouts following natural reading direction
- Layer-cake pattern reflects modern sectioned layouts with fresh horizontal scanning for each layer
- Banner blindness causes users to ignore anything that looks like an ad
- Images attract attention but only if they’re relevant and authentic
- White space guides eye movement and creates hierarchy
- Mobile patterns differ with thumb-zone priority and vertical scrolling
- Cultural factors affect scanning based on reading direction
- Accessibility requires structure beyond visual patterns
The action you should take today: Map your most important page against the appropriate scanning pattern. Is your critical content where users actually look? If not, move it. Test with real users to validate.
Scanning patterns aren’t trends. They’re based on human physiology and learned behavior that won’t change. Design with them, and you’ll create layouts that feel intuitive and effortless to use.
Ready to optimize the visual foundation of your layouts? Check out our guide on White Space (Negative Space) in Web Design: Why Less is More, where we explore how empty space creates hierarchy, improves readability, and guides users through your content.
Quick Reference: Scanning Pattern Checklist
Use this when designing any page:
- Identify the dominant pattern – Text-heavy (F), minimal (Z), or sectioned (layer-cake)
- Place priority content in hot zones – Top, left, and natural path intersections
- Front-load headlines and paragraphs – First 2-3 words matter most
- Use meaningful subheadings – Create new horizontal scanning opportunities
- Left-align text for F-pattern – Support vertical scanning
- Position images strategically – Faces looking toward content, not away
- Avoid ad-like positioning – Don’t place CTAs in banner blind spots
- Add white space generously – Guide attention and reduce fatigue
- Test on real devices – Mobile patterns differ from desktop
- Validate with users – Five-second tests and user observation
Frequently Asked Questions
What is the F-pattern in web design? The F-pattern is a scanning pattern where users read horizontally across the top of a page, scan horizontally again slightly lower (reading less), then scan vertically down the left side. It appears primarily on text-heavy pages.
How do I design for the Z-pattern? Place your logo top left, navigation top right, main message in the center, and primary call-to-action bottom right. This aligns with the natural Z-shaped eye movement on visual layouts.
Do users really not read websites? Eye-tracking research shows users scan rather than read, looking at less than 30% of words on average. They read carefully only when they’ve decided the content is worth their time.
How does mobile scanning differ from desktop? Mobile users scroll more freely, focus on the thumb zone (bottom third of screen), and show a more vertical scanning pattern due to narrow screen width.
What is banner blindness? Banner blindness is users’ learned behavior of ignoring content that looks like advertisements, even if it isn’t actually an ad. Anything in typical ad positions or with ad-like styling gets skipped.
How do images affect eye movement? Relevant, authentic images attract immediate attention. Faces especially draw focus, and users’ eyes follow the direction of gaze in images. Generic stock photos get ignored.
References & Further Reading
- “F-Shaped Pattern of Reading on the Web” – Nielsen Norman Group (2006)
- “Eyetracking Web Usability” – Nielsen, J. & Pernice, K. (2010)
- “How Users Read on the Web” – Nielsen, J. (1997)
- “Banner Blindness Revisited” – Benway & Lane (1998)
- Google SERP Eye-Tracking Research – Mediative (2014)
- “Prioritizing Web Usability” – Nielsen, J. & Loranger, H. (2006)