Chapter 4

The Interaction

1
 The Interaction
2

Outline
 Interaction models
Translations between user and system.
 Ergonomics
Physical characteristics of interaction.
 Interaction styles
The nature of user/system dialog.
 Context
Social, organizational, motivational and also
 Paradigms
 Interactivity
 What is interaction?
3

 Communication between the user and system.

 User  System (Computer)

 In interaction, we have to focus on the following terms:

1. Domain: the area of work under study e.g. graphic
design.
2. Goal: what you want to achieve e.g. Create a solid red
triangle.
3. Task: how you go about doing it? In terms of operations
or actions. e.g. … select fill tool, click over triangle.
4 Why study interaction models?

 Help us to understand what is going on in the

interaction between user & system.
 Help us to identify problematic areas within the
design.
 Address differences, if any, between what user
wants & system does.
 Interaction Model: Donald Norman’s model
5 (Most influential model of interaction)
Norman’s execution–evaluation cycle
 Seven stages of interaction by Donald:
 User establishes the goal
 Formulates intention:
Intention is a specific action required to meet the goal.
 Specifies actions at interface.(sequences of actions)
Actual actions that will reach the goal.
 Executes action
 Perceives system state: language of the system(response).
 Interprets system state
 Evaluates system state with respect to goals and intentions.
 Norman’s model concentrates on user’s view of the interface.(the user
does all these things)
 Execution/evaluation loop
6
Goal
Execution Evaluation
System

 The plan formulated by the user is executed by the

computer(system).When finished, the user evaluates
the results and determines the further actions.
 If the result is not as expected there may be a need to
formulate anew goal and intentions.
User establishes the goal Move a sentence from one paragraph to
another paragraph in a WORD document

7
Formulates intention Use Edit menu to move a piece of text from
one paragraph to another (Shortcut keys can
be used)

Specifies actions at interface (1) Highlight the text by moving & clicking
a mouse (2) Click the cut button, (3) Move
the cursor to new
position and (4) Click the paste button

Executes action Execute the actions

Perceives system state User observes changes on the screen.

Interprets system state User sees the text in correct position

Evaluates system User knows that the goal has been

completed.
8 Normans…
 Norman uses this model of interaction to demonstrate why
some interfaces cause problems to their users.
 Gulfs of execution
Difference between the user’s formulation of the actions to reach the goal and
the actions allowed by the system. If these match the interaction is effective.so
the interfaces should aim to address this gulf.
 Gulfs of evaluation.
The distance between the physical presentation of the system state and the
expectation of the user. If the user can readily evaluate the presentation in
terms of his goal, the gulf of evaluation is small. The more effort that is
required on the part of the user to interpret the presentation, the less effective
the interaction.
 9 Gulfs of execution
 Mismatch between user’s intention of actions and actions
allowed by the system, e.g.,
 The system does not support the user’s goal.
 Sequence of actions is invalid .(not supported by the system)
 Does the interface allow us to carry out the actions required by
the intention? E.g. Goal is to save a file.
 Intention is to use the file menu
 Action is to click the save option
 Is there a save option in the file menu?
10

Gulfs of evaluation
 Mismatch between system’s presentation & user’s
expectation, e.g.,
 Failure to notice current system status.
 Poor feedback from system.
 Human Error - Slips and Mistakes
Human errors are often classified into slips and mistakes. We can
11
distinguish these using Norman’s gulf of execution.

Slip
 - Understandsystem and goal
 - Correct formulation of action
 - Incorrect action
Mistake
-users may not even have right goal!(if they do not know the
system well)
Fixing things?
Slip – better interface design.(e.g. putting more space between
buttons)
 Mistake – users should have better understanding of system. so
will require far more radical redesign or improved training,
perhaps a totally different metaphor(symbol) for use.
 The interaction framework
12
(Using Abowd and Beale’s model)
Extension of Norman…….

Each has its own unique language(system, user, input and output)
Interaction  translation between languages.
Problems in interaction occurs during translation of each action.
 The interaction framework
13
(Using Abowd and Beale’s model)
User intentions
 Translated into actions at the interface.
 Translated into alterations(changes) of system state.
 Reflected in the output display.
 Interpreted by the user.
There are four main translations involved in the interaction: articulation, performance,
presentation and observation.
 Ergonomics

14
 15 Ergonomics
 Study of the physical characteristics of interaction.
 addresses issues on the user side of the interface.
 Also known as human factors.
 Ergonomics is good at defining standards and guidelines for
