September 18, 2014 LECTURE 5liacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L05.pdf• physical...

LECTURE 5COMPUTER PERIPHERALS

INTERACTION MODELS

September 18, 2014

human computer interaction 2014, fjv 1

Recapitulation Lecture #4

• Knowledge representation

• Mental Models, definitions

• Mental Models and Design

• Schemata, definitions & examples

• Metaphors, definitions & examples

• Introduction of key principle: Visibility


Mismatched Metaphore


Functional ~ Structural

• Physical sectioning of an object

• Reconstructing the sections to 3D object

• Metaphor: section is represented by image:

– Image has a thickness

– All domains in that image have same thickness

– Builds up a model of the object

• Mental Model:

– How does the biologist look at this model

– How does the CS look at this model

4human computer interaction 2014, fjv

Example from the Workbench


Metaphor Example (1)

• King Harald Blåtand was a legendary 10th

century Viking king who unified Scandinavian

countries (N + DK):

– succeeded people talk to each other

– taken up by ICT industry as metaphor for wireless

technology uniting technology, communication

and consumer electronics.

• Blåtand

6

= Blue tooth

human computer interaction 2014, fjv

• Harald Blåtand (HB) continued policy of his father

• King of Denmark, then Norway

• Brought Christianity

• Tall man with a dark skin

• Old Danish

– Blå = dark skinned

– Tan = great man

– tooth hygiene not known

• Left stones with Old Norge Runes

Metaphor Example (2)


COMPUTER PERIPHERALS FOR

THE GRAPHICAL USER INTERFACE

to be or not to be interactive ...


Computer consists of Elements

Elements affect the interaction

Internals

• RAM, CPU, Disk(s), Network

– Input devices • Text entry

• Pointing

• Scanner, Camera, Microphone

– Output devices• Screen: small & large, LCD, Projection Displays

• Printer , writing terminal, paper

• Sound: headphone, speaker system

• Haptic feedback device

– Virtual reality• special interaction and display devices

• physical interaction – e.g. sound, haptic, bio-sensing


Text input – QWERTY Keyboard

• Most common text input device

• Allows rapid entry of text by experienced users

• Keypress

– Closes connection, causing a character code to be sent

– Usually connected by cable, but can be wireless

• Standardised layout

– non-alphanumeric keys are placed differently

– accented symbols needed for different scripts

– minor differences between UK and USA keyboards

• QWERTY arrangement not optimal for typing– layout to prevent typewriters jamming!

• Alternative designs allow faster typing but large social base of QWERTY typists produces reluctance to change.


• Alphabetic

– keys arranged in alphabetic order

– not faster for trained typists

– not faster for beginners either!

• Dvorak

– common letters under dominant fingers

– biased towards right hand

– common combinations of letters alternate between hands

– 10-15% improvement in speed and reduction in fatigue

– large social base of QWERTY typists produce market pressures not to change

Alternatives to QWERTY

2 3 4 5 6 7 8 9 0

Q W E R T Y U I

1

O P

S D F H J LA G K

Z X C V B N M , .

SPACE


Qwerty vs. Dvorak


2 3 4 5 6 7 8 9 0

Q W E R T Y U I

1

O P

S D F H J LA G K

Z X C V B N M , .

SPACE

Error Preventing Keyboard

• Haptic keyboard – errors cost more pressure

• Pressure sensative keyboard

• Uses spelling checker on the fly

• Uses prediction and Bag-of-Words

• Tactile interface


Demonstration Keyboard


• Most common pointing device

• Handheld pointing device

– very common

– easy to use

– Metaphor (by accident)

• Two characteristics

– planar movement

– buttons

originally 1 to 3 buttons on top

making a selection,

indicating an option,

initiating drawing etc.)

Mouse


Introduction of Mouse device

• 1967 built by Douglas

Engelbart (Stanford)

• X-Y position indicator for a

display system

• 1970 US patent

• Hand in hand with

development hypertext

• Links should be pointed at

• Quintessential in

development of hypertext

and internet

• Tail = mouse metaphore

16

Archetypal mouse

17

A true prototype …


Engelbart’s workstation


Numerical Keypad isn.

...and then, there was the Mouse


Advanced pointing devices

20

LCD Digitizer: Tablet & Display


Advanced pointing devices

21

• LCD Digitizer: Tablet & Display

• Input of Text and Graphics

• Range of additional interactive modes

• Includes handwritten input

• Pen has additional affordances


Other TEXT input - Dasher


• Intelligent processing of vowel-consonant combinations.

• Color is used to indicate different groups of characters/fonts

• Range of applications in different devices

Dasher Demonstration


Haptic devices

24

Cyber grasp,

force feedback virtual glove

Force feedback device, used in

virtual design, medical

applications.

Wii

Mo

te


Demonstration Haptic I/O


Ubiquitous I/O: Gestures


27

Interacting with computers

Understanding human–computer interaction

• Understanding the human, i.e. the user

• Motivation, Intention

• Expectation

• i.e. Norman 7 Stages Model

• Understanding the computer, i.e. the elements

• Mapping expectations

Input and Outputdevices, paper, sensors, etc.

Capacity, possibilities?memory, processing,

networks

PARADIGMS, INTERACTION

MODELS, INTERACTION STYLES

