Topiary: A Tool for Prototyping Location- Enhanced Applications University of California, Berkeley Carnegie Mellon University Intel Research Seattle, DUB Group, University of Washington Yang Li Jason Hong James Landay
Jan 27, 2015
Topiary: A Tool for Prototyping Location-Enhanced Applications
University of California, Berkeley
Carnegie Mellon University
Intel Research Seattle,DUB Group, University of Washington
Yang Li
Jason Hong
James Landay
April 10, 2023 UIST04 2
Location-Enhanced Applications
• Provide useful services by leveraging knowledge about the location of people, places, & things– Examples: AT&T’s Find Friends service, Tour
Guide
AT&T Find Friends Ekahau
April 10, 2023 UIST04 3
Problems Building Location-Enhanced Apps
• Require a high level of technical expertise to build– Sensing technologies are complex – Location-to-place inference necessary to make useful
• Hard to prototype, evaluate, & iterate on designs – Several toolkits for developers– No tools for interaction designers
• Cannot be tested with end-users until built
April 10, 2023 UIST04 4
Goal of Topiary
• Lower the barrier to entry– For interaction designers
• Speed up iterative design process– No application or infrastructure
development required
• Get early feedback from users– Make major changes when
inexpensive
Allow interaction designers to quickly prototype & test location-enhanced applications
April 10, 2023 UIST04 5
Location Design Tasks & Challenges
• Modeling location contexts – Enable exploration of a wider input space than keyboard &
mouse– e.g., “when Alice enters the library”, “when Alice is near Bob”
• Specifying location-enhanced behaviors – Interaction sequences integrating both explicit input (e.g.,
click) & implicit input (e.g., location contexts)– e.g., “Show the library map when Alice is in the library”
• Testing a design in realistic situations– Settings often in the field & mobile with changing contextual
input– e.g., “Give a user a PDA and let them walk across campus”
April 10, 2023 UIST04 6
A Quick View of Topiary
April 10, 2023 UIST04 8
Outline
• Motivation• Active Map Workspace• Storyboard Workspace• Test Workspace• Evaluation• Conclusion & Future Work
April 10, 2023 UIST04 9
ActiveMap WorkspaceModeling Location contexts
• Model a geographical area– Import a map image as background
• Create entities on the map– People, places & things
• Capture scenarios– Scenario producer tool captures scenarios
describing contexts
April 10, 2023 UIST04 10
ActiveMap WorkspaceModeling Location contexts
April 10, 2023 UIST04 11
ActiveMap WorkspaceModeling Location Contexts
Contexts Type Examples
near / far Proximity Alice is near the library
moves near / away
Proximity Alice moves away from Bob
in / out Presence Bob is in the parking lot
enters / exits Presence Alice leaves her office
ActiveMap workspace gives designers a visual languagefor specifying these contexts
April 10, 2023 UIST04 12
Scenarios
• Represent a collection of location contexts
• Used as triggers & conditions for specifying location-enhanced interactions
ScenarioAlice meets Carol in the Parking Lot
Contexts
Alice is in the Parking Lot
Carol is in the Parking Lot
Alice moves near Carol
April 10, 2023 UIST04 13
Capturing Scenarios
April 10, 2023 UIST04 15
Abstracting Scenarios
April 10, 2023 UIST04 16
Outline
• Motivation• Active Map Workspace• Storyboard Workspace• Test Workspace• Evaluation• Conclusion & Future Work
April 10, 2023 UIST04 17
Storyboard WorkspaceLocation-Enhanced Interactions
ActionsExplicit Input
Location-enhanced interactions
Scenarios
conditionstriggers
Traditional UI Interactions
April 10, 2023 UIST04 18
Storyboard WorkspaceSpecifying Location-Enhanced Interactions
• Similar to traditional storyboards– Pages & links (e.g., DENIM, SILK & DEMAIS)
• Different from traditional storyboards– Explicit & implicit links
• scenarios as conditions for explicit links • scenarios as automatic triggers for implicit links
– Can incorporate context components
April 10, 2023 UIST04 19
Storyboard WorkspaceExplicit & Implicit Links
April 10, 2023 UIST04 20
Storyboard WorkspaceContext Components
1. Display spatial & temporal information2. Encapsulate common location-enhanced
interactions3. Enable continuous interactions
Five context components:Active Map componentDistance componentNearest Entities componentLocation componentTemporal component
April 10, 2023 UIST04 21
Storyboard WorkspaceContext Components
April 10, 2023 UIST04 22
Storyboard WorkspaceContext Components – Active Map Component
April 10, 2023 UIST04 23
Storyboard WorkspaceContext Components
April 10, 2023 UIST04 24
Storyboard WorkspaceContext Components – Nearest Entities Component
April 10, 2023 UIST04 25
Outline
• Motivation• Active Map Workspace• Storyboard Workspace• Test Workspace• Evaluation• Conclusion and Future Work
April 10, 2023 UIST04 26
Test WorkspaceTesting & Analyzing a Design
End-user UI Wizard UI
April 10, 2023 UIST04 27
Test WorkspaceTesting & Analyzing a Design
April 10, 2023 UIST04 29
Outline
• Active Map Workspace• Storyboard Workspace• Test Workspace• Evaluation• Conclusion and Future Work
April 10, 2023 UIST04 30
Evaluation #1An informal evaluation on an early implementation
• Settings– an IBM T20 ThinkPad with a 700MHz CPU, 512MB RAM,
14 inch display, & a Wacom Graphire tablet
• Tasks– create a tour guide for either Berkeley or San Francisco
• Participants– 2 ubicomp researchers, 3 professional UI designers, & 2
undergraduate students who took a UI design course
• Results– Gave positive feedback & areas for improvement.
Resulted in• Storyboard Analysis Window• Zooming to support large designs
April 10, 2023 UIST04 31
Evaluation #2Our Experience – Applications we prototyped using Topiary
• Riddle-based “Geo-caching”• Tour guide & nearest friend finder• Context-aware reminder• Searching for available meeting rooms• In/Out board• Thing finder• Car navigation• Conference Guide
April 10, 2023 UIST04 32
Evaluation #3Our Experience – From prototypes to a real application
Made four designs in three hours
Made a new design in 1 hour
Tested with three people in the field
Built the real application in 2 weeks
Tested with three people in the field
Informal Prototyping of Tour Guide Informal prototypeThe real application
Region of possible location
Trajectorytrail
Path to target
April 10, 2023 UIST04 33
Future Work
• Modeling the ambiguity of sensor data• Enabling more kinds of contextual
information• Improving the scalability of storyboards
• Further evaluating Topiary– being used by students in both undergraduate &
graduate courses at UW & CMU this term
April 10, 2023 UIST04 34
Conclusion
Topiary is the first tool for interface designers to rapidly prototype location-enhanced applications
– Demonstrate location contexts via an Active Map
– Specify location-enhanced behaviors via enhanced storyboards
– Test & analyze a design using either Wizard of Oz or sensor input
Topiary: A Tool for Prototyping Location-Enhanced Applications
Download available at:http://dub.washington.edu/
topiary