Picture this: You are the client. You’re sitting across the table from a few folks from Taproot Creative, and we’ve just shown you the new homepage interface design for your company. You like it. You might even love it. But you’ve got a few notes for us.
“I like the design and the colors of the homepage, but I’m concerned that the events, the news, the social media links and a few of the call-outs are too low on the page. That stuff is really important, so we need to make sure that people can find it. Can we move all of that stuff above the fold to be sure that everyone sees it without having to scroll?”
That’s a common reaction and an understandable one. You want to be sure your audience is going to see everything on your homepage, that they’re able to locate the tools they need and that they won’t overlook anything along the way. You don’t want to feature content on your site, only to have it bypassed because someone couldn’t find it. It shouldn’t surprise you that, as your agency, we want those same things. We have the same goals. It’s just that our way of achieving the goals are different than yours. And, to be honest, our way is more right than yours. I’ll explain.
Let’s start with the easy stuff. One person might view your site on their phone, while another person sits in front of an enormous high-resolution desktop monitor, and still another will be using a small laptop. So, where is the fold on the phone? Where is it on a 13” laptop screen versus a 27” monitor when each of these screens is set to a different resolution, allowing a different portion of the site to be visible on the screen without scrolling?
The term “above the fold” is a carryover from newspapers where there is an actual fold, or crease, in the page. It refers to the viewable area of the design that requires no action on the part of the reader in order to collect information. Editors use this real estate to entice readers to buy the newspaper by featuring an intriguing story or headline that’s visible without taking the paper off of the rack. The analogy still works, to a degree, in that you typically, but not always, want to place the most important information at the top of the page to capture the viewer’s attention and introduce them to the website. That’s why, more often than not, your logo and primary navigation will appear somewhere near the top of the screen. Some other image, graphic or content will also likely be placed in this area to draw in the reader.
But, because the fold itself is relative to the screen resolution, the analogy is only going to take us so far. The size of a printed newspaper is not variable based on the person reading it. The way in which visitors to your site experience your content, however, is largely dependent on the device they’re using to access your site, so the idea of a hard line that dictates where your users will need to begin to scroll doesn’t exist. You can design for the lowest common denominator when it comes to screen sizes, but only if you’re willing to make drastic sacrifices in the look and feel of your site.
Okay, so you know there’s not a specific fold line on your website, but everything on your homepage is really, really important. You can’t have your visitors miss something because it’s too low on the page, right? After all, it’s a fact that users will spend up to 80% of their time at the top of the page.
Fair enough. We understand that if the stuff on your site wasn’t important, it likely wouldn’t be there to begin with. But jamming everything at the top of the page isn’t going to do the trick.
The design has a job to do, and it’s not just to be pretty. The design, or structure, of the site, should guide the user through the page, directing that user from one element to the next in order of importance. By constructing a site in such a way that each element has its own place on the page, and its own moment in the spotlight, you’re actually more likely to get a reaction from the user with a well-built scrollable design than you are if you compress everything into one section. You don’t want the elements within the design fighting one another for the attention of the user. The elements should instead work together to create a continuous movement through the design, drawing the user deeper into the page, and, ultimately, into the interior pages of the website.
We can return to the printed newspaper comparison to get a firmer grip on this. When content is placed above the fold in a newspaper, it typically includes the lead article, a large image and one or two introductions to other important articles, as well as a blurb about a few interior sections. And that’s about it. If we included the weather, sports highlights, local news briefs, a regional news story and a ton of other stuff, just to stay above the fold, we’d lose the reader right out of the gate because they would have to visually sort through an avalanche of content. That information is instead placed lower on the page so that the featured article can take center stage. The same should be true for your website. Your most important information should be at the top end of the page based on relevance. But keep this in mind: If “everything is important” then nothing is important from the perspective of your website visitors. Hierarchy in website design is key to telling your story in a manner that makes sense to your audience.
I hope I’ve won you over by now, but if not, I have one more important point to make.
Research consistently shows that most users will scroll down a page. A study conducted by Click Take found that 76% of users will scroll, and many of those users will scroll the entirety of the page. That study, which was published in 2006, doesn’t even take the more recent trends in web design into account (which typically allow for more scrolling, sometimes as a means of navigating through the site) or the technological maturity of the population and their improved ability to understand how websites function. The fear of scrolling is straight out of the 1990’s when websites all basically looked the same and users interacted with them in much the way they would a printed object. There was a lack of advanced interactivity in general at that time, which included scrolling. Fortunately, things have changed since then.
Research also supports the idea of moving a call-to-action lower on the page if and when the content and design support it. Marketing Experiments Blog consistently found that when a call-to-action was placed beneath explanatory text that invited the user to do something, like fill out a form or purchase tickets, the reply rate increased exponentially.
Granted, that research is specific to calls-to-action that involve the user submitting information, but there’s still a lesson to be learned here. When viewed in context, a user is much more likely to complete the requested action if they’re given a compelling reason to do so. If you start off by demanding that users do something, like click a call-out link, without giving them a reason to do it, they’re probably going to walk. You need to throw out the welcome mat before asking your user to do something, because it doesn’t matter what they can see when they first get to the page if they aren’t at all inclined to click on it.
Like I said, we have the same goals as you do. We want your visitors to find what they’re looking for quickly and easily. We do this for a living. We thrive on our clients’ successes, and there is a method to our approach. In other words, trust us. We know what we’re doing.
Bottom line: The question of whether a user scrolls down a webpage has nothing to do with imaginary lines on the screen and everything to do with featuring meaningful content presented in a compelling manner. When you do that effectively, your visitors will want to scroll to get the goods.