content page design best practices - lukewstatic.lukew.com/contentpages_lukew_04072008.pdf1 1...
TRANSCRIPT
1
1
CONTENT PAGE DESIGN BEST PRACTICES
LUKE WROBLEWSKI IASUMMIT, APRIL 2008
2
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
2
3
NCSA in 1995
4
A few years later…
3
5
We optimize for this. Web content lives in this.
6
Site Hierarchy Web Ecosystem
Thanks to Tom Chi for the types!
4
7
Site Hierarchy Web Ecosystem
5% 95%
85% 15%
Your situation may vary.
8
Understanding this context…
5
9
Communication
10
Communication
6
11
Communication
12
Communication
7
13
Display Surfaces
14
Display Surfaces
8
15
Content Creators
16
Content Creators
9
17
Content Aggregators
18
Content Aggregators
10
19
Content Aggregators
20
Search
11
21
Search
22
People come from different contexts…
What happens when they arrive?
12
23
24
CONTENT
CONTEXT
RELATED
13
25
CONTENT
26
Keep links & titles in synch
14
27
28
15
29
24% CONTENT 76% SITE OVERHEAD
30
Make content your focus
16
31 Squidoo Eye-tracking study (by etre)
32
No Clear Hierarchy
17
33
No Clear Hierarchy
34
Visual Hierarchy
18
35
People don’t 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
36
Keep it short.
19
37
Short Attention Span Theater
38
BEST PRACTICES
• Deliver on promises made (even if you don’t make them)
• Favor visual hierarchy over site hierarchy
• Short, concise, and scannable provides the option for further engagement
20
39
RELATED
40
21
41
Spare us your site map
42
22
43
Access to everything. Always.
44
23
45
Access to what matters now.
46
24
47
48
25
49
50
26
51
52
Related detours
27
53
Related Actions
54
Related Content? No Problem.
28
55
Decision Paralysis
When faced with a higher number of options, less people end up making a choice
“ “
Decision Quality
When presented with too many options, people don’t use difficult criteria to decide. They choose what’s most simple.
“ “
56
“They choose what’s most simple.”
29
57
58
People are great at tuning things out.
Source: Nielsen/Norman Group images, USC Annenburg
30
59
People are great at tuning things out.
60
Getting related calls to action noticed.
31
61
Getting related calls to action noticed.
62
If you don’t see it, you won’t click it.
• On search results pages…
• Decreased viewing has big impact on click-through
• If viewing of a link falls from 80% to 60%
• The initial probability the link will be selected falls by over 50%
Source: EyeTools Google Checkout Addendum, SendTec, Inc.
32
63
64
33
65
66
BEST PRACTICES
• If you make good on content, related calls to action (CTAs) are welcome
• Limit the number of choices people have to make
• Think through the presentation of related CTAs
34
67
CONTEXT
68
35
69
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)
“ “
Source: Stanford Guidelines for Web Credibility.
70
Who you going to trust?
36
71
Who you going to trust?
72
37
73
74
38
75
76
39
77
78
BEST PRACTICES
• Utilize the minimum amount necessary to set site context
• Build immediate credibility through the presentation layer
• See if you can leverage the origin
40
79
RELATED
CONTEXT
CONTENT
80
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 • [email protected]