thinking outside the fold

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

24

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

27

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

32

THE FOLD

33

THE FOLD

34

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

41

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

THE FOLD

Questions?

44

Chuck MallottUX DESIGNERTWITTER

EMAIL

@chuckmallott

cmallott@nerdey.com