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

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


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


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


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

?


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


Best Practices for Designing Usable Interfaces:Evaluation• Test with real customers (participants)• Build models• Low-cost techniques

– expert evaluation– walkthroughs


Outline

• Best practices for designing usable interfaces

• Web site design practice• Informal tools for Web site design• Evaluating Web interfaces• Patterns for 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


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)


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.)


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


Web Site Design Process

Production

Design Refinement

Design Exploration

Discovery


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


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


Early Stage User Interface Design

• Brainstorming– put designs in a tangible

form

• Incomplete designs– illustrate important examples

• Sketching & other informal representations important


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


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


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


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


Site Maps

• High-level, coarse-grained view of entire site


Storyboards

• Interaction sequence, minimal page level detail


Schematics

• Page structure with respect to information and navigation


Mock-ups

• High-fidelity, precise representation of page


Prototypes, Specifications & Guidelines

• Prototypes– Usually interactive

• Specifications & Guidelines– written documents– interactive specification

• spec is integrated with prototype

– Specifications = guidelines• “factor of 10” difference


A Timeline(8-13 Weeks)

Discovery(1-2 Weeks)

DesignExploration(1-2 Weeks)

DesignRefinement

(4-6 Weeks)

Production(2-3 Weeks)




DesignRefinement

(4-6 Weeks)


Information Design

Navigation Design

GraphicDesign

Activity





DesignRefinement

(4-6 Weeks)


Information Design

Navigation Design

GraphicDesign


Activity

Site MapsStoryboards

SchematicsMock-ups

PrototypesSpecifications


Sketching

All designers sketched

... at all levels


Sketching

• Reasons for sketching– “work through” ideas & explore design space

• design exploration not supported by current tools

– collaborative situations


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


Implications for Design Tools

• Integrate representations– juggling multiple tools is cumbersome– difficult to maintain consistency

• Project management– design histories and variations– team processes


Outline




Two Informal Web Design Tools Informed by Designers’ Practices

• Designers’ Outpost– information

architecture

• DENIM– navigation/interaction

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


Outpost Design History



Two Informal Web Design Tools Informed by Designers’ Practices

• Designers’ Outpost– information

architecture

• DENIM– navigation/interaction

design


DENIM: Designing Web Sites by Sketching

• Integrates multiple views– site map – storyboard – page sketch

• Supports informal interaction– sketching, – recognizes pages &

links, not content


DENIM

Canvas

Zoom Slider


DENIM: Site Map View


DENIM: Storyboard View


DENIM: Sketch View


DENIM: Run Mode


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


Outline




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


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


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


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


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


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






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


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







Outline




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?


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


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”


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”


Pattern Examples

Navigation bar


Pattern Examples

Navigation bar


Pattern Solution

• Captures essence on how to solve problem• Navigation bar

• Generality of solution fits informal approach!

First-level navigation

Second-level navigation


Damask: Using Patterns for Cross Device UI Design

• Designer– sketches design– browses through patterns– merges device-specific pattern

generalization into design




generalization into design Shopping cartPC version




generalization into design



• Designer customizes solution to fit project– this creates another example of the pattern– tool keeps track of transformations



• 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


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


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


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


CrossWeaver

Informal Prototyping & Evaluation Tools

Denim

Suede

Outpost WebQuilt

Damask

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

Documents

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