Web Design: Processes, Tools, & Patterns Prof. James Landay EECS Dept., UC Berkeley IEOR 170, April 10, 2002
Dec 16, 2015
Web Design: Processes, Tools, & Patterns
Prof. James LandayEECS Dept., UC Berkeley
IEOR 170, April 10, 2002
2James 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
3James 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
4James 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
5James 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
?
6James 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
7James Landay: Web Design
Best Practices for Designing Usable Interfaces:Evaluation• Test with real customers (participants)• Build models• Low-cost techniques
– expert evaluation– walkthroughs
8James 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
9James 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
10James 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)
11James 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.)
12James Landay: Web Design
Design Specialties
• Information Architecture– encompasses
information & navigation design
• User Interface Design– also includes testing
and evaluation
Information Architecture
User InterfaceDesign
Usability Evaluation
Information Design
Navigation Design
Graphic Design
13James Landay: Web Design
Web Site Design Process
Production
Design Refinement
Design Exploration
Discovery
14James 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
15James 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
16James 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
17James 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
18James 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
19James Landay: Web Design
Reprinted by permission from Contextual Design by Hugh Beyer & Karen Holtzblatt, InContext Enterprises, http://www.incent.com, © 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
20James 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 Maps Storyboards Schematics Mock-ups
25James 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
26James Landay: Web Design
A Timeline(8-13 Weeks)
Discovery(1-2 Weeks)
DesignExploration(1-2 Weeks)
DesignRefinement
(4-6 Weeks)
Production(2-3 Weeks)
27James Landay: Web Design
Discovery(1-2 Weeks)
DesignExploration(1-2 Weeks)
DesignRefinement
(4-6 Weeks)
Production(2-3 Weeks)
Information Design
Navigation Design
GraphicDesign
Activity
A Timeline(8-13 Weeks)
28James Landay: Web Design
Discovery(1-2 Weeks)
DesignExploration(1-2 Weeks)
DesignRefinement
(4-6 Weeks)
Production(2-3 Weeks)
Information Design
Navigation Design
GraphicDesign
A Timeline(8-13 Weeks)
Activity
Site MapsStoryboards
SchematicsMock-ups
PrototypesSpecifications
30James Landay: Web Design
Sketching
• Reasons for sketching– “work through” ideas & explore design space
• design exploration not supported by current tools
– collaborative situations
31James 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
NavigationDesign
InformationDesign
GraphicDesignProduction
Design Refinement
Design Exploration
Discovery
32James 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
33James 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
34James Landay: Web Design
Two Informal Web Design Tools Informed by Designers’ Practices
• Designers’ Outpost– information
architecture
• DENIM– navigation/interaction
design
35James 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
38James Landay: Web Design
Two Informal Web Design Tools Informed by Designers’ Practices
• Designers’ Outpost– information
architecture
• DENIM– navigation/interaction
design
39James 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
45James 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 http://guir.berkeley.edu/denim
46James 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
47James 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
48James 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
49James 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
RemoteUsability
Data Logging loglog
50James 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
51James 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
52James Landay: Web Design
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
57James 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
58James 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
64James 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
65James 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?
66James 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
67James 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”
68James 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”
71James 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
72James Landay: Web Design
Damask: Using Patterns for Cross Device UI Design
• Designer– sketches design– browses through patterns– merges device-specific pattern
generalization into design
73James 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 cartPC version
74James Landay: Web Design
Damask: Using Patterns for Cross Device UI Design
• Designer– sketches design– browses through patterns– merges device-specific pattern
generalization into design
75James 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
76James 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 cartCell-phone version
77James 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. LandayEECS Department, UC Berkeley
http://guir.berkeley.edu
79James 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
80James 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