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
![Page 1: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/1.jpg)
Thinking outsideTHE FOLD
![Page 2: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/2.jpg)
THE FOLD
2
THIS IS NOTTHAT KIND OF
PRESENTATION
![Page 3: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/3.jpg)
THE FOLD
3http://www.lickr.com/photos/gregbarnes/2837877242/
![Page 4: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/4.jpg)
THE FOLD
4http://www.lickr.com/photos/dkboss2/5639343760/
![Page 5: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/5.jpg)
THE FOLD
5
![Page 6: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/6.jpg)
THE FOLD
WHAT IS
THE FOLD?
6
![Page 7: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/7.jpg)
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.
![Page 8: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/8.jpg)
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/
![Page 9: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/9.jpg)
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
![Page 10: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/10.jpg)
THE FOLD
10
Unfolding the Fold
2002 2011
55% >1%800x600
:(
1024x76840% 99%
:)
SOURCE: http://www.w3schools.com/browsers/browsers_display.asp
![Page 11: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/11.jpg)
http://www.leegte.org/work/scrollbar/index.html
the real problem: SCROLLING
or is it?
![Page 12: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/12.jpg)
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
![Page 13: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/13.jpg)
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
![Page 14: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/14.jpg)
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
![Page 15: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/15.jpg)
THE FOLD
15
RESPONDING TO
THE FOLD
![Page 16: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/16.jpg)
THE FOLD
16
![Page 17: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/17.jpg)
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.
![Page 18: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/18.jpg)
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.
![Page 19: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/19.jpg)
THE FOLD
19
![Page 20: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/20.jpg)
Thinking Outside The Fold
http://www.lickr.com/photos/thatist/2970171789/
![Page 21: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/21.jpg)
THE FOLD
21
SOOOO ....
WHAT DO WE TELL
OUR CLIENTS?
![Page 22: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/22.jpg)
THE FOLD
22
Thinking Outside The Fold
1 Make scrolling pat of the UX
2 Get creative, have fun
3 Embace the constaints
![Page 23: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/23.jpg)
THE FOLD
Horizontal Scrolling
23
![Page 25: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/25.jpg)
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
![Page 26: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/26.jpg)
THE FOLD
26
scrolling =UX
![Page 28: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/28.jpg)
THE FOLD
28
![Page 29: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/29.jpg)
THE FOLD
29
![Page 30: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/30.jpg)
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
![Page 31: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/31.jpg)
THE FOLD
31PHOTO: http://apple.com/magicmouse
SCROLLING CAN BE
FUN!IS
![Page 33: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/33.jpg)
THE FOLD
33
![Page 35: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/35.jpg)
THE FOLD
35
Actual Size = 18,000 pixels
18,000 pixels ... about 20 feet tall!
![Page 36: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/36.jpg)
THE FOLD
36
It’s not how an app looks, but how it scroooooolls.“John MaedaGaphic designer, computer scientist, university professor and author
![Page 37: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/37.jpg)
THE FOLD
37
embrace the
constraints
![Page 38: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/38.jpg)
THE FOLD
38http://cdn.shopify.com/s/files/1/0051/7692/products/aba-rwd-stack.jpg
![Page 39: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/39.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
![Page 40: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/40.jpg)
THE FOLD
40
![Page 42: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/42.jpg)
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)
![Page 43: Thinking Outside The Fold](https://reader034.vdocuments.mx/reader034/viewer/2022052321/54c778784a7959cc418b4659/html5/thumbnails/43.jpg)
THE FOLD
43
Thinking Outside The Fold
1 Make scrolling pat of the UX
2 Get creative, have fun
3 Embace the constaints