How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire...
Transcript of How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire...
![Page 1: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/1.jpg)
Human-Computer Interaction- how to acquire design knowledge -
Prof. dr. Matthias RauterbergFaculty of Technology Management
Technical University EindhovenThe Netherlands
![Page 2: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/2.jpg)
© M. Rauterberg, TU/e 2
What is Human-Computer Interaction about?
systemuser
Working domain
Working system
Goal:Actual Performance=> Desired Performance
![Page 3: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/3.jpg)
© M. Rauterberg, TU/e 3
Interface Design or Interaction Design?
user interaction system
![Page 4: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/4.jpg)
© M. Rauterberg, TU/e 4
HCI Research Line: basic cycle
Design relevantknowledge
[empirical]validation
Interactive systems
synthesisanalysis
![Page 5: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/5.jpg)
© M. Rauterberg, TU/e 5
NUI: The First Round
Tangible interaction
Expert Interview
Digital Desk
![Page 6: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/6.jpg)
© M. Rauterberg, TU/e 6
The Digital Desk from Pierre Wellner in 1991
Pierre Wellner
The DigitalDesk is built around an ordinary physical desk and can be used as such, but it has extra capabilities. A video camera is mounted above the desk, pointing down at the work surface. This camera's output is fed through a system that can detect where the user is pointing (using an LED-tipped pen) and it can recognise the documents that are placed on it. The more advanced version also has a computer-driven projector mounted above the desk enabling electronic objects to be projected onto real paper documents -- removing the burden of having to switch attention between screen and paper and allowing additional user-interaction techniques. [invented and built by Pierre Wellner, Xerox EuroPARC]
Video clip
![Page 7: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/7.jpg)
© M. Rauterberg, TU/e 7
• Perception Space– The physical space where
the user’s attention is.
• Action Space– The physical space where
the user acts in.
• Design Principle:– perception space and action
space must coincide!– “Interlacing the display and
manipulation space”(Djajadiningrat, 1998)
What is a design principle?
![Page 8: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/8.jpg)
© M. Rauterberg, TU/e 8
Natural User Interfaces (NUI):design constrains
No technical equipment inside the body space of the user!
2. design requirement
Perception space and action space must coincide!
1. design requirement
![Page 9: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/9.jpg)
© M. Rauterberg, TU/e 9
NUI: The Second Round
Design principle
Fieldexperiment
Digital Playing Desk
virtual player
real chipvirtual chips
overhead projector
video camera
NEW button
![Page 10: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/10.jpg)
© M. Rauterberg, TU/e 10
Tic-Tac-Toe with four interaction styles
Video clip Video clip Video clip
![Page 11: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/11.jpg)
© M. Rauterberg, TU/e 11
Digital Playing Desk (DPD)
Video clip
![Page 12: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/12.jpg)
© M. Rauterberg, TU/e 12
User Studies with the DPD
Video clip
![Page 13: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/13.jpg)
© M. Rauterberg, TU/e 13
0
50
100
150
200
250
300
350
400
450
500
Cel
l Mea
n fo
r tim
e of
use
r (s)
Cell Line Chart for "playing time"
Grouping Variable(s): Interface type
Error Bars: ± 1 Standard Deviation(s)
CI MI TI DPDP<.001P<.01P<.001
P<.001P<.001
P<.001
Empirical Results: Playing time per game
![Page 14: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/14.jpg)
© M. Rauterberg, TU/e 14
computer win
remis
user win Cell Line Chart for "winning chance"
Grouping Variable(s): Interface type
Error Bars: ± 1 Standard Deviation(s)
CI MI TI DPDP<.001P<.080P<.020
P<.802P<.001
P<.007
Empirical Results : winning chance per dialog technique
![Page 15: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/15.jpg)
© M. Rauterberg, TU/e 15
NUI: The Third Round
User study
Build-It systems
Prop Design
![Page 16: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/16.jpg)
© M. Rauterberg, TU/e 16
The Build-It SystemBichsel, Fjeld & Rauterberg 1997
Video clip
![Page 17: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/17.jpg)
© M. Rauterberg, TU/e 17
18th Century: tool productionThe Build-It tangible props
![Page 18: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/18.jpg)
© M. Rauterberg, TU/e 18
NUI interaction props: user study
Props design factors:form, size, material and metaphor:
•An experiment was carried out to explore different design strategies.
•Tasks were based on initial planning of an interior architecture.
•Focus of the experiment was subjective opinion (n=12) about the bricks.
•The bricks were ranked by user performance before (first number) and after(second number) task solving activity.
![Page 19: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/19.jpg)
© M. Rauterberg, TU/e 19
NUI: The Fourth Round
Experiment
Build-It systems
Navigation Design
![Page 20: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/20.jpg)
© M. Rauterberg, TU/e 20
The Build-It SystemFjeld, Bichsel & Rauterberg 2001
Video clip
![Page 21: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/21.jpg)
© M. Rauterberg, TU/e 21
Navigation Design: experimental results
Dependent variable: Trial completion time (tct) Plan view method: No significant effect.
Side view method: Scene Handling (SH: tct=150 s) gave better performance than View Handling (VH: tct=183 s).
Other effects: Trial (learning effect) and task had a significant effect.
![Page 22: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/22.jpg)
© M. Rauterberg, TU/e 22
NUI: The Fifth Round
Experiment
VIP system
3D interaction
![Page 23: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/23.jpg)
© M. Rauterberg, TU/e 23
VIP: tangible interaction propsAliakseyeu, Martens, Subramaniam & Rauterberg 2002
Video clip
![Page 24: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/24.jpg)
© M. Rauterberg, TU/e 24
Further Developments• Empirical validation
• Additional interaction techniques, e.g. speech input
• full 3D interaction possibilities
• video conferencing functionality for distributed cooperation
![Page 25: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/25.jpg)
© M. Rauterberg, TU/e 25
GUI versus NUI interaction modelsUllmer & Ishii, 2000
model
control view
INPUT OUTPUT
physical
digitalmodel
control Non graspablerepresentation
graspablerepresentation
INPUT / OUTPUT
![Page 26: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/26.jpg)
© M. Rauterberg, TU/e 26
Design Metaphors
Channel
Tool
Substitute
long time ago 2000 history
![Page 27: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/27.jpg)
© M. Rauterberg, TU/e 27
Trend in Interface Design
0
50
100
150
1970-1990 1990-2010 2010-
SW controlsHW controls
![Page 28: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/28.jpg)
© M. Rauterberg, TU/e 28
time1900 2000
mechanical style
electronic style
mechatronic style
![Page 29: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/29.jpg)
© M. Rauterberg, TU/e 29
time1900 2000
mechanical style
electronic style
mechatronic styleactive forms(smart memory alloys)
given forms(ubiquituous computing)
channel forms(e.g. PC, TV, Radio, etc)
connected forms(ambient intelligence)
dedicated form(e.g. typewriter, etc))
Design trends
![Page 30: How to acquire HCI knowledge - idemployee.id.tue.nl · Human-Computer Interaction-how to acquire design knowledge -Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical](https://reader030.fdocuments.in/reader030/viewer/2022041012/5ebdcbcd4099c357843fc749/html5/thumbnails/30.jpg)
© M. Rauterberg, TU/e 30
Thank you for your attention
More athttp://www.ipo.tue.nl/homepages/mrauterb/