constraining the way we design certain aspects of systems.
 Ergonomics cont.
16
Issues addressed by ergonomics :
 arrangement of controls and displays.
e.g. controls grouped according to function or frequency of use, or
sequentially.
 surrounding environment.
e.g. seating arrangements adaptable to cope with all sizes of user.
 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 Ergonomics cont.
 Inappropriate placement of controls and displays can lead
to inefficiency, frustration and sometimes dangerous
situations.
 So arrangement of controls and displays need organization:
E.g. Organization of controls:
 Functional: functionally related controls are grouped
together.
 Sequential: Controls are organized to reflect the order of
their use in a typical interaction.
 Frequency: The most often used controls can be
accessed most easily.
18
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
 Command line interface
19
 In spite of the availability of menu-driven interfaces, it is still
widely used.
 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 than novice users
 Offers direct access to system functionality(as opposed to the
hierarchical nature of menus)
 Command names/abbreviations should be meaningful!
 Today it is supplementary to menu-based interfaces, providing
accelerated access to the system’s functionality for experienced
users.
- Typical example: The Unix system, Linux etc..
20
Command Line Cont.
 Disadvantages of command-line interfaces:
 Options difficult to remember
 High error rates
 Frustrating for non-expert users
 Difficult error corrections.

Figure: command line interface

21 Menus
 Set of options displayed on the screen
 Rely on recognition, so names should be meaningful.
 Selection by:
 Numbers, letters, arrow keys, mouse
 Combination (e.g. mouse plus accelerators)
 Often options hierarchically grouped
 Sensible grouping is needed.
22
23 Menu Cont.
 Advantages of menu-based interfaces:
 Low memory requirements
 Self-explanatory
 Easy to undo errors
 Appropriate for beginners
 Disadvantages of menu-based interfaces:
 Rigid and inflexible navigation
 Inefficient for large menu navigation
 Slow for expert user.
24
Natural language
 Familiar to user
 Speech recognition or typed natural language
 Problems
 Vague
 Ambiguous
e.g. The man hits the boy with the stick.
we cannot be sure whether the boy is using the stick to hit the
dog or whether the dog is holding the stick when it is hit.
She made her duck
 Successful in restricted domains.
 User must learn phrases that are (and are not) understood.
25 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
 The user is asked a series of questions (mainly with yes/no responses,
multiple choice, or codes) and so is led through the interaction step by step.
An example of this would be web questionnaires.
 Disadvantages of question and answer interfaces:
 Require valid input supplied by user
 Require familiarity with interface controls
 Can be tedious to correct mistakes
 Query languages (e.g. SQL)
26

 Used to retrieve information from database.

 Requires understanding of database structure and language
syntax, hence requires some expertise.
The effective use of query languages therefore requires some experience.
A specialized example in the case of websites is the web search engine.
27 Form-fills
 Primarily for data entry or data retrieval
 Screen like paper form.
 Data placed in relevant place
 Requires
 Good design
 Obvious correction facilities
28
29
WIMP
 WIMP = windows, icons, menus, pointers
 Currently the most common environment for interactive
computing.
 Examples Microsoft Windows for IBM PC, MacOS for Apple
Macintosh.
 Together, these elements of the WIMP interfaces are called
widgets, and they comprise the toolkit for interaction between
user and system.
30
 Three dimensional Interfaces
31 Notice here that as objects get further away they take up less screen space.
Three-dimensional workspaces give you extra space, but in a more natural
way than iconizing windows.

Figure :Web Book-using 3D

 Elements of the WIMP Interface
32

windows, icons, menus, pointers

+++
buttons, toolbars,
Palettes(E.g. font property on the ribbon), dialog boxes

Fig. Elements of the WIMP interface

33 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
34 Icons
 small picture or image
 represents some object in the interface
 often a window or action
 windows can be closed down (iconised)
 small representation for many accessible windows
 icons can be many and various
 highly stylized(formatted)
 realistic representations(E.g. my computer icon)
35 Pointers
 important component
 WIMP style relies on pointing and selecting things
 uses mouse, trackpad, joystick, trackball, cursor keys or
keyboard shortcuts
 wide variety of graphical images
36 Menus
 Choice of operations or services offered on the screen
 Required option selected with pointer

Fi l e Edi t Opt i o ns Fo nt
Ty p e wr i t e r
Sc re e n
Times

Problem – take a lot of screen space

