The Fold: Above or Below?

User Experience

Morgan: It’s something we’ve all heard “Can you fit that above the fold?” that inherent, psychological desire to fill white space. But in doing so are you actually helping, or diminishing your user’s experience. Let’s dig in.

My opinion? The fold is an antiquated concept. The term quite literally derives from the days of the printing press – used to describe content that appeared above the fold of a newspaper. In the ’90s the web adopted this concept as fitting everything into one screen view. Scrolling, at first, was an unfamiliar and unnatural user behavior. But, it’s not 1997 anymore. People scroll and we have research to back that up. Placing as much content as you can at the top of the screen doesn’t guarantee it gets noticed. It’s actually likely that it gets scrolled right past, as many users immediately scroll before a page even fully loads. A study by Clicktale showed that “Based on 120,000 page views, 91% of those views were on pages that had a scroll bar. Of those, 76% included some scrolling action, and 22% were scrolled to the bottom of the page.” In this same study, they found that 75% of users spent most of their time right at or below the almighty “fold”. Chartbeat, a data analytics provider, analyzed data from 2 BILLION visits and found that “66% of attention on a normal media page is spent below the fold.”

Now, my goal here isn’t to throw a bunch of stats at you. Rather, it’s to prove that the fold no longer exists. That’s not to say that the content at the top of the page isn’t important, because it is. What I’m getting at is that it is one piece to a larger sum.

Say your goal is to drive conversions: assuming that the best way to do that is by tossing a giant “call to action” above the fold would be misguided. You’re missing out on what is more important.

To gain conversions, you first need a deep understanding of your user, be able to cater your content to their wants and needs and provide an experience that will drive conversion through good storytelling and thoughtful content.

That’s it, that’s my thesis.

The point being, you’re not going to read a book and expect everything to be in chapter 1, are you? Likewise, you aren’t going to visit a website and expect your answer to magically appear on the first screen you land on. People will read past the first page of a book, just like people will scroll past the first viewport on a page. The issue isn’t whether the call to action is or is not above the fold, the question should be rather, whether or not the call to action is at a point on the page where the user has become convinced to take action.

The top of the page is crucial in drawing your audience in. It’s the main deciding factor in whether your page is worth exploring or not. But, that doesn’t mean you have to squeeze every, little thing in this space. Instead, design principles should be utilized to incentivize scrolling and success should be measured through your site’s analytics. Not working? Adjust and repeat. You have to provide your users with content that will keep them interested. Scrolling, the fold, none of that matters. Know your user. Keep them interested. Encourage them to explore.

Design Perspective

Ashley: In my experience with designing for the web, the worst thing you could do to a homepage is to put everything important and actionable above the fold. Is that too dramatic for me to say? – Maybe. But in almost all cases, this habit creates hectic design and can overwhelm the viewer. And can you imagine how all that information would translate to a mobile screen!? The user won’t know what to look at first and will most likely start scrolling just to get away from the madness. To Morgan’s point, it’s the start of an unpleasant user experience.

Although I have 99.9% faith in the human race to scroll upon hitting a website these days, here are a few design tricks we use to encourage that scroll:

1. Peek-a-boo Elements:
   A well-designed homepage containing clear and minimal “calls to action” with secondary information slightly peeking above the fold is a safe and smart practice. Getting your primary message across clearly is first priority. Then, hitting them with some partially visible design elements such as a photo or headline is all you need to entice the user to start scrolling to see what’s next.

1. Blunt Indicators:
   Sometimes you’re designing for an audience that isn’t the most tech-savvy. In this case, it’s okay to use obvious indicators to inform the user that they can and should scroll down the page. While this isn’t my favorite technique since it can be a little distracting, it gets the job done. This can come in the form of bouncing arrows pointing down at the top of the fold, and icon of a mouse scroll, or even the word “SCROLL”.

1. Enticing Content:
   Giving the viewer one bright and shiny object to focus on such as a full-screen image, illustration, or video that begins to tell the story of your brand will rope viewers in. Unique content like this encourages them to learn more, and they will naturally begin to scroll. This is my favorite technique because when done correctly it seems effortless and unforced, but it does involve having a deep understanding of your target audience and their “user journey”.

1. Scroll jacking:
   This is a sticky subject, honestly. As a web user, you either don’t mind scroll jacking, or you absolutely hate it. “Scroll jacking” is when you land on a website, and it automatically begins to scroll for you. I would use this technique sparingly and subtly. This effect would work great for a portfolio website that has a ton of photography and visual content. But, if you have bodies of copy and important CTA’s scattered throughout the homepage, this might not be your best option. Here’s an example of a website that I think uses scroll jacking in an effective way: Fuzzco

*Hierarchy Rules Everything Around Me – These are all great techniques to get people moving through the pages of a website, but underneath all the design tricks lies visual hierarchy. Establishing which elements are the most important at different scroll points with the UX and Strategy team is key and will help you create a very pleasant user experience.

Strategy Perspective

Ben: I’ll be honest with you, when I was pitched the idea of writing an article about “The Fold” I folded up my eyes into the back of my head. It’s an argument that is as old as the Internet, a tired argument that’s as outmoded as arguing about which was better: vinyl or cassette, when the real argument was about our need for access to music versus quality of audio.

So, yes – let me just state this right here: I believe the “fold” is real. But how we thought about the fold was fundamentally wrong.

The fold is not a physical or dimensional barrier, but rather an emotional and psychographic one. One that isn’t overcome simply by getting someone but by making them feel comfortable and interested enough to follow your lead.

And I have to hand it to my colleagues Morgan and Ashley, they nailed it up above. They’ve hit upon two separate but critical components to catering to and audience:

First was Morgan’s thesis, which – if I might extrapolate – states: a user won’t use your website or app or email unless they are comfortable that they are 1) where they want to be and 2) you can provide what they need.

And as Ashley detailed: how you present that and provide that is up to you – but it should be both comforting, delightful and interesting.

An in case this still isn’t fully making sense, allow me this metaphor:

Think about your favorite grocery store. I know you have one. I’ll guarantee that your store doesn’t pack the front doorway with 200 crates of milk, sacks of coffee and anything from “that one aisle you’ve never gone down”, with someone waiting to bag your groceries. They know better. They always have.

Groceries stores are masters as getting people past the entrance and all the way to the back of the store, and they do it from a holistic perspective, and not just by putting the $%&* milk at the back of the @%#* store. The moment when those sliding doors whoosh open and you step over the threshold, you aren’t bombarded with hard sells – it’s the soft lighting and the good smells. Sure – they’ve learned a thing or two and have put a small fridge case of milk up front – they know at least part of their audience is there just for that. But most are not. The real benefit here is not the sale, but the repeat visits. The customer feels great and remembers feeling great when they came in the last time.

And if you aren’t smelling coffee and baked goods right now… :)