SlideShare ist ein Scribd-Unternehmen logo
1 von 35
Topiary: A Tool forPrototyping
Location-Enhanced Applications
University of California, Berkeley
Carnegie Mellon University
Intel Research Seattle,
DUB Group, University of Washington
Yang Li
Jason Hong
James Landay
July 15, 2013 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
July 15, 2013 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
July 15, 2013 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
July 15, 2013 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”
July 15, 2013 UIST04 6
A QuickView of Topiary
July 15, 2013 UIST04 8
Outline
• Motivation
• Active Map Workspace
• Storyboard Workspace
• Test Workspace
• Evaluation
• Conclusion & Future Work
July 15, 2013 UIST04 9
ActiveMap Workspace
Mo de ling Lo catio n co nte xts
• 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
July 15, 2013 UIST04 10
ActiveMap Workspace
Mo de ling Lo catio n co nte xts
July 15, 2013 UIST04 11
ActiveMap Workspace
Mo de ling Lo catio n Co nte xts
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 language
for specifying these contexts
July 15, 2013 UIST04 12
Scenarios
• Represent a collection of location contexts
• Used as triggers & conditions for specifying
location-enhanced interactions
Scenario Alicemeets CarolintheParkingLot
Contexts
Alice is in the Parking Lo t
Caro lis in the Parking Lo t
Alice m o ve s ne ar Caro l
July 15, 2013 UIST04 13
Capturing Scenarios
July 15, 2013 UIST04 15
Abstracting Scenarios
July 15, 2013 UIST04 16
Outline
• Motivation
• Active Map Workspace
• Storyboard Workspace
• Test Workspace
• Evaluation
• Conclusion & Future Work
July 15, 2013 UIST04 17
Storyboard Workspace
Lo catio n-Enhance d Inte ractio ns
ActionsExplicit Input
Location-enhanced interactions
Scenarios
conditions
triggers
Traditional UI Interactions
July 15, 2013 UIST04 18
Storyboard Workspace
Spe cifying Lo catio n-Enhance d Inte ractio ns
• Similar to traditional storyboards
– Pages & links (e.g., DENIM, SILK & DEMAIS)
• Different from traditional storyboards
– Explicit & implicit links
• scenarios as co nditio ns for explicit links
• scenarios as auto m atic trig g e rs for implicit links
– Can incorporate context components
July 15, 2013 UIST04 19
Storyboard Workspace
Explicit & Im plicit Links
July 15, 2013 UIST04 20
Storyboard Workspace
Co nte xt Co m po ne nts
1. Display spatial & temporal information
2. Encapsulate common location-enhanced interactions
3. Enable continuous interactions
Five context components:
Active Map component
Distance component
Nearest Entities component
Location component
Temporal component
July 15, 2013 UIST04 21
Storyboard Workspace
Co nte xt Co m po ne nts
July 15, 2013 UIST04 22
Storyboard Workspace
Co nte xt Co m po ne nts – Active Map Co m po ne nt
July 15, 2013 UIST04 23
Storyboard Workspace
Co nte xt Co m po ne nts
July 15, 2013 UIST04 24
Storyboard Workspace
Co nte xt Co m po ne nts – Ne are st Entitie s Co m po ne nt
July 15, 2013 UIST04 25
Outline
• Motivation
• Active Map Workspace
• Storyboard Workspace
• Test Workspace
• Evaluation
• Conclusion and Future Work
July 15, 2013 UIST04 26
Test Workspace
Te sting & Analyzing a De sig n
End-userUI Wizard UI
July 15, 2013 UIST04 27
Test Workspace
Te sting & Analyzing a De sig n
July 15, 2013 UIST04 29
Outline
• Active Map Workspace
• Storyboard Workspace
• Test Workspace
• Evaluation
• Conclusion and Future Work
July 15, 2013 UIST04 30
Evaluation #1
An info rm ale valuatio n o n an e arly im ple m e ntatio n
• 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
July 15, 2013 UIST04 31
Evaluation #2
O ur Expe rie nce – Applicatio ns we pro to type d using To piary
• 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
July 15, 2013 UIST04 32
Evaluation #3
O ur Expe rie nce – Fro m pro to type s to a re alapplicatio n
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
Trajectory
trail
Path to target
July 15, 2013 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
July 15, 2013 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 forPrototyping
Location-Enhanced Applications
Download available at:
http://dub.washington.edu/topiary

Weitere ähnliche Inhalte

Ă„hnlich wie Topiary: A Tool for Prototyping Location-Enhanced Applications, at UIST 2004

