Page Formatting: Yes You Scan!

  Reading time 7 minutes

Are you reading this?

How about this?

  • This is a little out of the ordinary, but I bet you’re reading.
  • Maybe you aren’t.
  • How can we tell?

Readers scan in very predictable ways and patterns. The basics are pretty simple. We jump to bolded text and don’t expect to see giant, bold statements. We read with a different emphasis when text is italicized. We scan immediately to images  on the page. Big, long paragraphs **like this one** are tiresome to readers and often get skipped while scanning. Formatting text in an unexpected way can throw your reader off, but using page formatting strategically can guide your reader through a page and help keep them engaged. Some of the tactics used in best-practice writing for the web may also be useful for academic writing and assignment construction.

You’re definitely reading this.

Most of the research being done around page scanning patterns is being done so with web content, not academia, in mind. However, some of the research done for web content writing may be helpful as you write or create resources for students.

Scanning Patterns

According to studies performed by the Nielsen Norman Group(NN/g), scanning on the web is dictated by:

  • Reader’s personal motivation
  • Goals the reader is trying to achieve
  • Layout of the page and formatting of text
  • Page content

In most situations, authors are only able to influence the final two points listed above, but teaching provides scenarios in which you may also influence the reader’s goals.

Sometimes you may only be influencing the reader’s goals. Most people read in one of the following scanning patterns:

F-shape
Readers will first read a line or two horizontally and then begin to move down the page scanning the first few words of each line. The F-shape reading pattern is the most common pattern.

Layer-cake pattern
This is common when headlines and subheadlines are over-used or are very close together on a page. Readers will scan to a headline and read 1-2 line beneath it before moving to the next headline.

Spotted pattern
The spotted pattern is most common when readers are searching for specific information and quickly skip around the page looking for key words and phrases.

Bypassing pattern
When readers notice the first few words of each passage are the same they begin to automatically skip over words, this results in the bypassing pattern.

Commitment pattern
The commitment pattern is fairly atypical in mobile and web-based reading, but may be more common among academic readers. This pattern occurs when the reader is deeply interested in the topic and does not scan at all. Instead, the reader reads the entire page.

Headings Help Guide Readers

Subheadings help, too.

Using gratuitous headings can be a bit gauche, but a few here and there can really help your reader find the exact piece of information they’re looking for. The F-shape reading pattern is strongly influenced by headline placement.1Strategic use of headings, images, and paragraph breaks are a great way to steer your reader down the page without exhausting or frustrating them.

The golden rule of writing headings and headlines is:

Make sure the headline works out of context.2

Headings that don’t actually tell the reader anything lead to frustration and confusion. The practice of making your headings contextually independent is especially beneficial to students and academic readers. Students may only be scanning for a specific sub-sect of information and face information fatigue if they do not find it.

Images: Decoration vs. Content

The recent boom in attention being paid to web content has had a large focus on the use of images, this is largely because images quickly draw gaze and may snag a reader’s attention faster than anything else. Images have also been shown to yield a higher rate of information retention than stand-alone text (when the image is linked to the text). 3There is, however, a catch.

A pretty dog on the beach.
Image captions are also extremely likely to be scanned to and have the potential to draw focus away from the article.

Take this picture of a dog, for example. Is there a reason for it to be here? Does a happy dog on the beach teach you anything about page formatting? No. The only purpose of this image is to draw the your attention further down the page. This is an example of “fluffy” content. Fluffy content and other decorative images used to “jazz up” a piece of writing or a web page are sometimes completely ignored and other times merely forgotten4 What is the likelihood that you’ll remember this fluffy dog in 3 days? Unfortunately, not super likely.5

A heat map showing an f-shaped pattern.
Hey look, it’s our good friend the f-shape pattern!

By contrast, this image is obviously here to teach you something and will most likely aid to your retention of the information being presented.6 This image is a heatmap that shows all of the places a user’s eye was tracked while researchers studied their eye movements.

 

 

In Conclusion

Did you skip to this section of the page to get the clean, distilled summary of the ideas presented in this post? If so, that’s totally valid7 and I support your commitment to efficiency! While there is a ton of web content research being done that’s fully irrelevant to academia, it may be helpful to keep in mind some of the best-practice writing techniques for the web that may make life a little bit easier for your reader. In the spirit of making life easier for my reader:

  • Check out the F-shape pattern, most readers read this way.
  • Headlines can really help your reader out.
  • Images are great if they’re relevant and frustrating if they’re irrelevant.

Write on!

  1. https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
  2. https://www.nngroup.com/articles/microcontent-how-to-write-headlines-page-titles-and-subject-lines/
  3. http://www.brainrules.net/vision
  4. https://www.nngroup.com/articles/photos-as-web-content/
  5. https://www.shiftelearning.com/blog/bid/350326/studies-confirm-the-power-of-visuals-in-elearning
  6. http://hicareworld.co.za/visual-storytelling-why-data-visualisations-make-medical-education-easy/
  7. https://writingcenter.fas.harvard.edu/pages/ending-essay-conclusions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.