Booklet

author

Elias Serrano

Design

How Users Read Online

design

Design

|

How Users Read Online?

They just don't
It takes the user 2.6 seconds to view a website & have a first impression before reading, according to eye-tracking research by the Missouri University of Science and Technology.
This means users don't read everything they see on the web. Instead, they scan content, search for a relevant picture, look for a specific title or read a few paragraphs.

Scannability
This UX practice has been going on for decades. People scan the newspaper or magazine in search of relevant information.
Scannability is simply a way to layout content so the eyes can scan through a web page with ease, allowing speed reading.

This behaviour is nothing new In fact. Jacob Nielsen answered this question in his 2006 study called 'F-Shaped Pattern For Reading Web Content'. He found the same reading behaviour in most experiments: The F-pattern.

The F-pattern

  1. Users first read the top area horizontally.
  2. They read the next paragraphs horizontally, but for a shorter length.
  3. The user sticks in left side, forming a vertical eye movement

Try it yourself
Your eyes will first detect what's easy to read. This usually involves images. Titles & subtitles. You might not read through all the text but your eyes can quickly scan & understand what the page is all about.

How to improve scannability?

  • Improve your content hierarchy & structure
  • Titles & subtitles should be clear & meaningful
  • One idea per paragraph
  • Use numbered or bullet-point lists
  • Highlight key information
  • Use images & illustrations

Keep in mind
Designing a great user experience starts by understanding what new visitors are trying to solve when entering your website.
No matter how much valuable information you have to say, users won't read everything. However, Improving an interface for scannability will most likely reduce your website bounce rate, increase the probability of returning visitors, achieve better SEO & simplify people's life.

More booklets by Elias Serrano

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets