Human Computer Interaction The Interaction – Chapter 3.

Human Computer Interaction

The Interaction – Chapter 3

04/19/23 The Interaction 2

Contents Introduction

Models of Interaction

Ergonomics

Interaction Styles

Interactivity

Experience, Engagement & Fun

04/19/23 3

Introduction What is Interaction

Communication

Machine is capable of doing the job Humans need to get the job done from the system

User System

User must communicate his requirements to the system

The Interaction




Ergonomics

Interaction Styles

Interactivity


04/19/23 5

Models of Interaction Communication: Complex Human – Complex Systems


Help Understand what is going on in the Interaction

Identify the likely root of difficulties

Two Models

Norman’s Model (The execution-evaluation cycle)

Abowd and Beale framework

The Interaction

04/19/23 6

Some Terms of Interaction Domain

The area of work under study

Graphic design Graphic shapes, drawing surface, drawing utensils

Tasks

Operations to manipulate the concepts of a domain

e.g. construction of graphic shape with certain attributes

Goal

What you want to achieve

e.g. create a solid red triangle

Concepts of DomainDomain

The Interaction

04/19/23 7

Some Terms of Interaction Task

How you go about doing it – Ultimately in terms of operations or

actions

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

Task Analysis

Identification of problem space for user of an interactive system in

terms of the domain, goals, intentions and task

The Interaction

04/19/23 8

Some Terms of Interaction Task Language

User’s language: Describes attributes of domain

relevant to the User state

Core Language

System’s Language: Describes attributes of domain

relevant to the System state

The Interaction

04/19/23 9

Norman’s Model of Interaction Based on Execution – Evaluation Cycle

Two major stages: Execution & Evaluation

Execution Establishing the goal

Forming the intention

Specifying the action sequence

Executing the action

Evaluation Perceiving the system state

Interpreting the system state

Evaluating the system state with respect to the goals and intentions

The Interaction

04/19/23 10

Execution – Evaluation Cycle

Example – Switching on the Light

Evening falls while reading

system

evaluationexecution

goal

The Interaction

04/19/23 11

Execution – Evaluation Cycle

You decide you need more light. Goal : Get more light

systemevaluationexecution

goal Establishing the goal

Forming the intention

Specifying the action sequence

Executing the action

Perceiving the system state

Interpreting the system state

Evaluating the system state

Intention: Switch on the lamp Specify the Action Sequence to reach over an press the lamp switch

Action executed – Perceive the results: Light is on or not Interpret – e.g. No light: Bulb has blown, Lamp not plugged in -> New Intentions

Light comes out – Evaluate the new state according to your goal If the light is enough – Cycle Completes

If NOT, formulate a new intention of switching on he ceiling light for example

The Interaction

04/19/23 12

Using Norman’s Model Some Systems are harder to use than others

Gulf of Execution – Difference b/w

User’s formulation of actions

Actions allowed by the system

AIM: Reduce this gulf

Gulf of Evaluation – Difference b/w

Presentation of the system state

User Expectation

More effort required to interpret presentation: Less effective

Interaction

The Interaction

04/19/23 13

Human Error – Slips & Mistakes Slip

Understand system and goal

Correct formulation of action

Incorrect action

Mistake

May not even have right goal!

Example

Slip: Mistype, accidental mouse press

Mistake: Magnifying glass icon – Find/Zoom

The Interaction

04/19/23 14

Human Error – Slips & Mistakes Fixing Errors

Slips

Better interface design

E.g. Putting more space b/w buttons

Mistakes

Better understanding of the system

Improved training, radical redesigning

The Interaction

04/19/23 15

Abowd & Beale Framework Interaction framework – Four parts

User

Input

System

Output

Each part has its own unique language

Interaction = Translation b/w languages

Input + Output = Interface

Interface sits b/w User and System

Utask

Score

Ooutput

Iinput

The Interaction

04/19/23 16

Abowd & Beale Framework Interactive Cycle

User begins with formulation of

a Goal/Task

Task articulated within the input

language

Input language is translated to

core language as operations to

be performed

System transforms itself

ArticulationPerformance

System is in a new State

The Interaction

04/19/23 17

Abowd & Beale Framework Interactive Cycle (Contd…)

System attribute values rendered

to Output

User observes the output and

asses the result of interaction

w.r.t the Goal

ArticulationPerformance

Presentation Observation

Problems in interaction = Problems in translation

The Interaction

04/19/23 18

Abowd & Beale Framework Example: Video Recording using a remote control

Ineffective Interaction: User not sure VCR is set to record properly

Articulation: User pressed the keys on the remote in the wrong

order

Performance: VCR may record any channel but remote control

lacks the channel selection

Presentation: VCR display does not indicate the setting of program

Observation: User does not interpret the feedback properly

The Interaction




Ergonomics

Interaction Styles

Interactivity


04/19/23 20

ErgonomicsPhysical Aspects of Interaction

The Interaction

04/19/23 21

Ergonomics Ergonomics is the science of designing

the job, equipment, and workplace to fit

the worker

Ergonomics involves arranging the

environment to ‘fit’ the person in it

Ergonomic Design/Products

Easy to use and comfortable

Reduce fatigue, strain

Enhance productivity

The Interaction

04/19/23 22

Ergonomics Examples Arrangement of Controls & Displays

Grouped according to: Function,

Sequence, Frequency

Surrounding Environment

Design of work Environment

Where will the system be used?

Who will use it?

For how long will it be used?

Seated users: Comfort, Back support

etc.

The Interaction

04/19/23 23

Ergonomics Examples Health Issues

Lighting, Noise, Temperature, Time Spent etc.

Lighting Ergonomics

The Interaction

04/19/23 24

Ergonomics Examples Use of Colour

An indicator – Not the only Cue

Color use – Coherent with common conventions

Red for Warning etc.

The Interaction




Ergonomics

Interaction Styles

Interactivity


04/19/23 26

Interaction Styles

The Interaction

04/19/23 27

Common Interaction Styles Command line interface

Menus

Natural language

Question/answer and query dialogue

Form-fills and spreadsheets

WIMP

Point and click

Three–dimensional interfaces

The Interaction

04/19/23 28

Command Line Interface Way of expressing instructions to the computer

directly

Function keys, single characters, short abbreviations,

whole words, or a combination

Powerful – Offers direct access to system functionality

Better for expert users than novices

Command names/abbreviations should be

meaningful!

The Interaction

04/19/23 29

Menus Set of options displayed on the screen

Options visible

Rely on recognition rather than recall

Easier to use

Names should be meaningful

Selection by:

numbers, letters, alphabets, arrow keys, mouse

Menus

Purely Text

May have a Graphical Component

Restricted form of full WIMP system

The Interaction

04/19/23 30

Menus

The Interaction

04/19/23 31

Natural Language Familiar to user

Speech recognition or typed natural language

Problems

Ambiguity at Phrase Level

The boy hit the dog with the stick

Ambiguity of Individual words

Synonyms, Pronouns

General natural language interface – Unlikely

Restricted domain – Known Vocabulary

The Interaction

04/19/23 32

Query Interfaces Question/answer interfaces

User led through interaction via series of questions

Query languages (e.g. SQL)

Used to retrieve information from database

Natural-language-style queries

SELECT Name FROM Students WHERE GPA > 3.0

Requires understanding of database structure and language syntax,

hence requires some expertise

The Interaction

04/19/23 33

Form-Fills Primarily for data entry or data retrieval

Screen like paper form

Easy to Use

Generally allow

Blank Fields

Correction Facilities

The Interaction

04/19/23 34

Spread Sheets Sophisticated variation of form-filling

Grid of cells contain a value or a formula

Formula can involve values of other cells

E.g. sum of all cells in this column

User can enter and alter data - spreadsheet maintains

consistency

MS Excel – Most common spread sheet today

The Interaction

04/19/23 35

WIMP Interface Windows, Icons, Menu, Pointers

Or Windows, Icons, Mice, and Pull-down menus

Default style for majority of interactive computer

systems, especially PCs and desktop machines

