Web Design:
Processes, Tools, & Patterns
Prof. James Landay
EECS Dept., UC Berkeley
IEOR 170, April 10, 2002
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
James Landay: Web Design
2
Best Practices for Designing Usable Interfaces:
Iterative Design
Design
Test
Analyze
• Getting it right the first time is hard
• Prototyping tools can be the key to success
James Landay: Web Design
3
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
James Landay: Web Design
4
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
?
James Landay: Web Design
5
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
James Landay: Web Design
6
Best Practices for Designing Usable Interfaces:
Evaluation
• Test with real customers (participants)
• Build models
• Low-cost techniques
– expert evaluation
– walkthroughs
James Landay: Web Design
7
Outline
•
•
•
•
•
Best practices for designing usable interfaces
Web site design practice
Informal tools for Web site design
Evaluating Web interfaces
Patterns for Web design
James Landay: Web Design
8
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
James Landay: Web Design
9
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)
James Landay: Web Design
10
Design Specialties
• Information design
– structure, categories of
information
Information
Design
Navigation
Design
• Navigation design
– interaction with
information structure
• Graphic design
Graphic
Design
James Landay: Web Design
– visual presentation of
information and navigation
(color, typography, etc.)
11
Design Specialties
User Interface
Design
Usability
Evaluation
Information
Architecture
Information
Design
Navigation
Design
• Information
Architecture
– encompasses information
& navigation design
• User Interface Design
– also includes testing and
evaluation
Graphic
Design
James Landay: Web Design
12
Web Site Design Process
Discovery
Design Exploration
Design Refinement
Production
James Landay: Web Design
13
Design Process:
Discovery
Discovery
Design Exploration
Design Refinement
Production
James Landay: Web Design
Assess needs
– understand client’s
expectations
– determine scope of
project
– characteristics of
users
– evaluate existing
site and/or
competition
14
Design Process:
Design Exploration
Discovery
Design Exploration
Design Refinement
Production
James Landay: Web Design
Generate multiple
designs
* visualize solutions
to discovered
issues
* information &
navigation design
* early graphic
design
* select one design
for development
15
Early Stage User Interface Design
• Brainstorming
– put designs in a tangible form
• Incomplete designs
– illustrate important examples
• Sketching & other informal
representations important
James Landay: Web Design
16
Design Process:
Design Refinement
Discovery
Design Exploration
Design Refinement
Develop the
design
* increasing level of
detail
* heavy emphasis on
graphic design
* iterate on design
Production
James Landay: Web Design
17
Design Process:
Production
Discovery
Design Exploration
Design Refinement
Production
James Landay: Web Design
Prepare design
for handoff
* create final
deliverable
* specifications,
guidelines, and
prototypes
* as much detail as
possible
18
Information Architecture Comes First
• Post-Its & large surfaces (i.e., affinity diagrams)
+
+
+
+
+
haptic UI
brainstorming
collaborative
persistent
immersive
– hard to share,
edit,
make digital
Reprinted by permission from Contextual Design by Hugh Beyer & Karen
Holtzblatt, InContext Enterprises, http://www.incent.com,
© Morgan Kaufmann, 1998
James Landay: Web Design
19
Multiple Views
• Designers create representations of sites
at multiple levels of detail
• Web sites are iteratively refined at all
levels of detail
Site Maps
James Landay: Web Design
Storyboards Schematics
Mock-ups
20
Site Maps
• High-level, coarse-grained view of entire site
James Landay: Web Design
21
Storyboards
• Interaction sequence, minimal page level detail
James Landay: Web Design
22
Schematics
• Page structure with respect to information and navigation
James Landay: Web Design
23
Mock-ups
• High-fidelity, precise representation of page
James Landay: Web Design
24
Prototypes, Specifications &
Guidelines
• Prototypes
– Usually interactive
• Specifications & Guidelines
– written documents
– interactive specification
• spec is integrated with prototype
– Specifications = guidelines
• “factor of 10” difference
James Landay: Web Design
25
A Timeline
(8-13 Weeks)
James Landay: Web Design
26
A Timeline
(8-13 Weeks)
Information Navigation
Design
Design
James Landay: Web Design
Graphic
Design
27
A Timeline
(8-13 Weeks)
Site Maps
Storyboards
Schematics
Mock-ups
Information Navigation
Design
Design
James Landay: Web Design
Prototypes
Specifications
Graphic
Design
28
Sketching
All designers sketched
... at all levels
James Landay: Web Design
29
Sketching
• Reasons for sketching
– “work through” ideas & explore design space
• design exploration not supported by current tools
– collaborative situations
James Landay: Web Design
30
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
Discovery
Design Exploration
Information Navigation
Design
Design
Design Refinement
Production
James Landay: Web Design
Graphic
Design
31
Implications for Design Tools
• Integrate representations
– juggling multiple tools is cumbersome
– difficult to maintain consistency
• Project management
– design histories and variations
– team processes
James Landay: Web Design
32
Outline
•
•
•
•
•
Best practices for designing usable interfaces
Web site design practice
Informal tools for Web site design
Evaluating Web interfaces
Patterns for Web design
James Landay: Web Design
33
Two Informal Web Design Tools
Informed by Designers’ Practices
• Designers’ Outpost
– information architecture
James Landay: Web Design
• DENIM
– navigation/interaction design
34
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
James Landay: Web Design
35
Outpost Design History
James Landay: Web Design
36
James Landay: Web Design
37
Two Informal Web Design Tools
Informed by Designers’ Practices
• Designers’ Outpost
– information architecture
James Landay: Web Design
• DENIM
– navigation/interaction design
38
DENIM:
Designing Web Sites by Sketching
• Integrates multiple views
– site map – storyboard – page sketch
• Supports informal
interaction
– sketching,
– recognizes pages &
links, not content
James Landay: Web Design
39
DENIM
Canvas
Zoom
Slider
James Landay: Web Design
40
DENIM: Site Map View
James Landay: Web Design
41
DENIM: Storyboard View
James Landay: Web Design
42
DENIM: Sketch View
James Landay: Web Design
43
DENIM: Run Mode
James Landay: Web Design
44
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 http://guir.berkeley.edu/denim
James Landay: Web Design
45
Outline
•
•
•
•
•
Best practices for designing usable interfaces
Web site design practice
Informal tools for Web site design
Evaluating Web interfaces
Patterns for Web design
James Landay: Web Design
46
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
James Landay: Web Design
47
Usability Testing
• Common usability testing techniques
–
–
–
–
laboratory experiments
interviews & ethnographic observations
surveys
focus groups
• Good qualitative data
• Problems with these techniques
Design
Test
– time & effort are costly
– small sample sizes – quantitative results?
– unrealistic test situations
Analyze
• How can we integrate usability testing in design,
so we can find problems earlier?
James Landay: Web Design
48
Remote Usability Testing
log
Remote
Usability
Data Logging
log
• 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
James Landay: Web Design
49
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
James Landay: Web Design
50
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
James Landay: Web Design
51
How to Run a Remote Usability Test
with WebQuilt
• Recruit users
• Design & distribute tasks (via email)
• Auto-collect! Watch & wait as users
perform tasks & proxy logs data
• Visualize, analyze
• Use the results to redesign
James Landay: Web Design
52
James Landay: Web Design
53
James Landay: Web Design
54
James Landay: Web Design
55
James Landay: Web Design
56
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
James Landay: Web Design
57
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
James Landay: Web Design
58
James Landay: Web Design
59
James Landay: Web Design
60
James Landay: Web Design
61
James Landay: Web Design
62
James Landay: Web Design
63
Outline
•
•
•
•
•
Best practices for designing usable interfaces
Web site design practice
Informal tools for Web site design
Evaluating Web interfaces
Patterns for Web design
James Landay: Web Design
64
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?
James Landay: Web Design
65
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
James Landay: Web Design
66
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”
James Landay: Web Design
67
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”
James Landay: Web Design
68
Pattern Examples
Navigation bar
James Landay: Web Design
69
Pattern Examples
Navigation bar
James Landay: Web Design
70
Pattern Solution
• Captures essence on how to solve problem
• Navigation bar
First-level navigation
Second-level navigation
• Generality of solution fits informal approach!
James Landay: Web Design
71
Damask:
Using Patterns for Cross Device UI Design
• Designer
– sketches design
– browses through patterns
– merges device-specific pattern generalization
into design
James Landay: Web Design
72
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
James Landay: Web Design
73
Damask:
Using Patterns for Cross Device UI Design
• Designer
– sketches design
– browses through patterns
– merges device-specific pattern generalization
into design
James Landay: Web Design
74
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
James Landay: Web Design
75
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
James Landay: Web Design
Shopping cart
Cell-phone version
76
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
James Landay: Web Design
77
Web Design:
Processes, Tools, & Patterns
Prof. James A. Landay
EECS Department, UC Berkeley
http://guir.berkeley.edu
Informal vs. Formal Representations
• Informal visual
representation
– communicates “unfinished”
– encourages creativity
– faster to create
James Landay: Web Design
• Formal visual
representation
– communicates “finished”
– inhibits creativity (detailing)
– slower to create
79
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
James Landay: Web Design
80
Informal Prototyping & Evaluation Tools
Outpost
CrossWeaver
James Landay: Web Design
Denim
Damask
WebQuilt
Suede
81