Human Computer Interaction

Understanding Interaction

1
 Learning Outcomes

At the end of this lecture, you should be able to:

• Describe interaction
• Describe different interaction from different frameworks
• Discuss how ergonomics play roles in ensuring successful
interactions
• Discuss different styles humans interact with computers

2
Some Terms 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 !!!
The Interaction

Dix (2002) looks at interactions in 4 ways:

1. interaction models – translations of what
happen between user and system
2. ergonomics - physical characteristics of
interaction
3. interaction styles - the nature of user/system
dialog

4
 The Interaction Framework
Donald Norman’s
 Seven stages
1. 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

5
The Interaction Framework
Donald Norman’s

• Focus is on user’s view of the interface

• Gulf of execution and Gulf of evaluation – good interface design strives to

avoid these

6
Donald Norman’s
execution/evaluation loop
goal

execution evaluation
system

 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

7
Donald Norman’s
execution/evaluation loop
goal

execution evaluation
system

 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

8
Donald Norman’s
execution/evaluation loop
goal

execution evaluation
system

 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

9
 The Interaction Framework
Abowd and Beale’s
 Interaction framework is divided into 4 parts

1. User
2. Input
3. System
4. Output

10
 The Interaction Framework
Abowd and Beale’s
 The User is able to communicate with the
system via the Input. This action is known
as articulation or the process of describing
your request in the form of a "task
language".
 The Input then runs System command in a
performance process. The process is ran
in "core language" and then returned to
the user in a presentation phase.
 The User then resumes responsibility
through observation or simply the act of
formulating new goals.

11
Ergonomics

 Study of the physical characteristics of

interaction

 Also known as human factors – but this

can also be used to mean much of HCI!

 Ergonomics good at defining standards

and guidelines for constraining the way
we design certain aspects of systems
Ergonomics - examples

 Ergonomics is also concerned with

the work environment
 Where will the system be used?
 Who will use it?
 Will the user be sitting, standing or
moving about?
 Consider all above issues in your
design
 Seating should be provided back support
Ergonomics - examples
 Arrangement of controls and displays
 Important because disastrous results can appear
if rules not followed
 Example: using ‘y’ and ‘u’ as shortcut keys for
two opposite tasks
 Possible organizations of controls
 Functional
 Reflecting related functionality
 Sequential
 Reflecting order of use
 Frequency
 Reflecting frequency of use
Ergonomics - examples
 health issues
 physical position
 Users should be able to reach all controls and see all displays
 environmental conditions (temperature, humidity)
 Low or high temperature affect performance
 Lighting
 Lighting should be arranged to avoid glare and reflection
 Noise
 No noise is not expected, but little
 Time
 Time should be controlled (considers harms of CRT, as
discussed)
Ergonomics - examples

 Use of colour
 Awareness of colour-blindness
 Use distinct colours
 Don’t use colour as the only clue
 Follow colour conventions
 E.g. red, green and blue
 Consider cultural differences
 Ergonomics - examples

 arrangement of controls and displays

e.g. controls grouped according to function or frequency of use, or sequentially (mapping)
 surrounding environment
e.g. seating arrangements adaptable to cope with all sizes of user (movie theatre)
 health issues
e.g. physical position, environmental conditions (temperature, humidity), lighting, noise
 use of colour
e.g. use of red for warning, green for okay,
awareness of colour-blindness etc.

17
 Indirect Manipulation
• office– direct manipulation
– user interacts
with artificial world
system

• industrial – indirect manipulation

– user interacts
with real world
through interface
• issues .. plant
interface
– feedback
– delays
immediat
e
feedbac
k
instruments
Common interaction styles

 command line interface

 Direct manipulation
 menus
 natural language
 question/answer and query dialogue
 form-fills and spreadsheets
 WIMP
 three–dimensional interfaces

19
General Issues in Interaction
Style
 Who is in control - user or computer
 Initial training required
 Learning time to become proficient
 Speed of use
 Generality/flexibility/power
 Special skills - typing
 Gulf of evaluation / gulf of execution
 Screen space required
 Computational resources required
