Consider reading patterns

How you organize your content is a critical element of conveying yourself effectively.

People do not read every word of writing

Numerous studies have been conducted that show how people scan information. It is most frequently in an “F” pattern--reading across the top, skimming the left of the page, and then across the page a bit further down, before dropping off. Sometimes people scan in a layer-cake pattern, focusing on titles, headings, and the starts of sentences.

💡 GRIDBit: Less than 16% of people read in a commitment pattern, reading each word.

Learn the Gutenberg Diagram

The Diagram is a way to understand a page visually, and design based on that understanding. It was developed in the 1950s by a typologist who broke down a page into four quadrants. People start at the top left, then move their sight to the bottom right, scanning the top right and bottom left as their eyes move down. The most attention will be in the top left (notice the similarities to the F pattern above), and the top right and bottom left will only be noticed if your design particularly emphasizes it. Most attention will still go to the top right than the bottom left of the page.

Using this knowledge: put your important information in line with the natural line of sight (in the top left and middle), and put your call to action in the bottom right.

💡 GRIDBit: Eighty percent of the time spent on a page is spent looking at the left, as compared to 20% of the right.

Put your call to action in the bottom right of the page

People are most likely to interact with a request for them to do something (click to the next page, etc.) if you place it in the bottom-right of the page.

For example, here, the link to the next page in the Toolkit can be found in the bottom right of the page.

Keep sentences, lines, and sections short

Shorter sections seem easier to read. The generally regarded ideal single-column line length is 66 characters. For multiple columns, 40-50 characters is better. People read more if your page has 110 words or less. Consider your audience, use case, and content format well when accounting for these parameters.

💡 GRIDBit: On average, people will read 28% of the text on your page. 20% is a more realistic estimate.

References

Dyslexia Friendly Style Guide. British Dyslexia Association.

Federal Plain Language Guidelines. The Plain Language Action and Information Network (PLAIN), 2011.

F-Shaped Pattern For Reading Web Content (original study), Jakob Nielsen, Nielsen Norman Group, 2006.

F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile). Kara Pernice, Nielsen Norman Group, 2017.

Gutenberg Diagram. Universal Principles of Design.

Horizontal Attention Leans Left. Therese Fessenden, Nielsen Norman Group, 2017.

How Little Do Users Read? Jakob Nielsen, Nielsen Norman Group, 2008.

How Long Do Users Stay on Web Pages? Jakob Nielsen, Nielsen Norman Group, 2011.

Skim Reading by Satisficing: Evidence from Eye Tracking. Geoffrey B Duggan and Stephen J Payne, Proceedings of the International Conference on Human Factors in Computing Systems, 2011.

The Elements of Typographic Style Applied to the Web. Richard Rutter, Web Typography.

Understanding the F-Layout in Web Design. Brandon Jones, Tuts Plus, 2012.

Last updated