Thinking Outside the Fold

A presentation I gave to an internal audience at work. We're all tired of the fold argument, so this presentation was delivered to challenge how we think about scrolling and displaying screen content.

Transcript

1. Thinking outside THE FOLD
2. THE FOLD 2 THIS IS NOT THAT KIND OF PRESENTATION
3. THE FOLD 3 http://www.lickr.com/photos/gregbarnes/2837877242/
4. THE FOLD 4 http://www.lickr.com/photos/dkboss2/5639343760/
5. THE FOLD 5
6. THE FOLD WHAT IS THE FOLD? 6
7. SOURCE: http://en.wikipedia.org/wiki/Above_the_fold PHOTO: http://www.lickr.com/photos/dweinberger/563919 Refers to the potions of a webpage that can be visible without scrolling.
8. THE FOLD Where 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 “aveage” 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‐repot‐v20‐pat‐1‐visibility‐and‐scroll‐reach/
9. THE FOLD 9 We should stat thinking of “the fold” as something other than a hard line with an above and below potion... “ Christopher Fahey Designer, Teacher and Co-Founder of Behavior, an inteaction design consultancy
10. THE FOLD 10 Unfolding the Fold 2002 2011 55% >1% 800x600 :( 1024x768 40% 99% :) SOURCE: http://www.w3schools.com/browsers/browsers_display.asp
11. http://www.leegte.org/work/scrollbar/index.html the real problem: SCROLLING or is it?
12. THE FOLD 12 http://blog.clicktale.com/2006/12/23/unfolding-the-fold/ Unfolding the Fold 91% had a scrollbar 76% scrolled some 22% scrolled to bottom
13. THE FOLD 13 60% 50% 40% 30% 20% 10% 0 500 2500 5000 7500 10,000 px http://blog.clicktale.com/2006/12/23/unfolding-the-fold/ Unfolding the Fold % of users that scrolled to bottom
14. THE FOLD 14 The myth that users won’t scroll to see anything below the fold - is doing eveyone a great dissevice, most of all our users. “ Milissa Tarquini Director, User Inteface Design and Information Architecture at AOL
15. THE FOLD 15 RESPONDING TO THE FOLD
16. THE FOLD 16
17. THE FOLD 17 Should you ty to eliminate pages that scroll? Should you ty to cam 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.
18. THE FOLD 18 Should primay 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 stategy that calls for concise content throughout the site? Responding to the Fold YES.
19. THE FOLD 19
20. Thinking Outside The Fold http://www.lickr.com/photos/thatist/2970171789/
21. THE FOLD 21 SOOOO .... WHAT DO WE TELL OUR CLIENTS?
22. THE FOLD 22 Thinking Outside The Fold 1 Make scrolling pat of the UX 2 Get creative, have fun 3 Embace the constaints
23. THE FOLD Horizontal Scrolli 23
24. THE FOLD 24
25. THE FOLD 25 Users scroll if there are clues to scroll and no design barriers to scrolling. “ Fiz Yazdi & Joe Leech User Experience Consultants at CXPatners http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm
26. THE FOLD 26 scrolling = UX
27. THE FOLD 27
28. THE FOLD 28
29. THE FOLD 29
30. THE FOLD 30 Users are pefectly willing to scroll ... if the page gives them strong clues that scrolling will help them find what they’re looking for. “ Jared Spool CEO & Founding Principal of User Inteface Engineering
31. THE FOLD 31 PHOTO: http://apple.com/magicmouse SCROLLING CAN BE FUN! IS
32. THE FOLD 32
33. THE FOLD 33
34. THE FOLD 34
35. THE FOLD 35 Actual Size = 18,000 pixels 18,000 pixels ... about 20 feet tall!
36. THE FOLD 36 It’s not how an app looks, but how it scroooooolls. “ John Maeda Gaphic designer, computer scientist, university professor and author
37. THE FOLD 37 embrace the constraints
38. THE FOLD 38 http://cdn.shopify.com/s/files/1/0051/7692/products/aba-rwd-stack.jpg
39. THE FOLD 39 Ethan’s staightfoward approach to designing for this complexity represents a fundamental shift in how we’ll build web sites for the decade to come. “ Jeffrey Veen CEO & Founder of Typekit
40. THE FOLD 40
41. THE FOLD 41
42. 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 embace the fact that the web doesn’t have the same constaints, and design for this lexibility. But first, we must “accept the ebb and low of things. “ John Allsop A Dao of Web Design, A List Apat (April 7, 2000)
43. THE FOLD 43 Thinking Outside The Fold 1 Make scrolling pat of the UX 2 Get creative, have fun 3 Embace the constaints
44. THE FOLD Questions? 44 Chuck Mallott UX DESIGNER TWITTER EMAIL @chuckmallott cmallott@nerdey.com