Why?
Designing for Focus
Designing for Context
Examples
Learn More
Designing for online
reading experiences
Designing for online reading experiences
Why?
Designing for Focus
Designing for Context
Examples
Learn More
Why?

Everyone learns differently – and depending on the person and the scenario, reading can be difficult!
 

For example...

Reading a large chunk of text like this is pretty tough. You might skip a line by accident and lose your place. Your eyes might get tired from all the noise and visual monotony, and then your eyes wander your mind may also drift... clearly, it can be hard to focus!

Distinguishing between paragraphs may or may not be a challenge depending on cognitive ability, but being able to distinguish between paragraphs not only helps the mind take a break from reading, but it also creates separation between two different trains of thought.

Designing for Focus

We care about helping users focus because we care about helping them to understand what exactly they are reading. Too much clutter and too many other things fighting for the reader's attention will limit the amount of mental energy that can be devoted to processing information.

 
1. Suppressing Content

The fewer distractions (visual, auditory, tactile, the list goes on...) that exist, the more mental bandwidth there is for the brain to process information.


Continue reading...

Hovering over this paragraph reduces the opacity of the second paragraph. The sudden reduction in visual noise makes it easier to focus on what's currently at hand! On the other hand, nothing happens when you hover over the second paragraph.

Is it frustrating? Does it make it harder to read and concentrate, especially when you can still see the first paragraph clearly in your vertical peripheral vision? Most of the times, the answer is yes.

 

 
2. Enhancing Content

Rather than suppressing content, which brings up problems when we make assumptions about where people are currently reading and what input devices they are using, we can simply add more cues to what we think the reader is looking at - kind of like the laser pointers that teachers use during lectures.

Continue reading...

When hovering over words in this paragraph, a visual contrast is used to draw focus to the word at hand. Microsoft's OneNote learning tool does something very similar to this, helping younger students to focus on individual words at a time as they begin learning how to read.

Designing for Context

It's not only hard to keep track of what you're currently reading, but it's also easy to forget what you just read. When readers can't anticipate how much they still have to read and don't have a sense of their progress, feelings of discouragemnet and loss of motivation may also disincentivize them to continue reading to the end of the page.

 
Offering Positionality

Better online reading experiences will give readers a sense of how long the reading journey will be. For example, when someone uses a map to navigate from Point A to Point B, chances are they will consult a map more than once in order to 1) make sure they are stlil on the right route and 2) see how far they still have to travel.

Similarly, an individual reading a physical book or article can visually and tactilely observe how much of the text is left; a 30lb book might indicate the need for a break, while a single sheet of paper allows the individual some room to sit down at a table for five minutes before heading off to work.


Continue reading...

 


Here's a long (and large) chunk of text! As you'll notice, when you start scrolling, a "progress bar" of sorts will begin increasing across the box to indicate both how much a reader has read and how much they still have to read.
 
Here's a long (and large) chunk of text! As you'll notice, when you start scrolling, a "progress bar" of sorts will begin increasing across the box to indicate both how much a reader has read and how much they still have to read.
 
Here's a long (and large) chunk of text! As you'll notice, when you start scrolling, a "progress bar" of sorts will begin increasing across the box to indicate both how much a reader has read and how much they still have to read.

 

Here's another approach...


Here's a long (and large) chunk of text! As you'll notice, when you start scrolling, a "progress bar" of sorts will begin increasing across the box to indicate both how much a reader has read and how much they still have to read.
 
Here's a long (and large) chunk of text! As you'll notice, when you start scrolling, a "progress bar" of sorts will begin increasing across the box to indicate both how much a reader has read and how much they still have to read.
 
Here's a long (and large) chunk of text! As you'll notice, when you start scrolling, a "progress bar" of sorts will begin increasing across the box to indicate both how much a reader has read and how much they still have to read.


 
Improving Discoverability

To give the reader a higher chance of committing to the text, it's nice to offer a preview of the content that is to come. The "no surprises" approach allows readers to anticipate what's coming up and also navigate their way fluidly through the content. With improved discoverability comes greater efficiency and greater online readability.


An organized approach

Why discoverability is important
Discoverability and readability
Discoverability and usability


 


Why discoverability is important

One of the principles of good design is discoverability: in terms of creating better online reading experiences, it should be easy for users to discover what the content will cover simply on first glance.

Similar to how a menu and toolbar can add discoverabillity to a web application or piece of software, a table of contents or summary can add discoverability to long (or short!) form content. The extra section doesn't interfere if the reader doesn't care about it, but it is always present for users to navigate to specific portions of the content.

 

Discoverability and readability

As we keep reading, we see that this entire blocked off section of text has become easier to read -- each subheader defines the topic that will be discussed in the next few paragraphs, both priming the reader for what's they are about to read and subsequently allowing for quick "rereads" in the case that some information wasn't taken in the first time.

As a result, we see that greater discoverability lends itself to higher comprehension and increased ease with parsing information, which ultimately results in greater readability of the content itself.

 

Discoverability and usability

Returning quickly to discoverability as a core pillar of design, chances are you were only interested in reading one of these three topics; had there been no table of contents and means of quickly navigating to different subjects, you would have been forced to read through a lot of unnecessary content simply to get to where you wanted to be!

Making texts more navigable and usable is a good economic practice - but in situations where, perhaps, an individual has limited time or attention, being able to quickly find the information they are looking for is invaluable.

Examples

This page was designed with creating a more inclusive, accessible reading experience! Let me know if it didn't work for you...

Additionally, I've made some Framer prototypes demonstrating some other methods that allow for user focus and context while reading through longer pieces of content.


Online PC Reading Experience


Online Mobile Reading Experience

Learn More

A lot of my work is grounded in the research and findings from Microsoft's Inclusive Design team. Check them out to learn more about designing inclusively!