Let’s say you have a document with 20 pages of information and you want to put it on a web site. You structure it, simpler, or more complicated. But, in the end, you will have to pick between these two:
- Scroll – people will need to scroll to find information on a web page.
- Click – people will need to click on a menu to find the desired information.
Find out why I favor scrolling to clicking.
Why do we need to pick between scrolling and clicking?
- If you’re a news portal, you need to favor an option – you can either put everything in one long page, or make things separately. For example, in Romania HotNews /Realitatea / Jurnalul / Adevărul / Știrile Pro TV all have scrolling. You open the page. And you scroll, and you scroll. And you scroll again. Let’s take it internationally – CNN, The New York Times, The Economist, Le Figaro, Die Welt all have long homepages. Believe it or not, I’m finding it difficult to find a homepage for a major news source, in Romania or International, which doesn’t have a scrollable homepage. I did find a field in which scrolling is not all that present – homepages for major universities have (on a full-HD resolution, 1920×1080 pixels, Chrome browser with toolbar, two rows of taskbar) either a small scrolling, or none at all – MIT, Princeton, University of Cambridge, University of Oxford. So, if your main interest is providing news, you can have a long homepage (like major news sources do), or a short one (like major university present).
- If you’re an online store, you can either present a category page on a single page, with just a few products, or with a lot of products. Tiffany currently lists 12 products per page, although they have 10 pages of products. This is not a rule for every jewelry store, though – Etsy goes for a far bigger number. It all fits nicely in a single page on my monitor. Narwhal also list only 12 products on a single page. Asos has 20 products per page, but also an option to go directly to 200 per page. There are web sites which go for a big number of products per page: Apple, Amazon, Flowers.com. There’s another option, though: you can have a small number of products, but with lots of information about them. In Romania, eMAG does this.
- Even blogs can be either single scrolling (rare, though) or with lots and lots of scrolling even on big resolutions (much more often).
- Presentation web sites tend to be generally single-paged (IBM, Microsoft, Coca-Cola, Apple, McDonald’s, Pepsi, Exxon Mobil, Shell, BMW). There are exceptions, though – Mercedes-Benz.
- The conclusion to “why do we need to pick between clicking & scrolling” comes from this – you need to help visitors find information easily (lots of information & scroll vs. little information & click), you need to know what your competitors do (are you in the news business, or do you have a presentation web site?), you need to be pro-active (OK, so everybody in the higher-education area seems to have little-scrolling homepages. The question remains – should I?), you need to assess region-specific customs (I think in Romania people are more used to scrolling, for example), and you can even have a personal preferance on this one (I, Olivian Breda, like to scroll; thus, my blog’s readers will scroll, not click).
Let’s do science first. Some data only saying “scrolling is good; do scrolling; clicks are bad; don’t do clicks”.
Summary: Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold. (source)
Jakob Nielsen’s study on how much users scroll (in Prioritizing Web Usability) revealed that only 23% of visitors scroll on their first visit to a website. This means that 77% of visitors won’t scroll; they’ll just view the content above the fold(i.e. the area of the page that is visible on the screen without scrolling down). What’s more, the percentage of users who scroll decreases with subsequent visits, with only 16% scrolling on their second visit. This data highlights just how important it is to place your key content on a prominent position, especially on landing pages. (source)
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 (source + other data)
There are trade-offs between clicking and scrolling. It seems that scrolling is better for usability. But clicking is better for analytics and search engines. As the designer, it’s your job to weigh what’s important. Knowing the advantages of scrolling and clicking will help you decide which way to go. However, if the user experience is what you’re after, scrolling is the answer. (source)
But the key point is that the decision as to whether to reveal more logically has to be made *before* the user takes the step to view the additional parts of the page. This again means that the initially-viewable part of the page has to provide sufficient information scent to convince the user to take this step. In other words, what’s above the fold impacts the decision whether to view what’s below the fold. (comment source)
So, are long pages bad? Should we cram everything at the top of our web layouts because people won’t ever read anything below this fold? The answer is “No” according to a report by Clicktale, a web analytics company. Their results showed that the length of the page has no influence in the likelihood that a user will scroll down the page. (source)
More science. Now for some studies saying “clicking is good; scrolling is bad; do clicking; don’t do scrolling”, but also providing a better way to click (“scroll the menu, it helps with clicking”), and a feed-back on horizontal vs. vertical scrolling (“vertical – ok, horizontal – bad”).
Accordingly, this study seems to suggest that having moderate amounts of links per page (around 50 links) is superior to having longer pages. (source)
Why do we Web designers and developers continually force our users to scroll up and down the page in search of the navigation? This is not a problem in desktop software, and we now have the statistics to show the benefits of sticky menus. Navigation on 84% of the top 25 most visited US websites could be made quicker by implementing sticky navigation. Of course, it’s not appropriate in every situation, especially when real estate is tight. But do seriously consider sticky navigation, while always accounting for usability and the overall user experience. (source)
In a talk, Jakob Nielsen once demonstrated his thoughts on horizontal scrolling by nodding his head up and down saying, “vertical scrolling, yes”, then, shaking his head left and right saying, “horizontal scrolling, no”. A clever way to make a point, but digital design is never as simple as just following a rule or guideline from a so called ‘guru’. There are of course situations where a design works perfectly well going against conventions (which are typically outdated anyway). (source)
Now, let’s put it all together and give some “laws” (arbitrary, of course)
- World-wide, web sites are made more & more for scrolling. I found it difficult to present some web sites which don’t have scrolling. As web sites have more & more scrolling, users will get used to them.
- What are some reasons not to scroll (clicking favored)?
- It’s all there. The information is clear. You see it. You feel it. You can grasp it. It’s there.
- It feels you as if can handle it. “Oh, there are 6 watches on this page. Hmm, I will look at them, it’s an easy task. There are only 6 of them”.
- You can scan it quickly, and take a fast decision. Home ⇨ About ⇨ Mission. “Oh, I see now, this is their mission. Nice. Only one paragraph. Good.”.
- It helps people who do repeated actions. If I always always want to go to the exact path in a web site, I would prefer the navigation to be simple, the web site small, and to help me navigate easily.
- You can get to what you want easily, if you know the exact path. If you know you want to see company’s mission, you can get there quickly. That’s why universities like this method – you know exactly what link you need.
- And some reasons for scrolling (clicking discouraged)?
- You save a lot of time when you read a lot and you don’t know exactly what you need. That’s why newspapers favor this – readers need to scan pretty much all the titles & small description & photos of the day before they can take an informed decision. Readers, prior to visiting the web site, don’t know what they want to read. They want to be presented with lots of information, scan it, and take an informed decision.
- You can have a good feeling of fulfillment after you read everything. “Look, I’m done reading this huge web site, I read it all, just by scrolling”.
- The mechanics of rotating the scroll wheel of the mouse or those of using the scrollbars to navigate a web site favor this method, instead that of perpetual finding where to click and click it. It’s much easier to scroll through a large document, than click lots of times. (purely mechanical, speaking)
- You’re in the business of providing information for people which don’t know exactly what they need. Examples – you’re a blog which continuously updates, you’re a news source, you’re an online store which changes products a lot – use scrolling.
- You provide information for people which know exactly where to look for it, let’s say by previously coming to your web site – let’s say you’re a State institution, with clear procedure and very clearly structured data on your web site. Or you have a presentation web site, with very clear data, which rarely changes. Or you’ve made a blog with 30 articles, which you don’t update anymore, and people come to the web site to read the same and the same materials. Or you have a different situation, in which people know exactly what they need to look for. Or, you have a web site in which people need to do repeated actions (find out the weather, read the stocks, calculate currency ratio). For these situation – use clicking.
- You’re interested in design – I think the most beautiful pages are the ones in which clicking is favored. A web site looks better if it’s small, tiny, with little scrolling. If you’re more interested in the way your web site looks than on anything else – use clicking.
- You’re interested in user experience, you want the visitors to feel good, to have a nice impression – use scrolling.
- You can mix clicking & scrolling. For example, the “About” page can be a single page (I always recommend this to my clients), while specific sections of the web site can favor clicking.
- You chose to do clicking, what are the best practices?
- Persistent menus might be an option, although I personally dislike them.
- Make the options clearly visible. Sure, you want me to click. Where? Help me find the data in the menus / on the homepage / on the category page. Make it easy for me to get there.
- Try to use responsive design & other usability best practices.
- You chose to do scrolling, what are the best practices?
- Use internal navigation links. Open any big article on Wikipedia (like this one), and go to “Contents” box. You’ll see links like this one: “Contents: 1 Early life and education / 2 Early career / 3 Career …’. This kind of links are very good for navigating a long article. See a live example on my web site.
- Try to use responsive design & other usability best practices.
- I don’t like web sites which automatically load more content as you move. I personally prefer to go to page two. Exceptions to this – Google Images does this nicely. Google Maps is OK. But to open a blog and have posts loading automatically – this I dislike.
- You do other types of media, or you’re just not sure – test.
- Specific page feed-back:
- The homepage can be made for either clicking (see the Universities above) or for scrolling (media web sites).
- Online store – The category page should favor scrolling, not clicking. Also, there should be an option for scrolling even more (what if I want 200 products per page? Help me). Also, I would like an option for bigger / smaller images or for more / less information about the product.
- Online store -The product page should have as much information about the product as possible. Make the product page huge, with as much information as you can. Example (it’s even longer than this if you see the full list of comments).
- About us page – scrolling, with Wikipedia-style internal linking.
- More than 50 comments on a blog entry – I think clicking is best, only show 50 comments on a single page, and give the option to see the previous / next comments.
- Comments options on a page – hidden (with click to show), or visible (with scrolling) – I favor scrolling, the comments & the comments field should be always visible.
Update: Also see: Scrolling is easier than clicking
Update: Another article: Three Usability Tests That Tripled Lead Generation Conversion Rates
2015.04.29 update: LukeW | There Is No Fold.