Thoughts

Life beyond the fold – Scrolling Vs. Clicking

On just about every website design project I’ve worked on here at the usmangroup, there is a constant struggle when explaining to the client that people are willing to scroll down a page if properly guided. However, this is not the only way to present additional information. You can also create supplementary pages specific to an idea, topic, subject, product, etc. One thing is for certain, overcrowding a page because you want to fit as much information on the screen as possible, is definitely an amateur approach.

Make sure this is “Above The Fold”

Above the fold” is a commonly used phrase in the print world – specifically the newspapers industry. This concept refers to the upper half of the front page of a newspaper, which typically houses the most important content and is seen by all who pass by or purchase the paper.

I am frequently asked by clients if a particular section of their site will appear above the fold. The answer to this question is simple – it depends. I’m sorry, I know that’s not a great answer, but it is the truth. For web users today, there are a number of factors that can impact the fold line, such as:

  • The device
  • Screen resolution
  • Tool bar menus
  • Browser size
Desktop Screen Resolutions

User screen size resolutions. Data provided by W3Schools

So how will someone see the content if it doesn’t appear right away on the screen? To me, that is a pretty silly question, but surprisingly enough, I hear it a lot. You can present the rest of your content either by means of clicking or by scrolling.

“Stop worrying about the fold. Don’t throw your best practices out the window, but stop cramming stuff above a certain pixel point. You’re not helping anyone. Open up your designs and give your users some visual breathing room. If your content is compelling enough your users will read it to the end.”

- Milissa Tarquini http://www.boxesandarrows.com/view/blasting-the-myth-of

Clicking

For larger websites, page clicking is a must. We recently had the privilege of re-designing one of Chicago’s most popular online publication, The Chicago Sun-Times. In order to provide an optimal user experience for this site, it was very important to guide users readers down the right path, without overloading them with information they have no interest in. Due to the amount of content within each section, we created a 3 level navigation menu, which allows one to click through to the exact section or page they came there for.

user-data

Another plus side to clicking is that you can track user clicks for analytic purposes. User data should be a designer’s best friend – at least it is for me. By monitoring user clicks, you can identify behavior patterns and then make the appropriate adjustments where needed. For example, if you had a link that was only located in the footer, but it is one of the most visited pages on your site, you would more than likely want to bring that link into the header – or at least call more attention to it in the footer.

Clicking is a great way to organize large chunks of information, but please do not get carried away with this. I’ve seen it too many times where people dedicate entire pages for only a sentence or two of text. Now, unless you have a specific reason for doing this (such as for SEO purposes), I highly recommend grouping these pages into one longer single page and let the user scroll.

Scrolling

Page scrolling is a topic that has been debated by designers and developers ever since the web was born. In the beginning years of the Internet, users didn’t scroll because they weren’t given the opportunity to do so. Designers treated the screen as a page and thought that everything needed to be initially visible in order for it to be seen. Nowadays, this is no longer the case. Users will scroll, when given the proper guidance to do so.

You do not want to overwhelm someone with too much information, in too little of space. Allowing a design to extend down the page creates nice visual separation. It is very difficult to have a clear hierarchy without some white space between groups of content.

“Don’t live in the old world of pushing all your quality content on the visitor at once because they’ve only got 4 seconds before their attention drops (or whatever other statistic is doing the rounds at present).

Think about the ultimate journey you want them to take. Entice them in, make them actively want to scroll and read on, and on, and on. Guide them with your excellent content and let them explore your site. Tell a story with your content. Space it out a little and you will have some happy visitors who actually want to be there!”

- Paddy Donnelly http://iampaddy.com/lifebelow600/

Sites that aren’t affraid to scroll


The Great Discontent
Never mind the fact that this layout is amazing & responsive, the typography clearly makes these interviews easy to read (or skim, if you’re like me).
 
 

Square Card Reader
Check out how much white space this site uses between blocks of content. The true meaning of “clean”.
 
 

Summer Under the Stars
I love this site! Large, stunning photography along side big and bold text. Nice grid work too.
 
 

Tinke
Scrolling can also be used to create movement. The parallax effect is a major trend in the web design world and there are not too many sites out there that do it more gracefully than this one.

Which Is Better, Scrolling or Clicking?

More often than not, I choose scrolling. However, I don’t think it is a matter of one is better than the other. They both are crucial to a superb website experience. The main lesson to be learned here is that you shouldn’t cram all of your content together just to have it appear “above the fold”. The fold line is different for most users, so it is nearly impossible to make sure everything is above the fold. Give your page elements some space, room to breath, and you’ll be surprised at the outcome. Proper white space creates an easily digestible page, which makes for a more engaging website experience. Please keep in mind, users will click though or scroll down a webpage, as long as they are given proper indication to do so.

Designers, help me spread the word. The next time a client asks for everything on their site to be “above the fold”, do me a solid and send them a link to this post. Also, I would love to hear from you. Tweet me if you’ve been through the same struggle with your clients.

Additional Readings

  • Share by Email