An artist's job is to rethink the boundaries of their medium. Whether
it's a canvas or a web browser, our job is to improve its value and
use. Since 1994 web designers, digital gurus and usability pros have
debated the topic of designing "
above
the fold". The term "above the fold" is a print term that refers
to the location of an important news story or a visually appealing
photograph
on the upper half of the
front
page of a newspaper. In the early days this print term was adapted
and used in
web development to refer the portions of a web page
that can be visible without scrolling. When I started designing web
pages most users were unfamiliar with the concept of scrolling. It just
wasn't a natural thing for them to do . As a result, I would design
web pages so that all content would be “
above
the fold”. When I was designing e-commerce sites on
AOL, page-level vertical
scrolling was not permitted. As
AOL moved away from their proprietary screen
technology to an open web experience, we enjoyed the luxury of designing
longer and wider pages. That was 15 years ago! A lot has changed.
That
Was Then. This Is Now.According to
ClickTale's scrolling research, Today, 91% of the
page-views had a scroll-bar. 76% of the page-views with a scroll-bar,
were scrolled to some extent. 22% of the page-views with a scroll-bar,
were scrolled all the way to the bottom. As screen resolutions vary
greatly,
HTML design has improved and
browsers have become common place in a users life the time has come for
the term and the practice to die!
The "fold" simply does not
exist. There is significant research, design methods and technology
that renders the "fold" theory useless. Research like ClickTale's Scrolling Research Report V2.0 - Part 1
and Part 2 completely unravels the "Above the fold"
myth. The most compelling test they ran was proving ‘Absolute Scrolling
Reach’.
"This graph below shows us how much time visitors paid attention to each
section of different-sized web pages as they scrolled through them.
‘Absolute Scrolling Reach’ measures the distance from the page top (in
pixels) that a visitor scrolls down the page."
Let's think about
it for a moment. If you subscribe The “fold” theory, you are assuming
everyone uses the same size monitor, monitor resolution and Web
browser. More over, you must also assume we all have the same number of
toolbars. Obviously there are too many factors involved to identify a
consistent fold location. The "fold" is just silly! scrolling has
become a natural practice in surfing the web. Scrolling is also
associated with most Web 2.0 design. Big, clear text and spacious
content implies longer web pages.
Web 2.0 Design Today,
I design my pages to use liquid layouts that stretch to the current
user's window size in order to avoid frozen layouts that are always the
same size. Great consumer centric design does not give equal weight to
all the content in a site. It puts its most valuable messages at the top
and throughout the design. If you present compelling content and use
proper design queues and tools then your users will find and grab your
content. Here are a few examples of mainstream sites that are designed
"below the fold" for millions of uses everyday.
Facebook
The New York
Times
YouTube
Where
was the fold?
Did you scroll? of course you did. (you are
scrolling now)
Advertisers currently want their ads above the
fold, and it will be a while before that tide turns. But it’s clear that
the rest of the page can be just as valuable to contextual advertising.
Look
at the 2010 Ford Mustang site.
They
get it. I scrolled up and down, clicked and shared.
If
its good they will scroll.It is imperative that we begin
to educate our clients and account teams that this is no longer a best
practice. It really never was. Open up your design and stop cramming
stuff above a certain pixel point. You’re not helping anyone. If your
content is compelling enough your users will read it to the end.
Educate
your peers and clients with these recommendations in mind:
- Your content is king. If your page contains lots of engaging
content, users will scroll to the bottom to view it.
- Keep important new content that helps users understand the main
purpose of your site above the 600 pixel mark.
- Design universal navigation and business information that can be
modular. It should allow users to manipulate and control its placement.
It should also appear above the 600 pixel mark.
- Minimize your written text and maximize images and video, the web is
now a converged 3D medium. Users would rather you engage them instead
of asking them to read. Remember they do scan pages.
- Use design cues like icons, cut-off images and text blocks to help
users expect additional content below the screen.
- Try to keep browser-less applications within a given screen space
and make sure the inputs and outputs of the application appear within
that space.
Join me, lets help dispel the urban design myth by sharing
this data.
Research used for this
post:
