Web Design: Processes, Tools, & Patterns Prof. James Landay EECS Dept., UC Berkeley IEOR 170, April 10, 2002

2 James Landay: Web Design What is Usability? Ease of learning –faster the second time and so on... Fast recall –remember how from one session to the next Productivity –perform tasks quickly and efficiently Minimal error rates –if they occur, good feedback so user can recover High user satisfaction –confident of success

3 James Landay: Web Design Best Practices for Designing Usable Interfaces: Iterative Design Getting it right the first time is hard Prototyping tools can be the key to success Design Test Analyze

4 James Landay: Web Design Best Practices for Designing Usable Interfaces: Customer-centered Design “Know thy Customer” Cognitive abilities –visual & aural perception –physical manipulation –memory Organizational / job abilities Keep customers involved throughout project

5 James Landay: Web Design Best Practices for Designing Usable Interfaces: Task Analysis & Contextual Inquiry Observe existing work practices Create scenarios of actual use Try-out new ideas before building software ?

6 James Landay: Web Design Best Practices for Designing Usable Interfaces: Rapid Prototyping Build a mock-up of design Low fidelity techniques –paper sketches –cut, copy, paste –video segments Interactive prototyping tools –HTML, Visual Basic, HyperCard, Director, etc. Fantasy Basketball

7 James Landay: Web Design Best Practices for Designing Usable Interfaces: Evaluation Test with real customers (participants) Build models Low-cost techniques –expert evaluation –walkthroughs

8 James Landay: Web Design Outline Best practices for designing usable interfaces Web site design practice Informal tools for Web site design Evaluating Web interfaces Patterns for Web design

9 James Landay: Web Design Investigation into Web Design Interviews with 11 professional web site designers –conducted at designers’ workplaces –focus on specific projects and artifacts “take me through a recent project” artifacts were collected and analyzed

10 James Landay: Web Design Investigation into Web Design Designers were –from 5 different companies + 1 freelancer 4 design firms 1 Internet portal –representative of different specialties information architects creative directors/project managers graphic designers all-of-the-above (esp. smaller firms)

11 James Landay: Web Design Design Specialties Information Design Navigation Design Graphic Design Information design –structure, categories of information Navigation design –interaction with information structure Graphic design –visual presentation of information and navigation (color, typography, etc.)

12 James Landay: Web Design Design Specialties Information Architecture –encompasses information & navigation design User Interface Design –also includes testing and evaluation Information Architecture User Interface Design Usability Evaluation Information Design Navigation Design Graphic Design

13 James Landay: Web Design Web Site Design Process Production Design Refinement Design Exploration Discovery

14 James Landay: Web Design Design Process: Discovery Assess needs –understand client’s expectations –determine scope of project –characteristics of users –evaluate existing site and/or competition Production Design Refinement Design Exploration Discovery

15 James Landay: Web Design Design Process: Design Exploration Production Design Refinement Design Exploration Discovery Generate multiple designs *visualize solutions to discovered issues *information & navigation design *early graphic design *select one design for development

16 James Landay: Web Design Early Stage User Interface Design Brainstorming –put designs in a tangible form Incomplete designs –illustrate important examples Sketching & other informal representations important

17 James Landay: Web Design Design Process: Design Refinement Production Design Refinement Design Exploration Discovery Develop the design *increasing level of detail *heavy emphasis on graphic design *iterate on design

18 James Landay: Web Design Prepare design for handoff *create final deliverable *specifications, guidelines, and prototypes *as much detail as possible Design Process: Production Production Design Refinement Design Exploration Discovery

19 James Landay: Web Design Reprinted by permission from Contextual Design by Hugh Beyer & Karen Holtzblatt, InContext Enterprises, © Morgan Kaufmann, 1998 Post-Its & large surfaces (i.e., affinity diagrams) + haptic UI + brainstorming + collaborative + persistent + immersive –hard to share, edit, make digital Information Architecture Comes First

20 James Landay: Web Design Multiple Views Designers create representations of sites at multiple levels of detail Web sites are iteratively refined at all levels of detail Site MapsStoryboardsSchematicsMock-ups

21 James Landay: Web Design Site Maps High-level, coarse-grained view of entire site

22 James Landay: Web Design Storyboards Interaction sequence, minimal page level detail

23 James Landay: Web Design Schematics Page structure with respect to information and navigation

24 James Landay: Web Design Mock-ups High-fidelity, precise representation of page

25 James Landay: Web Design Prototypes, Specifications & Guidelines Prototypes –Usually interactive Specifications & Guidelines –written documents –interactive specification spec is integrated with prototype –Specifications = guidelines “factor of 10” difference

26 James Landay: Web Design A Timeline (8-13 Weeks) Discovery (1-2 Weeks) Design Exploration (1-2 Weeks) Design Refinement (4-6 Weeks) Production (2-3 Weeks)

