how to acquire hci knowledge - idemployee.id.tue.nl · human-computer interaction-how to acquire...

30
Human-Computer Interaction - how to acquire design knowledge - Prof. dr. Matthias Rauterberg Faculty of Technology Management Technical University Eindhoven The Netherlands

Upload: others

Post on 15-May-2020

4 views

Category:

Documents


0 download

TRANSCRIPT

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

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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© M. Rauterberg, TU/e 30

Thank you for your attention

More athttp://www.ipo.tue.nl/homepages/mrauterb/