Trabajo Práctico: Aprendiendo economía con Los Simpsons - Wroblewski
CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1...
Transcript of CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1...
![Page 1: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/1.jpg)
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
![Page 2: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/2.jpg)
2
3
NCSA in 1995
4
A few years later…
![Page 3: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/3.jpg)
3
5
We optimize for this. Web content lives in this.
6
Site Hierarchy Web Ecosystem
Thanks to Tom Chi for the types!
![Page 4: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/4.jpg)
4
7
Site Hierarchy Web Ecosystem
5% 95%
85% 15%
Your situation may vary.
8
Understanding this context…
![Page 5: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/5.jpg)
5
9
Communication
10
Communication
![Page 6: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/6.jpg)
6
11
Communication
12
Communication
![Page 7: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/7.jpg)
7
13
Display Surfaces
14
Display Surfaces
![Page 8: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/8.jpg)
8
15
Content Creators
16
Content Creators
![Page 9: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/9.jpg)
9
17
Content Aggregators
18
Content Aggregators
![Page 10: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/10.jpg)
10
19
Content Aggregators
20
Search
![Page 11: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/11.jpg)
11
21
Search
22
People come from different contexts…
What happens when they arrive?
![Page 12: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/12.jpg)
12
23
24
CONTENT
CONTEXT
RELATED
![Page 13: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/13.jpg)
13
25
CONTENT
26
Keep links & titles in synch
![Page 14: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/14.jpg)
14
27
28
![Page 15: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/15.jpg)
15
29
24% CONTENT 76% SITE OVERHEAD
30
Make content your focus
![Page 16: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/16.jpg)
16
31 Squidoo Eye-tracking study (by etre)
32
No Clear Hierarchy
![Page 17: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/17.jpg)
17
33
No Clear Hierarchy
34
Visual Hierarchy
![Page 18: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/18.jpg)
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.
![Page 19: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/19.jpg)
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
![Page 20: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/20.jpg)
20
39
RELATED
40
![Page 21: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/21.jpg)
21
41
Spare us your site map
42
![Page 22: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/22.jpg)
22
43
Access to everything. Always.
44
![Page 23: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/23.jpg)
23
45
Access to what matters now.
46
![Page 24: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/24.jpg)
24
47
48
![Page 25: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/25.jpg)
25
49
50
![Page 26: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/26.jpg)
26
51
52
Related detours
![Page 27: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/27.jpg)
27
53
Related Actions
54
Related Content? No Problem.
![Page 28: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/28.jpg)
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.”
![Page 29: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/29.jpg)
29
57
58
People are great at tuning things out.
Source: Nielsen/Norman Group images, USC Annenburg
![Page 30: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/30.jpg)
30
59
People are great at tuning things out.
60
Getting related calls to action noticed.
![Page 31: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/31.jpg)
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.
![Page 32: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/32.jpg)
32
63
64
![Page 33: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/33.jpg)
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
![Page 34: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/34.jpg)
34
67
CONTEXT
68
![Page 35: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/35.jpg)
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?
![Page 36: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/36.jpg)
36
71
Who you going to trust?
72
![Page 37: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/37.jpg)
37
73
74
![Page 38: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/38.jpg)
38
75
76
![Page 39: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/39.jpg)
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
![Page 40: CONTENT PAGE DESIGN BEST PRACTICES - LukeWstatic.lukew.com/contentpages_lukew_04072008.pdf1 1 CONTENT PAGE DESIGN BEST PRACTICES LUKE WROBLEWSKI IASUMMIT, APRIL 2008 2 Luke Wroblewski](https://reader033.fdocuments.net/reader033/viewer/2022042918/5f5e6489071fd0225104d215/html5/thumbnails/40.jpg)
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]