How Users Read Online — Part 1

Krisztina Szerovay
UX Knowledge Base Sketch
4 min readMar 8, 2022

--

How Users Read Online — Part 1, UX Knowledge Piece Sketch #36

How users read online?

According to the Nielsen Norman Group’s research (both from 1997 and 2020), people don’t read, most of the times they scan through pages. And usually they don’t skim through the whole page, they cover only portions of it, and they do this in a non-linear fashion.

However, users do read when they find what they came for. A best practice is that let users “grab and go” by guiding them through the user flow. (I read about the idea of “grab and go” in Janice Redish’s book, Letting Go of the Words: Writing Web Content that Works).

Obviously, this behavior depends on the context, too, e.g. the information seeking behavior might be totally different in the following cases:

  • reading for entertainment (e.g. gaming; novels)
  • finding and reading information on an e-commerce website
  • reading about tax rules and filling out forms on an e-government website

Legibility and readability

There are two related concepts you should be aware of:

  • Legibility is about distinguishing one character / letter from the other. The question is: “Can it be read at all?”
  • Readability is about how easy it is to read words, sentences, paragraphs (chunks of text). The question is: “How comfortable is it to read?”

Visual hierarchy — You read this first.

And then you read this.

Establishing a meaningful visual hierarchy is key, and you have many ways to achieve it: next to size, you can use for instance

  • weight
  • color
  • position
  • shading
  • motion
  • alignment
  • opacity
  • contrast

One important truth is that if everything is calling for attention on a page, nothing will stand out. You should avoid using wall of words, instead, you should break the page into e.g. headers, subheaders and paragraphs — that way you can show what parts are the most important ones.

How to design for scannability

Luckily we have many ways, here is a list of some examples:

  • Use legible and readable text sizes
  • Show the context with clear headings or eyebrows
  • Apply lists, bullet points (like this list, it is so scannable, isn’t it? :) )
  • Use small chunks of text and short sentences
  • Use numbers
  • Add relevant links
  • Start each section with the most important words, messages
  • Add meaningful illustrations and visualizations (and provide alt text)
  • Reveal details progressively
  • Avoid using all caps
  • Whitespace is your friend — e.g. you can show what parts belong together
  • Apply consistent text styles and highlight the key messages
  • One paragraph should be about one thing
  • Be concise, omit unnecessary words and punctuation
  • Apply legible fonts (typefaces)
  • User grids and align elements on it
  • Use simple language
  • Apply appropriate contrast

And of course there are many more aspects, e.g. using line length, line height and tracking in a way that supports scanning through the content.

Do you like my sketches? Support my work!

Coffee is my fuel — you can buy me one if you want to boost the sketch-creation process! ;)

If you like my sketches, you can buy me a coffee to support my work! Thanks, I really appreciate your encouragement! 🙏

My Sketching for UX Designers course on Udemy

If you like my sketches, check out my Sketching for UX Designers course on Udemy, use the coupon code SKETCHFORUX22SUMMER to get 86% off! Click here to apply the code.

Please feel free to join the Sketching for UX Designers group on Facebook, post your UX sketches, share your favorite links, ask questions etc.

You can subscribe to my Sketching for UX newsletter to get these UX Knowledge Base Sketches directly to your inbox weekly, and to participate in a 100-day long UX-visual library building challenge. If you subscribe, you can also download the Sketching for UX designers WORKBOOK for free!

--

--