More and more often I am asked, when putting together a design for a Drupal website, what is the importance of designing above the fold and whether or not that today’s users will scroll to read content.
In the 90s it was common to cram as much content above the fold, however, this is now a common myth in the web industry. I will explore this as well as whether or not today’s users will scroll to read content placed below the fold.
History
In 1984, with the appearance of the Apple Macintosh, the mouse became a significant form of user input that still dominates desktop computing today. Pointing and clicking allowed the computer to become more accessible since prior to this users had to remember cryptic commands to navigate the operating system.
In the 90s and the scroll-wheel became a standard feature when Microsoft came out with the IntelliMouse in 1996. The ability to scroll a document or webpage was a huge boost to usability and gave users an intuitive natural way to consume content.
Above the Fold
Both clicking and scrolling are integral to how we use computers and the web today. Both go hand in hand. But when it comes to usability which is better?
Modern web design usability research says that users do not mind scrolling down the page to read content. In fact the research says in many cases scrolling is superior to clicking when trying to browse content.
If you design above the fold then this means you believe that users will not naturally scroll down the page to discover content but rather will only look at what is above the fold to make their decision on what to do or click next. In these cases you will find lots of content crammed at the top of the page with many call to actions and buttons competing for attention and clicks.
Designing above the fold was a common practice in the 90s when internet speeds were very slow and it took a long time to load a single page. With that limitation in mind it is easy to understand that users would focus their attention at the top since it loaded first while the rest of the content slowly appeared down the page.
Nowadays most people have high speed internet access and pages load almost instantly, alleviating the pain of waiting for the content below the fold to load. This means people are able to scroll down immediately to browse content.
Scrolling
One of the benefits of scrolling is that it requires less effort from the user when compared to clicking. UX movements says “Scrolling has become second-nature.” and that “clicking is a chore”. NN Group also points out that "it is easier for users to simply keep going down the page than it is to decide whether or not to click through for the next page of a fragmented article.”
I find that if I look at my own browsing habits that I myself prefer to scroll rather than click. In fact I’m rather fond of scrolling, especially on sites that are designed well for it. This includes sites that have large type, interesting content to pull me down the page and plenty of whitespace so everything on the page has a bit of breathing room.
It is still important that the priority data is placed at the top since this is how users will use to determine if they are going to stay on your site. At this point users have their foot in the door and you want to make sure they come inside and lead them to your goal.
One approach to draw users in is to utilize a “hero layout” which concentrates on a single content section above the fold. This single piece of content is there to show one clear goal to the user. Instead of having a cramped space where there are many goals and call to actions that are competing for clicks. For a few good examples checkout Apple (www.apple.com) and Evernote (www.evernote.com), both companies do a stellar job at providing a single piece of content that takes up the area above the fold that directs users to a single goal.
Infinite Scrolling
A new method of scrolling that we are seeing more and more is called “Infinite Scrolling”, which allows the user to continue to browse content continuously without the need to click on any links. When a user reaches the bottom of a page, additional content will automatically load underneath and push the bottom of the page down. Allowing the user to keep scrolling through content. Sites like Facebook (www.facebook.com) and Pinterest (www.pinterest.com) use infinite scrolling.
The rise of the mobile web also contributes to scrolling being a good method for consuming content on narrow screens. “Due to mobile devices scrolling has been reinforced with content needing to be stacked and put into lists in order to fit on the narrow screens.”, a statement from a Smashing Magazine article about infinite scrolling.
There are negatives to infinite scrolling, especially noticeable on social media sites. Users can feel like they can’t keep up with all the content that keeps being added in real time. In this case the user is never able to consume all the content and the user can get exhausted or overwhelmed.
Footers are an issue as well. If you are continuously loading content then the footer keeps getting pushed down. Makes it nearly impossible to use since you don’t have the time to read or click on anything.
Another problem is something called “pogo sticking”. This is a result of when the user goes back to the infinite scroll list and the position they were in is lost, which means the user has to scroll back to the position they left off. This frustration is compounded the further the user was down on the list.
Infinite scrolling is not for every website. But when used correctly it is a great way to consume content on a website.
Summary
We should dispel the myth that you need to put all the things above the fold so that the user can see everything upon first page load. Instead let’s focus on one single piece of content that stands out and has a clear goal. Then design the rest of the content so that it is easy for users to scroll through and consume. Keep the type large and have plenty of whitespace and your users will thank you.
What are your thoughts? Do you agree scrolling is in most cases superior usability over clicking? Please leave a comment and keep the conversation going.
Additional Resources
More Mobile Menu Options | Mediacurrent Blog Post
15 Cool Things You Can Do with Drupal | Mediacurrent Blog Post