SIC Finale Status Report August 6.pptx
SIC Finale Status Report August 6.pptxSIC Finale Status Report August 6.pptx
SIC Finale Status Report August 6.pptx
Shaista Ansari
 
Lecture 3 needs assessment
Lecture 3   needs assessmentLecture 3   needs assessment
Lecture 3 needs assessment
yihongyuan19
 

Ă„hnlich wie Topiary: A Tool for Prototyping Location-Enhanced Applications, at UIST 2004 (20)

A Method for Detecting Behavior-Based User Profiles in Collaborative Ontology...
A Method for Detecting Behavior-Based User Profiles in Collaborative Ontology...A Method for Detecting Behavior-Based User Profiles in Collaborative Ontology...
A Method for Detecting Behavior-Based User Profiles in Collaborative Ontology...
 
Unit 1_22MCA21T_F.ppt
Unit 1_22MCA21T_F.pptUnit 1_22MCA21T_F.ppt
Unit 1_22MCA21T_F.ppt
 
UX Crash Course for Startup UCLA
UX Crash Course for Startup UCLAUX Crash Course for Startup UCLA
UX Crash Course for Startup UCLA
 
Lecture 2.pptx
Lecture 2.pptxLecture 2.pptx
Lecture 2.pptx
 
Fitting a square peg in a round hole
Fitting a square peg in a round holeFitting a square peg in a round hole
Fitting a square peg in a round hole
 
Sharing Novel Data Sources to Promote Innovation Through Collaboration: Case ...
Sharing Novel Data Sources to Promote Innovation Through Collaboration: Case ...Sharing Novel Data Sources to Promote Innovation Through Collaboration: Case ...
Sharing Novel Data Sources to Promote Innovation Through Collaboration: Case ...
 
Sharing Novel Data Sources to Promote Innovation through Collaboration: Case ...
Sharing Novel Data Sources to Promote Innovation through Collaboration: Case ...Sharing Novel Data Sources to Promote Innovation through Collaboration: Case ...
Sharing Novel Data Sources to Promote Innovation through Collaboration: Case ...
 
Not venturini enter_2013
Not venturini enter_2013Not venturini enter_2013
Not venturini enter_2013
 
SIC Finale Status Report August 6.pptx
SIC Finale Status Report August 6.pptxSIC Finale Status Report August 6.pptx
SIC Finale Status Report August 6.pptx
 
C(ollab) RITE: How to run impactful iterative studies in a fast paced environ...
C(ollab) RITE: How to run impactful iterative studies in a fast paced environ...C(ollab) RITE: How to run impactful iterative studies in a fast paced environ...
C(ollab) RITE: How to run impactful iterative studies in a fast paced environ...
 
Creating Personal Profiles Across Time and Distance
Creating Personal Profiles Across Time and DistanceCreating Personal Profiles Across Time and Distance
Creating Personal Profiles Across Time and Distance
 
Customizing Discovery Interfaces: Understanding Users’ Behaviors and Providin...
Customizing Discovery Interfaces: Understanding Users’ Behaviors and Providin...Customizing Discovery Interfaces: Understanding Users’ Behaviors and Providin...
Customizing Discovery Interfaces: Understanding Users’ Behaviors and Providin...
 
AmI 2015 - Design Process
AmI 2015 - Design ProcessAmI 2015 - Design Process
AmI 2015 - Design Process
 
Using Mobile-D methodology in development of mobile applications: Challenges ...
Using Mobile-D methodology in development of mobile applications: Challenges ...Using Mobile-D methodology in development of mobile applications: Challenges ...
Using Mobile-D methodology in development of mobile applications: Challenges ...
 
Payel ux portfolio
Payel ux portfolioPayel ux portfolio
Payel ux portfolio
 
Local plans alpha - weeknotes w/e 10 April
Local plans alpha - weeknotes w/e 10 AprilLocal plans alpha - weeknotes w/e 10 April
Local plans alpha - weeknotes w/e 10 April
 
All in 1
All in 1All in 1
All in 1
 
Lecture 3 needs assessment
Lecture 3   needs assessmentLecture 3   needs assessment
Lecture 3 needs assessment
 
2015-11-11 research seminar
2015-11-11 research seminar2015-11-11 research seminar
2015-11-11 research seminar
 
Building a Solid Foundation: Usability & Information Architecture WIAD Tampa ...
Building a Solid Foundation: Usability & Information Architecture WIAD Tampa ...Building a Solid Foundation: Usability & Information Architecture WIAD Tampa ...
Building a Solid Foundation: Usability & Information Architecture WIAD Tampa ...
 

KĂĽrzlich hochgeladen

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

KĂĽrzlich hochgeladen (20)

Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 