27 James Landay: Web Design Discovery (1-2 Weeks) Design Exploration (1-2 Weeks) Design Refinement (4-6 Weeks) Production (2-3 Weeks) Information Design Navigation Design Graphic Design Activity A Timeline (8-13 Weeks)

28 James Landay: Web Design Discovery (1-2 Weeks) Design Exploration (1-2 Weeks) Design Refinement (4-6 Weeks) Production (2-3 Weeks) Information Design Navigation Design Graphic Design A Timeline (8-13 Weeks) Activity Site Maps Storyboards Schematics Mock-ups Prototypes Specifications

29 James Landay: Web Design Sketching All designers sketched... at all levels

30 James Landay: Web Design Sketching Reasons for sketching –“work through” ideas & explore design space design exploration not supported by current tools –collaborative situations

31 James Landay: Web Design Implications for Design Tools Extend sketching farther into process –“mature” designers lamented diminished sketching –sketching encourages broad exploration of design space Improve tools for early process –Poor support for design exploration & info/nav design Navigation Design Information Design Graphic Design Production Design Refinement Design Exploration Discovery

32 James Landay: Web Design Implications for Design Tools Integrate representations –juggling multiple tools is cumbersome –difficult to maintain consistency Project management –design histories and variations –team processes

33 James Landay: Web Design Outline Best practices for designing usable interfaces Web site design practice Informal tools for Web site design Evaluating Web interfaces Patterns for Web design

34 James Landay: Web Design Two Informal Web Design Tools Informed by Designers’ Practices Designers’ Outpost –information architecture DENIM –navigation/interaction design

35 James Landay: Web Design Designers’ Outpost: A Tangible Interface for Designing Information Architectures Combines the physical & virtual –physical post-its, virtual feedback Supports existing practice –affordances of paper –collaboration –large, persistent representation Adds advantages of e-media –editing, reuse, distribution –hand-off later to other tools Has an informal user interface –only recognizes where notes are, not what is on them

36 James Landay: Web Design Outpost Design History

37 James Landay: Web Design

38 James Landay: Web Design Two Informal Web Design Tools Informed by Designers’ Practices Designers’ Outpost –information architecture DENIM –navigation/interaction design

39 James Landay: Web Design DENIM: Designing Web Sites by Sketching Integrates multiple views –site map – storyboard – page sketch Supports informal interaction –sketching, –recognizes pages & links, not content

40 James Landay: Web Design DENIM Canvas Zoom Slider

41 James Landay: Web Design DENIM: Site Map View

42 James Landay: Web Design DENIM: Storyboard View

43 James Landay: Web Design DENIM: Sketch View

44 James Landay: Web Design DENIM: Run Mode

45 James Landay: Web Design DENIM Summary DENIM supports web design practice –from initial information architecture to testing –integrated multiple views –informal sketching UI DENIM adds to current practice –lo-fi interactive prototypes –advantages of electronic media Downloaded over 6500 times –get at

46 James Landay: Web Design Outline Best practices for designing usable interfaces Web site design practice Informal tools for Web site design Evaluating Web interfaces Patterns for Web design

47 James Landay: Web Design Usability on the Web Many Web sites have usability problems –users give up, have difficulty finding information –usability is one key factor to success, particularly for e-commerce sites Mobile computing adds further challenges –small screen sizes –limited and/or new interaction techniques –devices used in environments beyond the desktop

48 James Landay: Web Design Usability Testing Common usability testing techniques –laboratory experiments –interviews & ethnographic observations –surveys –focus groups Good qualitative data Problems with these techniques –time & effort are costly –small sample sizes – quantitative results? –unrealistic test situations How can we integrate usability testing in design, so we can find problems earlier? Design Test Analyze

49 James Landay: Web Design Remote Usability Testing Tools for task-based Web usability testing –clickstream analysis –qualitative feedback via IM & surveys Pros –semi-automatic – requires one time set up of tasks/questionnaires –large number of participants Cons –capture of detailed interactions requires client-side solutions device dependent (i.e., only works for IE 5 on Windows) –limited to site owners if data collected on server Remote Usability Data Logging log

50 James Landay: Web Design WebQuilt: Clickstream Logging Proxy-based logger rewrites links Pros –extensible, scalable –allow for unobtrusive, “naturalistic” user interaction –multi-platform, multi-device compatibility –fast & easy to deploy on any Website –nearly invisible to user –can be used in conjunction w/ online survey tools Cons –complex Javascript links can occasionally “escape” from Proxy

51 James Landay: Web Design WebQuilt: Visual Analysis Goals –link page elements to user actions –identify behavior/nav. patterns –highlight potential problems areas Solution –interactive graph based on web content nodes represent web pages edges represent aggregate traffic between pages –designers can indicate expected paths –color code common usability interests –filtering to show only target particpants –use zooming for analyzing data at varying granularity

52 James Landay: Web Design How to Run a Remote Usability Test with WebQuilt Recruit users Design & distribute tasks (via ) Auto-collect! Watch & wait as users perform tasks & proxy logs data Visualize, analyze Use the results to redesign

