Topiary: A Tool for Prototyping LocationEnhanced Applications

1
Informal Prototyping of ContinuousGraphical
Interactions by Demonstration
Yang Li James A. Landay DUB Group University
of Washington Intel Research Seattle
2
Early Stage User Interface Design
Design
Prototype
Evaluate
3
Informal User Interface Prototyping Tools

• Easily input a design
• Combine traditional design metaphors electronic
  media
• Allow designers to focus on key interactions
• Automatically generate testable prototypes
• Provide high level visual languages for
  prototyping
• Quickly get early feedback from users
• Test interactive low-fi prototypes with end users
• Also enable users focus on key interactions

Previous informal prototyping tools provide
little support for continuous interactions
4
Continuous Graphical Interactions
zoom slider
drag drop
scrollbar
graphical design
spring simulation
5
Continuous Graphical Interactions
Semantic zooming
Interactive Math simulation
Hornbæk et al. TOCHI 2002
Hard to prototype by simply using a set of
built-in widgets
6
StoryboardsA Basic Design Metaphor Used by
Previous Tools
Efficient for prototyping discrete aspects
7
Research Goals and Challenges

• Provide a quick and easy way for prototyping
  continuous interactions
• Prototype not only existing continuous behaviors
  but also new more dynamic ones
• Enable seamless integration of discrete and
  continuous interactions
• Allow construction of richer interactions
• Go beyond limitations of using domain knowledge

8
MonetA Tool for Sketching Continuous Interactions
Semantics Zooming
Dial
9
Outline

• Features of Monet
• Algorithms
• Evaluation
• Limitations and Future Work
• Conclusion

10
Features of MonetAn Introductory Example

• Prototype continuous widgets based on samples
• Specify states of interest by example
• Embed continuous widgets into storyboards

11
(No Transcript)
12
Features of MonetDemonstrating Compound Behaviors

• Multiple continuous widgets
• All changing synchronously

13
(No Transcript)
14
Outline

• Features of Monet
• Algorithms
• Evaluation
• Limitation and Future Work
• Conclusion

15
AlgorithmsModeling Continuous Interactions
continuous valued function
geometric configuration
users input
g (sx, sy, dx, dy, ?)
p(x, y)
User Cursor representing the position of a
pointing device on a 2D canvas

16
AlgorithmsApproximating a Continuous Function
continuous valued function
geometric configuration
users input
g (sx, sy, dx, dy, ?)
p(x, y)
weights
p1
g1
FWT - T
p2
g2


pn
gn
17
AlgorithmsDetecting Pivots
18
AlgorithmsDetecting Pivots
Variance of transformed positions
gi
Calculate a point (x', y') with a minimum f
If f(x', y') lt C, a pivot exists for the
continuous widget
19
AlgorithmsLearning States of Interest
States such as hot, cold, comfortable
S
sx
sy
dx
dy
?
Geometric configuration of a widget, xi
20
Characteristics of Our Solutions

• Provide a quick and easy way for prototyping
  continuous interactions
• Allow sketch-based interactions
• Demonstrate continuous interactions
• Enable seamless integration of discrete and
  continuous interactions
• Specify states of interest of widgets by example
• Embed continuous widgets into storyboard pages
• Go beyond limitations of using domain knowledge
• Not really infer a continuous interactions
• Simulate a continuous interaction by approximation

21
Outline

• Features of Monet
• Algorithms
• Evaluation
• Limitation and Future Work
• Conclusion

22
Our ExperiencePrototyping a Set of Examples

• A vertical scrollbar
• A numerical dial
• A zoomable user interface
• A simulation of Sine Function

23
Our ExperienceExamples 1 A Vertical Scrollbar

• Two continuous widgets (used 4 samples in total)
• One compound behavior
• One storyboard page

24
(No Transcript)
25
Our ExperienceExamples 2 A Numerical Dial

• One continuous widget (used 3 samples in total)
• Seven storyboard pages twelve transitions

26
Our ExperienceExamples 2 A Numerical Dial
27
Our ExperienceExamples 3 A Zoomable User
Interface

• Three continuous widgets(used 8 samples in
  total)
• Two compound behaviors
• Two storyboard pages two transitions

28
(No Transcript)
29
Our ExperienceExamples 4 A Simulation of Sine
Function

• Two continuous widgets (used 5 samples in total)
• One compound behavior
• One movement path

30
(No Transcript)
31
Informal User Study on MonetDesign of the Study

• Participants
• Three were HCI researchers and two had UI
  design/development experience
• Three tasks from easy to hard
• 1 Prototype a horizontal slider
• 2 Create a spring and a dial moving
  synchronously
• 3 Create a two-level zoomable user interface
• Settings
• A Compaq Tablet PC TC1000

32
Informal User Study on Monet Results

• Positive feedback on the tool
• Straightforward and easy to use
• Useful for rough UI prototyping as well as
  simulation
• Encourage designing more dynamic interactions
• Two major problems
• Need a clearer division of capabilities in the
  modes
• Lack of feedback when creating compound behaviors
• Areas for improvement

33
Limitations Future Work

• Support more continuous input output
• Color output, e.g., a color palette
• Time input, e.g., a progress bar or animation
• Enable multiple behaviors for a single widget
• Constraints between graphical objects
• Compound behaviors enable some simple constraints
• Hard to specify complex constraints without using
  domain knowledge

34
Conclusion

• Create Monet, a sketch-based tool for prototyping
  continuous interactions by demonstration
• Prototype continuous widgets using samples
• Demonstrate compound behaviors by direct
  manipulation
• Specify states of interests of continuous widgets
  by example
• Embed continuous widgets into storyboards
• Expand the visual language for informal
  prototyping and enable more complete tool support
  for early stage UI design
• Can prototype a set of useful examples
• Informal user testing garnered positive feedback
• Encourage designers to create new ones