Topiary: A Tool for Prototyping Location-Enhanced Applications, at UIST 2004

  • 1. Topiary: A Tool forPrototyping Location-Enhanced Applications University of California, Berkeley Carnegie Mellon University Intel Research Seattle, DUB Group, University of Washington Yang Li Jason Hong James Landay
  • 2. July 15, 2013 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
  • 3. July 15, 2013 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
  • 4. July 15, 2013 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
  • 5. July 15, 2013 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”
  • 6. July 15, 2013 UIST04 6 A QuickView of Topiary
  • 7.
  • 8. July 15, 2013 UIST04 8 Outline • Motivation • Active Map Workspace • Storyboard Workspace • Test Workspace • Evaluation • Conclusion & Future Work
  • 9. July 15, 2013 UIST04 9 ActiveMap Workspace Mo de ling Lo catio n co nte xts • 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
  • 10. July 15, 2013 UIST04 10 ActiveMap Workspace Mo de ling Lo catio n co nte xts
  • 11. July 15, 2013 UIST04 11 ActiveMap Workspace Mo de ling Lo catio n Co nte xts 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 language for specifying these contexts
  • 12. July 15, 2013 UIST04 12 Scenarios • Represent a collection of location contexts • Used as triggers & conditions for specifying location-enhanced interactions Scenario Alicemeets CarolintheParkingLot Contexts Alice is in the Parking Lo t Caro lis in the Parking Lo t Alice m o ve s ne ar Caro l
  • 13. July 15, 2013 UIST04 13 Capturing Scenarios
  • 14.
  • 15. July 15, 2013 UIST04 15 Abstracting Scenarios
  • 16. July 15, 2013 UIST04 16 Outline • Motivation • Active Map Workspace • Storyboard Workspace • Test Workspace • Evaluation • Conclusion & Future Work
  • 17. July 15, 2013 UIST04 17 Storyboard Workspace Lo catio n-Enhance d Inte ractio ns ActionsExplicit Input Location-enhanced interactions Scenarios conditions triggers Traditional UI Interactions
  • 18. July 15, 2013 UIST04 18 Storyboard Workspace Spe cifying Lo catio n-Enhance d Inte ractio ns • Similar to traditional storyboards – Pages & links (e.g., DENIM, SILK & DEMAIS) • Different from traditional storyboards – Explicit & implicit links • scenarios as co nditio ns for explicit links • scenarios as auto m atic trig g e rs for implicit links – Can incorporate context components
  • 19. July 15, 2013 UIST04 19 Storyboard Workspace Explicit & Im plicit Links
  • 20. July 15, 2013 UIST04 20 Storyboard Workspace Co nte xt Co m po ne nts 1. Display spatial & temporal information 2. Encapsulate common location-enhanced interactions 3. Enable continuous interactions Five context components: Active Map component Distance component Nearest Entities component Location component Temporal component
  • 21. July 15, 2013 UIST04 21 Storyboard Workspace Co nte xt Co m po ne nts
  • 22. July 15, 2013 UIST04 22 Storyboard Workspace Co nte xt Co m po ne nts – Active Map Co m po ne nt
  • 23. July 15, 2013 UIST04 23 Storyboard Workspace Co nte xt Co m po ne nts
  • 24. July 15, 2013 UIST04 24 Storyboard Workspace Co nte xt Co m po ne nts – Ne are st Entitie s Co m po ne nt
  • 25. July 15, 2013 UIST04 25 Outline • Motivation • Active Map Workspace • Storyboard Workspace • Test Workspace • Evaluation • Conclusion and Future Work
  • 26. July 15, 2013 UIST04 26 Test Workspace Te sting & Analyzing a De sig n End-userUI Wizard UI
  • 27. July 15, 2013 UIST04 27 Test Workspace Te sting & Analyzing a De sig n
  • 28.
  • 29. July 15, 2013 UIST04 29 Outline • Active Map Workspace • Storyboard Workspace • Test Workspace • Evaluation • Conclusion and Future Work
  • 30. July 15, 2013 UIST04 30 Evaluation #1 An info rm ale valuatio n o n an e arly im ple m e ntatio n • 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
  • 31. July 15, 2013 UIST04 31 Evaluation #2 O ur Expe rie nce – Applicatio ns we pro to type d using To piary • 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
  • 32. July 15, 2013 UIST04 32 Evaluation #3 O ur Expe rie nce – Fro m pro to type s to a re alapplicatio n 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 Trajectory trail Path to target
  • 33. July 15, 2013 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
  • 34. July 15, 2013 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
  • 35. Topiary: A Tool forPrototyping Location-Enhanced Applications Download available at: http://dub.washington.edu/topiary