Web Design - Below the Fold

If there’s one thing creative types don’t like, it’s being told what they can’t do.

If I tell my bandmates not to deviate from E minor for a song we’re writing, their first instinct is to figure out a way to shoehorn in off-key notes.

If you tell an artist that coloring outside the lines is verboten, their first instinct is to draw a big old Crayola streak right through the page’s predetermined boundaries.

Reverse psychology is a real phenomenon. A 2011 study in Theories in Social Psychology found that “…warning labels on violent television programs across five age groups (ranging from 9 to 21 years and over) were more likely to attract persons in these groups to the violent program than information labels and no label.”

And nowhere in the creative world do I find the principle of reverse psychology more apparent than in the growing trend in web design of building “iceberg” sites where 80 percent of the content resides beneath the fold.

Life Below 600 px

The first time I remember becoming aware of a repressed contempt towards generally-accepted fold guidelines in web design was when I came across Paddy Donnelly’s relatively famous Life Below 600 px post. It’s a clever post, albeit somewhat smarmy in its logic. In his post, Donnelly attempts to debunk the “myth” that users won’t scroll through a website by designing a page where stifling one’s urge to scroll down is almost impossible. And to his credit, his design works. If you visit Life Below 300 px and don’t feel an urge to scroll, well, you’re  a far less suggestible man than I.

Not only that, Donnelly’s larger point highlights a creative truism - guidelines are not dictates. A true artist capable of creating beauty understands and respects guidelines, but does not fear them. If my band’s song never deviates from key, it’s going to sound bland and lifeless. Nothing truly safe or vanilla can ever be memorable or impactful. Similarly, the artistry of web design, the ability to create beauty, results from judiciousness in when to adhere to and deviate from accepted guidelines and design principles.

The problem with Life Below 600 px is that in its zeal to chide blind obedience to conventions, it trivializes the design tradeoff that’s made by building an “iceberg” page where the bulk of a site’s important contact lies beneath the fold. Yes, the way Donnelly constructed Life Below 600 px works. But so did the operatic bridge that Queen used in Bohemian Rhapsody. Just because something works in an isolated instance doesn’t mean it’s a best practice. It wouldn’t have taken many more songs with similar interludes before the a capella opera trope would have been beaten into the ground.

But Donnelly’s call to arms was resonant. Do a Google search for “below the fold myth” and you’ll find no shortage of articles advocating a fold-free existence from smart, accomplished web designers and UX professionals. And this newfound distaste for the fold is increasingly manifesting in real-world projects. In my own secondary research, I have discovered more and more “iceberg” sites being built in varying capacities across a multitude of industries.

It’s not difficult to understand the appeal of an iceberg website. Just as the character limit of a Tweet imposes tangible restrictions upon personal communication, the finite canvas imposed by the fold limits the options for expression available to web designers. The difference, however, is that the limitations imposed by the fold are violable, whereas the character length restrictions of Twitter are absolute. The penalties incurred for designing beneath the fold derive from the notion that elements placed beneath the fold will receive far less user attention – a notion derived both from common sense and empirical research.  If you can discredit this notion, you’ve removed the limitation to your viable design options presented by the fold. And viable options are to designers what money is to Mr. Burns – they’d gladly trade them all for just a little more.

Bad Design

Sherpaa is an interesting website founded by a former physician that essentially functions as a virtual doctor’s office. It’s a pretty cool company with a meaningful mission that has been able to sign up 500 customers and add eight employees in a year’s time. Not too shabby.

Unfortunately, Sherpaa is one of a growing number of “iceberg websites” where the decision to place the most meaningful content beneath the fold was seemingly made for its own sake. Take a look at the “You” page of Sherpaa’s site. Is it obvious that you can or should scroll down? It wasn’t to me, nor was it obvious to the creative director who showed it to me. When I first saw it, I was taken by surprise when I discovered it scrolled down to the extent that it did. Unlike Life Below 600 px, there are no cues to indicate that there is anything meaningful beneath the four “less” buttons that reside just above the fold. Worse, these buttons don’t use anchor links, meaning that more than a few users probably think the website is broken because they can’t see the image and text changing each time a button is clicked because all activity transpires safely out of sight beneath the fold. Jakob Nielsen and Steve Krug would likely have an aneurysm.

