enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile...
TRANSCRIPT
![Page 1: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/1.jpg)
Enhancing the interaction spaceof a tabletop computing system
to design paper prototypesfor mobile applications
Master ThesisFrancesco Bonadiman
2016
![Page 2: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/2.jpg)
Introduction
1
![Page 3: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/3.jpg)
Blended Prototyping
● tabletop system based on hand-drawn paper sketches
2
![Page 4: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/4.jpg)
Blended Prototyping
● tabletop system based on hand-drawn paper sketches
○ converted into digital versions→ projected on the table→ expanded further
2
![Page 5: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/5.jpg)
● tabletop system based on hand-drawn paper sketches
○ converted into digital versions→ projected on the table→ expanded further
○ transformed into testable applications→ on a mobile device
Blended Prototyping
2
![Page 6: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/6.jpg)
● tabletop system based on hand-drawn paper sketches
○ converted into digital versions→ projected on the table→ expanded further
○ transformed into testable applications→ on a mobile device
● enhances development of mobile applications○ accelerates early design phases
Blended Prototyping
2
![Page 7: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/7.jpg)
Hardware
● video projector
○ projects mobile frames & prototypes
3
![Page 8: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/8.jpg)
Hardware
● video projector
○ projects mobile frames & prototypes
● webcam
○ recognizes barcodes of screens
3
![Page 9: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/9.jpg)
Hardware
● video projector
○ projects mobile frames & prototypes
● webcam
○ recognizes barcodes of screens
● DSLR camera
○ shoots HQ pics of the sketches
3
![Page 10: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/10.jpg)
Hardware
● video projector
○ projects mobile frames & prototypes
● webcam
○ recognizes barcodes of screens
● DSLR camera
○ shoots HQ pics of the sketches
● tablet
○ allows to perform actions on the prototypes
3
![Page 11: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/11.jpg)
Software
● Java application
○ controls behavior of projector & cameras
4
![Page 12: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/12.jpg)
Software
● Java application
○ controls behavior of projector & cameras
○ identifies barcode markers on paper sheets
4
![Page 13: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/13.jpg)
Software
● Java application
○ controls behavior of projector & cameras
○ identifies barcode markers on paper sheets
○ digitize sketches & perform actions on them
4
![Page 14: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/14.jpg)
Software
● Java application
○ controls behavior of projector & cameras
○ identifies barcode markers on paper sheets
○ digitize sketches & perform actions on them
● Barcode (similar to QR-code)
○ wider → optimized for webcam
○ gives sheet’s position & rotation on table
4
![Page 15: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/15.jpg)
Context
5
![Page 16: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/16.jpg)
Advantages of Paper Prototyping
● potential of Paper-Prototyping & mobile devices = combined
6
![Page 17: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/17.jpg)
Advantages of Paper Prototyping
● potential of Paper-Prototyping & mobile devices = combined
● first impression of not-yet-developed product
6
![Page 18: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/18.jpg)
Advantages of Paper Prototyping
● potential of Paper-Prototyping & mobile devices = combined
● first impression of not-yet-developed product
● paper → cheap, fast & intuitive (Snyder)
○ no unimportant details → iterative refinement (Nielsen)
6
![Page 19: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/19.jpg)
Advantages of Paper Prototyping
● potential of Paper-Prototyping & mobile devices = combined
● first impression of not-yet-developed product
● paper → cheap, fast & intuitive (Snyder)
○ no unimportant details → iterative refinement (Nielsen)
○ quickly create multiple design alternatives (Landay)
6
![Page 20: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/20.jpg)
Advantages of Paper Prototyping
● potential of Paper-Prototyping & mobile devices = combined
● first impression of not-yet-developed product
● paper → cheap, fast & intuitive (Snyder)
○ no unimportant details → iterative refinement (Nielsen)
○ quickly create multiple design alternatives (Landay)
● same usability issues as Hi-Fi discovered
○ benefits of early usability data = 10+ times bigger (Snyder)
6
![Page 21: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/21.jpg)
● encourages collaboration & critiques →
interdisciplinary & creative (no “gaps”)
Advantages of the System
7
![Page 22: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/22.jpg)
● encourages collaboration & critiques →
interdisciplinary & creative (no “gaps”)
● testing within real-life scenarios (de Sá / Carriço)
→ in thousand of different usage conditions
Advantages of the System
7
![Page 23: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/23.jpg)
● encourages collaboration & critiques →
interdisciplinary & creative (no “gaps”)
● testing within real-life scenarios (de Sá / Carriço)
→ in thousand of different usage conditions
● add code & functionalities
○ define dynamic interface behavior
○ smooth transition to development
Advantages of the System
7
![Page 24: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/24.jpg)
Core features
Via TABLET → Determine widgets & semantics
8
![Page 25: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/25.jpg)
Core features
Via TABLET → Determine widgets & semantics
● manually define “hotspots” on prototype
● turn these into different design patterns
8
![Page 26: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/26.jpg)
Core features
Via TABLET → Determine widgets & semantics
● manually define “hotspots” on prototype
● turn these into different design patterns
● create links between the prototypes
● remove components & connections
8
![Page 27: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/27.jpg)
Core features
Via TABLET → Determine widgets & semantics
● manually define “hotspots” on prototype
● turn these into different design patterns
● create links between the prototypes
● remove components & connections
● convert into working code
8
![Page 28: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/28.jpg)
Problem
● several devices + media → different degrees of fidelity
○ paper & office supplies → computers & smart objects
9
![Page 29: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/29.jpg)
Problem
● several devices + media → different degrees of fidelity
○ paper & office supplies → computers & smart objects
BUT
9
![Page 30: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/30.jpg)
Problem
● several devices + media → different degrees of fidelity
○ paper & office supplies → computers & smart objects
BUTChanging fidelity of tool & modality of interaction
→ disrupts creative design process
9
![Page 31: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/31.jpg)
Problem
● several devices + media → different degrees of fidelity
○ paper & office supplies → computers & smart objects
BUTChanging fidelity of tool & modality of interaction
→ disrupts creative design process
→ shifting continuously confuses users
9
![Page 32: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/32.jpg)
Fidelity Clash
● combination of low- & high-tech solutions = puzzling
10
![Page 33: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/33.jpg)
Fidelity Clash
● combination of low- & high-tech solutions = puzzling
○ one single user stops ideation process
→ to perform any action
10
![Page 34: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/34.jpg)
Fidelity Clash
● combination of low- & high-tech solutions = puzzling
○ one single user stops ideation process
→ to perform any action
○ breaking of collaborative & creative moment (Snyder)
10
![Page 35: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/35.jpg)
Fidelity Clash
● combination of low- & high-tech solutions = puzzling
○ one single user stops ideation process
→ to perform any action
○ breaking of collaborative & creative moment (Snyder)
● users distracted → do not interact anymore
○ get unfocused → lose the “flow”
10
![Page 36: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/36.jpg)
Fidelity Clash
● combination of low- & high-tech solutions = puzzling
○ one single user stops ideation process
→ to perform any action
○ breaking of collaborative & creative moment (Snyder)
● users distracted → do not interact anymore
○ get unfocused → lose the “flow”
→ perceived as too technical, isolating & distracting
10
![Page 37: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/37.jpg)
Objectives
● replace high-tech interactions with low-tech approaches
11
![Page 38: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/38.jpg)
Objectives
● replace high-tech interactions with low-tech approaches
● new interaction techniques → not to shift fidelity of media
11
![Page 39: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/39.jpg)
Objectives
● replace high-tech interactions with low-tech approaches
● new interaction techniques → not to shift fidelity of media
THEN
11
![Page 40: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/40.jpg)
Objectives
● replace high-tech interactions with low-tech approaches
● new interaction techniques → not to shift fidelity of media
THEN● find & implement alternative solutions to tablet
11
![Page 41: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/41.jpg)
Objectives
● replace high-tech interactions with low-tech approaches
● new interaction techniques → not to shift fidelity of media
THEN● find & implement alternative solutions to tablet
● low-tech approaches to define “hotspots” & perform actions
○ keep interaction techniques learnable & usable
11
![Page 42: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/42.jpg)
Enhanced System
12
![Page 43: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/43.jpg)
Tasks
1. digitize a screen by taking a picture
13
![Page 44: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/44.jpg)
Tasks
1. digitize a screen by taking a picture
2. duplicate a whole screen
13
![Page 45: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/45.jpg)
Tasks
1. digitize a screen by taking a picture
2. duplicate a whole screen
3. detect a component (button, image or textbox)
13
![Page 46: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/46.jpg)
Tasks
1. digitize a screen by taking a picture
2. duplicate a whole screen
3. detect a component (button, image or textbox)
4. connect two screens (link a button to next screen)
13
![Page 47: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/47.jpg)
Tasks
1. digitize a screen by taking a picture
2. duplicate a whole screen
3. detect a component (button, image or textbox)
4. connect two screens (link a button to next screen)
5. remove a component from a screen
13
![Page 48: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/48.jpg)
Tasks
1. digitize a screen by taking a picture
2. duplicate a whole screen
3. detect a component (button, image or textbox)
4. connect two screens (link a button to next screen)
5. remove a component from a screen
6. remove a connection between two screens
13
![Page 49: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/49.jpg)
Tasks
1. digitize a screen by taking a picture
2. duplicate a whole screen
3. detect a component (button, image or textbox)
4. connect two screens (link a button to next screen)
5. remove a component from a screen
6. remove a connection between two screens
7. remove a whole screen
13
![Page 50: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/50.jpg)
Alternatives considered
● Voice recognition
● Object recognition
● Gesture recognition
● Special pen
● Special button
● Colored objects
● Barcode recognition
● Transparent layers
14
![Page 51: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/51.jpg)
Alternatives considered
● Voice recognition
● Object recognition
● Gesture recognition
● Special pen
● Special button
● Colored objects
● Barcode recognition
● Transparent layers
● most approaches = unfeasible
○ noisy / confusing environment
○ need of not-yet-existing hardware
○ time constraints
14
![Page 52: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/52.jpg)
Color Detection
A
BarcodeRecognition
B15
![Page 53: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/53.jpg)
A. Color Detection
● no specific hardware
● dynamic & “playful” interaction
16
![Page 54: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/54.jpg)
A. Color Detection
● no specific hardware
● dynamic & “playful” interaction
Concept: different color = different component
16
![Page 55: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/55.jpg)
A. Color Detection
● no specific hardware
● dynamic & “playful” interaction
Concept: different color = different component
→ colored markers + semi-transparent BBPapier
→ users can see through without “ruining” sketches
16
![Page 56: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/56.jpg)
A. Color Detection
● no specific hardware
● dynamic & “playful” interaction
Concept: different color = different component
→ colored markers + semi-transparent BBPapier
→ users can see through without “ruining” sketches
→ JavaCV & OpenCV
16
![Page 57: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/57.jpg)
→ Procedure
● control card = “toolbox” → paint with markers● same color → fill up the chosen component
17
![Page 58: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/58.jpg)
→ Procedure
● control card = “toolbox” → paint with markers● same color → fill up the chosen component
● digitize the sketch → creating threshold○ average color in toolbox → range (+30/-30)○ exterior pixels discarded → central values
→ avoid mistakes & colors overlapping
17
![Page 59: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/59.jpg)
→ Procedure
● control card = “toolbox” → paint with markers● same color → fill up the chosen component
● digitize the sketch → creating threshold○ average color in toolbox → range (+30/-30)○ exterior pixels discarded → central values
→ avoid mistakes & colors overlapping
● threshold = calculate component’s RGB value● any pixel within → associated to specific UI component
17
![Page 60: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/60.jpg)
→ Approximation
Once pixels & colors detected
● algorithm recognizes contours of shape
● approximates it to a rectangle
● component created & projected
18
![Page 61: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/61.jpg)
→ Approximation
Once pixels & colors detected
● algorithm recognizes contours of shape
● approximates it to a rectangle
● component created & projected
Need for filling component
● algorithm not efficient only for outline
● rough drawings typical of sketching
18
![Page 62: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/62.jpg)
B. Barcode Recognition
Barcode marker = tool for specific operations
19
![Page 63: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/63.jpg)
B. Barcode Recognition
Barcode marker = tool for specific operations
● take pictures of device
● connect screens
● recognize & delete components
● copy screens
19
![Page 64: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/64.jpg)
B. Barcode Recognition
Barcode marker = tool for specific operations
● take pictures of device
● connect screens
● recognize & delete components
● copy screens
Algorithm continuously running
→ checks if new barcodes are detected
19
![Page 65: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/65.jpg)
→ Tools
20
![Page 66: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/66.jpg)
Further improvements
Sidebar → alternative approach for some functionalities
21
![Page 67: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/67.jpg)
Further improvements
Sidebar → alternative approach for some functionalities● rectangular transparent area + at top of table● if barcode placed inside → operation performed
21
![Page 68: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/68.jpg)
Further improvements
Sidebar → alternative approach for some functionalities● rectangular transparent area + at top of table● if barcode placed inside → operation performed
Clock (progress indicator) → added onto center-top area
21
![Page 69: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/69.jpg)
Further improvements
Sidebar → alternative approach for some functionalities● rectangular transparent area + at top of table● if barcode placed inside → operation performed
Clock (progress indicator) → added onto center-top area● immediate visual feedback to users● if appears → users realize they are performing an action
21
![Page 70: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/70.jpg)
Further improvements
Sidebar → alternative approach for some functionalities● rectangular transparent area + at top of table● if barcode placed inside → operation performed
Clock (progress indicator) → added onto center-top area● immediate visual feedback to users● if appears → users realize they are performing an action
● 3 seconds = time-frame users might change their mind→ effective to avoid accidental mistakes
21
![Page 71: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/71.jpg)
Evaluation
22
![Page 72: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/72.jpg)
Modality A: Sidebar
● digitize a screen → taking a picture
○ by placing single barcode inside
23
![Page 73: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/73.jpg)
Modality A: Sidebar
● digitize a screen → taking a picture
○ by placing single barcode inside
● duplicate a screen
○ by placing two barcodes inside
○ one is already digitized (source)
○ one is empty (destination)
23
![Page 74: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/74.jpg)
Modality A: Colors
● toolbox projected
→ boxes for button, image, textbox…
24
![Page 75: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/75.jpg)
Modality A: Colors
● toolbox projected
→ boxes for button, image, textbox…
● BBPapier over toolbox → paint with color
● same color → BBPapier over component
24
![Page 76: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/76.jpg)
Modality A: Colors
● toolbox projected
→ boxes for button, image, textbox…
● BBPapier over toolbox → paint with color
● same color → BBPapier over component
● digitize screen with toolbox visible on table
→ colored square displayed to represent component
24
![Page 77: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/77.jpg)
Modality A: Colors
To connect two screens
● same + use FROM → TO box
To delete component → digitize again
● physically remove colored BBPapier
● or cover it with white paper
To remove connection
● same with button-connector
25
![Page 78: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/78.jpg)
Modality B
● camera tool to digitize
● copy tool to duplicate
● handles to detect component
● arrow tool to connect screens
● rubber tool to delete○ component○ connection○ screen (only way)
26
![Page 79: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/79.jpg)
Dependent Variables
● measure overall success of new interaction techniques
○ if quick & easy-to-use without distracting user
○ which of the two modalities = most effective
27
![Page 80: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/80.jpg)
Dependent Variables
● measure overall success of new interaction techniques
○ if quick & easy-to-use without distracting user
○ which of the two modalities = most effective
● prove if efficient & offers satisfactory user-experience
27
![Page 81: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/81.jpg)
Dependent Variables
● measure overall success of new interaction techniques
○ if quick & easy-to-use without distracting user
○ which of the two modalities = most effective
● prove if efficient & offers satisfactory user-experience
4 parameters:
→ Quickness → Ease-of-use → Distraction → User-Experience
27
![Page 82: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/82.jpg)
Quickness & Ease-of-Use
Quickness
● time for task completion
● evaluation is videotaped
28
![Page 83: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/83.jpg)
Quickness & Ease-of-Use
Quickness
● time for task completion
● evaluation is videotaped
● Effective Time
○ duration of task
→ without system errors
→ avoids malfunctionings
28
![Page 84: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/84.jpg)
Quickness & Ease-of-Use
Quickness
● time for task completion
● evaluation is videotaped
● Effective Time
○ duration of task
→ without system errors
→ avoids malfunctionings
Ease-of-use
● % successfully completed tasks
● ratio calculated by checking interactions executed perfectly
28
![Page 85: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/85.jpg)
Quickness & Ease-of-Use
Quickness
● time for task completion
● evaluation is videotaped
● Effective Time
○ duration of task
→ without system errors
→ avoids malfunctionings
Ease-of-use
● % successfully completed tasks
● ratio calculated by checking interactions executed perfectly
○ users make no mistakes
○ no significant problems
○ not need any help / hint
28
![Page 86: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/86.jpg)
Distraction
Two factors: quickness & workload index (RTLX)
● unweighted (Raw) version of NASA Task Load Index (TLX)
● 6 subscales:
○ Mental, Physical, Temporal Demand; Performance; Effort; Frustration
29
![Page 87: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/87.jpg)
Distraction
Two factors: quickness & workload index (RTLX)
● unweighted (Raw) version of NASA Task Load Index (TLX)
● 6 subscales:
○ Mental, Physical, Temporal Demand; Performance; Effort; Frustration
● own survey → filled in by users after every task
● 7-points linear scales → then averaged = RTLX
● the lower → the less demanding & distracting task is
29
![Page 88: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/88.jpg)
User-Experience
● dimensions of AttrakDiff Survey → studies by Hassenzahl
○ “how users rate the usability and design of your interactive product”
30
![Page 89: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/89.jpg)
User-Experience
● dimensions of AttrakDiff Survey → studies by Hassenzahl
○ “how users rate the usability and design of your interactive product”
● own custom version → filled in after finishing whole study
● 28 7-points semantic differential scales
○ opposite adjectives at both poles ("good - bad" / "human - technical")
○ implicitly divided into 4 dimensions (Pragmatic Quality, Hedonic Quality - Identity, Hedonic Quality - Stimulation, Attractiveness)
30
![Page 90: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/90.jpg)
Independent Variables
● Task: 1 to 7
● Modality: A | B
● Group: AB | BA
● Area of expertise: HCI | IT | Other
● Sketching familiarity: 1 to 5
● Mobile familiarity: 1 to 5
● Tabletop use: Yes | No
● Lighting conditions: Day | Night
31
![Page 91: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/91.jpg)
Experiment Design
● two different design solutions → A/B Testing
● “within-subject” design → every user tests both versions
○ no interactions in common → no influence
32
![Page 92: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/92.jpg)
Experiment Design
● two different design solutions → A/B Testing
● “within-subject” design → every user tests both versions
○ no interactions in common → no influence
● to avoid possible bias = AB & BA groups
32
![Page 93: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/93.jpg)
User Demographics
● one user at a time → focus on interactions
○ easier to observe & more difficult to get biased
33
![Page 94: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/94.jpg)
User Demographics
● one user at a time → focus on interactions
○ easier to observe & more difficult to get biased
● 24 participants → 11 females & 13 males
● half aged 18-24, 10 aged 25-34, two older
● 7 background in HCI, 8 IT, rest other expertise
● via Facebook groups & personal connections
● reward = tasty gift or house utensils
33
![Page 95: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/95.jpg)
Analysis of the Results
34
![Page 96: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/96.jpg)
Results
● reviewed videos from GoPro
● investigate how long took users to complete tasks
● detect when they had troubles & needed help
35
![Page 97: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/97.jpg)
Results
● reviewed videos from GoPro
● investigate how long took users to complete tasks
● detect when they had troubles & needed help
● SPSS → ONE-WAY ANOVA test
○ ideal for type of Dependent Variables (continuous)
○ valid for any group of users of study
○ robust to violations in underlying assumptions
35
![Page 98: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/98.jpg)
Quickness
● Modality B faster than Modality A
○ time for A = 40.1s, B only 23.25s
○ statistically significant (p < .05)
36
![Page 99: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/99.jpg)
Quickness
● Modality B faster than Modality A
○ time for A = 40.1s, B only 23.25s
○ statistically significant (p < .05)
● Effective Time (without system errors)
○ time for A = 29.24s, B only 18.38s
○ statistically significant (p < .05)
36
![Page 100: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/100.jpg)
Quickness
● Modality B faster than Modality A
○ time for A = 40.1s, B only 23.25s
○ statistically significant (p < .05)
● Effective Time (without system errors)
○ time for A = 29.24s, B only 18.38s
○ statistically significant (p < .05)
→ color detection = long process
36
![Page 101: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/101.jpg)
Ease-of-use
● Modality A easier to use than B
37
![Page 102: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/102.jpg)
Ease-of-use
● Modality A easier to use than B
● perfectly accomplished tasks:
○ ratio: A = 84%, B = 60%
○ statistically significant (p < .05)
37
![Page 103: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/103.jpg)
Distraction
● A almost as demanding as B
○ A RTLX index = 1.90
○ B RTLX index = 1.84
38
![Page 104: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/104.jpg)
Distraction
● A almost as demanding as B
○ A RTLX index = 1.90
○ B RTLX index = 1.84
● On a 7-points scale →
not statistically significant
(F1,286 = 0.289, p = 0.591)
38
![Page 105: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/105.jpg)
User-Experience
● users feel “assisted by the product”
○ usability can be improved
39
![Page 106: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/106.jpg)
User-Experience
● users feel “assisted by the product”
○ usability can be improved
● users are “stimulated by the product”
○ users can identify with it
○ room for hedonic improvement
39
![Page 107: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/107.jpg)
User-Experience
● users feel “assisted by the product”
○ usability can be improved
● users are “stimulated by the product”
○ users can identify with it
○ room for hedonic improvement
● system considered as “rather desired”
○ attractiveness above average
39
![Page 108: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/108.jpg)
Single Tasks Analysis
40
![Page 109: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/109.jpg)
Task 1 Analysis
● sidebar (A) better
○ faster
○ easier to use
○ less demanding
41
![Page 110: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/110.jpg)
Task 1 Analysis
● sidebar (A) better
○ faster
○ easier to use
○ less demanding
● camera tool slower
○ no clue on how /
where to place it
41
![Page 111: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/111.jpg)
Task 2 Analysis
● sidebar (A)
○ easier to use
42
![Page 112: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/112.jpg)
Task 2 Analysis
● sidebar (A)
○ easier to use
○ faster (only E.T.)
○ causes several
system errors →
see later
42
![Page 113: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/113.jpg)
Task 2 Analysis
● sidebar (A)
○ easier to use
○ faster (only E.T.)
○ causes several
system errors →
see later
● RTLX == copy tool
42
![Page 114: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/114.jpg)
Task 3 Analysis
● handles (B)
○ faster
○ less demanding
○ easier to use
43
![Page 115: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/115.jpg)
Task 3 Analysis
● handles (B)
○ faster
○ less demanding
○ easier to use
● color detection
○ 3 tasks in one
○ digitize + create
43
![Page 116: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/116.jpg)
Task 4 Analysis
● arrow (B)
○ faster
○ less demanding
44
![Page 117: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/117.jpg)
Task 4 Analysis
● arrow (B)
○ faster
○ less demanding
○ where?
44
![Page 118: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/118.jpg)
Task 4 Analysis
● arrow (B)
○ faster
○ less demanding
○ where?
● color detection
○ easier to use
○ create + connect
44
![Page 119: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/119.jpg)
Task 5 Analysis
● rubber (B)
○ faster (only E.T.)
45
![Page 120: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/120.jpg)
Task 5 Analysis
● rubber (B)
○ faster (only E.T.)
○ bug found!
45
![Page 121: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/121.jpg)
Task 5 Analysis
● rubber (B)
○ faster (only E.T.)
○ bug found!
● color detection (A)
○ easier to use
○ less demanding
○ more accurate
45
![Page 122: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/122.jpg)
Task 6 Analysis
● rubber (B)
○ faster
○ less demanding
46
![Page 123: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/123.jpg)
Task 6 Analysis
● rubber (B)
○ faster
○ less demanding
● color detection (A)
○ easier to use
○ experience?
46
![Page 124: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/124.jpg)
Interesting facts
● people with background in HCI
→ performed more easily & faster
● good sketching abilities
→ same + found system more attractive
47
![Page 125: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/125.jpg)
Interesting facts
● people with background in HCI
→ performed more easily & faster
● good sketching abilities
→ same + found system more attractive
● people familiar with mobile devices
→ faster + system less distracting
47
![Page 126: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/126.jpg)
Interesting facts
● people with background in HCI
→ performed more easily & faster
● good sketching abilities
→ same + found system more attractive
● people familiar with mobile devices
→ faster + system less distracting
● during day-time → better performance & lower RTLX
47
![Page 127: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/127.jpg)
Considerations
● accuracy = ratio of task’s precision
○ global accuracy = 86%
○ color detection = 67%
→ more delicate + error-prone
48
![Page 128: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/128.jpg)
Considerations
● accuracy = ratio of task’s precision
○ global accuracy = 86%
○ color detection = 67%
→ more delicate + error-prone
● barcodes + hands into digitized image → distraction + inexperience
48
![Page 129: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/129.jpg)
Considerations
● accuracy = ratio of task’s precision
○ global accuracy = 86%
○ color detection = 67%
→ more delicate + error-prone
● barcodes + hands into digitized image → distraction + inexperience
● if BBPapier wavy → grey area projected
○ projector’s brightness → shadow (“ghost shape”)
48
![Page 130: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/130.jpg)
Projector’s beam
● when toolbox at sides of projection → outer areas appear darker
○ either no color is detected
○ “fake” grey color recognized → multiple components created
49
![Page 131: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/131.jpg)
Projector’s beam
● when toolbox at sides of projection → outer areas appear darker
○ either no color is detected
○ “fake” grey color recognized → multiple components created
● most system errors
○ excessively intense light causing reflections on table
49
![Page 132: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/132.jpg)
Projector’s beam
● when toolbox at sides of projection → outer areas appear darker
○ either no color is detected
○ “fake” grey color recognized → multiple components created
● most system errors
○ excessively intense light causing reflections on table→ closest barcodes could not be detected→ devices continuously refreshing
49
![Page 133: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/133.jpg)
Projector’s beam
● when toolbox at sides of projection → outer areas appear darker
○ either no color is detected
○ “fake” grey color recognized → multiple components created
● most system errors
○ excessively intense light causing reflections on table→ closest barcodes could not be detected→ devices continuously refreshing
○ “effective time” → task completed if interaction is correct
49
![Page 134: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/134.jpg)
Conclusions
50
![Page 135: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/135.jpg)
Which better?
51
![Page 136: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/136.jpg)
Which better?
● color detection (A)
○ easier to use
○ takes longer time
51
![Page 137: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/137.jpg)
Which better?
● color detection (A)
○ easier to use
○ takes longer time
● barcode recognition (B)
○ definitely faster
○ harder to understand
51
![Page 138: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/138.jpg)
Which better?
● color detection (A)
○ easier to use
○ takes longer time
● barcode recognition (B)
○ definitely faster
○ harder to understand
● both have similar workload
○ around 1.9 out of 7
○ positively low →
not too distracting51
![Page 139: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/139.jpg)
Ideal implementation
1-2. sidebar → digitize & duplicate screens
52
![Page 140: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/140.jpg)
Ideal implementation
1-2. sidebar → digitize & duplicate screens
2. copy tool too → duplicate without moving papers
52
![Page 141: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/141.jpg)
Ideal implementation
1-2. sidebar → digitize & duplicate screens
2. copy tool too → duplicate without moving papers
3-4. both approaches to detect components & create connections
a. color detection = from scratch + multiple tasks at same time
52
![Page 142: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/142.jpg)
Ideal implementation
1-2. sidebar → digitize & duplicate screens
2. copy tool too → duplicate without moving papers
3-4. both approaches to detect components & create connections
a. color detection = from scratch + multiple tasks at same time
b. handles & arrow = fast & easy-to-use
52
![Page 143: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/143.jpg)
Ideal implementation
1-2. sidebar → digitize & duplicate screens
2. copy tool too → duplicate without moving papers
3-4. both approaches to detect components & create connections
a. color detection = from scratch + multiple tasks at same time
b. handles & arrow = fast & easy-to-use
5-6-7. rubber tool to remove components, connections & screens
→ implement separate ones to avoid possible mistakes
52
![Page 144: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/144.jpg)
Future Work
● visual feedback when projections disappear from table
53
![Page 145: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/145.jpg)
Future Work
● visual feedback when projections disappear from table
● icon near clock → tells which action is being performed
53
![Page 146: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/146.jpg)
Future Work
● visual feedback when projections disappear from table
● icon near clock → tells which action is being performed
● exploring color detection further
○ better algorithms to calculate the threshold
○ better ways to detect shapes through contours
53
![Page 147: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/147.jpg)
Future Work
● visual feedback when projections disappear from table
● icon near clock → tells which action is being performed
● exploring color detection further
○ better algorithms to calculate the threshold
○ better ways to detect shapes through contours
● barcodes = built with wood / opaque plastic → reduce reflections
53
![Page 148: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/148.jpg)
Future Work
● visual feedback when projections disappear from table
● icon near clock → tells which action is being performed
● exploring color detection further
○ better algorithms to calculate the threshold
○ better ways to detect shapes through contours
● barcodes = built with wood / opaque plastic → reduce reflections
● compare interaction techniques with original system
53
![Page 149: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/149.jpg)
Future Work
● visual feedback when projections disappear from table
● icon near clock → tells which action is being performed
● exploring color detection further
○ better algorithms to calculate the threshold
○ better ways to detect shapes through contours
● barcodes = built with wood / opaque plastic → reduce reflections
● compare interaction techniques with original system
● test system in real-life scenario → inside company or startup53
![Page 150: Enhancing the interaction space of a tabletop computing system to design paper prototypes for mobile applications](https://reader031.vdocument.in/reader031/viewer/2022030300/5881a8da1a28ab1a398b6ed9/html5/thumbnails/150.jpg)
Thanks!Any questions?
images from pixabay.com & papers by Bähr