How To Use Scrolling To Fight Increasingly Lower Attention Spans and Skimming Behavior of Users
In the world of social media, constant stream of tweets, and content saturation people’s attention spans are getting narrower each day.
One thing becomes quite obvious when you do any usability testing is how little attention people give when they are browsing through websites.
When users read online, most of them toggle instinctively between skimming and scanning.
Steve Krug, author of Dont Make Me Think, says that “One of the most important facts about web users is that they dont read, they scan.”
Jakob Nielsen’s eye-tracking study from 2008 indicated that — “Less than 20% of the text content is actually read on the web.”
Furthermore, In a usability study Gerry McGovern discovered that, “Only 1 out of 15 users could locate a specific piece of information that was not scannable placed on the page.”
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 few lines across the top screen, then our eyes drop down to the left side of the screen.
That skimming pattern looks like an F.
On a mobile device, the users tend to fix their gaze on the image or words in the top (⅓) of mobile screens, then, drop the gaze to the bottom of the screen or up to the very top to take an action.
This presents a huge challenge for designers when designing something like landing pages, manuals, templates or marketing materials, where success lies in the focus.
No matter the hard work you put in crafting and designing the content, it’s going to be wasted, when it will fall on deaf ear.
That is why we designers have to do our best to design in such a way, so that we can capture the user’s attention instantly and convey the right message.
One of the best tools we have in our possession to solve this is by utilizing users scrolling habits. While people don’t read they do scroll a lot and here’s the data to prove it.
- The design agency Huge measured scrolling in a series of usability tests and found that “Participants almost always scrolled, regardless of how they are cued to do so — and that’s liberating.”
- ClickTale found that over 76% users scrolled on a webpage.
- Chart Beat (a company for data analytics) looked at data from over 2 billion unique visits and found that “66% of all attention on a typical web page is spent below the fold.”
In the early days, web designers were only concerned with making sure that the main content was above the fold to tackle usability and conversion rate, but with changing times and rise of the mobile it has become obvious that the default behavior for users has become to scroll.
Now that we know that most users scroll on web. Here are few way you can use scrolling to grab attention of users while they are skimming:
1. Make longer scrolling pages
If the users are scrolling more, than the most obvious solution is to of course create longer scrolling pages.
When you approach the long scroll as a canvas for storytelling, you would be surprised to see how it’s similar to film-making power to tell stories and capture attention.
As the user scrolls down, different layouts can be paired with subtle animations that get the user’s attention and keeps him engaged. One good example of this is The Boat, where they have used scrolling to tell the story.
Here are some more examples.
Benefits of long scrolling -
Consumers who scroll more tend to buy more. For example, the tablet/phone users who make a purchase scroll 25% farther down on a page, on average, than non buyers.
Longer scrolling page increased the time users spend on your site which lowers the bounce rate. Lower bounce rate is good for SEO.Here’s a tweet from LukeW about how long scrolling page converted more.
2. Tell your story using subtle animations
Now that you know long scrolling pages work. You can use motion design in your content to hold the user’s interest and create tiny delightful experiences.
Tiny subtle animations can play a huge role in keeping users attention at one place by showing only the things that matter and hiding things that are not needed or secondary.
You can also slowly unveil things so that users don’t scroll past the story you want to convey. See below Gifs for example.
Although, just a caution: Don’t overuse animations, as it can slow down the experience and sometimes hinder the users from seeing the content.
It’s not about taking over your browser but instead using scroll and animation to show only what’s important and bring it to the attention of users.
This may seem like scroll jacking which we don’t recommend. Scroll jacking is bad for usability and experience because it goes against what the brain expects and is almost never “delightful” enough to make up for the inability to exert normal movement control over the page.
3. When designing for long scrolling pages Less is more.
You should make good use of whitespace, imagery, and big text which makes it easier for users to capture the information quickly.
As we talked about, users use scrolling to scan through the content so it is imperative for designers to make sure that users are focused on the important part. Which cant happen if you cram too much content per scan area.
The less informationally dense pages tend to elicit eye movement that resembles the letter ‘Z’.
This so-called Z-Pattern has many of the same characteristics as the F-Pattern. But here, simplicity is a priority and the purpose is to entice the users to take an action. Source: Tutsplus
One caution here though — Make sure the content size isn’t either too large or too small otherwise users will just scroll quickly.
4. Stop your users once a while. Recommend other things.
From our usability and eye tracking studies, we have noticed that consistent content flow actually increases the speed of scrolling amongst users. So it’s best to design content in such a way that users see invariable things as they scroll.
Nir Eyal talks more about variable rewards and how that affects our brain here. Also, read how you can use variable content to grab user’s attention.
You can use different content ideas to create variable content flow like Design elements, images, or videos. For example, a video can capture user’s attention and images can slow down their scanning speed.
If you own an e-commerce product feed, you can put different sections that recommends other products to users. The content could be anything, the main purpose is to slow down the users with any unexpected content that holds user’s attention.
See how Heyneedle does it-
Medium is not an e-commerce example, but see how they use content suggestion to break users patterns.
5. Design and write your content for skimming
People read differently on the web than on the paper. They always want to get the vital information quickly, so they can move on to other important tasks rather than absorbing everything out there.
When we read a complete sentence, our reflex is to skim. Our eyes leap back and forth across a line of text every second in a movement, called saccades. How far our eyes leap varies depending on your reading level and how well you know the content, but the intent is the same.
People only read something in detail, when they are highly interested in the content. That is why content should be written and designed in such a way that it easily allows users to get in and get out of the content.
Use headings and subheadings that create an informative package.
Informative headings and subheadings are a little bit like newspaper headlines. They give the reader an overview of what each section covers. But, you should not include heading like:
- Introduction
- Conclusion
- Check this
- About us
These kinds of headings do not help readers to skim the document. They tell you nothing about the actual content of the sections they introduce.
Rather, you can do something like this:
- Inefficient Distribution System is Hurting Sales Approval
- Expected by June, Sales Should Grow by 6% in 2018
These headings are better because they serve as a summary of what’s coming.
Use Visual Hierarchy to Create Structure for better scanning
Each level of heading should be:
- Parallel
- Visually distinct from the other levels
- Easily distinguishable from the text
- Informative
- Consistently formatted-size, font, style, capitalization
- Avoid using all caps
- Be consistent with capitalisation within each level of heading.
Body content design tips:
- Lists, Bullets, and White Space Improve Skimming
- Divide long paragraphs into shorter ones.
- Do not justify the right margin-leave it ragged to avoid spacing inconsistencies.
- Avoid crowding your text too close to any graphics or figures.
- Break list items out of paragraphs and into ordered or unordered lists
- Use numbers for sequencing or ranking; use bullets for everything else.
- Use headings and subheadings whenever you transition into a new topic.
- Bold or italicise particularly important lines.
- Use familiar formats like the inverted pyramid (where information flows from most to least important), BLUF (Bottom Line Up Front) listicles, and walkthroughs.
Typography Can Improve Skimming
The Typographies plays a crucial role in holding the users on the decision-making points. Make sure to do experiments with Boldface, Italics, Underlining, Font size etc, to find the best combination which works for you.
But, we wouldn’t recommend using more than two fonts. About the size- You should choose a legible font size-10–12 pt for text; 14–20 for headings; 26–30 for visual Ads.
Design Call To Actions Clearly
If you want users to take an action, whether to visit a link or more prominent like sign up or make a purchase, then you have to design your call to action button in a way that visually appeals to users.
Lets see how well designed content can help users skim through the content.
You’ll notice that the only difference in above pages are the baby’s eye line. On the left, the baby is looking directly at you, and the hottest part of the heat map is on the face. On the right, the baby is looking at the headline, which directs our eye from his face to the headline and copy.
So creating smart content layout can help you a ton.
6. Design for keeping mobile users in mind
With the rise of mobile swiping up and down to scroll has become quite natural and actually resulted in increase in scrolling habit around the world. In fact, users scroll a lot more on mobile than desktops.
While designing for mobile, you have to make sure the navigation and main functions of the app are quite obvious, so users can perform with ease. But, taking over mobile browser function like swiping is not recommended.
Also, include images as a separator between content. The content should be ideally medium to large size in the center and it shouldn’t be over saturated.
7. Experiment with different design types like conversational interfaces
Depending on your target audience and your site’s purpose and story flow, you can try out different storytelling approaches to garner users attention and increase engagement.
8. Encourage scrolling
Sometimes your design will have a false bottom and users will think that there is nothing more to scroll. Avoiding a false bottom is pretty easy — How?
Put a small amount of content(visible and poking up) will encourage users to scroll down. But, avoid the use of in-page scroll bars — the browser scrollbar is an indicator of the amount of content on the page, so another indicator can annoy the users.
What’s more?
You can even suggest scrolling with design elements or tools so that every user can quickly see how the site works. Arrows, animated buttons or similar UI tools are fun and easy ways to help the user determine what to do next.
9. Don’t compromise on usability and make it easy to navigate
When creating longer-scrolling sites, understand that users still require a sense of orientation (their current location) and navigation (other possible paths).
This can be a serious problem for users to visit other pages when content is broken into multiple equally important sections. But, this can be easily solved by a jump-to-section option on the page and hovering/sticky navigation bar at the top or at the bottom.
10. Make webpage very lightweight and fast with smoother loading to content
Users abandon slow loading pages. Also, don’t make pages that are too heavy so that browser hangs. Don’t hijack the scrolling. Always keep users in mind and don’t let them wait for content to load let them be in their flow and don’t interrupt it unless it’s intentional.
11. Always do usability (heat maps) and eye tracking studies to see how users are using your content.
User experience design is all about understanding your users and designing solutions that help their digital lives make easier. That’s why, the tips we have given here may not apply to your target audience, hence always measure and test out your designs and assumptions with user interviews and usability studies.
If you don’t know where and how to start, read this- Practical UX design tips.
Conclusion
Scrolling and subtle animations can help you capture attention and increase engagement, but you should not get overzealous and abuse them. From what we have seen, it’s extremely easy for people to overuse them, which makes the user interface sluggish.
The best design is when it fades in the background and let the content and purpose be the focal point.
Also, long scrolling doesn’t mean 500 pages of continuous content, so don’t go overboard- scrolling can be simple, even the long ones. The sole purpose should is tell a story rather than forcing someone to take an action.
I would love to know your thoughts on this story, so please feel free to share.
