Contextual Web II

106
SXSW Interactive 2008 The Contextual Web Nick Finck March 8th, 2008 SXSW Interactive, Austin 1

description

A presentation I did at SXSW Interactive 2008 on the contextual web which talks about context, UCD, UX, and more. It mostly focuses on the mobile web and iphone design but there are some other interfaces it explores.

Transcript of Contextual Web II

Page 1: Contextual Web II

SXSW Interactive 2008

The Contextual Web

Nick FinckMarch 8th, 2008SXSW Interactive, Austin

1

Page 2: Contextual Web II

SXSW Interactive 2008

The Contextual Web II

Nick FinckMarch 8th, 2008SXSW Interactive, Austin

2

Page 3: Contextual Web II

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

Page 4: Contextual Web II

SXSW Interactive 2008

Elements of Context

4

Page 5: Contextual Web II

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

Page 6: Contextual Web II

SXSW Interactive 2008

The User

6

Page 7: Contextual Web II

SXSW Interactive 2008

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

Page 8: Contextual Web II

SXSW Interactive 2008

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

Page 9: Contextual Web II

SXSW Interactive 2008

9

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

Page 10: Contextual Web II

SXSW Interactive 2008

The Task

10

Page 11: Contextual Web II

SXSW Interactive 2008

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

Page 12: Contextual Web II

SXSW Interactive 2008

12

Page 13: Contextual Web II

SXSW Interactive 2008

The Environment

13

Page 14: Contextual Web II

SXSW Interactive 2008

14

Page 15: Contextual Web II

SXSW Interactive 2008

15

Photo by Alain Bachellierhttp://flickr.com/photos/alainbachellier/446327865/

Page 16: Contextual Web II

SXSW Interactive 2008

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

16

Page 17: Contextual Web II

SXSW Interactive 2008

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

Page 18: Contextual Web II

SXSW Interactive 2008

The Technology

18

Page 19: Contextual Web II

SXSW Interactive 2008

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

Page 20: Contextual Web II

SXSW Interactive 2008

20

Page 21: Contextual Web II

SXSW Interactive 2008

21

Page 22: Contextual Web II

SXSW Interactive 2008

22Photo courtesy of Microsoft

Page 23: Contextual Web II

SXSW Interactive 2008

23Photo courtesy of Microsoft

Page 24: Contextual Web II

SXSW Interactive 2008

Apple iPhone

24

Page 25: Contextual Web II

SXSW Interactive 2008

An Example

25

Page 26: Contextual Web II

SXSW Interactive 2008

26

Page 27: Contextual Web II

SXSW Interactive 2008

27

Page 28: Contextual Web II

SXSW Interactive 2008

28

Page 29: Contextual Web II

SXSW Interactive 2008

29

Page 30: Contextual Web II

SXSW Interactive 2008

Lets Get Technical!

30

Page 31: Contextual Web II

SXSW Interactive 2008

Fitts’s Law

31

Page 32: Contextual Web II

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

Page 33: Contextual Web II

SXSW Interactive 2008

Not so good

Way better

33

Page 34: Contextual Web II

SXSW Interactive 2008

Optimized Markup

34

Page 35: Contextual Web II

SXSW Interactive 2008

digital-web.comScreen based CSS & Print based CSS

35

Page 36: Contextual Web II

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

Page 37: Contextual Web II

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

Page 38: Contextual Web II

SXSW Interactive 2008

38Non-optimized header markup

Highly optimized header markup

Page 39: Contextual Web II

SXSW Interactive 2008

Optimized UI

39

Page 40: Contextual Web II

SXSW Interactive 2008

Non-optimized UI

Highly optimized UI

40

Page 41: Contextual Web II

SXSW Interactive 2008

Contextual Inquiries

41

Page 42: Contextual Web II

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

Page 43: Contextual Web II

SXSW Interactive 2008

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

43

Page 44: Contextual Web II

SXSW Interactive 2008

44Photo by Nina Shttp://flickr.com/photos/nashih/431014469/

Page 45: Contextual Web II

SXSW Interactive 2008

45

Photo by Nina Shttp://flickr.com/photos/nashih/431014480/

Page 46: Contextual Web II

SXSW Interactive 2008

46Photo by Ianus Kellerhttp://flickr.com/photos/cabinet/53738046/

Page 47: Contextual Web II

SXSW Interactive 2008

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

47

Page 48: Contextual Web II

SXSW Interactive 2008

A Deep Dive into Mobile

48

Page 49: Contextual Web II

SXSW Interactive 2008

Content

49

Page 50: Contextual Web II

SXSW Interactive 2008

Readability & Page Width

50

Page 51: Contextual Web II

SXSW Interactive 2008

The problem

51

Page 52: Contextual Web II

SXSW Interactive 2008

New York Times

52

Page 53: Contextual Web II

SXSW Interactive 2008

New York Times

53

Unreadable

Page 54: Contextual Web II

SXSW Interactive 2008

New York Times

54

Must zoom

Page 55: Contextual Web II

SXSW Interactive 2008

New York Times

55

UnreadableAgain

Page 56: Contextual Web II

SXSW Interactive 2008

New York Times

56

Text does not fit within screen