Windows, MAC

The Interaction

04/19/23 36

Point and Click Interfaces Commonly Used in ..

Multimedia

Web browsers

Hypertext

Just click something!

Icons, text links or location on map

Minimal typing

Web is a typical point and click interface

Closely related to WIMP

The Interaction

04/19/23 37

Three Dimensional Interfaces Virtual Reality Interfaces

Ordinary WIMP elements: 3D

Appearance

Shading

Sculptured

flat buttons …

… or sculptured

click me!

The Interaction

04/19/23 38

Elements of the WIMP Interface Windows, icons, menus, pointers

Buttons, toolbars, palettes, dialog boxes

The Interaction

04/19/23 39

Windows Areas of the screen that behave as if they were

independent Can contain text or graphics

Can be moved or resized

Can overlap and obscure each other, or can be laid out next to one

another (tiled)

Scrollbars Allow the user to move the contents of the window up and down or

from side to side

Title bars Describe the name of the window

The Interaction

04/19/23 40

Windows

Scroll Bar

Title BarMenu Bar

The Interaction

04/19/23 41

Icons Small picture or image

Represents some object in the

interface

Often a window or action

Icons can take many forms

Highly stylized

Realistic representations

The Interaction

04/19/23 42

Pointers Important component

WIMP style relies on pointing and selecting things

Uses mouse, trackpad, joystick, trackball, cursor keys

or keyboard shortcuts

Wide variety of Pointer Cursors

Cursor Hot-spot

The location to which it points

The Interaction

04/19/23 43

Pointers

The Interaction

04/19/23 44

Menus Choice of operations or services offered on the screen

Required option selected with pointer

The Interaction

04/19/23 45

Menus Menu Bar at top of screen (normally), menu drags down

Pull-down menu -Drags down on mouse click

Fall-down menus - Mouse just moves over bar

The Interaction

04/19/23 46

Menus Pin-up menus – ‘Pinned’ to the screen, hides when asked

Pop-up menus

Contextual menu

Hidden – Pops up on request

The Interaction

04/19/23 47

Menus Pie menus

Arranged in a circle

Easier to select item (larger target area)

Quicker (same distance to any option)

Take up more screen space – Not widely used!

The Interaction

04/19/23 48

Menus Cascading menus

Hierarchical menu structure

Menu selection opens new menu

The Interaction

04/19/23 49

Menus Keyboard accelerators

Key combinations - same effect as

menu item

Two types

Active when menu open – usually first

letter

Active when menu closed – usually

Ctrl + letter

The Interaction

04/19/23 50

Menu Design Issues Which kind of menu to use?

What to include in menus at all?

How to group items?

Order

Frequency and importance

Opposite functionalities

Choice of keyboard accelerators

The Interaction

04/19/23 51

Buttons Individual and isolated regions within a display that can be selected to

invoke an action

Resemble ‘push buttons’

Toggle buttons

Radio buttons

– set of mutually exclusive choices

Check boxes

– set of non-exclusive choices

The Interaction

04/19/23 52

Toolbars Long lines of icons

Fast access to common actions

Often customizable

Choose which toolbars to see

Choose what options are on it

The Interaction

04/19/23 53

Palettes Little windows of actions – Shown/hidden

e.g. available shapes in drawing package

Menu ‘tears off’ to become palette

The Interaction

04/19/23 54

Dialog Boxes Information windows that pop up to inform of an

important event or request information.

E.g. Save file Dialog box

Specify the filename and location

Disappears once the file is saved

The Interaction

04/19/23 55

Interaction Styles - Usability An installation program

The Interaction

04/19/23 56

Interaction Styles - Usability Change of interaction style

Text Based Menu

This program will install COCOS software in directory C:\COCOS. Type:1 - to install COCOS 2 - to change directory 3 - to exit without installation Your choice: __

Is it clear what and how to do?

The Interaction

04/19/23 57

Interaction Styles - Usability Usability is affected by

Directness - Can users perform all operations they need? Can they

perform them in a concise, natural way?

Flexibility - Can users easily perform any reasonable operation at

any time?

