Curated Resource ( ? )

F-Shape Pattern And How Users Read

F-Shape Pattern And How Users Read

my notes ( ? )

Different patterns describe how users scan content on the web. The F-shape pattern is probably the best-known one.

  • F-Pattern
    Users first read horizontally, then read less and less until they start scanning vertically. The first lines of text and the first words on each line receive more attention. It also applies to LTR-interfaces, but the F is flipped.
  • Layer-Cake Pattern
    Users scan consistently across headings, with deliberate jumps into body text in between. Most effective way to scan pages and find key content details.
  • Love-at-First-Sight Pattern
    Users are often “satisficers,” searching for what’s good enough, not exhaustive enough. In search results, they often fixate on a single result.
  • Lawn-Mower Pattern
    In tables, users start in the top left cell, move to the right until the end of the row, and then drop down to the next row, moving in the same pattern.
  • Spotted Pattern
    Skipping big chunks of text and focusing on patterns. Often happens in search when users look for specific words, shapes, links, dates, and so on.
  • Marking Pattern
    Eyes focus in one place as the mouse scrolls or a finger swipes. Common on mobile more than on desktop.
  • Bypassing Pattern
    Users deliberately skip the first words of the line when multiple lines start with the same word.
  • Commitment Pattern
    Reading the entire content, word by word. Happens when users are highly motivated and interested. Common for older adults.

F-Shape Scanning And The Lack Of Rhythm #

On the web, we often argue about the fold, and while it does indeed exist, it really doesn’t matter. As Christopher Butler said, “length is not the problem — lack of rhythm is.”

designer’s main job is to direct attention intentionally. Scanning is partial attention. Reading is focused attention. A screen without intentional rhythm will lose attention as it is being scanned. One with controlled rhythm will not only retain attention, it will deepen it.

Think of F-shape scanning as a user’s fallback behavior if the design doesn’t guide them through the content well enough. So prevent it whenever you can. At least, give users anchors to move to E-shape scanning, and at best, direct their attention to relevant sections with Layer-Cake scanning.

Direct Attention And Provide Anchors #

Good formatting can reduce the impact of scanning. To structure scanning and guide a user’s view, add headings and subheadings. For engagement, alternate sizes, spacing, and patterns. For landing pages, alternate points of interest.

Users spend 80% of the time viewing the left half of a page. So, as you structure your content, keep in mind that horizontal attention leans left. That’s also where you might want to position navigation to aid wayfinding.

Generally, it’s a good idea to visually group small chunks of related content. To offer anchors, consider front-loading headings with keywords and key points — it will help users quickly make sense of what awaits them. Adding useful visuals can also give users points to anchor to.

Another way to guide users through the page is by adding few but noticeable accents to guide attention. You will need visible, well-structured headings and subheadings that stand out from the other content on the page. In fact, adding subheadings throughout the page might be the best strategy to help users find information faster.

Data-heavy content such as large, complex tables require some extra attention and care. To help users keep their position as they move across the table, keep headers floating. They provide an anchor no matter where your user’s eyes are focusing and make it easier to look around and compare data.

Key Takeaways #

  • Users spend 80% of time viewing the left half of a page.
  • They read horizontally, then skip to content below.
  • Scanning is often inefficient as users miss large chunks of content and skip key details.
  • Good formatting reduces the impact of F-scanning.
  • Add heading and subheadings for structured scanning.
  • Show keywords and key points early in your headings to improve scanning.
  • For engagement, alternate sizes, spacing, patterns.
  • For landing pages, alternate points of interest.
  • Visually group small chunks of related content.
  • Keep headers floating in large, complex data tables.
  • Add useful visuals to give users points to anchor to.
  • Horizontal attention leans left: favor top/left navigation.


Read the Full Post

The above notes were curated from the full post

Related reading

More Stuff I Do

More Stuff tagged design , user experience , f-shaped pattern , layer cake pattern , reading pattern , content design

See also: Content creation & management , UX

Cookies disclaimer saves very few cookies onto your device: we need some to monitor site traffic using Google Analytics, while another protects you from a cross-site request forgeries. Nevertheless, you can disable the usage of cookies by changing the settings of your browser. By browsing our website without changing the browser settings, you grant us permission to store that information on your device. More details in our Privacy Policy.