Are you skimming or scanning right now?
What the science of reading tells us about designing with words
In many ways, paper offers an experience that is just better than reading digitally. A dusty book jacket, the scratchiness of paper between your fingers as you flip through a novel. The smell of a first edition found in an un-shelved stack at a used bookstore.
Books have a physicality that resonates with most of us. People remember what they’ve read from physical books longer, and find it easier to grasp the the arc of stories.
The thing is, much of what we read these days is on screens, not paper. Words saturate the apps on our phones, tablets, and computers. Websites are teeming with words.
Context and Content
Can you imagine reading a string of a social media posts or the on-boarding flow for a new app printed on paper and bound in a book?
The context is completely different, and so is how we think and feel about the content. When reading on a tablet, laptop, or phone, you’re having a different experience than digging into a dog-eared paperback borrowed from a friend.
Digital contexts inspire a specialized kind of reading with its own kind of magic.
Product designers, writers, and content strategists can design better digital reading experiences if we understand more about what happens when people read in these contexts.
Yes, people read.
Studies show that people used to have a harder time reading on screens. As technology has improved and content on the internet has expanded, so have our ability and willingness to consume words on screens.
Human brains are getting better at parsing information in digital contexts. We’re reading longer blocks of text on our phones than ever before.
Yet when we read online, most of us toggle instinctively between skimming and scanning. Sure, we can hack our minds to switch to a different pace and style of reading, but these are our “go-to” modes for reading words on screens:
When you skim, you are a gatherer.
You survey the landscape of the text. You roam the hills and valleys of words as you gather information in the most efficient way you know how.
When you scan, you are a hunter.
You’re on a mission, and you know precisely what you’re looking for. You focus on your mission, ignoring pretty much everything else.
Let’s take a closer look at these 2 reading modes and how we can design for them.
Skimming mode: “What’s in it for me?”
Chances are, you read the title of this post, skimmed the first paragraph, and scrolled down to check out the headings. A small percentage of you decided that reading every word may be worth your time and effort (Aww, thanks!), but most people don’t get to the end of articles and blog posts.
Online, we are generally goal-oriented readers, or “information foragers,” especially when it comes to nonfiction, instructional, and transactional content. Our eyes tend to lightly skate over the words in things like modals, confirmation dialogs, popovers, and menus.
It doesn’t take long to decide to leave an app, dismiss a dialog, or close a window. In mere seconds, we evaluate relevance to our needs and interests.
Skimming is most people’s default method of absorbing content online. Through eye-tracking studies, the Nielsen Norman Group has documented that people tend to skim in a few stacked lines across the screen up top, and then our eyes drop down the left side of the screen in what looks like an F pattern.
On phones, we tend to fix our gaze on the image or words in the top third of mobile screens, then, drop the gaze to the bottom of the screen or up to the very top to take action.
Even when you read a complete sentence, your reflex is to skim. Your eyes leap back and forth across a line of text every second in movements called saccades. How far your eyes leap varies depending on your reading level and how well you know the content, but the intent is the same.
Jason Santa Maria explains how, saccades help our eyes register a lot of information in a short span in his article, “How we Read” in A List Apart.
During these leaps, or saccades, our brains are searching for places to pause. Brief pauses between jumps are called fixations. This is when we process how individual words or letters relate to the other items on the screen.
Whenever we read, our instinct is to conserve mental energy. This is especially true when we read on screens where short attention spans, multi-tasking, and frequent interruptions are par for the course.
Design for skimming
Skimming is a handy technique and saves time, but people overlook nuances in meaning when they skim.
This is a problem if you want users to understand new features, upgrade options, terms of service, and the like.
Designers and writers can try a few things to support people’s instinct to skim.
- Front-load content. In this example, Slack puts the main message in the boldest and largest type and offers more details for people who want them.
- Display progress bars and status indicators.
- Sync images with the tone and message of your copy. The illustration in this email from Simple Bank enhances the feeling of security and ease conveyed by the copy. The message is clear in a single glance.
- Offer choices and menu options that are clearly distinct from one another. Spotify’s web app list numerous options with unique and specific labels. You could skim this and get the gist of what you can do here without thinking too much.
- Use descriptive links and Call to Action labels. The text on the button in this Squarespace email is both informative and concise.
- Display like elements and copy together. Structure makes skimming more effective.
Scanning mode: “My mind is made up.”
In scanning mode, you already know what you’re looking for–the familiar or something relevant to what you want to get done.
You are on the hunt, and a screen with a block of text is like a maze that you want to escape as fast as you can. For example, it probably wouldn’t take you long to scan the next paragraph and locate the word “encounter.” Try it now. See? Told ya.
Do you remember learning to read?
You were actually training your brain to connect the shape and sequence of specific letters with meaning. Now, when you encounter written text, a big part of what your brain is doing is scanning for familiar shapes. Everything else recedes into the background.
Not all psychologists agree, but according to the oldest theory on how we recognize words, our brains process words as shapes. Since the most distinctive part of letters is their top half, we can usually still make out words even when the lower halves of the letters are covered.
Depending on our goals when we scan, our vision narrows to words that represent what we want to accomplish. For example, “Move” or “Sign up.” Scanning is probably part of the reason we are less open to learning while reading screens than we are when reading paper.
Design for scanning
- Use sentence case whenever you can because words are easier to identify in this style.
- Avoid all capital letters since most of us are used to reading a mixture of upper and lowercase letters.
- Use a limited vocabulary so people become familiar with what you call things.
- Use conversational language. Avoid jargon readers aren’t familiar with. Readability scoring tools can help. For example, the return flow on Amazon’s website features language that is common, conversational, and direct, which helps decrease the potential for confusion.
Why any of this matters
A study by Nielsen Norman Group found that people tend to fixate on text before graphics. After loading a webpage, just 22% of those studied paused on a graphic element first, compared to 78% who paused to consider text in a headline, summary, or caption first.
Word choice, sequencing, and strategic placement of the text we use in apps and websites are powerful design tools, like photography, illustrations, graphics, and layout. Designing for skimming and scanning modes can help create better reading experiences, establish brands, convert users to subscribers, and decrease customer support tickets.
Hey there! Are you one of the small percentage of readers who made it to the end of this post? Nice! You deserve a reward. Oh, and here are a few resources that may be helpful:
- 100 Things Every Designer Needs to Know About People
- On Web Typography
- The Science of Word Recognition
- Microcopy: The Complete Guide
- Norman Nielsen Group Reports
- How to design websites that mirror how our eyes work
- The Reading Brain in the Digital Age
- Designing with Eye Tracking in Mind
–
Angela Gorden is a UX writer and content strategist who loves lists, G2 Pilot pens, and dot-grid paper.