Models for Interaction, theory


Paradigms

An example that serves as pattern or model.

Greek paradeigma = example

Model that forms basis of a theory or

collection of theories.

Paradigms and HCI

• Predominant theoretical frameworks or

scientific world views

– e.g., Aristotelian, Newtonian, Einsteinian

(relativistic) paradigms in physics

• Understanding HCI history is largely about

understanding a series of paradigm shifts

– Not all listed here are necessarily “paradigm”

shifts, but are at least candidates

– History will judge which are true shifts


Interaction Paradigms

• 1950’s

• 1960’s

• 1970’s

• 1980’s

• 1990’s

• 1995’s

• This era

…

31

• Batch processing

• Timesharing

• Networking

• Graphical display

• Microprocessor

• WWW

• Ubiquitous Computing

• Grid Computing

• Cloud Computing

• Multi Modal Computing


Paradigm shifts

• Batch processing

• Timesharing

• Networking

• Graphical display

• Microprocessor

• WWW

• Ubiquitous Computing

• Grid Computing

• Multi modal

• Wait on turn, get output

• Wait, intermediate output

• Share resources, own CPU

• Direct manipulation, Visibility

• Personal computing, WIMP

• Globalization information

• Sensor driven, environmental

• CPU driven, includes others

• Multimedia – Small Devices


Multimodality

• A mode is a human communication channel

– PC, Computer

– Internet

– PDA, etc.

• Emphasis on simultaneous use of multiple

channels for input and output

– Multiple Displays

– PDA, Cell Phone, PC

– Sound devices + …


Example Multimodal Interaction


Interactivity?

Early interaction paradigms: batch processing

– punched card stacks or large data files prepared

– long wait ….

– line printer output … and if it is not right …

Now most computing is interactive

– rapid feedback = VISIBILITY (expected)

– the user in control (most of the time)

– doing rather than thinking …


Important: Styles of Manipulation

• Office-direct manipulation

– user interacts

with artificial world

with artifacts

36

• Industrial – indirect manipulation

– user interactswith real worldthrough interface

• Issues ..

– feedback

– delays

system

interface plant

immediate

feedback

instruments


Styles and Paradigms

• Simple paradigm, Single user interface

• Complex paradigm, Multi user interface

• Multi user, GRID

– Industry, science and home apps?

• Multi user, multi modal

– Industry, science and home apps!!

– Think of some examples• Phone – PC

• iPhone

• Intelligent fridge (RFID tag technology)

• Etc..


INTERACTION CONCEPTS


Concepts of interaction

domain – the area of work under study

e.g. graphic design

goal – what you want to achieve

e.g. create a solid red triangle

task – how you go about doing it

– ultimately in terms of operations or actions

e.g. … select fill tool, click over triangle

Note …

– traditional interaction …

– use of terms differs a lot especially task/goal !!!


Interaction model Norman

• Task language: the language of the user

• Core language: the language of the system

• Seven stages1. user establishes the goal

2. formulates intention

3. specifies actions at interface

4. executes action

5. perceives system state

6. interprets system state

7. evaluates system state with respect to goal

• Norman’s model concentrates on user’s view of the interface, i.e. the user image


Execution/Evaluation loop

• user establishes the goal

• formulates intention

• specifies actions at interface

• executes action

• perceives system state

• interprets system state

• evaluates system state with respect to goal

system

evaluationexecution

goal






• executes action




system

evaluationexecution

goal


7 Stages of (Inter)Action (Norman, 1986)

44

Goals

EvaluationIntention

InterpretationAction specification

PerceptionExecution

Physical

activity

Mental

activity

Expectation

core language

task language


Application of 7 Stages Model

• Hampering Execution (gulf of execution)

– user’s formulation of actions

≠ actions allowed by the system

– interface: reduce the gulf to be effective

• Hampering of Evaluation (gulf of evaluation)

– user’s expectation of changed system state

≠ actual presentation of this state

– gulf should be as small as possible for effective

evaluation


Errors using an interface

• Slip

– understand system and goal

– correct formulation of action

– incorrect action

• Mistake

– may not even have right goal!

• Fixing things?

– Slip : better interface design (screens)

– Mistake: better understanding of system (metaphor)


Interaction framework Abowd & Beale

• Extension of Norman’s 7 stages of interaction

• Abowd & Beale interaction framework has 4 parts

– user

– input

– system

– output

• task language, core language

• Each part has its own unique language

• Interaction ⇒ translation between languages

• Problems in interaction = problems in translation

47

Score

Utask

Ooutput

Iinput


Using Abowd & Beale’s model

user intentions→ translated into actions at the interface

→ translated into alterations of system state→ reflected in the output display

→ interpreted by the user

general framework for understanding interaction

– not restricted to electronic computer systems

– identifies all major components involved in interaction

– allows comparative assessment of systems

– an abstraction


Review #5

• Computer Peripherals – Interaction Hardware

• Paradigms , shifts

• Interaction models

– Norman

– Abowd & Beale

• Gulf of Execution

• Gulf of Evaluation


Interaction Poetry


September 18, 2014 LECTURE 5liacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L05.pdf• physical...

Documents

Transcript of September 18, 2014 LECTURE 5liacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L05.pdf• physical...