Websites that suffer similar problems due to an iceberg construct include Omnio and Interfolio. At least in these cases, both websites have created design elements that cue the existence of hidden content and incorporate anchor links which pull users to the section of the page relevant to their immediate needs. But at that point, why not just build separate pages? What exactly was the advantage that was gained by using one complete page and anchor links?

Even 37signals, the site espoused by Donnelly in Life Below 300 px, has partially moved away from its iceberg design. That giant monstrosity of a home page where 90 percent of the valuable content was located beneath the fold (that Donnelly thankfully memorialized in his piece) has now been condensed into something far more digestible. And once you click through to any of 37signals core products (Basecamp, Highrise or Campfire), virtually all of the important page elements now reside above the fold.

And yet, despite what appear to be clear usability flaws, the numbers of those who believe fold-free design to be more virtue than vice continue to grow.

Web Design Vs Web Usability

I don’t like to get in aesthetic arguments with designers. Anybody who gets a chance to peruse my wardrobe would quickly realize that I’m largely operating with impaired visual acuity.

But from where I sit as a digital strategist, there are four huge drawbacks to fold-free life that I need have answered before I’ll readily sign off on a proposed iceberg web design:

Analytics Distortion

One of the most critical flaws to iceberg websites is that analytics, the discipline of measuring website data, is largely predicated on distinct individual pageviews. When you visit www.amazon.com and click through to a category, you’ve incurred a pageview. The pageview is one of many metrics Amazon uses to determine which shopping categories to include in primary navigation.

The problem that a site like omnio.com will experience when all the content is on one page is that most analytics packages, in a conventional installation, can’t differentiate visitor behavior without pageviews. Even something simple like time on site can’t be measured without the timestamps created from pageview calls.

Why is this a problem? Assume Omnio gets two visits to their site. The first visit comes from a person who reads every single word on the page. The second visit comes from someone who reads three words, is disgusted with the site, and leaves. Because no additional pageviews are incurred, most analytics packages can’t register any difference in behavior between the two. In a conventional Google Analytics installation, each visit would register as having spent 0:00 (m:ss) on site and having viewed one page. Even though there is a clear difference in the quality of these two visits, your analytics program can’t tell you this without customization.

Technically, this is a solvable problem. Omnio could add Google Analytics Event Tracking to each anchor link button, which would clean up the distortion the iceberg design introduces to average time on site and bounce rate. And Omnio, like any site, can measure the success of their site by tracking business outcomes – in this case, app downloads. partnership inquiries and community content consumption. But removing the pageview metric from the equation, as the iceberg design does, means you’re operating with one arm tied behind your back from an analytics perspective. Suboptimal.

Mobile Readiness

According to Nielsen, half of all U.S. mobile subscribers now own smartphones. And nobody’s going to fight the claim that the difference between mobile and desktop web browsing necessitates planning and a dedicated small-screen approach.

Most people’s mobile web planning, however, focuses only on the interface and canvas size. Good mobile websites recognize that fat fingers don’t operate with the precision of a mouse and that limited screen sizes impose design restrictions too great to be ignored. What rarely factors into the equation, however, is page load time. Although the fact that we can access websites virtually anywhere through 3G and 4G networks is nothing short of a miracle, doing so is still painfully slow compared to conventional broadband connections.

In the absence of a dedicated mobile website, iceberg web design requires users accessing a site through 3G and 4G connections download much more content than they need to. In traditional browsing this isn’t a problem. But the slow connection speeds of 3G and 4G networks exacerbate the pain of a slow page load. And slow page load isn’t just irritating – page load times that exceed 10 seconds will often cause a user to leave a website immediately.

Just as with analytics, this is a solvable problem. Having a dedicated mobile website mitigates this issue entirely. But again, you’ve now forced yourself into a decision. Not every client has the budget to do a proper desktop and mobile site, and may end up having to opt for a compromised experience for both. Similarly, responsive design is pulled off the table because simply rearranging page elements won’t do anything to combat the penalties of slow page load.

Search Engine Optimization

It’s not uncommon for more than half of a website’s traffic to enter through something other than the home page (note – my source for this is from 2003 - my own analytics work suggests this hasn’t changed, but if there’s a more updated source, I’ll include it with a credit). One of the common culprits behind this phenomenon is search engines, which help users skip confusing navigation and go directly to the About Us, Careers or Hot Deals page that they’re really interested in. Google itself considers this to be a legitimate behavior and actively develops enhancements to its service (such as Sitelinks) that encourage bypassing the homepage.

