Contextual Web
-
Upload
nick-finck -
Category
Technology
-
view
9.240 -
download
1
description
Transcript of Contextual Web
![Page 1: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/1.jpg)
Webmaster Jam Session 2007
The Contextual Web
Nick FinckSeptember 22nd, 2007Webmaster Jam Session, Dallas
1
![Page 2: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/2.jpg)
Webmaster Jam Session 2007
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
2
![Page 3: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/3.jpg)
Webmaster Jam Session 2007
What is context?
3
![Page 4: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/4.jpg)
Webmaster Jam Session 2007
!e circumstances in which an event occurs; a setting.”
Definition of ContextAmerican Heritage Dictionary
“
4
![Page 5: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/5.jpg)
Webmaster Jam Session 2007
So why is context important?
5
![Page 6: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/6.jpg)
Webmaster Jam Session 2007
Awareness of contextual factors is important throughout the development process. To develop a product which is appropriate and usable for its intended users, the contexts in which that product will be used should be considered from the very early stages of product speci"cation and design.”
Cathy Thomas and Nigel BevanUsability Context Analysis: A Practical Guide
“
6
![Page 7: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/7.jpg)
Webmaster Jam Session 2007
So what are the aspects of context in web design?
7
![Page 8: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/8.jpg)
Webmaster Jam Session 2007
Four aspects of context in web design
1. The User2. The Task3. The Environment4. The Technology
8
![Page 9: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/9.jpg)
Webmaster Jam Session 2007
The User
9
![Page 10: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/10.jpg)
Webmaster Jam Session 2007
Who is your user?
Photo by Dirk Borchershttp://www.flickr.com/photos/dirkborchers/495659224/
10
![Page 11: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/11.jpg)
Webmaster Jam Session 2007
What are their challenges?
Photo by Jenny Morroshttp://www.flickr.com/photos/13799732@N08/1411680967/
11
![Page 12: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/12.jpg)
Webmaster Jam Session 2007
What are their needs?
Photo by Svenwerkhttp://www.flickr.com/photos/svenwerk/107267802/
12
![Page 13: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/13.jpg)
Webmaster Jam Session 2007
The Task
13
![Page 14: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/14.jpg)
Webmaster Jam Session 2007
What is the task they are trying to accomplish?
Photo by John Don Rodrigohttp://www.flickr.com/photos/15271532@N00/1172675049/
14
![Page 15: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/15.jpg)
Webmaster Jam Session 2007
Who is involved in the task?
15
![Page 16: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/16.jpg)
Webmaster Jam Session 2007
The Environment
16
![Page 17: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/17.jpg)
Webmaster Jam Session 2007
What is their environment like?
Photo by Nick Finckhttp://www.flickr.com/photos/digitalweb/104914116/
17
![Page 18: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/18.jpg)
Webmaster Jam Session 2007
How doe this environment impact their ability to accomplish the task?
Photo by Rafael Matsunagahttp://www.flickr.com/photos/rednuht/479370088/
18
![Page 19: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/19.jpg)
Webmaster Jam Session 2007
Look at not just the physical environment but also the social environment
Photo by Rion Nakayahttp://www.flickr.com/photos/rion/47437262/
19
![Page 20: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/20.jpg)
Webmaster Jam Session 2007
The Technology
20
![Page 21: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/21.jpg)
Webmaster Jam Session 2007
What technologies are being used?
Photo by Stefan Didakhttp://www.stefandidak.com/office/
21
![Page 22: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/22.jpg)
Webmaster Jam Session 2007
What are the technical limitations?
22
![Page 23: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/23.jpg)
Webmaster Jam Session 2007
How does the user interact with these technologies?
23
![Page 24: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/24.jpg)
Webmaster Jam Session 2007
So how do we understand and learn from the context?
24
![Page 25: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/25.jpg)
Webmaster Jam Session 2007
Enter the Contextual Inquiry
Photo by Jennifer Buehrerhttp://www.flickr.com/photos/jenniferbuehrer/86313852/
25
![Page 26: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/26.jpg)
Webmaster Jam Session 2007
Contextual inquiry is a user-centered design (UCD) method that happens up front in the so#ware development lifecycle. It calls for one-on-one observations of work practice in its naturally occurring context.”
Description of Contextual InquiryWikipedia
“
26
![Page 27: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/27.jpg)
Webmaster Jam Session 2007
Of course, it does include a bit of awkwardness
Photo by Bryce Glasshttp://www.flickr.com/photos/bryce/219358117/
27
![Page 28: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/28.jpg)
Webmaster Jam Session 2007
Show me some examples!
28
![Page 29: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/29.jpg)
Webmaster Jam Session 2007
Web & Print Context
29
![Page 30: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/30.jpg)
Webmaster Jam Session 2007
Web & Print Context
• XHTML✓Well formed✓Semantically correct
• CSS✓Screen media type✓Print media type
30
![Page 31: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/31.jpg)
Webmaster Jam Session 2007
digital-web.comA good example of designing for both web and print
31
![Page 32: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/32.jpg)
Webmaster Jam Session 2007
So what? That’s old news!
32
![Page 33: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/33.jpg)
Webmaster Jam Session 2007
Web & Mobile Context
33
![Page 34: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/34.jpg)
Webmaster Jam Session 2007
Web & Mobile Context
• XHTML✓Well formed✓Semantically correct
• CSS✓Screen media type✓Handheld media type
34
![Page 35: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/35.jpg)
Webmaster Jam Session 2007
tipped.co.ukA good example of designing for both web and mobile
35
![Page 36: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/36.jpg)
Webmaster Jam Session 2007
So just a new CSS file? Easy!
36
![Page 37: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/37.jpg)
Webmaster Jam Session 2007
Not so fast...
37
![Page 38: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/38.jpg)
Webmaster Jam Session 2007
Mobile Specific Context
38
![Page 39: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/39.jpg)
Webmaster Jam Session 2007
Specific Mobile Context
• XHTML✓Well formed✓Semantically correct✓Highly optimized
• CSS✓Handheld media type (sometimes even screen media type)✓Highly optimized
39
![Page 40: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/40.jpg)
Webmaster Jam Session 2007
getleaflets.comA good example of designing for a specific mobile context (iPhone)
40
![Page 41: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/41.jpg)
Webmaster Jam Session 2007
What the $#@%!!
41
![Page 42: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/42.jpg)
Webmaster Jam Session 2007
But...
• Why would you want to design for a specific mobile context?
• What about the “One Web” where one size fits all?
• Won’t the Standards Nazis lynch you?
42
![Page 43: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/43.jpg)
Webmaster Jam Session 2007
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/
43
![Page 44: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/44.jpg)
Webmaster Jam Session 2007
Lets Get Technical!
44
![Page 45: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/45.jpg)
Webmaster Jam Session 2007
Fitts’s Law
45
![Page 46: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/46.jpg)
Webmaster Jam Session 2007
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
“
46
![Page 47: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/47.jpg)
Webmaster Jam Session 2007
Not so good
Way better
47
![Page 48: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/48.jpg)
Webmaster Jam Session 2007
Optimized Markup
48
![Page 49: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/49.jpg)
Webmaster Jam Session 2007
Very typical non-optimized markup highly optimized markup
49
![Page 50: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/50.jpg)
Webmaster Jam Session 2007
Optimized UI
50
![Page 51: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/51.jpg)
Webmaster Jam Session 2007
Very typical non-optimized UI highly optimized UI
51
![Page 52: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/52.jpg)
Webmaster Jam Session 2007
Resources
52
![Page 53: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/53.jpg)
Webmaster Jam Session 2007
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
53
![Page 54: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/54.jpg)
Webmaster Jam Session 2007
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
54
![Page 55: Contextual Web](https://reader034.fdocuments.us/reader034/viewer/2022042814/54c7ed064a7959a7608b4579/html5/thumbnails/55.jpg)
Webmaster Jam Session 2007
Thank you.
55