Command line interface

 Way of expressing instructions to the computer directly

 function keys, single characters, short abbreviations, whole words, or a combination

 suitable for repetitive tasks

 better for expert users than novices
 offers direct access to system functionality
 command names/abbreviations should be meaningful!

Typical example: the Unix system, DOS prompts

21
CL Advantages

 Advantages for experts

 Speed, conciseness
% ls (hard to beat)
 Can express actions beyond a limited set
 Flags, piping one command to another
 Repetition, extensibility
 Scripting, macros
 Easier implementation, less overhead
 Power
 Abstraction, wild cards
CL Dangers

 With added power, comes added responsibility and

danger
 UNIX
% rm -r *
 Deletes every file that you have, and you can’t get them back
CL Design Goals

 Consistency
 Have options and arguments expressed the same way everywhere
 Good naming and abbreviations

 UNIX fails here because commands were developed by lots of

different people at different organizations
 No guidelines provided
Names and Abbreviations

 Specificity versus Generality

 General words
 More familiar, easier to accept
 Specific (typically better)
 More descriptive, meaningful, distinctive
 (Nonsense does surprisingly well in small set)
 Abbrevs. allow for faster actions
 Expert performance begins to be dominated by
motor times such as # of keystrokes
 Not good idea for novices
 (Allow but don’t require)
General Issues - CL

 Who is in control - user or computer

 Initial training required
 Learning time to become proficient
 Speed of use
 Generality/flexibility/power
 Special skills - typing
 Gulf of evaluation / gulf of execution
 Screen space required
 Computational resources required
Direct Manipulation

 Representation of reality that can be manipulated

 The user is able to apply intellect directly to the task

 The tool itself seems to disappear
Direct Manipulation

Definition:
 1) Continuous visibility of the objects and actions of interest
 2) Rapid, reversible, incremental actions whose effect is
immediately noticeable
 3) Replacement of command language syntax by direct
manipulation of object of interest (physical actions, buttons,
etc.)

Shneiderman ‘82
Direct Manipulation

 Examples
 CAD
 Desktop metaphor
 Video games
Example: Homefinder
DM Advantages

 Easier to learn & remember, particularly for novices

 Flexible, easily reversible actions helps reduce anxiety in users
 Provides context & instant visual feedback so user can tell if
objectives are being achieved
 Exploits human use of visual spatial cues
 Limits types of errors that can be made
DM Problems

 Screen space intensive (info not all that dense)

 Need to learn meaning of components of visual
representation
 Visual representation may be misleading
 Mouse ops may be slower than typing
 Not self-explanatory (no prompts)
 Not everything can be represented visually
DM Problems

 Not good at
 Repetition
 History keeping (harder)
 Certain tasks (Change all italics to bold)
 Abstract elements (variables)
 Macros harder
More Psychological View

 What is directness? (not always done well)

 Related to two things:
 Distance

Execution

Goals System

 Engagement Evaluation
 Unobtrusive and responsive

Hutchins, Hollan, Norman ‘86

General Issues - DM

 Who is in control - user or computer

 Initial training required
 Learning time to become proficient
 Speed of use
 Generality/flexibility/power
 Special skills - typing
 Gulf of evaluation / gulf of execution
 Screen space required
 Computational resources required
 Menus

 Set of options displayed on the screen

 Options visible
 less recall - easier to use, use of images/icons to help
 rely on recognition so names should be meaningful to reflect the tasks to be executed
 Selection by:
 numbers, letters, arrow keys, mouse
 combination (e.g. mouse plus accelerators)
 Often options hierarchically grouped
 sensible grouping is needed

36
Natural language

 Familiar to user
 speech recognition or typed natural language
 Problems
 vague
 ambiguous
 hard to do well!

37
 Query interfaces

 Question/answer interfaces
 user led through interaction via series of
questions
 suitable for novice users but restricted
functionality
 often used in information systems

 Query languages (e.g. SQL)

 used to retrieve information from
database
 requires understanding of database
structure and language syntax, hence
requires some expertise

38
 Form-fills

 Primarily for data entry or

data retrieval
 Screen like paper form
 Data put in relevant place
 Requires
 good design
 Sequential/suitable