Page 57: Contextual Web II

SXSW Interactive 2008

Netflix Mobile

57

Design does not fit on screen

Page 58: Contextual Web II

SXSW Interactive 2008

Possible solutions

58

Page 59: Contextual Web II

SXSW Interactive 2008

New York Times Mobile

59

Readablewithoutzooming

Fits perfectly within screen

Page 60: Contextual Web II

SXSW Interactive 2008

New York Times Leaflet

60

Readablewithoutzooming

Text fits on screen

Page 61: Contextual Web II

SXSW Interactive 2008

61

Text fits on screen and is very readable

LinkedIn Mobile

Page 62: Contextual Web II

SXSW Interactive 2008

Interaction

62

Page 63: Contextual Web II

SXSW Interactive 2008

Navigation

63

Page 64: Contextual Web II

SXSW Interactive 2008

The problem

64

Page 65: Contextual Web II

SXSW Interactive 2008

New York Times Mobile

65

Navigation

Page 66: Contextual Web II

SXSW Interactive 2008

New York Times Mobile

66

Navigation

Hotspots

Page 67: Contextual Web II

SXSW Interactive 2008

New York Times Mobile

67

Navigation

Hotspots

Content isabove

navigation

Page 68: Contextual Web II

SXSW Interactive 2008

68

Navigationcould havelargerhotspots

LinkedIn Mobile

Page 69: Contextual Web II

SXSW Interactive 2008

Netflix Mobile

69

Microscopichotspots

Page 70: Contextual Web II

SXSW Interactive 2008

Netflix Mobile

70

Barelynavigable

Page 71: Contextual Web II

SXSW Interactive 2008

Possible solutions

71

Page 72: Contextual Web II

SXSW Interactive 2008

New York Times Leaflet

72

Navigationalong sidethe content

Page 73: Contextual Web II

SXSW Interactive 2008

73

Nice bigand juicy hotspots

LinkedIn Mobile

Page 74: Contextual Web II

SXSW Interactive 2008

74

Super sizehotspots

LinkedIn Mobile

Page 75: Contextual Web II

SXSW Interactive 2008

75

MediaTemple Account Centerfor the iPhone

Visuallycalled outnavigation

Page 76: Contextual Web II

SXSW Interactive 2008

76

Use largerheadings &visual hints

Facebook Mobile

Page 77: Contextual Web II

SXSW Interactive 2008

Pagination

77

Page 78: Contextual Web II

SXSW Interactive 2008

The problem

78

Page 79: Contextual Web II

SXSW Interactive 2008

Netflix Mobile

79

World’ssmallestpagination

Page 80: Contextual Web II

SXSW Interactive 2008

A possible solution

80

Page 81: Contextual Web II

SXSW Interactive 2008

81

Excellentpaginationsolution

Facebook Mobile

Page 82: Contextual Web II

SXSW Interactive 2008

Search

82

Page 83: Contextual Web II

SXSW Interactive 2008

The problem

83

Page 84: Contextual Web II

SXSW Interactive 2008

Netflix Mobile

84

Page 85: Contextual Web II

SXSW Interactive 2008

A possible solution

85

Page 86: Contextual Web II

SXSW Interactive 2008

86

A perfectcase forsearch ahead

Facebook Mobile

Page 87: Contextual Web II

SXSW Interactive 2008

Buttons

87

Page 88: Contextual Web II

SXSW Interactive 2008

The problem

88

Page 89: Contextual Web II

SXSW Interactive 2008

Netflix Mobile

89

Very typicalweb button

Page 90: Contextual Web II

SXSW Interactive 2008

Possible solutions

90

Page 91: Contextual Web II

SXSW Interactive 2008

91

MediaTemple Account Centerfor the iPhone

Large juicybuttons foreasy clicking

Page 92: Contextual Web II

SXSW Interactive 2008

92

Designedwith thespecificcontext inmind

Facebook Mobile

Page 93: Contextual Web II

SXSW Interactive 2008

Calls to Action

93

Page 94: Contextual Web II

SXSW Interactive 2008

The problem

94

Page 95: Contextual Web II

SXSW Interactive 2008

Netflix Mobile

95

Calls to action are lost in page

Page 96: Contextual Web II

SXSW Interactive 2008

A possible solution

96

Page 97: Contextual Web II

SXSW Interactive 2008

97

Facebook Mobile

Make calls to actionvery obvious

Page 98: Contextual Web II

SXSW Interactive 2008

In Review

98

Page 99: Contextual Web II

SXSW Interactive 2008

99

Page 100: Contextual Web II

SXSW Interactive 2008

100

Photo by Dan Buczynskihttp://www.flickr.com/photos/macwagen/225493960/

Page 101: Contextual Web II

SXSW Interactive 2008

Resources

101

Page 102: Contextual Web II

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

Page 103: Contextual Web II

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

Page 104: Contextual Web II

SXSW Interactive 2008

Thank you.

104

Page 105: Contextual Web II

SXSW Interactive 2008

Come to our party!South by NorthwestMonday at 11:00 PM@ Iron Cactus (6th & Trinity)

105

Page 106: Contextual Web II

SXSW Interactive 2008

Questions? [email protected]

106