How people scan information on the web (top 5 patterns)
People don’t read online—they scan. When people scan information on the web, they typically follow a few common patterns:
1️⃣ F-shaped pattern. The f-shaped scanning pattern, identified by Nielsen Norman Group in their eye-tracking studies, describes a common way users scan text-heavy web pages such as articles. People first scan across the top of the page in a horizontal line (they try to find what they’re looking for by scanning the beginning of the text), then down the left side of the page in a vertical line, and scan across the content again in a horizontal line further down the page (this second line is typically shorter than the first). More about F-shaped pattern: https://lnkd.in/d67yBj-6
2️⃣ Z-shaped pattern. Z-shaped is a common scanning pattern for pages with a less text-heavy and more visually driven layout such as product promo page. Users’ eyes move in a Z-shaped trajectory. Starting from the top-left corner, users scan horizontally to the top-right, then diagonally down to the bottom-left, and finally, horizontally again to the bottom-right.
3️⃣ Layer-cake pattern. This pattern occurs when users scan headings and subheadings to get an idea of the content structure and decide which sections are worth a read. The visual representation resembles a layer cake, with users’ eyes moving across the page’s headings.
4️⃣ Spotted pattern. Users scan the page looking for specific information or keywords that match their interest or the task at hand. This pattern is less structured and depends heavily on what the user is seeking, such as links, keywords, or specific data points.
5️⃣Marking pattern. The user’s eyes focus on one area as the mouse scrolls or a finger swipes. This pattern is more common on mobile than on desktop.
📕 Things to remember when designing for scanning
✔ First impression matters. Users quickly judge the usefulness of a page within the first few seconds of landing on it. If the layout, headlines, or opening sentences don’t capture their interest or seem relevant, they will likely leave the page.
✔ Avoid long blocks of text. Breaking up text with headlines and subheadings not only makes content easier to scan but also helps capture users’ attention by highlighting key topics. Write short paragraphs to break up text into manageable chunks.
✔ Write descriptive and engaging headlines that capture the essence of the content below them.
✔ Use visual cues like images, graphics, or contrasting colors to guide users’ eyes as they scan the page, ensuring they engage with the content as intended. Emphasize keywords and phrases by using bold, italics, or color.
✔ On mobile devices, where screen real estate is limited, it’s vital to simply layout and prioritize key information at the top of the page.
