brain nav

ONLINE READING is DIFFERENT

Introduction

 
We've learned a huge amount about print reading in the last 400 years.

When reading print text,
the following improve reading speed and retention:

But online reading is not like reading a newspaper, magazine, or book.

 

Online Reading: Usability = Readability

Scanning, not reading

Imagine a disinterested reader flipping through a print magazine.

They are scanning the pages looking for something interesting. When they find it they spiral around that attention point looking for ideas that build or explain further.

Most online reading is not reading, it's scanning and looking for language that matches their mental search filter.

Once they do engage, they are evaluating your content. Ruthlessly.

Here are some things that can help you improve online readability:

Everything in the list is amplified for a smartphone user -
we scan faster, we're in a distracting environment, and we may not be able to see our screen well.

Organize information using page hierarchy and related links to fit your reader's intent

Hierarchical information improves reading and retention. H1, H2, H3, section titles, color coding all help. Clear writing that is direct and simple also helps. Be generous!

When we think about the information and organization of our sites, we should begin with the needs of the reader-persona:

Why are they here?
If they are here from search, what else would they want to find?
What are they likely to be doing?
What would make them successful?

Try to carve away as much distraction as you can. If you are eCommerce always offer them a secondary call-to-action. They may not be ready to commit, but if there is no easy path to keep learning or browsing - they leave and our success rate suffers.

Column widths - if more than 15 words, increase line-height

If you have to use wider text columns, you really need to increase the line-height. Wide columns of text do not easily guide the reader's eye to the next line, resulting in confusion and slower speed.

To use a wider column with small text, add more line-height.

When you set text in a page (without using a table or div with width set), you can create a bad situation for readers with large monitors. Default line-height is too narrow for full width windows. But we can use max-width in CSS to control column width in large viewports.

Ironically, some of this was caused by mobile users and responsive code. Initial effort for responsive mobile layouts simplified everything to fit mobile resolutions. Adding content back for better desktop resolution experiences has been harder.

Which fonts are best?

Serif fonts and sans-serif fonts have been debated by talented psychologists and designers and there is no clear requirement. Serif fonts for print read faster if everything else is controlled - such as paragraphs in a book or newspaper - but we also see variety everywhere in magazines and people enjoy it.

Online there is a measurable improvement for non-serif fonts, but it's not a huge difference. The organization of information has more significant effect... keep reading!

Footnote:
Banner blindness is real.
I had a client that inserted a banner immediately above the navigation bar in a banking web application, with an immediate increase in support calls where their customers could not find basic functions...
 
Clients without banner ads weren't getting those calls.