Visibility - Can users see the actions they can perform? Is it clear

which operations will be done by each action?

Consistency - Can users predict application's behavior, based on

uniform screen design, similar representation of the similar

operations, etc.?

The Interaction




Ergonomics

Interaction Styles

Interactivity


04/19/23 59

Interactivity Defining feature of interactive system

Speech driven interfaces

Rapidly improving

Still inaccurate

Speech based: Input is Difficult, Interaction is Easier

Yes/No Response – Reliable

System reflects back its understanding

E.g. Air line reservation

“you want a ticket from New York to Boston?”

The Interaction

04/19/23 60

Interactivity Error and Repair

Can’t always avoid errors …

Make it easy to detect errors

…And then repair them

Sys: Hello, this is the Go Faster booking system. What would you like?

User: I want to fly from New York to London

Sys: You want a ticket from New York to Boston

User: no

Sys: Sorry, please confirm one at a time

Sys: Do you want to fly from New York

User: yes

… … …

The Interaction




Ergonomics

Interaction Styles

Interactivity


04/19/23 62The Interaction

04/19/23 63

What is important in HCI Usability

Effectiveness

Efficiency

Satisfaction

People are going to work better if they enjoy what they are doing

The Interaction

04/19/23 64

User Experience Example – Shopping

Internet stores

Going to shops, feeling the clothes,

being with friends

Go shopping without spending

Shopping

Not an efficient financial transaction

It’s an experience

The Interaction

04/19/23 65

Psychology of Experience Flow – Total Engagement

Doing something you know how to do?

Edge of your abilities - beyond your limits

Example: Rock Climbing

Education

Zone of proximal development

Things you can do with some support (teacher,

book etc.)

Learning at its best in this zone

The Interaction

04/19/23 66

Designing Experience (Simulation)

Real Christmas crackers

Cheap and cheerful!

Joke, plastic toy, paper hat

Pull and bang

The Interaction

04/19/23 67


Virtual crackers

Cheap and cheerful!

Joke, web toy, cut-out mask

Click and bang

The Interaction

04/19/23 68


Virtual crackers

Cheap and cheerful!

Joke, web toy, cut-out mask

Click and bang

The Interaction

04/19/23 69

How crackers work

sender

fill in web form

To: wxvFrom: ..

receive email recipient

closedcracker page

open

messagerecipient clicks

cracker opens ...very slowly

jokelinks

opencracker page

web toymask

sender

watchesprogress

The Interaction

04/19/23 70

The cracker experience Real cracker Virtual cracker

Surface elements

Design Cheap and cheerful Simple page/graphics

Play Plastic toy and joke Web toy and joke

Dressing up Paper hat Mask to cut out

Experienced effects

Shared Offered to another Sent by email message

Co-experience Pulled together Sender can't see content until opened by recipient

Excitement Cultural connotations Recruited expectation

Hiddenness Contents inside First page - no contents

Suspense Pulling cracker Slow ... page change

Surprise Bang (when it works) WAV file (when it works)

The Interaction

04/19/23 71

Physical Design Design constraints

Ergonomic – minimum button size

Physical – high-voltage switches are big

Safety – high cooker controls

Context and environment – easy to clean

Aesthetic – must look good

Economic – … and not cost too much!

Constraints may be self contradicting

Front Vs Back control for a cooking range

The Interaction

04/19/23 72

Managing Value If you want people to use your device/application

Understand their value

People use something

ONLY IFit has perceived value

ANDvalue exceeds cost

The Interaction

04/19/23 73

Managing Value Value

Helps me get my work done

Faster

Enjoyment (may not be calculated)

Cost

Download time

Money £, $, €

Learning effort

The Interaction

04/19/23 74

General Lesson

If you want someone to do something …

Make it easy for them!

Understand their values

The Interaction

04/19/23 75

References Chapter 3 - Human Computer Interaction

by Dix et al.

User Interface Hall of Fame/Shame

The Interaction

Human Computer Interaction The Interaction – Chapter 3.

Documents

Transcript of Human Computer Interaction The Interaction – Chapter 3.