Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Thinking Outside the Fold

Chuck Mallott
February 13, 2012

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.

Chuck Mallott

February 13, 2012
Tweet

More Decks by Chuck Mallott

Other Decks in Design

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