Artificially restricting the number of pages on your site by building volumes of content beneath the fold provides fewer options for Google to link to. The fewer the options for Google to link to, the less frequently your site will show up for search engine queries. And the less frequently your site shows up for search engine queries, the less traffic your site gets.

Again, there are workarounds to this. You can grow organic search engine traffic with an artificially low number of web pages and title tags. But know that your SEO efforts will be operating with a handicap as the result of pursuing an iceberg design.

Call-To-Action / Conversion Optimization

Of all the justifications I’ve come across for iceberg websites, the most specious by far have concerned conversion optimization.

Two common studies cited by proponents of iceberg websites include a June 2012 experiment where moving the call to action beneath the fold resulted in a 20 percent increase in conversions, and a similar experiment where moving the call-to-action beneath the fold improved lead generation results of a landing page by 307 percent. These studies have fueled the sentiment, as expressed in a popular Kissmetrics article, that “(the fold) has no bearing whatsoever on conversion rates as far as calls to action are concerned.

Baloney.

First off, there’s some weaknesses to these studies that renders any generalizations spurious. In both cases, no raw numbers are given – only percentages. Let’s hypothetically assume that out of 10,000 visits, five conversions are generated. After making website changes, six conversions are registered from the next 10,000 visits. Well, technically speaking, that is a 20 percent increase. Of course, that change could have been attributable to just normal statistical variance. Who knows? There’s no context backing the assumption that the percentage improvements cited by these studies are statistically significant.

Secondly, there’s nothing that allows us to rule out the ecological fallacy. How do we know that the increases in conversion activity cited by these studies weren’t attributable to some external factor? For instance, if a major competitor goes out of business, that would certainly have a positive impact on conversion rates independent of any website changes. So would an external event that caused an increase in demand for a company’s services (such as a recent flood stimulating insurance leads). Even if there were no external factors at work, how can we be sure that the decision to move the call-to-action beneath the fold was solely responsible for the increase? In the example where moving the call-to-action beneath the fold improved performance by 307 percent, the author freely admits that other variables such as new imagery may have contributed to the increase.

Even if you get past these, however – let’s take it as a given that the studies are significantly valid and moving the call-to-action was definitively a causal factor in improving conversion rates – all that’s been proven is that in some instances, moving the call-to-action beneath the fold can improve conversion metrics. That’s a long way from proving conclusively that the fold doesn’t matter.

Here’s something that’s much more telling: of the top five e-commerce sites (Amazon, Staples, Apple, Walmart and Dell), companies that have undoubtedly poured a ton of money into usability testing, how many put their call-to-action and most important information beneath the fold? How many of them have constructed their site as if the fold doesn’t matter?

That would be a big zero.

As Jakob Nielsen notes, web users spend 80 percent of their attention above the fold and only 20 percent below the fold. Further, the average user reads only 28 percent of the words on a website, and will only spend an additional 4.4 seconds on a website for every additional 100 words.

Simply put, users have fleeting attention. Knowing that, you’re taking a chance by placing the call-to-action, the most important business function of a given page, in locations that receive less attention.

Balance in Web Design

Never let it be said that I’m an unreasonable man. Although I believe there are numerous drawbacks to fold-free, iceberg web design, that’s all they are - drawbacks.

Strong design is a function of maximizing tradeoffs. If you’re going to deviate from guidelines and best practices, make sure that the gains for doing so outweigh the drawbacks. As Donnelly astutely noted in Life Below 600 pxguidelines are not dictates. If the benefits to a fold-free design exceed the costs, then by all means pursue it. But be honest with yourself – boredom with convention in and of itself does not offset the usability and analytics penalties incurred by an iceberg website.

And in fairness. certain types of websites actually derive significant benefit from pursuing life below 600 px. If your web page is dedicated to a long article, for instance, you’ll pay very little penalty for having excessive content beneath the fold – after all, the point of the article visit is to consume content. This assertion was confirmed in usability tests by Jakob Nielsen, who argues that in instances like this, scrolling is preferable to paging.

But if your site serves a different purpose – transactional, interactive brochure, or otherwise, you’re taking a chance by creating an iceberg design and placing web elements important to user and business goals beneath the fold. Life above 600 px still matters.

Tagged with:
 

One Response to Life Above 600 px – 4 Reasons The Fold Still Matters in Web Design

  1. Harry says:

    Shoehorn an offkey note, eh?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>