Solution – pop-up is good: a menu that appears when needed
 37 Kinds of Menus
 Menu Bar at top of screen (normally), menu drags down
 pull-down menu - mouse hold and drag down menu(press menu)
 drop-down menu - mouse click reveals menu(having drop down list(V)
 fall-down menus - mouse just moves over bar(no press)!
 Contextual menu appears when there are:
 pop-up menus - actions for selected object
 pie menus - arranged in a circle(there is inactive centre), it arranges the options in a
circular fashion. The pointer appears in the center of the circle, and so there is the same
distance to travel to any of the selections.
 easier to select item (larger target area)
 quicker (same distance to any option)
… but not widely used!
38 Menus extras
 Cascading menus
 hierarchical menu structure
 menu selection opens new menu
 and so in ad infinitum(infinity)- Latin term
E.g. start-all programs-accessories-paint
 Keyboard accelerators
 key combinations – Have the same effect as menu item selection
 Most systems do not allow you to use the accelerators while the menu is displayed.
So, for example, the menu might say However, when the user presses function key
F3 nothing happens. F3 only works when the menu s not displayed – when the
menu is there you must press ‘F’ instead!

 two kinds:
 active when menu open – usually first letter
 active when menu closed – usually Ctrl + letter
usually different !!!
39
Menus design issues
 which kind of menu to use.
 what to include in menus at all.
 words to use in menus(action or description).
 how to group items.
 choice of keyboard accelerators.
40 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.(only one)
 check boxes
– set of non-exclusive choices.(more than one)
41
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
42
Palettes
 Problem
menu not there when you want it
 Solution
palettes – little windows of actions
 shown/hidden via menu option
e.g. available shapes in drawing package

43
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.
 Interactivity
Easy to focus on look
What about feel?
44
 Look and feel
45
 WIMP systems have the same elements:
Windows, icons., menus, pointers, buttons, etc.
 But different window systems behave differently e.g. MacOS vs
Windows menus
 appearance + behaviour = look and feel
 Initiative
 Who has the initiative?
Old: question–answer– computer
Today: WIMP interface– user
Error and repair
Can’t always avoid errors …
… but we can put them right
Make it easy to detect errors
… then the user can repair them
 Context of interaction
46
Interaction affected by social and organizational context
 The presence of other people in a work environment affects the performance of the
worker in any task.
 In order to perform well, users must be motivated.
 If the (computer) system makes it difficult for the user to perform a certain task, he
might get frustrated and his productivity could drop.
 The user may also lose motivation if a system is introduced that does not match the
actual requirements of the job to be done. In that case the user will reject the
system, be resentful(angry) and unmotivated or adapt the intended interaction to
his own requirements.
 A well designed system, however, may also work on motivating the user.
Generally, if you want someone to do something :
 Make it easy for them!
 Understand their values: individuals value  organisational value.
 Paradigms
47
48
Why Study Paradigms?

Concerns
 How can an interactive system be developed to ensure its usability?
 How can the usability of an interactive system be demonstrated or measured?
History of interactive system design provides paradigms for usable designs
What are Paradigms
 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
49 Paradigms of interaction

 New computing technologies arrive, creating a new

perception of the human—computer relationship.
 We can trace some of these shifts in the history of
interactive technologies.
 The initial paradigm
50

 Batch processing

Complete jobs processed individually.

Impersonal computing
Example Paradigm Shifts
51

 Batch processing
 Time-sharing

Interactive computing
Example Paradigm Shifts
52

 Batch processing
@#$% !
 Timesharing
 Networking

???

Community computing
Example Paradigm Shifts
53

 Batch processing
C…P… filename Move this file here,
 Timesharing
dot star… or was and copy this to there.
 Networking it R…M?
 Graphical displays
% foo.bar
ABORT
dumby!!!

Direct manipulation
Example Paradigm Shifts
54

 Batch processing
 Timesharing
 Networking
 Graphical display
 Microprocessor

Personal computing
Example Paradigm Shifts
55

 Batch processing
 Timesharing
 Networking
 Graphical display
 Microprocessor
 WWW

Global information
56 Example Paradigm Shifts

• Batch processing  A symbiosis of physical and

electronic worlds in service of
• Timesharing everyday activities.
• Networking
• Graphical display
• Microprocessor
• WWW
• Ubiquitous Computing
57
Exercise

 Discuss the advantage and disadvantage between

command language and visual interface ways of
interactions. Describe the major paradigm used in
each.
Thank you!