Topiary: A Tool for Prototyping LocationEnhanced Applications

1
Informal Prototyping of ContinuousGraphical
Interactions by Demonstration
Yang Li James A. Landay Intel Research Seattle
2
Early Stage User Interface Design
informal prototyping tools
design
prototype
evaluate
3
Informal UI Prototyping ToolsStoryboards
Efficient for prototyping discrete aspects
Provide little support for continuous interactions
4
Continuous Graphical Interactions
zoom slider
semantic zooming
drag drop
interactive simulation
scrollbar
graphical design
spring simulation
5
Research Goals and Challenges

• Quick easy prototyping of continuous
  interactions
• Allow freeform sketching and demonstration
• Prototype richer interactions
• Integrate discrete continuous interaction
• Explore new, more dynamic behaviors
• Do not rely on domain knowledge

6
MonetA Tool for Sketching Continuous Interactions
Semantic Zooming
Dial
7
Features of MonetAn Introductory Example

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

8
(No Transcript)
9
Features of MonetDemonstrating Compound Behaviors

• Multiple continuous widgets
• All changing synchronously

10
(No Transcript)
11
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

12
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
13
AlgorithmsDetecting Pivots
14
AlgorithmsLearning States of Interest
Naïve Bayesian Model
States such as hot, cold, comfortable
S
sx
sy
dx
dy
?
Geometric configuration of a widget, xi
15
Our ExperiencePrototyping a Set of Examples

• DragDrop
• Vertical Scrollbar
• Zoomable user interface
• Simulation of the Sine Function

16
Our ExperienceExamples 1 DragDrop
17
Our ExperienceExamples 2 A Vertical Scrollbar
18
Our ExperienceExamples 3 A Zoomable User
Interface
19
Our ExperienceExamples 4 A Simulation of the
Sine Function
20
Conclusion Future Work

• Monet sketch-based tool for continuous
  interactions
• Allows creating continuous behavior by
  demonstration
• Simulates continuous interactions by
  approximation
• Allows embedding continuous widgets into
  storyboards
• Future prototype more continuous behaviors
• Color output, e.g., a color palette
• Time input, e.g., a progress bar or animation

21
Informal Prototyping of ContinuousGraphical
Interactions by Demonstration
Yang Li James A. Landay Intel Research Seattle
http//dub.washington.edu
22
Preliminary User Study of MonetDesign of the
Study

• Five participants
• 3 HCI researchers
• 2 computer scientists with UI development
  experience
• Three tasks from easy to hard covering key
  features
• 1 Prototype a horizontal slider
• 2 Create a spring and a dial moving
  synchronously
• 3 Create a two-level zoomable user interface
• Equipment
• Compaq Tablet PC TC1000

23
Preliminary User Study of 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

24
Our ExperienceExamples 2 A Vertical Scrollbar

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

25
Our ExperienceExamples 2 A Numerical Dial

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

26
Our ExperienceExamples 3 A Zoomable User
Interface

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

27
Our ExperienceExamples 4 A Simulation of the
Sine Function

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

28
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
29
Our ExperienceExamples 2 A Numerical Dial
30
Characteristics of Our Solutions

• Quick easy prototyping of continuous
  interactions
• Allow sketch-based interactions
• Demonstrate continuous interactions
• Integration of discrete continuous interaction
• Specify states of interest of widgets by example
• Embed continuous widgets into storyboard pages
• Does not use domain knowledge
• No built-in continuous behaviors
• Simulates continuous interactions by approximation