Informal Tools for Designing Anywhere, Anytime, Anydevice User Interfaces

1
Informal Tools for Designing Anywhere, Anytime,
Anydevice User Interfaces

• James A. Landay
• Jack Chen, Katie Everitt, Jason Hong,
• Scott Klemmer, Jimmy Lin, Chris Long,
• Mark Newman, Anoop Sinha,
• Miriam Walker, Sarah Waterson
• UC Berkeley
• _at_ University of Toronto, February 4, 2003

2
Best Practices for Designing Interfaces

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

3
Early Stage User Interface Design

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

4
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

5
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

6
Informal Prototyping Evaluation Tools
7
Outline

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

8
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

9
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
10
Sketching

• All designers sketched

• ... at all levels

11
Two Informal Web Design Tools Informed by
Designers Practices

• Designers Outpost
• information architecture

• DENIM
• navigation/interaction design

12
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
• Has an informal user interface
• only recognizes where notes are, not what is on
  them

13
(No Transcript)
14
Two Informal Web Design Tools Informed by
Designers Practices

• Designers Outpost
• information architecture

• DENIM
• navigation/interaction design

15
DENIM Designing Web Sites by Sketching

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

16
DENIM Video
17
Effectiveness of Informal Prototypes

• Experiment 1 informal vs. formal prototypes
• task-based usability test of 2 similar Web sites
• 16 participants (each used 2 sites, one informal
  one formal)
• results
• same usability problems found with both
  representations
• informal reps rated more likely to change -gt may
  encourage feedback
• Experiment 2 separating fidelity (informal vs.
  formal) from medium (paper vs. computer)
• task-based usability test of 2 similar Web sites
• 28 participants
• each used 2 sites, one in each medium, either
  both formal or both informal
• results
• same number of usability problems found in all
  conditions

18
Effectiveness of Informal Prototypes

• Implications of these experiments
• can start testing in the very early stages of
  design start getting feedback
• can get additional benefits of electronic tools
  like DENIM without losing benefits of paper

19
DENIM Summary

• DENIM supports web design practice
• from initial information architecture to testing
• integrated multiple views
• informal sketching UI

• Downloaded over 12,000 times
• get at http//guir.berkeley.edu/denim

20
Outline

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

21
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

22
(No Transcript)
23
(No Transcript)
24
(No Transcript)
25
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 900 times in the last 2 years
• now in use at several companies for designing
  telephone-based speech UIs
• Download at http//guir.berkeley.edu/suede

26
Outline

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

27
Design in the Pervasive Computing Era

• Future computing devices wont 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

• How does one design for this environment?
• What will these interfaces look like?

28
One Vision of Future User Interfaces

• Star Trek style UI
• verbally ask the computer for information
• may be common in mobile/hands-busy situations
• problem hard to design, build, use!
• requires perfect speech recognition language
  understanding

29
Our Vision of Future User Interfaces

• Multimodal, Context-aware UIs
• multimodal
• uses multiple input modalities (speech gesture)
  to disambiguate
• user says move it to this screen while pointing
• context-aware
• apps can be aware of location, user, what they
  are doing,
• people are talking -gt dont rely on speech I/O
• Problem how to prototype test new ideas?
• Informal UI Design Tools!
• combine Wizard of Oz informal storyboarding

30
Improvisational Multimodal Theater
31
Approach Programming by Illustration Design
Patterns

• Infer/specify models using informal designs
• model is an abstraction of applications UI
  design
• says what the high level behavior should be use
  to
• semi-automatically generate UIs for diff devices
• dynamically adapt apps UI to changing context
• Programming by Illustration
• give examples of high level behavior for
  different modalities
• Design patterns
• select general solutions for cross-device
  behaviors

32
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

33
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

34
Pattern Examples
35
Pattern Solution

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

First-level navigation
Second-level navigation
36
Damask Using Patterns for Cross Device UI Design

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

37
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
38
Damask Using Patterns for Cross Device UI Design

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

39
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

40
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 cart Cell-phone version
41
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)
• Positive results from evaluations community
  reaction

42
Informal Tools for Designing Anywhere, Anytime,
Anydevice User Interfaces

• Prof. James A. Landay
• EECS Department, UC Berkeley
• http//guir.berkeley.edu