human computer interaction
Download
Skip this Video
Download Presentation
Human Computer Interaction

Loading in 2 Seconds...

play fullscreen
1 / 75

Human Computer Interaction - PowerPoint PPT Presentation


  • 311 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Human Computer Interaction' - sawyer


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

slide62

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 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)

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 IF it has perceived valueAND value 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

ad