Human computer interaction
This presentation is the property of its rightful owner.
Sponsored Links
1 / 75

Human Computer Interaction PowerPoint PPT Presentation


  • 204 Views
  • Uploaded on
  • Presentation posted in: General

Human Computer Interaction. The Interaction – Chapter 3. Contents. Introduction Models of Interaction Ergonomics Interaction Styles Interactivity Experience, Engagement & Fun. 10/12/2014. 2. The Interaction. Introduction. What is Interaction. Communication

Download Presentation

Human Computer Interaction

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Human computer interaction

Human Computer Interaction

The Interaction – Chapter 3


Contents

Contents

  • Introduction

  • Models of Interaction

  • Ergonomics

  • Interaction Styles

  • Interactivity

  • Experience, Engagement & Fun

10/12/2014

2

The Interaction


Introduction

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

10/12/2014

3

The Interaction


Contents1

Contents

  • Introduction

  • Models of Interaction

  • Ergonomics

  • Interaction Styles

  • Interactivity

  • Experience, Engagement & Fun

10/12/2014

4

The Interaction


Models of interaction

Models of Interaction

  • Communication: Complex Human – Complex Systems

  • Models of Interaction

    • 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

10/12/2014

5

The Interaction


Some terms of interaction

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

Domain

Concepts of Domain

10/12/2014

6

The Interaction


Some terms of interaction1

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

10/12/2014

7

The Interaction


Some terms of interaction2

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

10/12/2014

8

The Interaction


Norman s model of interaction

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

10/12/2014

9

The Interaction


Execution evaluation cycle

Execution – Evaluation Cycle

goal

execution

evaluation

system

  • Example – Switching on the Light

    • Evening falls while reading

10/12/2014

10

The Interaction


Execution evaluation cycle1

Execution – Evaluation Cycle

goal

execution

evaluation

system

  • 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

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

  • 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

10/12/2014

11

The Interaction


Using norman s model

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

10/12/2014

12

The Interaction


Human error slips mistakes

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

10/12/2014

13

The Interaction


Human error slips mistakes1

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

10/12/2014

14

The Interaction


Abowd beale framework

Abowd & Beale Framework

O

output

S

core

U

task

I

input

  • 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

10/12/2014

15

The Interaction


Abowd beale framework1

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

Articulation

Performance

System is in a new State

10/12/2014

16

The Interaction


Abowd beale framework2

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

Presentation

Observation

Articulation

Performance

Problems in interaction = Problems in translation

10/12/2014

17

The Interaction


Abowd beale framework3

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

10/12/2014

18

The Interaction


Contents2

Contents

  • Introduction

  • Models of Interaction

  • Ergonomics

  • Interaction Styles

  • Interactivity

  • Experience, Engagement & Fun

10/12/2014

19

The Interaction


Ergonomics

Ergonomics

Physical Aspects of Interaction

10/12/2014

20

The Interaction


Ergonomics1

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

10/12/2014

21

The Interaction


Ergonomics examples

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.

10/12/2014

22

The Interaction


Ergonomics examples1

Ergonomics Examples

  • Health Issues

    • Lighting, Noise, Temperature, Time Spent etc.

Lighting Ergonomics

10/12/2014

23

The Interaction


Ergonomics examples2

Ergonomics Examples

  • Use of Colour

    • An indicator – Not the only Cue

    • Color use – Coherent with common conventions

      • Red for Warning etc.

10/12/2014

24

The Interaction


Contents3

Contents

  • Introduction

  • Models of Interaction

  • Ergonomics

  • Interaction Styles

  • Interactivity

  • Experience, Engagement & Fun

10/12/2014

25

The Interaction


Interaction styles

Interaction Styles

10/12/2014

26

The Interaction


Common interaction styles

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

10/12/2014

27

The Interaction


Command line interface

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!

10/12/2014

28

The Interaction


Menus

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

10/12/2014

29

The Interaction


Menus1

Menus

10/12/2014

30

The Interaction


Natural language

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

10/12/2014

31

The Interaction


Query interfaces

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 FROMStudentsWHERE GPA > 3.0

    • Requires understanding of database structure and language syntax, hence requires some expertise

10/12/2014

32

The Interaction


Form fills

Form-Fills

  • Primarily for data entry or data retrieval

  • Screen like paper form

  • Easy to Use

  • Generally allow

    • Blank Fields

    • Correction Facilities

10/12/2014

33

The Interaction


Spread sheets

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

10/12/2014

34

The Interaction


Wimp interface

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

10/12/2014

35

The Interaction


Point and click interfaces

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

10/12/2014

36

The Interaction


Three dimensional interfaces

Three Dimensional Interfaces

  • Virtual Reality Interfaces

  • Ordinary WIMP elements: 3D Appearance

    • Shading

    • Sculptured

flat buttons …

click me!

… or sculptured

10/12/2014

37

The Interaction


Elements of the wimp interface

Elements of the WIMP Interface

  • Windows, icons, menus, pointers

  • Buttons, toolbars, palettes, dialog boxes

10/12/2014

38