53 James Landay: Web Design

54 James Landay: Web Design

55 James Landay: Web Design

56 James Landay: Web Design

57 James Landay: Web Design Visual Analysis How can we use WebQuilt to understand what people did & uncover usability issues? –identify deviations from expected path –look for navigational patterns –explore where people exited –look for places where users spent a lot of time or not very much time

58 James Landay: Web Design Pilot Usability Study Pilot usability study 10 users asked to find Anti-lock brake information on the latest Nissan Sentra model The Nissan dealer closest to them Edmunds.com PDA web site Visor Handspring equipped with a OmniSky wireless modem

59 James Landay: Web Design

60 James Landay: Web Design

61 James Landay: Web Design

62 James Landay: Web Design

63 James Landay: Web Design

64 James Landay: Web Design Outline Best practices for designing usable interfaces Web site design practice Informal tools for Web site design Evaluating Web interfaces Patterns for Web design

65 James Landay: Web Design Design in the Pervasive Computing Era Future computing devices won’t have the same UI as current PCs –wide range of devices small or embedded in environment often w/ “alternative” I/O & w/o screens information appliances –lots of devices per user all working in concert I-Land by Streitz, et. al. How does one design for this environment? What will these interfaces look like?

66 James Landay: Web Design Interviews with Cross-Device UI Designers 4 designers & 1 developer at 3 different s/w firms 2 of 3 companies: no team designed mobile & desktop –looked at desktop UI to get ideas for tasks & flow –few discussions with desktop designers, if any –used Visio to diagram flows one put cell phone design in flow diagram, since UI is simple Third company –one person designed interface for both PDA & desktop company believes app domain constrained enough –each project managed completely separately Design patterns would allow 1 designer to do both

67 James Landay: Web Design Design Patterns Design is about finding solutions –unfortunately, designers often reinvent hard to know how things were done before & to reuse solutions –design patterns allow designers to reuse what works well First used in architecture [Alexander] Communicate design problems & solutions –how to create a beer garden where people socialize… –how big doors should be & where… –how to use handles… Not too general & not too specific –use solution “a million times over, without ever doing it the same way twice”

68 James Landay: Web Design Web Design Patterns Design is about finding solutions –unfortunately, designers often reinvent hard to know how things were done before & to reuse solutions –design patterns allow designers to reuse what works well Now used in web design [van Duyne, Landay, & Hong] Communicate design problems & solutions –how to make e-commerce sites where people return & buy… –how to create a shopping cart that supports check out… –how to create navigation bars for finding relevant content… Not too general & not too specific –use solution “a million times over, without ever doing it the same way twice”

69 James Landay: Web Design Pattern Examples Navigation bar

70 James Landay: Web Design Pattern Examples Navigation bar

71 James Landay: Web Design Pattern Solution Captures essence on how to solve problem Navigation bar Generality of solution fits informal approach! First-level navigation Second-level navigation

72 James Landay: Web Design Damask: Using Patterns for Cross Device UI Design Designer –sketches design –browses through patterns –merges device-specific pattern generalization into design

73 James Landay: Web Design Damask: Using Patterns for Cross Device UI Design Designer –sketches design –browses through patterns –merges device-specific pattern generalization into design Shopping cart PC version

74 James Landay: Web Design Damask: Using Patterns for Cross Device UI Design Designer –sketches design –browses through patterns –merges device-specific pattern generalization into design

75 James Landay: Web Design Damask: Using Patterns for Cross Device UI Design Designer customizes solution to fit project –this creates another example of the pattern –tool keeps track of transformations

76 James Landay: Web Design Damask: Using Patterns for Cross Device UI Design Designer picks another target device –tool takes pattern generalization for target device, applies same transformations –results in generated UI for target device –designer continues to fix & customize result Shopping cart Cell-phone version

77 James Landay: Web Design Summary Iterative design is the key to good UIs Informal tools are the key to iterative design We have built several tools to support –Web Design (Outpost & Denim) –Speech UI Design (Suede) –Multimodal, Cross device UI Design (CrossWeaver & Damask) –Web & Mobile UI Evaluation (WebQuilt) Positive results from evaluations & community reaction

Web Design: Processes, Tools, & Patterns Prof. James A. Landay EECS Department, UC Berkeley

79 James Landay: Web Design Informal vs. Formal Representations Informal visual representation –communicates “unfinished” –encourages creativity –faster to create Formal visual representation –communicates “finished” –inhibits creativity (detailing) –slower to create

80 James Landay: Web Design Informal User Interfaces Take advantage of natural input modalities –speaking –writing –gesturing –sketching Minimize recognition of the input –allow users to work & communicate naturally –document rather than transform

81 James Landay: Web Design CrossWeaver Informal Prototyping & Evaluation Tools Denim Suede Outpost WebQuilt Damask