Sunteți pe pagina 1din 40

CONTENT PAGE DESIGN BEST PRACTICES

LUKE WROBLEWSKI IASUMMIT, APRIL 2008

Luke Wroblewski
Yahoo! Inc. Senior Director, Product Ideation & Design LukeW Interface Designs Principal & Founder Product design & strategy services Author Site-Seeing: A Visual Approach to Web Usability (Wiley & Sons) Form Design Best Practices (Rosenfeld Media) Upcoming Functioning Form: Web applications, product strategy, & interface design articles Previously eBay Inc., Lead Designer University of Illinois, Instructor NCSA, Senior Designer http://www.lukew.com

NCSA in 1995

A few years later

We optimize for this.

Web content lives in this.

Site Hierarchy

Web Ecosystem

Thanks to Tom Chi for the types!

Site Hierarchy

Web Ecosystem

5%
Your situation may vary.

95%

85%

15%
7

Understanding this context

Communication

Communication

10

Communication

11

Communication

12

Display Surfaces
13

Display Surfaces
14

Content Creators

15

Content Creators

16

Content Aggregators

17

Content Aggregators

18

Content Aggregators

19

Search

20

10

Search

21

People come from different contexts

What happens when they arrive?


22

11

23

CONTEXT

RELATED

CONTENT

24

12

CONTENT

25

Keep links & titles in synch

26

13

27

28

14

24% CONTENT 76% SITE OVERHEAD

29

Make content your focus

30

15

Squidoo Eye-tracking study (by etre)

31

No Clear Hierarchy

32

16

No Clear Hierarchy

33

Visual Hierarchy

34

17

People dont stay long. Across 650,000 URIs tested 25% of all documents were displayed for less than 4 seconds and 52% of all visits were shorter than 10 seconds Peak value was located between 2 and 3 seconds

Source: Clickstream Study Reveals Dynamic Web, Weboptimization.com

35

Keep it short.

36

18

Short Attention Span Theater

37

Deliver on promises made (even if you dont make them)

BEST PRACTICES

Favor visual hierarchy over site hierarchy Short, concise, and scannable provides the option for further engagement

38

19

RELATED

39

40

20

Spare us your site map

41

42

21

Access to everything. Always.

43

44

22

Access to what matters now.

45

46

23

47

48

24

49

50

25

51

Related detours

52

26

Related Actions

53

Related Content? No Problem.

54

27

Decision Paralysis

Decision Quality

They choose whats most simple.

When presented with too many options, people dont use difficult criteria to decide. They choose whats most simple.

When faced with a higher number of options, less people end up making a choice

55

56

28

57

People are great at tuning things out.

Source: Nielsen/Norman Group images, USC Annenburg

58

29

People are great at tuning things out.

59

Getting related calls to action noticed.

60

30

Getting related calls to action noticed.

61

On search results pages Decreased viewing has big impact on clickthrough If viewing of a link falls from 80% to 60% The initial probability the link will be selected falls by over 50%

If you dont see it, you wont click it.

Source: EyeTools Google Checkout Addendum, SendTec, Inc.

62

31

63

64

32

65

If you make good on content, related calls to action (CTAs) are welcome

BEST PRACTICES

Limit the number of choices people have to make Think through the presentation of related CTAs

66

33

CONTEXT

67

68

34

Source: Stanford Guidelines for Web Credibility.

Who you going to trust?

We find that people quickly evaluate a site by visual design alone. Design your site so it looks professional (or is appropriate for your purpose)

69

70

35

Who you going to trust?

71

72

36

73

74

37

75

76

38

77

Utilize the minimum amount necessary to set site context

BEST PRACTICES

Build immediate credibility through the presentation layer See if you can leverage the origin

78

39

CONTENT

RELATED

CONTEXT
79

For more information


Functioning Form
www.lukew.com/ff/

Web Form Design: Filling in the Blanks


15% OFF! IAS08WFD

Site-Seeing: A Visual Approach to Web Usability


Wiley & Sons

Drop me a note
luke@lukew.com

80

40

S-ar putea să vă placă și