How you organize your content is a critical element of conveying yourself effectively.
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.
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.
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.
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.
Dyslexia Friendly Style Guide. British Dyslexia Association.
Federal Plain Language Guidelines. The Plain Language Action and Information Network (PLAIN), 2011.
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.
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.
