Thinking outside

THE FOLD
THE FOLD

THIS IS NOT
THAT KIND OF

PRESENTATION
2
THE FOLD

http://www.lickr.com/photos/gregbarnes/2837877242/

3
THE FOLD

http://www.lickr.com/photos/dkboss2/5639343760/

4
THE FOLD

5
THE FOLD

WHAT IS

THE FOLD?
6
Refers to the potions of a webpage
that can be visible without scrolling.

SOURCE: http://en.wikipedia.org/wiki/Above_the...
430px

THE FOLD

Where is the fold?

That’s one of the problems about the fold ... where exactly is it?
600px
Due to the w...
THE FOLD

“

We should stat thinking of
“the fold” as something other
than a hard line with an above
and below potion......
2002

2011

THE FOLD

Unfolding the Fold

:)

:(
55%

800x600

>1%

40%

1024x768

99%

SOURCE: http://www.w3schools.com/b...
the real problem: S
CROLLING

or is it?
http://www.leegte.org/work/scrollbar/index.html
THE FOLD

Unfolding the Fold

91% had a scrollbar
76% scrolled some
22% scrolled to bottom
http://blog.clicktale.com/2006/...
THE FOLD

Unfolding the Fold
% of users that scrolled to bottom
60%

50%

40%

30%

20%

10%

0
500

2500

http://blog.cli...
THE FOLD

“

The myth that users won’t
scroll to see anything below
the fold - is doing eveyone a
great dissevice, most ...
THE FOLD

RESPONDING TO

THE FOLD
15
THE FOLD

16
Should you ty to eliminate pages that scroll?

THE FOLD

Responding to the Fold
Should you ty to cam as much content as...
Should primay calls-to-action be close to the top of the
page and visually distinct?

THE FOLD

Responding to the Fold

S...
THE FOLD

19
Thinking Outside The Fold

http://www.lickr.com/photos/thatist/2970171789/
THE FOLD

SOOOO ....

WHAT DO WE TELL

OUR CLIENTS?
21
THE FOLD

Thinking Outside The Fold

1 Make scrolling pat of the UX
2 Get creative, have fun
3 Embace the constaints
22
THE FOLD

Horizontal Scrolli
23
THE FOLD

24
THE FOLD

“

Users scroll if there are clues
to scroll and no design
barriers to scrolling.
Fiz Yazdi & Joe Leech
User Exp...
THE FOLD

scrolling
=
UX
26
THE FOLD

27
THE FOLD

28
THE FOLD

29
THE FOLD

“

Users are pefectly willing to
scroll ... if the page gives them
strong clues that scrolling will
help them fi...
THE FOLD

SCROLLING CAN BE IS

FUN!
PHOTO: http://apple.com/magicmouse

31
THE FOLD

32
THE FOLD

33
THE FOLD

34
THE FOLD

Actual Size = 18,000 pixels

18,000 pixels ... about 20 feet tall!

35
THE FOLD

“

It’s not how an app looks, but
how it scroooooolls.
John Maeda
Gaphic designer, computer scientist, universi...
THE FOLD

embrace the

constraints

37
THE FOLD

http://cdn.shopify.com/s/files/1/0051/7692/products/aba-rwd-stack.jpg

38
THE FOLD

“

Ethan’s staightfoward approach to
designing for this complexity
represents a fundamental shift in how
we’ll...
THE FOLD

40
THE FOLD

41
THE FOLD

“

The control which designers know in
the print medium, and often desire in
the web medium, is simply a functio...
THE FOLD

Thinking Outside The Fold

1 Make scrolling pat of the UX
2 Get creative, have fun
3 Embace the constaints
43
THE FOLD

Questions?
Chuck Mallott
UX DESIGNER
TWITTER

@chuckmallott
EMAIL

cmallott@nerdey.com

44
Upcoming SlideShare
Loading in …5
×

Thinking Outside The Fold

1,314 views
1,244 views

Published on

A sequel to my The Myth of the Fold presentation. This one focuses on how to embrace scrolling and what lives off the viewport.

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,314
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Thinking Outside The Fold

  1. 1. Thinking outside THE FOLD
  2. 2. THE FOLD THIS IS NOT THAT KIND OF PRESENTATION 2
  3. 3. THE FOLD http://www.lickr.com/photos/gregbarnes/2837877242/ 3
  4. 4. THE FOLD http://www.lickr.com/photos/dkboss2/5639343760/ 4
  5. 5. THE FOLD 5
  6. 6. THE FOLD WHAT IS THE FOLD? 6
  7. 7. Refers to the potions of a webpage that can be visible without scrolling. SOURCE: http://en.wikipedia.org/wiki/Above_the_fold PHOTO: http://www.lickr.com/photos/dweinberger/563919
  8. 8. 430px THE FOLD Where is the fold? That’s one of the problems about the fold ... where exactly is it? 600px 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. 860px 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/ 8
  9. 9. THE FOLD “ 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 9
  10. 10. 2002 2011 THE FOLD Unfolding the Fold :) :( 55% 800x600 >1% 40% 1024x768 99% SOURCE: http://www.w3schools.com/browsers/browsers_display.asp 10
  11. 11. the real problem: S CROLLING or is it? http://www.leegte.org/work/scrollbar/index.html
  12. 12. THE FOLD Unfolding the Fold 91% had a scrollbar 76% scrolled some 22% scrolled to bottom http://blog.clicktale.com/2006/12/23/unfolding-the-fold/ 12
  13. 13. THE FOLD Unfolding the Fold % of users that scrolled to bottom 60% 50% 40% 30% 20% 10% 0 500 2500 http://blog.clicktale.com/2006/12/23/unfolding-the-fold/ 5000 px 7500 10,000 13
  14. 14. THE FOLD “ 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 14
  15. 15. THE FOLD RESPONDING TO THE FOLD 15
  16. 16. THE FOLD 16
  17. 17. Should you ty to eliminate pages that scroll? THE FOLD Responding to the Fold 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? No. 17
  18. 18. Should primay calls-to-action be close to the top of the page and visually distinct? THE FOLD Responding to the Fold 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? YES. 18
  19. 19. THE FOLD 19
  20. 20. Thinking Outside The Fold http://www.lickr.com/photos/thatist/2970171789/
  21. 21. THE FOLD SOOOO .... WHAT DO WE TELL OUR CLIENTS? 21
  22. 22. THE FOLD Thinking Outside The Fold 1 Make scrolling pat of the UX 2 Get creative, have fun 3 Embace the constaints 22
  23. 23. THE FOLD Horizontal Scrolli 23
  24. 24. THE FOLD 24
  25. 25. THE FOLD “ 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 25
  26. 26. THE FOLD scrolling = UX 26
  27. 27. THE FOLD 27
  28. 28. THE FOLD 28
  29. 29. THE FOLD 29
  30. 30. THE FOLD “ 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 30
  31. 31. THE FOLD SCROLLING CAN BE IS FUN! PHOTO: http://apple.com/magicmouse 31
  32. 32. THE FOLD 32
  33. 33. THE FOLD 33
  34. 34. THE FOLD 34
  35. 35. THE FOLD Actual Size = 18,000 pixels 18,000 pixels ... about 20 feet tall! 35
  36. 36. THE FOLD “ It’s not how an app looks, but how it scroooooolls. John Maeda Gaphic designer, computer scientist, university professor and author 36
  37. 37. THE FOLD embrace the constraints 37
  38. 38. THE FOLD http://cdn.shopify.com/s/files/1/0051/7692/products/aba-rwd-stack.jpg 38
  39. 39. THE FOLD “ 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 39
  40. 40. THE FOLD 40
  41. 41. THE FOLD 41
  42. 42. THE FOLD “ 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) 42
  43. 43. THE FOLD Thinking Outside The Fold 1 Make scrolling pat of the UX 2 Get creative, have fun 3 Embace the constaints 43
  44. 44. THE FOLD Questions? Chuck Mallott UX DESIGNER TWITTER @chuckmallott EMAIL cmallott@nerdey.com 44

×