Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape http://www.idiap.ch/uist2006/ Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape en Tue, 17 Oct 2006 00:00:00 +0200 no Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, and Masking Tape Scott Hudson and Jennifer Mankoff HCI Institute Camegie Mellon University Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, and Masking Tape Scott Hudson and Jennifer Mankoff HCI Institute Camegie Mellon University Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, and Masking Tape Scott Hudson and Jennifer Mankoff HCI Institute Camegie Mellon University 00:00:12 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Rapid Prototyping Benefits of rapid iteration in early design are well known Tools have provided this in the GUI world It s now possible to very rapidly create and change functioning interfaces Exemplar Silk Landay 95 Fluidity is key Lightweight, fast, easy, disposable Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Rapid Prototyping Benefits of rapid iteration in early design are well known Tools have provided this in the GUI world It s now possible to very rapidly create and change functioning interfaces Exemplar Silk Landay 95 Fluidity is key Lightweight, fast, easy, disposable Rapid Prototyping Benefits of rapid iteration in early design are well known Tools have provided this in the GUI world It s now possible to very rapidly create and change functioning interfaces Exemplar Silk Landay 95 Fluidity is key Lightweight, fast, easy, disposable 00:00:47 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University But for devices we hit a wall. In prototyping physical U Is we are faced with a situation much like the eady GUI days Days or weeks of work from a person with specialized skills e.g. EE to get to functioning Ul Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 But for devices we hit a wall. In prototyping physical U Is we are faced with a situation much like the eady GUI days Days or weeks of work from a person with specialized skills e.g. EE to get to functioning Ul But for devices we hit a wall. In prototyping physical U Is we are faced with a situation much like the eady GUI days Days or weeks of work from a person with specialized skills e.g. EE to get to functioning Ul 00:00:31 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University But for devices we hit a wall. In prototyping physical UIs we are faced with a situation much like the eady GUI days Days or weeks of work from a person with specialized skills e.g. EE to get to functioning Ul Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 But for devices we hit a wall. In prototyping physical UIs we are faced with a situation much like the eady GUI days Days or weeks of work from a person with specialized skills e.g. EE to get to functioning Ul But for devices we hit a wall. In prototyping physical UIs we are faced with a situation much like the eady GUI days Days or weeks of work from a person with specialized skills e.g. EE to get to functioning Ul 00:00:47 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Central goals Build I modify interfaces manifested in very rough physical forms in seconds Rapid physical sketching Target Interaction Product Designers No new programming language, etc. to learn Reuse of existing tools and applications Tradeoffs all made to favor these goals Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Central goals Build I modify interfaces manifested in very rough physical forms in seconds Rapid physical sketching Target Interaction Product Designers No new programming language, etc. to learn Reuse of existing tools and applications Tradeoffs all made to favor these goals Central goals Build I modify interfaces manifested in very rough physical forms in seconds Rapid physical sketching Target Interaction Product Designers No new programming language, etc. to learn Reuse of existing tools and applications Tradeoffs all made to favor these goals 00:01:36 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University What we Built BOXES Building Objects for eXploring Executable Sketches A system to create functioning physical prototypes using cardboard, thumbtacks, foil, and tape Common and simple objects Lightweight and obviously disposable Typical use scenario Cut a shape from cardboard Add thumbtacks for touch sensitive buttons Possibly with foil patches andor covered by tape and labeled Attach to electronic sensing component Specify actions on existing or Designer supplied GUI Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 What we Built BOXES Building Objects for eXploring Executable Sketches A system to create functioning physical prototypes using cardboard, thumbtacks, foil, and tape Common and simple objects Lightweight and obviously disposable Typical use scenario Cut a shape from cardboard Add thumbtacks for touch sensitive buttons Possibly with foil patches andor covered by tape and labeled Attach to electronic sensing component Specify actions on existing or Designer supplied GUI What we Built BOXES Building Objects for eXploring Executable Sketches A system to create functioning physical prototypes using cardboard, thumbtacks, foil, and tape Common and simple objects Lightweight and obviously disposable Typical use scenario Cut a shape from cardboard Add thumbtacks for touch sensitive buttons Possibly with foil patches andor covered by tape and labeled Attach to electronic sensing component Specify actions on existing or Designer supplied GUI 00:02:25 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Video Demo Part of a hand held music player Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Video Demo Part of a hand held music player Video Demo Part of a hand held music player 00:00:13 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Vi File Edit Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Vi File Edit Vi File Edit 00:00:48 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 00:00:26 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Setting Thumbtack 1 to stop Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Setting Thumbtack 1 to stop Setting Thumbtack 1 to stop 00:00:12 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University File Edit Wrlow Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 File Edit Wrlow File Edit Wrlow 00:00:20 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University File Edit Window Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 File Edit Window File Edit Window 00:00:05 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University PowerPouqt Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 PowerPouqt PowerPouqt 00:00:08 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Video Demo Part of a hand held music player Small functioning prototype in 140 elapsed time Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Video Demo Part of a hand held music player Small functioning prototype in 140 elapsed time Video Demo Part of a hand held music player Small functioning prototype in 140 elapsed time 00:00:25 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University System Components- Two Parts Hardware small sensor board Detect touch of thumbtacks foil pads Convey to software side on PC Software Cutter interface Invoke interface action on nearly any existing programs via simulated user action Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 System Components- Two Parts Hardware small sensor board Detect touch of thumbtacks foil pads Convey to software side on PC Software Cutter interface Invoke interface action on nearly any existing programs via simulated user action System Components- Two Parts Hardware small sensor board Detect touch of thumbtacks foil pads Convey to software side on PC Software Cutter interface Invoke interface action on nearly any existing programs via simulated user action 00:01:04 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Hardware Sensor Board Small 50mm x 27mm custom circuit board Small form factor is important Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Hardware Sensor Board Small 50mm x 27mm custom circuit board Small form factor is important Hardware Sensor Board Small 50mm x 27mm custom circuit board Small form factor is important 00:00:35 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Hardware Sensor Board Small 50mm x 27mm custom circuit board Low parts cost Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Hardware Sensor Board Small 50mm x 27mm custom circuit board Low parts cost Hardware Sensor Board Small 50mm x 27mm custom circuit board Low parts cost 00:00:18 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Hardware Sensor Board Small 50mm x 27mm custom circuit board Low parts cost PIC pcontroller resonator 9 capacitors Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Hardware Sensor Board Small 50mm x 27mm custom circuit board Low parts cost PIC pcontroller resonator 9 capacitors Hardware Sensor Board Small 50mm x 27mm custom circuit board Low parts cost PIC pcontroller resonator 9 capacitors 00:00:04 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape 00:00:28 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Hardware Sensor Board Implements 8 capacitive touch sensors Single wire to clip attached to thumbtack Single kind of simple attachment important to fluidityV Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Hardware Sensor Board Implements 8 capacitive touch sensors Single wire to clip attached to thumbtack Single kind of simple attachment important to fluidityV Hardware Sensor Board Implements 8 capacitive touch sensors Single wire to clip attached to thumbtack Single kind of simple attachment important to fluidityV 00:00:42 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Software Cutter Interface Act via simulated input to programs on PC Events injected in input stream Java Robot API Delivered to targets at selected screen regions Existing programs, or for more sophisticated things, Apps created by Designers in their tool s of choice Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Software Cutter Interface Act via simulated input to programs on PC Events injected in input stream Java Robot API Delivered to targets at selected screen regions Existing programs, or for more sophisticated things, Apps created by Designers in their tool s of choice Software Cutter Interface Act via simulated input to programs on PC Events injected in input stream Java Robot API Delivered to targets at selected screen regions Existing programs, or for more sophisticated things, Apps created by Designers in their tool s of choice 00:01:21 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Software Cutter Interface Thumbtack Button Responses Thumbtack 1 Small simple and quick interface for specifying mapping from thumbtack pressrelease to mouse keyboard events Similar to WinCuts Fan 04 Snip Hutchings 04 also F aades later this session Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Software Cutter Interface Thumbtack Button Responses Thumbtack 1 Small simple and quick interface for specifying mapping from thumbtack pressrelease to mouse keyboard events Similar to WinCuts Fan 04 Snip Hutchings 04 also F aades later this session Software Cutter Interface Thumbtack Button Responses Thumbtack 1 Small simple and quick interface for specifying mapping from thumbtack pressrelease to mouse keyboard events Similar to WinCuts Fan 04 Snip Hutchings 04 also F aades later this session 00:00:41 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Software Cutter Interface Thumbtack Button Responses Thumbtack 1 List of inputs are generated Press of Thumbtack 1 Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Software Cutter Interface Thumbtack Button Responses Thumbtack 1 List of inputs are generated Press of Thumbtack 1 Software Cutter Interface Thumbtack Button Responses Thumbtack 1 List of inputs are generated Press of Thumbtack 1 00:00:13 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Software Cutter Interface Thumbtack Button Responses Thumbtack I What events get produced A mouse click, key presses, and double click Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Software Cutter Interface Thumbtack Button Responses Thumbtack I What events get produced A mouse click, key presses, and double click Software Cutter Interface Thumbtack Button Responses Thumbtack I What events get produced A mouse click, key presses, and double click 00:00:10 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Software Cutter Interface Thumbtack Button Responses Thumbtack 1 Where each event is delivered Screen cuffing image for context Bottom line very quick and easy Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Software Cutter Interface Thumbtack Button Responses Thumbtack 1 Where each event is delivered Screen cuffing image for context Bottom line very quick and easy Software Cutter Interface Thumbtack Button Responses Thumbtack 1 Where each event is delivered Screen cuffing image for context Bottom line very quick and easy 00:00:12 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Our iterative development process Requirements from ethnographic work in our prior HW TK projects Avrahami 02 Lee 04 Use of early prototype before system complete Preliminary think-aloud evaluations Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Our iterative development process Requirements from ethnographic work in our prior HW TK projects Avrahami 02 Lee 04 Use of early prototype before system complete Preliminary think-aloud evaluations Our iterative development process Requirements from ethnographic work in our prior HW TK projects Avrahami 02 Lee 04 Use of early prototype before system complete Preliminary think-aloud evaluations 00:00:53 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Think-Aloud Evaluations Set simple task Music player interface Designers took a range of approaches e.g. form first vs. function first And created a variety of results Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Think-Aloud Evaluations Set simple task Music player interface Designers took a range of approaches e.g. form first vs. function first And created a variety of results Think-Aloud Evaluations Set simple task Music player interface Designers took a range of approaches e.g. form first vs. function first And created a variety of results 00:00:46 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Think-Aloud Evaluations Some small usability problems but all Designers were able to very rapidly create functioning prototypes Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Think-Aloud Evaluations Some small usability problems but all Designers were able to very rapidly create functioning prototypes Think-Aloud Evaluations Some small usability problems but all Designers were able to very rapidly create functioning prototypes 00:00:38 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Think-Aloud Evaluations Desugners wrth background un form makung waRted-me-materials esp. foam Some wanted a bit more expressiveness on GUi Side Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Think-Aloud Evaluations Desugners wrth background un form makung waRted-me-materials esp. foam Some wanted a bit more expressiveness on GUi Side Think-Aloud Evaluations Desugners wrth background un form makung waRted-me-materials esp. foam Some wanted a bit more expressiveness on GUi Side 00:01:21 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Summary Functioning physical prototypes from common and easy to manipulate materials Cardboard, thumbtacks, foil, and tape. Two part system Small custom hardware sensor Simple PC-side Cutter interface Achieved goal to make creation of simple prototypes in seconds Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Summary Functioning physical prototypes from common and easy to manipulate materials Cardboard, thumbtacks, foil, and tape. Two part system Small custom hardware sensor Simple PC-side Cutter interface Achieved goal to make creation of simple prototypes in seconds Summary Functioning physical prototypes from common and easy to manipulate materials Cardboard, thumbtacks, foil, and tape. Two part system Small custom hardware sensor Simple PC-side Cutter interface Achieved goal to make creation of simple prototypes in seconds 00:00:40 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Limitations and Future work We explicitly chose an extreme point on the tradeoff scale to get maximum fluidity As simple a possible Very small One simple kind of connection Simplest materials But to do this we introduced compromises Only one user actuation type button press Display on PC only Limited simulated interaction e.g. no drag on PC Key Future work Going beyond this without sacrificing fluidity Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Limitations and Future work We explicitly chose an extreme point on the tradeoff scale to get maximum fluidity As simple a possible Very small One simple kind of connection Simplest materials But to do this we introduced compromises Only one user actuation type button press Display on PC only Limited simulated interaction e.g. no drag on PC Key Future work Going beyond this without sacrificing fluidity Limitations and Future work We explicitly chose an extreme point on the tradeoff scale to get maximum fluidity As simple a possible Very small One simple kind of connection Simplest materials But to do this we introduced compromises Only one user actuation type button press Display on PC only Limited simulated interaction e.g. no drag on PC Key Future work Going beyond this without sacrificing fluidity 00:01:17 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Thanks to our sponsors Funded in part by Intel and IBM, and the National Science Foundation under grants IIS-0121560, IIS-032535, IIS-0205644 and IIS-0511895. Questions Contact httpscotthudson.com Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Thanks to our sponsors Funded in part by Intel and IBM, and the National Science Foundation under grants IIS-0121560, IIS-032535, IIS-0205644 and IIS-0511895. Questions Contact httpscotthudson.com Thanks to our sponsors Funded in part by Intel and IBM, and the National Science Foundation under grants IIS-0121560, IIS-032535, IIS-0205644 and IIS-0511895. Questions Contact httpscotthudson.com 00:04:12 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape 00:00:25 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University STANFORD HCI GROUP UIST 2006 Reflective physical prototyping through integrated design, test, and analysis Bj6m i-lath harm. Scoff R. Klemmer. Hichaet Bemsten. Leith Abdulla, Brandon Burr, A vi Robinson-Mosher, Jennifer Gee Monreux, Switzerland 18 October 2006 http hci stanford edu Wed, 18 Oct 2006 00:00:00 +0200 Rapid Construction of Functioning Physical Interfaces from Cardboard, Thumbtacks, Tin Foil and Masking Tape SCIENCE > 2006 STANFORD HCI GROUP UIST 2006 Reflective physical prototyping through integrated design, test, and analysis Bj6m i-lath harm. Scoff R. Klemmer. Hichaet Bemsten. Leith Abdulla, Brandon Burr, A vi Robinson-Mosher, Jennifer Gee Monreux, Switzerland 18 October 2006 http hci stanford edu STANFORD HCI GROUP UIST 2006 Reflective physical prototyping through integrated design, test, and analysis Bj6m i-lath harm. Scoff R. Klemmer. Hichaet Bemsten. Leith Abdulla, Brandon Burr, A vi Robinson-Mosher, Jennifer Gee Monreux, Switzerland 18 October 2006 http hci stanford edu 00:01:10 no Scott Hudson, Jennifer Mankoff, Carnegie Mellon University