The Interaction


Windows

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

10/12/2014

39

The Interaction


Windows1

Windows

Menu Bar

Title Bar

Scroll Bar

10/12/2014

40

The Interaction


Icons

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

10/12/2014

41

The Interaction


Pointers

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

10/12/2014

42

The Interaction


Pointers1

Pointers

10/12/2014

43

The Interaction


Menus2

Menus

  • Choice of operations or services offered on the screen

  • Required option selected with pointer

10/12/2014

44

The Interaction


Menus3

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

10/12/2014

45

The Interaction


Menus4

Menus

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

  • Pop-up menus

    • Contextual menu

    • Hidden – Pops up on request

10/12/2014

46

The Interaction


Menus5

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!

10/12/2014

47

The Interaction


Menus6

Menus

  • Cascading menus

    • Hierarchical menu structure

    • Menu selection opens new menu

10/12/2014

48

The Interaction


Menus7

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

10/12/2014

49

The Interaction


Menu design issues

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

10/12/2014

50

The Interaction


Buttons

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

10/12/2014

51

The Interaction


Toolbars

Toolbars

  • Long lines of icons

  • Fast access to common actions

  • Often customizable

    • Choose which toolbars to see

    • Choose what options are on it

10/12/2014

52

The Interaction


Palettes

Palettes

  • Little windows of actions – Shown/hidden

    • e.g. available shapes in drawing package

  • Menu ‘tears off’ to become palette

10/12/2014

53

The Interaction


Dialog boxes

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

10/12/2014

54

The Interaction


Interaction styles usability

Interaction Styles - Usability

  • An installation program

10/12/2014

55

The Interaction


Interaction styles usability1

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?

10/12/2014

56

The Interaction


Interaction styles usability2

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.?

10/12/2014

57

The Interaction


Contents4

Contents

  • Introduction

  • Models of Interaction

  • Ergonomics

  • Interaction Styles

  • Interactivity

  • Experience, Engagement & Fun

10/12/2014

58

The Interaction


Interactivity

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?”

10/12/2014

59

The Interaction


Interactivity1

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

… … …

10/12/2014

60

The Interaction


Contents5

Contents

  • Introduction

  • Models of Interaction

  • Ergonomics

  • Interaction Styles

  • Interactivity

  • Experience, Engagement & Fun

10/12/2014

61

The Interaction


Human computer interaction

10/12/2014

62

The Interaction


What is important in hci

What is important in HCI

  • Usability

  • Effectiveness

  • Efficiency

  • Satisfaction

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

10/12/2014

63

The Interaction


User experience

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

10/12/2014

64

The Interaction


Psychology of experience

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

10/12/2014

65

The Interaction


Designing experience simulation

Designing Experience (Simulation)

  • Real Christmas crackers

    • Cheap and cheerful!

    • Joke, plastic toy, paper hat

    • Pull and bang

10/12/2014

66

The Interaction


Designing experience simulation1

Designing Experience (Simulation)

  • Virtual crackers

    • Cheap and cheerful!

    • Joke, web toy, cut-out mask

    • Click and bang

10/12/2014

67

The Interaction


Designing experience simulation2

Designing Experience (Simulation)

  • Virtual crackers

    • Cheap and cheerful!

    • Joke, web toy, cut-out mask

    • Click and bang

10/12/2014

68

The Interaction


How crackers work

How crackers work

To: wxv

From: ..

fill in web form

receive email

closedcracker page

joke

links

open

message

watches

progress

recipient clicks

cracker opens ...

very slowly

sender

sender

recipient

opencracker page

web toy

mask

10/12/2014

69

The Interaction


The cracker experience

The cracker experience

  • Real crackerVirtual cracker

  • Surface elements

  • DesignCheap and cheerfulSimple page/graphics

  • PlayPlastic toy and jokeWeb toy and joke

  • Dressing upPaper hatMask to cut out

  • Experienced effects

  • SharedOffered to anotherSent by email message

  • Co-experiencePulled togetherSender can't see content until opened by recipient

  • ExcitementCultural connotationsRecruited expectation

  • HiddennessContents insideFirst page - no contents

  • SuspensePulling crackerSlow ... page change

  • SurpriseBang (when it works)WAV file (when it works)

10/12/2014

70

The Interaction


Physical design

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

10/12/2014

71

The Interaction


Managing value

Managing Value

  • If you want people to use your device/application

    • Understand their value

  • People use something

ONLY IFit has perceived valueANDvalue exceeds cost

10/12/2014

72

The Interaction


Managing value1

Managing Value

  • Value

    • Helps me get my work done

    • Faster

    • Enjoyment (may not be calculated)

  • Cost

    • Download time

    • Money £, $, €

    • Learning effort

10/12/2014

73

The Interaction


General lesson

General Lesson

If you want someone to do something …

  • Make it easy for them!

  • Understand their values

10/12/2014

74

The Interaction


References

References

  • Chapter 3 - Human Computer Interaction by Dix et al.

  • User Interface Hall of Fame/Shame

10/12/2014

75

The Interaction


  • Login