information structure
 obvious correction
facilities

39
Spreadsheets

 first spreadsheet VISICALC, followed by Lotus 1-2-3.

 MS Excel most common today
 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

40
VISICALC
Lotus 1-2-3
MS Excel
 Three dimensional interfaces

 virtual reality
 ‘ordinary’ window systems
 highlighting
 visual affordance flat buttons …
 indiscriminate use
just confusing!
click me!
 3D workspaces
 use for extra virtual space … or sculptured
 light and occlusion give depth
 distance effects

44
WIMP Interface

Windows
Icons
Menus
Pointers

… or windows, icons, mice, and pull-down menus!

default style for majority of interactive computer systems,

especially PCs and desktop machines

45
 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

46
 Icons

 small picture or image

 represents some objects in the
interface
 often a window or action
 windows can be closed down
(iconised)
 small representation fi many accessible
windows
 icons can be many and various
 highly stylized
 realistic representations.

47
 Pointers

 important component
 WIMP style relies on pointing and selecting
things

 uses mouse, track pad, joystick,

trackball, cursor keys or
keyboard shortcuts
 wide variety of graphical images
 Relies on learnability and then
cognition

48
Kinds of Menus

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

 pull-down menu - mouse hold and drag down menu
 drop-down menu - mouse click reveals menu
 fall-down menus - mouse just moves over bar!

 Contextual menu appears where you are

 pop-up menus - actions for selected object
 pie menus - arranged in a circle
easier to select item (larger target area)
quicker (same distance to any option)
… but not widely used!

49
Menus extras

 Cascading menus
 hierarchical menu structure
 menu selection opens new menu
 and so in ad infinitum

 Keyboard accelerators
 key combinations - same effect as menu item
 two kinds
 active when menu open – usually first letter
 active when menu closed – usually Ctrl + letter
usually different !!!

50
Menus design issues

 which kind to use

 what to include in menus at all
 words to use (action or description)
 how to group items
 choice of keyboard accelerators/short
keys

51
 Buttons

 individual and isolated regions within a display that can be selected to invoke
an action

 Special kinds
 radio buttons
– set of mutually exclusive choices
 check boxes
– set of non-exclusive choices

52
 Toolbars

 long lines of icons …

… but what do they do?

 fast access to common actions

 often customizable:
 choose which toolbars to see
 choose what options are on it

53
Dialogue boxes

 information windows that pop up to inform of an important

event or request information.

e.g: when saving a file, a dialogue box is displayed to allow the user to specify the filename
and location. Once the file is saved, the box disappears.

54
WIMP

 Windows, Icons, Menus, Pointers

 Focus: Menus, Buttons, Forms

 Predominant interface paradigm now (with some direct

manipulation added)

 Advantages:
 ?
Menus

 Advantages:
 1 keystroke or mouse operation vs. many
 No memorization of commands
 Limited input set
 Disadvantages:
 Less direct user control - have to find correct
menu / menu item
 Not so readily extensible
 Slower than keyboarding for experienced
users, at least without accelerators
Menu Items

 Various types:
 Flat
 Cascading
 Pop-up (contextual)
 Organization strategies
 Create groups of logically similar items
 Cover all possibilities
 Ensure that items are non-overlapping
 Keep wording concise, understandable
A Good Example

 Logical grouping
 Visual separation of
groups
 Disabled items “grayed
out”
 Shortcuts shown
 … indicates leads to
dialogue
Presentation Sequence

 Forms, dialogue boxes, menus

 Use natural if available
 Time
 e.g. Breakfast, Lunch, Dinner
 Numeric ordering
 e.g. Point sizes for font
 Other possibilities:
 Alphabetical
 Group related items
 Frequently used first
 Most important first
Pointers

 Allows users to specify location parameter

of a command
 Provides for some of that direct manipulation
 Put this file HERE
 Also displays system state info:
 Tracking
 Busy
 Hints
 Modes (text cursor vs. selection pointer)
Other WIMP issues

 Windows management
 How to locate, move, find
 Transfer information between
 Switch attention between
 Icons
 Need graphic design attention
 Toolbars