4

In this day in age, it seems that our users are accustomed to scrolling. Sure, it's good to have your main points "above the fold", or in other words, above the point in the browser window that the users can immediately see without having to use the scroll bar to access content that appears lower on the screen.

I've seen websites that end up doing things like this.

enter image description here

But, when evaluating this, it seems silly. In this design, it would have made more sense to simply leave off the navigation tiles at the top, and all the "Back to top" links.

This specific design begs the question...

Is there research that has given clue to an acceptable range at which a scroll is totally viable? I could understand if the RV descriptions were larger, then maybe it would warrant a top side navigation such as this, but how much larger?

Improve this question
1
  • I think the question is not how much scrolling the user would accept, but whether you have put in something to indicate the amount of content available and if there are good mechanisms to filter/search/navigate the content easily. If you solve those issues then having a lot of scrolling won't matter so much (and you might not have to do much scrolling at all). But if users just want to browse casually like a random search, there's no need to design for it specifically.
    – Michael Lai ♦
    Jul 21, 2014 at 22:54

2 Answers 2

Reset to default
3

Chartbeat, a data analytics provider, analysed data from 2 billion visits and found that “66% of attention on a normal media page is spent below the fold.”

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.

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.

Improve this answer
5

Instead of having multiple back to top links (one per product), I personally prefer to use just one Back to top button, whether it's text, an arrow, or both, and code it to appear as they scroll down. It's always in a fixed location, usually at the bottom right corner of the screen. Then when they click it, with jQuery it smoothly scrolls back up to the top. This allows the user to scroll down as far as they want always giving them the option to return to the top without wasting any precious real estate in your content.

Here are a couple of examples:

enter image description here

http://codepen.io/yying6/pen/yGhHu

enter image description here

http://webdesignerwall.com/demo/scroll-to-top/scrolltotop.html

Improve this answer
11
  • 1
    We can also note that on the iOS devices (and maybe other ones ?), touching the status bar (the bar at the top which contains the hour, battery life etc...) gets you back to the top if you are scrolling on Safari (and also other apps which support this functionality). You could take this into account when designing your website and not displaying anything to get back to the top for iOS devices.
    – Pop Flamingo
    Jul 21, 2014 at 17:24
  • 1
    @TrevörAnneDenise - Exactly. That's what media queries are for.
    – Code Maverick
    Jul 21, 2014 at 17:26
  • @CodeMaverick - a media query wouldn't necessarily solve this problem, unless the iOS functionality mentioned a consistent across all small screen resolutions
    – Toni Leigh
    Jul 21, 2014 at 17:51
  • 1
    @ColinSharpe - That's true. You could user-agent sniff, which I'm not a fan of, but you could also implement a plugin that standardizes that tapscroll without too much effort through PhoneGap: tricedesigns.com/2013/10/08/… and github.com/triceam/cordova-statusTap
    – Code Maverick
    Jul 21, 2014 at 18:00
  • 1
    Browsers like Google Chrome already has extensions/plug-ins for scrolling back to the top.
    – Michael Lai ♦
    Jul 21, 2014 at 22:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.