Transcript CS376 Introduction - Stanford University

stanford hci group / cs376
Design Tools
01 November
2005
Research Topics in Human-Computer Interaction
Early Stage User Interface
Design
 Brainstorming
 put designs in a
tangible form
 Incomplete designs
 illustrate important
examples
 Sketching & other
informal
representations
important
26 October
Design Tools
2
Informal vs. Formal
Representations
 Informal visual
representation
 Formal visual
representation
 communicates
“unfinished”
 encourages creativity
 faster to create
26 October
 communicates “finished”
 inhibits creativity
(detailing)
 slower to create
Design Tools
3
Informal User
Interfaces
 Take advantage of natural
input
modalities




speaking
writing
gesturing
sketching
 Minimize recognition of the input
26
 allow users to work & communicate
Design Tools
October naturally
4
Investigation into Web
Design:
 Interviews w/ 11 professional designers
Architecture
Information
Post-Its & large surfaces
(i.e., affinity
diagrams)
Comes
First
+ haptic UI
+
+
+
+
brainstorming
collaborative
persistent
immersive
 hard to share,
edit,
make digital
26 October
Reprinted by permission from Contextual Design by Hugh
Beyer & Karen Holtzblatt, InContext Enterprises,
http://www.incent.com,
© Morgan Kaufmann, 1998
Design Tools
5
Investigation into 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
26 October
Design Tools
Mock-ups
6
Sketching
All designers
sketched
... at all levels
26 October
Design Tools
7
SUEDE:
Informal Prototyping for Speechbased UIs  Supports design practice
Read my
importan
t
email




example scripts
Wizard of Oz
error simulation
iterative design (designtest-analysis)
 Informal user interface
 no speech recognition or
synthesis
 need not be programming
expert
 fast & fluid design
26 October
Design Tools
8
26 October
Design Tools
9
machine prompt
26 October
user response
Design Tools
10
Video
SUEDE Video [~2 minutes]
26 October
Design Tools
11
SUEDE Summary
 SUEDE supports speech-based UI design




moving from concrete examples to abstractions
embeds iterative design
informal interface supports fast & fluid design
designers need not be speech technology experts
 Status
 downloaded over 1000 times
 used by several companies for designing
telephone-based speech UIs
 Download at http://guir.berkeley.edu/suede
26 October
Design Tools
12
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”
26 October
Design Tools
13
Web Design Patterns
 Communicate design
problems & solutions
 how to make ecommerce sites where
people return & buy…
 how to create a
shopping cart that
supports check out…
 how to create
navigation bars for
finding relevant
Design Tools
26 content…
October
14
Pattern Solution
 Captures essence on how to solve problem
 Navigation bar
First-level navigation
Second-level navigation
 Generality of solution fits informal
approach!
26 October
Design Tools
15
Damask
26 October
Design Tools
16
Other Tools
 Demais (multimedia)
 DART (augmented reality)
26 October
Design Tools
17
Summary
 Iterative design is the key to
good UIs
 Informal tools are the key to
iterative design
 Berkeley built several tools to
support
 Web Design (Outpost & Denim)
 Speech UI Design (Suede)
 Multimodal, Cross device UI Design
(CrossWeaver & Damask)
 Positive results from
26 October
Design Tools
18
DENIM Questions




A comparative study?
Sufficiently low threshold?
Sufficiently high ceiling?
Should designs be thrown over
the wall, as DENIM advocates?
26 October
Design Tools
19
Much of this material is based
on James Landay’s 2002
research overview talk
26 October
Design Tools
20