Common patterns for Scannability

How users read content on the web?

According to Jakob Nielsen, ”they don’t. People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences”. Researches have found that:

Design Templates

79% test users always scanned any new page they came across;
16% read word by word.

People are far more likely to scan than read word for word (1997). That’s one fundamental truth of online information-seeking behavior that hasn’t changed in 23 years. Why this finding is still true? Because it is based on human behavior.

For many decades, people often do the same with a new magazine or newspaper looking through them before they start attentive reading of the articles. Now, reading from the screen is much more tiring than on paper, so users are more selective when and where they are ready to bother.

Eyetracking

This system is used to monitor a person’s eye moments using specialized cameras and pinpointing exactly where that person is looking, moment by moment. It tracks the user’s gaze as he uses the interface.

Best Mockup Designs

Scannability

People are busy and easily get frustrated. Like you, they are trying to accomplish their goals, avoiding unnecessary obstacles. They are scanning pages to accomplish these two goals:
Understanding what information the page is providing; Deciding if the page has the content they are looking for, and if not, is the page any interest of them anyway.

Scannability of webpages helps people who are not reading the entire content. It is a way of presenting contents and navigating elements in a layout that can be scanned easily. It is the ease with which a body of words can be read and understood by the target audience.

UX matters defines Scannability as
“the aggregate effect of writing and formatting techniques that compensate for the fact that more people don’t read content” on the internet.

Common Scanning patterns:

F Pattern

This is the most common scanning pattern. Users first read in a horizontal movement from left to right at the top section or page. Then, the eyes move down the page a bit again scanning from left to right horizontally, this time covering a shorter area than the previous movement. Lastly, they scan the left side of the section from top to bottom forming F’s stem.

Z Pattern

As expected, it follows the shape of letter Z. First, the eye scans horizontally from left to right. Next, creating a diagonal down to the left side of the page. Last, forming a second horizontal line from left to right at the bottom.

 

Read More