Design Tools

1
Design Tools

• Ron B. Yeh
• 26 October 2004

2
Reading Research Papers

• Selective Attention )
• Or alternatively, selective inattention to the
  details, or less important sections
• Read with a purpose
• Read with questions in mind
• Read Abstract and Conclusion first
• Scan through Figures/Captions first

3
Goals for this Quarter

• CHI Student Poster Submission, OR
• CHI Short Paper if more motivated )

4
Project Milestone 1 -- November 4

• Ideation -- Many designs brainstormed
• sketches with little blurbs
• storyboards
• Evidence why solution you settle on is a good one
• Contextual Inquiry?
• Other evidence?
• What goals does your interface serve?
• See list from last Thursday (efficiency, safety,
  control)
• Describe a user value hypothesis, based on
  above
• Propose a method to evaluate that hypothesis
• Email this to cs376_at_cs.stanford.edu

5
Best Practices for Designing Interfaces

• Iterative design
• Getting it right the first time is hard
• Prototyping tools can be the key to success

Test
Design
Analyze
6
Outline

• Informal user interfaces
• Informal tools for web site design
• Informal tool for speech UI design
• Informal tools for cross-device design

7
Early Stage User Interface Design

• Brainstorming
• put designs in a tangible form
• Incomplete designs
• illustrate important examples
• Sketching other informal representations
  important

8
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

9
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

10
Informal UI Example

• Sketchup Video 2 min

11
Informal Prototyping Evaluation Tools
12
Outline

• Informal user interfaces
• Informal tools for web site design
• Informal tool for speech UI design
• Informal tools for cross-device design

13
Investigation into Web DesignInformation
Architecture Comes First

• Interviews w/ 11 professional designers
• Post-Its large surfaces (i.e., affinity
  diagrams)
• haptic UI
• brainstorming
• collaborative
• persistent
• immersive
• hard to share, edit, make digital

14
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
Mock-ups
15
Sketching
All designers sketched

• ... at all levels

16
Designers OutpostA 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, history, distribution
• hand-off later to other tools

17
DENIM Designing Web Sites by Sketching

• Integrates multiple views
• site map storyboard page sketch
• Supports informal interaction
• sketching,
• recognizes pages links, not content

18
Video
OUTPOST DENIM Videos 3 minutes
19
Outline

• Informal user interfaces
• Informal tools for web site design
• Informal tool for speech UI design
• Informal tools for cross-device design

20
SUEDEInformal Prototyping for Speech-based UIs

• Supports design practice
• example scripts
• Wizard of Oz
• error simulation
• iterative design (design-test-analysis)
• Informal user interface
• no speech recognition or synthesis
• need not be programming expert
• fast fluid design

21
(No Transcript)
22
(No Transcript)
23
Video
SUEDE Video 2 minutes
24
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

25
Outline

• Informal user interfaces
• Informal tools for web site design
• Informal tool for speech UI design
• Informal tools for cross-device design

26
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

27
Web Design Patterns

• 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

28
Pattern Solution

• Captures essence on how to solve problem
• Navigation bar
• Generality of solution fits informal approach!

29
Damask
30
Video
Damask Video 2.5 minutes
31
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 evaluations community
  reaction

32

• Much of this material is based on James Landays
  2002 research overview talk