Take a Scroll

In web design, there’s a commonly held belief that web content that falls below the height of a user’s screen or, to use an old newspaper term, below the fold, is lost on site visitors because they are averse to scrolling. And it is true. Users were loath to scroll….in 1994. But times have changed and so has the web. The latest advances in code allow you to use the act of scrolling to lead readers through a narrative, focus on important information, feel like they are physically moving through a site. In short, the online experience becomes much more of, well, an experience.history

Before the scroll
According to Jakob Nielsen’s usability studies at the time, only 10% of site visitors would scroll below the content they could see. Nielson attributed this to the fact that people treated a set of Web options like they would treat a dialog box in which all content was visible. In addition to this, there were likely some other forces at work:

  • In 1994 web design looked like this! Designers had to worry about browser formats that didn’t support images, let alone text.
  • Computer screens were this big…
  

and their maximum resolutions were generally 640 x 480 so scrolling could get old pretty fast.  Especially since….

  • …the first scrolling mouse was a year away from the marketplace and wouldn’t become popular for two years.

As soon as 1997, Nielson had stepped back from his dictate that websites shouldn’t scroll. Research in 1997 showed that users were more accustomed to scrolling, that it was no longer a “usability disaster,” but that, nevertheless, it still reduced usability. By then, Microsoft’s page looked like this:

It’s pretty safe to say that technology was just not scroller friendly 15 to 20 years ago. Computer navigation was governed by the click. Scrolling was really dragging or arrow-clicking the scroll bar down. No wonder people didn’t like to scroll.

The result was a trend to cram as much information as possible above the fold. This has led to several design practices in recent years that have not been the most user friendly.

  1. Small screen areas typically 750 x 600 crammed with content, which lead to….
  2. Smaller font sizes, which lead many people to complain about the readability of pages…
  3. and pages full of lists of links that ostensibly provided users with a glimpse of the full depth of information available. What these pages really accomplished was to give users click fatigue as they sometimes had to click three and four levels deep to get to some actual information.

Scroll forward 15 years

  • The digital world has vastly changed. Desktop and laptop screens are growing and mobile devices allow us to take the web with us wherever we go. The average size of monitors sold today is 21 inches, reports TechnoBuffalo, and more and more people are using multiple screens. According to StatCounter, average screen resolution is 1366×768.

  

  • Advances in java scripting, HTML, and CSS has taken web design from, “I’ll suffer through the horrible graphics, blinking gifs, and slooooooow connection speeds to get to get that one piece of information I want.” to, “I’ve just spent five hours of my day conversing with friends on Facebook, shopping on Amazon, watching videos on YouTube, and checking out my favorite band’s website.” We’ve graduated from a graphic interface that jarred the eye to the being able to render whatever an artist can imagine:

  • More importantly our digital mindset has changed. After almost 30 years (since the early days of PCs) of exposure to an increasingly sophisticated digital universe that, today, makes you the game controller in a video game with graphics so vivid they could be real and serves up 3D movies in which you feel you’re an actor in the scene, technology is becoming a mirror of the way we see and experience the world. We’re used to gestures well beyond click – we touch, we flick, we swipe too.

Stubborn echos
Yet, despite these leaps in technology, myths about web design and usage remain. Perhaps the one, many cling to the most is the idea that today’s web users still don’t like to scroll or don’t know that they should. Even without hard data, common sense and simple math would indicate that this is likely not true, given that Facebook (lots of scrolling) has 800 million users, and Amazon (lots of scrolling) attracts over 65 million users to its U.S. website every month. Data confirms what common sense dictates. Take these stats from uxmyths:

  • Heatmap service provider ClickTale analyzed almost 100.000 pageviews. The result: people used the scrollbar on 76% of the pages, with 22% being scrolled all the way to the bottom regardless of the length of the page. That said, it’s clear that page top is still your most valuable screen estate. – Unfolding the Fold and ClickTale Scrolling Report and Part 2
  • Usability expert Jakob Nielsen’s eye-tracking studies show that while attention is focused above the fold, people do scroll down, especially if the page is designed to encourage scrolling. – Scrolling and Attention
  • Upon reviewing the analytics data of TMZ.com, Milissa Tarquini found that the most clicked link on the homepage is at the very bottom. She also points out that polls and galleries at the bottom of AOL’s Money & Finance homepage get a lot of clicks in spite of their position. – Blasting the Myth of the Fold
  • Another eye-tracking study conducted by CX Partners confirms that people do scroll if certain design guidelines are followed. – The myth of the page fold: evidence from user testing
  • Usability studies by the Software Usability Research Laboratory’s show that users can read long, scrolling pages faster than paginated ones. Their studies confirm that people are accustomed to scrolling. – The Impact of Paging vs. Scrolling on Reading Online Text Passages
  • Jared Spool’s usability tests from 1998 tell us that, even though people say they don’t like to scroll, they are willing to do so. Moreover, longer and scrollable pages even worked better for users. – As the Page Scrolls
  • SURL conducted another usability study, confirming that people find both scrolling and paging natural on search results pages. – Paging vs. Scrolling: Looking for the Best Way to Present Search Results

The scroll forward
The usability data does point out something distinctly human. It’s something that newspapers have known for decades. You’re only as good as what you put above the fold. If what you have there is great, then people will not only read on, they’ll turn the page. There in lies the magic. It’s not about whether people will scroll, it’s about whether your content has raised in them enough interest to want to scroll. Life below 600px – in digital terms defined by many as the fold – is a great example of this:

The advantage of scroll
But this narrative isn’t really about debunking the scrolling myth. It’s about clearing the misconceptions so that you can treat your audiences to new experiences that move your entire web interface from the static to the active, that allow you to present information in new and more impactful ways, and that allow you to engage and entertain as well as inform.

The science of the scroll
The site UXMovement offers a nice comparison of clicking vs. scrolling. Here’s what they say about scrolling:

  • Contrary to popular belief scrolling through a site is actually faster than clicking through it. Mouse wheels and touchpad swipes allow users to scroll through content with a flick of a finger. Compare that with clicking, where users have to find the link, read it, target it, click it and wait for the page to load.
  • Users get content in the order that it’s designed on the page with a glimpse of everything. With clicking, users can skip a link and go to the next one without ever visiting the pages they skipped.
  • Scrolling keeps users in their reading flow. They scroll to continue reading until they read the end of the page. Clicking breaks the user’s reading flow because after they’re through with a page, they have to stop and click the link to the next one. Users also don’t have to wait for a new page to load, which can further break reading flow. All they have to do is scroll to the next section.

The art of the scroll
As denizens of the 21st Century we live in a world filled with motion. Today, we are defined more by the motion picture than the still picture. Our eye is used to tracking motion horizontally and vertically. It’s about time the web caught up with our psyche. The good news is that it has. Modern scrolling is not simply about up or down or left and right. It’s about scale and transition, the illusion of flowing through a space. It is dimensional (see parallax scrolling). It is a way to present information with impact, while breaking out of the ubiquitous 960 grid that has boxed our imaginations in for a decade or so. Used artfully it can augment your story and engage your users. Take a look:

Go ahead. Take a scroll!

Image of mouse: digitalart / FreeDigitalPhotos.net

Print Friendly

1 Comment

  1. Take a Scroll

    It was a pleasure reading this article as someone that often searches websites on my phone, which happens more frequently as the technology becomes more advanced. Clicking through a site on a smartphone is frustrating because I often click on the wrong link, can’t find the link in the smaller screen, or the page takes too long to load. A scrolling site is much preferred and I’m able to get more information before moving on to something else.

leave a comment