Contextual Web II
Post on 28-Jan-2015
107 Views
Preview:
DESCRIPTION
Transcript
SXSW Interactive 2008
The Contextual Web
Nick FinckMarch 8th, 2008SXSW Interactive, Austin
1
SXSW Interactive 2008
The Contextual Web II
Nick FinckMarch 8th, 2008SXSW Interactive, Austin
2
SXSW Interactive 2008
Who the hell is this guy?
• Blue FlavorDirector of User Experience, co-founder, partnerhttp://www.blueflavor.com
• Digital Web MagazinePublisher and founderhttp://www.digital-web.com
• User Experience NetworkSeattle Local Ambassadorhttp://www.uxnet.org
• My Personal Sitehttp://www.nickfinck.com
3
SXSW Interactive 2008
Elements of Context
4
SXSW Interactive 2008
Four elements of context in web design
1. The User2. The Task3. The Environment4. The Technology
Note: Jared Spool identifies eight elements of context instead of four. I feel these eight elements reside in the four above.
5
SXSW Interactive 2008
The User
6
SXSW Interactive 2008
7Photo by Dirk Borchershttp://www.flickr.com/photos/dirkborchers/495659224/
SXSW Interactive 2008
8Photo by Jenny Morroshttp://www.flickr.com/photos/13799732@N08/1411680967/
SXSW Interactive 2008
9
Photo by Svenwerkhttp://www.flickr.com/photos/svenwerk/107267802/
SXSW Interactive 2008
The Task
10
SXSW Interactive 2008
Photo by John Don Rodrigohttp://www.flickr.com/photos/15271532@N00/1172675049/ 11
SXSW Interactive 2008
12
SXSW Interactive 2008
The Environment
13
SXSW Interactive 2008
14
SXSW Interactive 2008
15
Photo by Alain Bachellierhttp://flickr.com/photos/alainbachellier/446327865/
SXSW Interactive 2008
Photo by Rafael Matsunagahttp://www.flickr.com/photos/rednuht/479370088/
16
SXSW Interactive 2008
Photo by Rion Nakayahttp://www.flickr.com/photos/rion/47437262/ 17
SXSW Interactive 2008
The Technology
18
SXSW Interactive 2008
Photo by Stefan Didakhttp://www.stefandidak.com/office/ 19
SXSW Interactive 2008
20
SXSW Interactive 2008
21
SXSW Interactive 2008
22Photo courtesy of Microsoft
SXSW Interactive 2008
23Photo courtesy of Microsoft
SXSW Interactive 2008
Apple iPhone
24
SXSW Interactive 2008
An Example
25
SXSW Interactive 2008
26
SXSW Interactive 2008
27
SXSW Interactive 2008
28
SXSW Interactive 2008
29
SXSW Interactive 2008
Lets Get Technical!
30
SXSW Interactive 2008
Fitts’s Law
31
SXSW Interactive 2008
In ergonomics, Fitts's law is a model of human movement which predicts the time required to rapidly move to a target area, as a function of the distance to the target and the size of the target.”
Description of Fitts’s LawWikipedia
“
32
SXSW Interactive 2008
Not so good
Way better
33
SXSW Interactive 2008
Optimized Markup
34
SXSW Interactive 2008
digital-web.comScreen based CSS & Print based CSS
35
SXSW Interactive 2008
Developing for the Mobile Context
• XHTML✓Well formed✓Semantically correct✓Highly optimized
• CSS✓Handheld media type (sometimes even screen media type)✓Highly optimized
36
SXSW Interactive 2008
NYTimes.comMinimum 30 Seconds to lo load 796kbplus requests to multiple servers
NY Times on Getleaflets.comMaximum of 7 seconds to lo load 30kb
http://nytimes.com http://app.getleaflets.com/nyt/
37
SXSW Interactive 2008
38Non-optimized header markup
Highly optimized header markup
SXSW Interactive 2008
Optimized UI
39
SXSW Interactive 2008
Non-optimized UI
Highly optimized UI
40
SXSW Interactive 2008
Contextual Inquiries
41
SXSW Interactive 2008
Contextual inquiry is a user-centered design (UCD) method that happens up front in the soware development lifecycle. It calls for one-on-one observations of work practice in its naturally occurring context.”
Description of Contextual InquiryWikipedia
“
42
SXSW Interactive 2008
Photo by Jennifer Buehrerhttp://www.flickr.com/photos/jenniferbuehrer/86313852/
43
SXSW Interactive 2008
44Photo by Nina Shttp://flickr.com/photos/nashih/431014469/
SXSW Interactive 2008
45
Photo by Nina Shttp://flickr.com/photos/nashih/431014480/
SXSW Interactive 2008
46Photo by Ianus Kellerhttp://flickr.com/photos/cabinet/53738046/
SXSW Interactive 2008
Photo by Bryce Glasshttp://www.flickr.com/photos/bryce/219358117/
47
SXSW Interactive 2008
A Deep Dive into Mobile
48
SXSW Interactive 2008
Content
49
SXSW Interactive 2008
Readability & Page Width
50
SXSW Interactive 2008
The problem
51
SXSW Interactive 2008
New York Times
52
SXSW Interactive 2008
New York Times
53
Unreadable
SXSW Interactive 2008
New York Times
54
Must zoom
SXSW Interactive 2008
New York Times
55
UnreadableAgain
SXSW Interactive 2008
New York Times
56
Text does not fit within screen
SXSW Interactive 2008
Netflix Mobile
57
Design does not fit on screen
SXSW Interactive 2008
Possible solutions
58
SXSW Interactive 2008
New York Times Mobile
59
Readablewithoutzooming
Fits perfectly within screen
SXSW Interactive 2008
New York Times Leaflet
60
Readablewithoutzooming
Text fits on screen
SXSW Interactive 2008
61
Text fits on screen and is very readable
LinkedIn Mobile
SXSW Interactive 2008
Interaction
62
SXSW Interactive 2008
Navigation
63
SXSW Interactive 2008
The problem
64
SXSW Interactive 2008
New York Times Mobile
65
Navigation
SXSW Interactive 2008
New York Times Mobile
66
Navigation
Hotspots
SXSW Interactive 2008
New York Times Mobile
67
Navigation
Hotspots
Content isabove
navigation
SXSW Interactive 2008
68
Navigationcould havelargerhotspots
LinkedIn Mobile
SXSW Interactive 2008
Netflix Mobile
69
Microscopichotspots
SXSW Interactive 2008
Netflix Mobile
70
Barelynavigable
SXSW Interactive 2008
Possible solutions
71
SXSW Interactive 2008
New York Times Leaflet
72
Navigationalong sidethe content
SXSW Interactive 2008
73
Nice bigand juicy hotspots
LinkedIn Mobile
SXSW Interactive 2008
74
Super sizehotspots
LinkedIn Mobile
SXSW Interactive 2008
75
MediaTemple Account Centerfor the iPhone
Visuallycalled outnavigation
SXSW Interactive 2008
76
Use largerheadings &visual hints
Facebook Mobile
SXSW Interactive 2008
Pagination
77
SXSW Interactive 2008
The problem
78
SXSW Interactive 2008
Netflix Mobile
79
World’ssmallestpagination
SXSW Interactive 2008
A possible solution
80
SXSW Interactive 2008
81
Excellentpaginationsolution
Facebook Mobile
SXSW Interactive 2008
Search
82
SXSW Interactive 2008
The problem
83
SXSW Interactive 2008
Netflix Mobile
84
SXSW Interactive 2008
A possible solution
85
SXSW Interactive 2008
86
A perfectcase forsearch ahead
Facebook Mobile
SXSW Interactive 2008
Buttons
87
SXSW Interactive 2008
The problem
88
SXSW Interactive 2008
Netflix Mobile
89
Very typicalweb button
SXSW Interactive 2008
Possible solutions
90
SXSW Interactive 2008
91
MediaTemple Account Centerfor the iPhone
Large juicybuttons foreasy clicking
SXSW Interactive 2008
92
Designedwith thespecificcontext inmind
Facebook Mobile
SXSW Interactive 2008
Calls to Action
93
SXSW Interactive 2008
The problem
94
SXSW Interactive 2008
Netflix Mobile
95
Calls to action are lost in page
SXSW Interactive 2008
A possible solution
96
SXSW Interactive 2008
97
Facebook Mobile
Make calls to actionvery obvious
SXSW Interactive 2008
In Review
98
SXSW Interactive 2008
99
SXSW Interactive 2008
100
Photo by Dan Buczynskihttp://www.flickr.com/photos/macwagen/225493960/
SXSW Interactive 2008
Resources
101
SXSW Interactive 2008
Contextual Design: A Customer-Centered Approach to Systems Designsby Hugh Beyer and Karen Holtzblatt
Observing the User Experience: A Practitioner's Guide to User Researchby Mike Kuniavsky
102
SXSW Interactive 2008
Context in General• Putting Context Into Context by Jared M. Spool
Context & Design• Designing for Context with CSS by Joshua Porter• Design Context: Contrast in Context by Andy Rutledge
• Contextual Inquiry• Usability Context Analysis: A Practical Guide by Cathy Thomas & Nigel Bevan
Fitts’s Law• Fitts's UI Law Applied to the Web by Scott Berkun• A Quiz Designed to Give You Fitts by Bruce Tognazzini
Context & Mobile Design• The Mobile Context by C. Enrique Ortiz• About Context and the Mobile Web by Rudy De Waele• Designing the Mobile User Experience by Richard F. Cecil
Mobile Development• dotMobi Mobile Web Developers Guide by Brian Fling
103
SXSW Interactive 2008
Thank you.
104
SXSW Interactive 2008
Come to our party!South by NorthwestMonday at 11:00 PM@ Iron Cactus (6th & Trinity)
105
SXSW Interactive 2008
Questions? Comments?nick@blueflavor.com
106
top related