Why you care about "the hook," not "the fold"
A typical “above the fold” conversation
The scene: a web design presentation for a global health organization. Twelve of us sit around a huge conference table at their Cambridge, MA office, while another handful participate via web conference in D. C. We walk them through design concepts for eight page templates, asking for feedback along the way. One of the client's funders raises her hand.
“And where is the fold?”
This question, in existence since the golden days of animated GIFs, tiling backgrounds, and frame-based layouts, crawls up our spines like the vibrations from nails on a chalkboard. I glance at Victoria and see she’s thinking the same thing: When will people stop asking about the &*#@$ fold?
Keeping her composure, Victoria answers patiently. “Your new website will be responsive, meaning it adapts to devices of all sizes, everything from a smartphone to a high-resolution monitor. And anyway, people expect to have to scroll to see all the content these days. So fortunately, we don’t have to worry so much about ‘the fold’ anymore!”
The director furrows her brow. “Do you at least have some idea where the fold is?”
Why people care about the fold
The director in our story isn’t crazy. There have been times in web design history when the fold was the limit of what you could expect someone to read. In fact, many early ways of getting information from a computer—HyperCard stacks, CD-ROM menus, dialog boxes—didn’t scroll at all. So when people started reading web pages where content went below the fold, they never even knew it was there. Their habits have changed over the web’s 20 years of existence, but many web designers (and their clients) have been slow to recognize that.
What’s more, usability guru Jakob Nielsen released an influential study in 2010, stating that "user viewing time was distributed as follows:
- Above the fold: 80.3%
- Below the fold: 19.7%”
This has led many people to believe that all important content must be placed above the fold.
The problem(s) with too much focus on the fold
Well, there are a few.
- Every device has its own. Today’s technology includes a vast number of screen sizes, and they’ll all be looking at your website. You can expect a lot of laptops and desktops, and guess that they’ll give you at least 800 to 1000 pixels of vertical space. However, the number of smartphone and tablet visitors to websites is constantly increasing, so the work you put into balancing all your key info above that particular fold will be less and less useful as time goes on, especially if you have a responsive website.
- There are better scrolling statistics out there, and they contradict Nielsen’s. His study was actually focused on several other subjects, and the “above the fold” aspect of it involved only 21 participants and 541 web pages. More focused studies, like this one from web analytics company ClickTale, yield numbers like this: across all kinds of web pages, where there was enough content to allow scrolling, 76% of users did scroll.
- Information clutter. If all important information needs to fit in that top 900 or so pixels, the top section of your site is going to be pretty crowded.
In a “wall of text” layout like this, there may well be something of interest for every visitor. However, they’d need excellent vision to pick it out. This Eyequant article on time spent on a website, partly built on a solid study by our old friend Jakob Nielsen, discusses how easily visitors can become overwhelmed and leave your site. In Yahoo’s desperation to grab visitors’ attention, they were actually squandering it.
The solution: focus on creating a good "hook"
“The bottom line: Attention is a limited resource, so use it wisely and avoid superfluous visual pathways and exits.”
This quote from the above-mentioned Eyequant article sums up our thinking about how people relate to websites. If you want people to stay on a site long enough to achieve the goals you’ve laid out for it—attract applicants to your university, get people to read your latest study, bring grants to your department, whatever—you must conserve and develop their attention.
We suggest a strategy of pulling people in gently with a series of "hooks." These are indicators that interesting information lies further down the page and inside the website. Understand your primary audiences, recognize that you can't appeal to absolutely everyone—that way lies Yahoo!—and craft your hooks to best appeal to those audiences.
HOOK #1: The Site ID and Tagline
The site ID (your logo or organization name) and a quick tagline or slogan let people know who you are and what your site is about. Considering that many of your visitors will come in through a link or search engine and may not land on the homepage, the site ID is critical to letting them know they’re in the right place. You generally want this to be the first thing on the page, reading left to right or top to bottom.
HOOK #2: The main navigation menu
When we do usability testing, we see the following behavior all the time: once a tester is given a task, they mouse over every item in the main navigation menu and check out all the sub-menus until they find something that resonates. It's super-important that every item in your menu be named something that a) accurately tells people what they're getting and b) they can parse immediately—avoid overly wordy or technical terms, brand names, or terms specific to your organization.
Bad Menu Items
Good Menu Items
Course Enrollment Form
Mary L. Schneider Grant for Continuing Doctorate Research
A Brief History of the University
You get the idea.
HOOK #3: An enticing headline
A well-written headline or page title not only makes people want to read more, it also is used by search engines to see what your site is about. If people don’t scroll down, then chances are your page title wasn’t what they wanted or didn’t pique their interest. Here are some good best practices for writing headlines that are both enticing for your readers and search-engine friendly. Always ask yourself: who are my most important visitors, and what's going to interest them?
Hook #4: Teasers
Along with the headline, adding "teaser" content such as an appealing image, a concise introduction, or a summary can further pique readers' interest and draw them in.
Here's an example from our portfolio. The Harvard University Office for Sustainability website would like a visitor to do quite a lot of things: ensure that she always turns off unused lights and computers, use recycled lab equipment instead of buying it new, push her bosses to make her office sustainable, and so on. We could have made a call to action for every one of those important messages, then crammed them into the top 900 pixels of the page… and then watched people completely ignore the site.
Instead we built a site with comparatively little content above the fold, but which offers compelling imagery, content, and links with many ways to draw readers in and encourage exploration.
Hook #5: Visual Breaks
Thanks to your awesome headline and content teasers, your visitor decides to scroll down and read more. That’s great. But how do you make sure she reads to the bottom?
On the web, a big no-no is the “wall of text”—long, unbroken, chunks of text that just go on and on. It’s visually fatiguing to read on a screen, and people typically have lower attention spans on the web to begin with. So you can keep people reading by breaking up your text with headlines, bullet points, and images, just like we’ve done with this article. And look—you’re still reading, well below the fold.
There’s no getting around the fact that things which appear higher up the screen are going to be seen first, and have a certain visual priority. In that way, the fold—what the site shows you first, whatever device you're using—still matters. Our health non-profit client was right to be interested in that question. However, the one they should have asked before that was, "What's our hook here?"