thinking outside the fold
DESCRIPTION
A sequel to my The Myth of the Fold presentation. This one focuses on how to embrace scrolling and what lives off the viewport.TRANSCRIPT
Thinking outsideTHE FOLD
THE FOLD
2
THIS IS NOTTHAT KIND OF
PRESENTATION
THE FOLD
3http://www.lickr.com/photos/gregbarnes/2837877242/
THE FOLD
4http://www.lickr.com/photos/dkboss2/5639343760/
THE FOLD
5
THE FOLD
WHAT IS
THE FOLD?
6
SOURCE: http://en.wikipedia.org/wiki/Above_the_foldPHOTO: http://www.lickr.com/photos/dweinberger/563919
Refers to the potions of a webpage that can be visible without scrolling.
THE FOLDWhere is the fold?
8
430px
600px
860px
That’s one of the problems about the fold ... where exactly is it?
Due to the wide variances in screen resolutions, screen sizes and browser window sizes, reaching a consensus on the “aveage” placement of the fold is problematic.
The fold is not a single location, but a broadly dispersed distribution with three peaks located at roughly 430, 600 and 860 pixels.
http://blog.clicktale.com/2007/10/05/clicktale‐scrolling‐research‐repot‐v20‐pat‐1‐visibility‐and‐scroll‐reach/
THE FOLD
9
We should stat thinking of “the fold” as something other than a hard line with an above and below potion...
“Christopher FaheyDesigner, Teacher and Co-Founder of Behavior, an inteaction design consultancy
THE FOLD
10
Unfolding the Fold
2002 2011
55% >1%800x600
:(
1024x76840% 99%
:)
SOURCE: http://www.w3schools.com/browsers/browsers_display.asp
http://www.leegte.org/work/scrollbar/index.html
the real problem: SCROLLING
or is it?
THE FOLD
12http://blog.clicktale.com/2006/12/23/unfolding-the-fold/
Unfolding the Fold
91% had a scrollbar
76% scrolled some
22% scrolled to bottom
THE FOLD
13
60%
50%
40%
30%
20%
10%
0
500 2500 5000 7500 10,000px
http://blog.clicktale.com/2006/12/23/unfolding-the-fold/
Unfolding the Fold
% of users that scrolled to bottom
THE FOLD
14
The myth that users won’t scroll to see anything below the fold - is doing eveyone a great dissevice, most of all our users.
“Milissa TarquiniDirector, User Inteface Design and Information Architecture at AOL
THE FOLD
15
RESPONDING TO
THE FOLD
THE FOLD
16
THE FOLD
17
Should you ty to eliminate pages that scroll?
Should you ty to cam as much content as close to the top of the page as possible?
Should you get rid of good content just to reduce the height of a page?
Do we need to be worried about the fold?
Responding to the Fold
No.
THE FOLD
18
Should primay calls-to-action be close to the top of the page and visually distinct?
Should page templates be laid out in such a way that gives clues to the user that more content is available if scrolled?
Should websites exhibit a content stategy that calls for concise content throughout the site?
Responding to the Fold
YES.
THE FOLD
19
Thinking Outside The Fold
http://www.lickr.com/photos/thatist/2970171789/
THE FOLD
21
SOOOO ....
WHAT DO WE TELL
OUR CLIENTS?
THE FOLD
22
Thinking Outside The Fold
1 Make scrolling pat of the UX
2 Get creative, have fun
3 Embace the constaints
THE FOLD
Horizontal Scrolling
23
THE FOLD
25
Users scroll if there are clues to scroll and no design barriers to scrolling.“Fiz Yazdi & Joe LeechUser Experience Consultants at CXPatners
http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm
THE FOLD
26
scrolling =UX
THE FOLD
28
THE FOLD
29
THE FOLD
30
Users are pefectly willing to scroll ... if the page gives them strong clues that scrolling will help them find what they’re looking for.
“Jared SpoolCEO & Founding Principal of User Inteface Engineering
THE FOLD
31PHOTO: http://apple.com/magicmouse
SCROLLING CAN BE
FUN!IS
THE FOLD
33
THE FOLD
35
Actual Size = 18,000 pixels
18,000 pixels ... about 20 feet tall!
THE FOLD
36
It’s not how an app looks, but how it scroooooolls.“John MaedaGaphic designer, computer scientist, university professor and author
THE FOLD
37
embrace the
constraints
THE FOLD
38http://cdn.shopify.com/s/files/1/0051/7692/products/aba-rwd-stack.jpg
THE FOLD
39
Ethan’s staightfoward approach to designing for this complexity represents a fundamental shift in how we’ll build web sites for the decade to come.
“Jeffrey VeenCEO & Founder of Typekit
THE FOLD
40
THE FOLD
42
The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embace the fact that the web doesn’t have the same constaints, and design for this lexibility. But first, we must “accept the ebb and low of things.
“
John AllsopA Dao of Web Design, A List Apat (April 7, 2000)
THE FOLD
43
Thinking Outside The Fold
1 Make scrolling pat of the UX
2 Get creative, have fun
3 Embace the constaints
