Contextual Web

Webmaster Jam Session 2007

The Contextual Web

Nick FinckSeptember 22nd, 2007Webmaster Jam Session, Dallas

1


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

http://www.blueflavor.com

http://www.blueflavor.com

http://www.digital-web.com

http://www.digital-web.com

http://www.uxnet.org

http://www.uxnet.org


What is context?

3


!e circumstances in which an event occurs; a setting.”

Definition of ContextAmerican Heritage Dictionary

“

4


So why is context important?

5


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


So what are the aspects of context in web design?

7


Four aspects of context in web design

1. The User2. The Task3. The Environment4. The Technology

8


The User

9


Who is your user?

Photo by Dirk Borchershttp://www.flickr.com/photos/dirkborchers/495659224/

10

http://www.flickr.com/photos/dirkborchers/495659224/

http://www.flickr.com/photos/dirkborchers/495659224/


What are their challenges?

Photo by Jenny Morroshttp://www.flickr.com/photos/13799732@N08/1411680967/

11

http://www.flickr.com/photos/13799732@N08/1411680967/



What are their needs?

Photo by Svenwerkhttp://www.flickr.com/photos/svenwerk/107267802/

12

http://www.flickr.com/photos/svenwerk/107267802/

http://www.flickr.com/photos/svenwerk/107267802/


The Task

13


What is the task they are trying to accomplish?

Photo by John Don Rodrigohttp://www.flickr.com/photos/15271532@N00/1172675049/

14




Who is involved in the task?

15


The Environment

16


What is their environment like?

Photo by Nick Finckhttp://www.flickr.com/photos/digitalweb/104914116/

17

http://www.flickr.com/photos/digitalweb/104914116/

http://www.flickr.com/photos/digitalweb/104914116/


How doe this environment impact their ability to accomplish the task?

Photo by Rafael Matsunagahttp://www.flickr.com/photos/rednuht/479370088/

18

http://www.flickr.com/photos/rednuht/479370088/

http://www.flickr.com/photos/rednuht/479370088/


Look at not just the physical environment but also the social environment

Photo by Rion Nakayahttp://www.flickr.com/photos/rion/47437262/

19

http://www.flickr.com/photos/rion/47437262/

http://www.flickr.com/photos/rion/47437262/


The Technology

20


What technologies are being used?

Photo by Stefan Didakhttp://www.stefandidak.com/office/

21

http://www.stefandidak.com/office/

http://www.stefandidak.com/office/


What are the technical limitations?

22


How does the user interact with these technologies?

23


So how do we understand and learn from the context?

24


Enter the Contextual Inquiry

Photo by Jennifer Buehrerhttp://www.flickr.com/photos/jenniferbuehrer/86313852/

25

http://www.flickr.com/photos/jenniferbuehrer/86313852/

http://www.flickr.com/photos/jenniferbuehrer/86313852/


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


Of course, it does include a bit of awkwardness

Photo by Bryce Glasshttp://www.flickr.com/photos/bryce/219358117/

27

http://www.flickr.com/photos/bryce/219358117/

http://www.flickr.com/photos/bryce/219358117/


Show me some examples!

28


Web & Print Context

29


Web & Print Context

• XHTML✓Well formed✓Semantically correct

• CSS✓Screen media type✓Print media type

30


digital-web.comA good example of designing for both web and print

31


So what? That’s old news!

32


Web & Mobile Context

33


Web & Mobile Context

• XHTML✓Well formed✓Semantically correct

• CSS✓Screen media type✓Handheld media type

34


tipped.co.ukA good example of designing for both web and mobile

35


So just a new CSS file? Easy!

36


Not so fast...

37


Mobile Specific Context

38


Specific Mobile Context

• XHTML✓Well formed✓Semantically correct✓Highly optimized

• CSS✓Handheld media type (sometimes even screen media type)✓Highly optimized

39


getleaflets.comA good example of designing for a specific mobile context (iPhone)

40


What the $#@%!!

41


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


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


Lets Get Technical!

44


Fitts’s Law

45


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


Not so good

Way better

47


Optimized Markup

48


Very typical non-optimized markup highly optimized markup

49


Optimized UI

50


Very typical non-optimized UI highly optimized UI

51


Resources

52


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


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

http://www.uie.com/articles/putting_context_into_context/

http://www.uie.com/articles/putting_context_into_context/

http://www.alistapart.com/articles/designingforcontext/

http://www.alistapart.com/articles/designingforcontext/

http://www.andyrutledge.com/contrast-context.php

http://www.andyrutledge.com/contrast-context.php

http://usabilitynet.org/papers/UCA_V4.04.doc

http://usabilitynet.org/papers/UCA_V4.04.doc

http://msdn2.microsoft.com/en-us/library/ms993291.aspx

http://msdn2.microsoft.com/en-us/library/ms993291.aspx

http://www.asktog.com/columns/022DesignedToGiveFitts.html

http://www.asktog.com/columns/022DesignedToGiveFitts.html

http://weblog.cenriqueortiz.com/mobile-context/

http://weblog.cenriqueortiz.com/mobile-context/

http://www.gotomobile.com/archives/about-context-and-the-mobile-web

http://www.gotomobile.com/archives/about-context-and-the-mobile-web

http://www.uxmatters.com/MT/archives/000129.php

http://www.uxmatters.com/MT/archives/000129.php

http://www.blueflavor.com/blog/mobile/dotmobi_mobile_web_developers_guide.php

http://www.blueflavor.com/blog/mobile/dotmobi_mobile_web_developers_guide.php


Thank you.

55


Questions? [email protected]

56

mailto:[email protected]

mailto:[email protected]