The Interaction

The Interaction
• Interaction models
• Translations between user and system
• Ergonomics
• Physical characteristics of interaction
• Interaction styles
• The nature of user/system dialog
Models of Interaction
Terms of Interaction
Norman Model
Interaction Framework
 Models of Interaction
• Interaction involves at least two participants: the
user and the system
• Both are complex and are very different from each
other in the way that they communicate
• The interface must effectively translate between
them to allow the interaction to be successful
• The use of models of interaction can help us to
understand exactly what is going on in the
interaction
 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
– In terms of operations or actions
e.g. select fill tool, click over triangle
 Donald Norman’s Model
• The user formulates a plan of action, which is then
executed at the computer interface
• When the plan has been executed, the user
observes the computer interface to evaluate the
result of the executed plan and to determine
further actions
 Donald Norman’s Model
• The interactive cycle can be divided into two major
phases: execution and evaluation
• Seven stages:
• 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
• Norman’s model concentrates on user’s view of the
interface
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
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
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
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
 Norman’s Model Example
• Sitting reading as evening falls
• Establish the goal: to get more light
• Form an intention: to switch on the desk lamp
• Specify the actions required: to press the lamp switch
• Execute the action
• Perceive the result: the light is on or it isn’t
• Interpret the result
• For example, if the light does not come on, you may interpret this as
indicating the bulb has blown or the lamp is not plugged in
• Evaluate the result
• For example, is there now enough light? If so, the cycle is complete.
If not, you may formulate a new intention to switch on another light
as well
 Gulf of Execution
• Degree to which the interaction possibilities of a
computer system correspond to the intentions of
the person
• The difference between the user’s formulation of
the actions and the actions allowed by the system
• If the actions allowed by the system correspond to
those intended by the user, the interaction will be
effective
 Gulf of Execution
• For example, if a person only wants to record a
movie currently being shown with her VCR
• In the language of the user, the goal can be achieved
by the action sequence "Hit the record button“
• But in the language of the VCR the correct action
sequence is:
1. Hit the record button
2. Specify time of recording via the controls X, Y, and Z
3. Select channel via the channel-up-down control
4. Press the OK button
 Gulf of Evaluation
• The degree to which the system provide
representations that can be directly perceived and
interpreted
• The difficulty of assessing the state of the system
• If the user can easily evaluate the presentation in
terms of his goal, the gulf of evaluation is small
• The more effort that is required to interpret the
presentation, the less effective the interaction
 Gulf of Evaluation
• In the VCR example, when recording, the ‘record’
control should signal that is activated or a display
should
 Human Error
• Slip
• Understand system and goal
• Correct formulation of action
• Incorrect action
• Mistake
• Don’t know the system well
• May not even have right goal
• Fixing things?
• Slip: better interface design
• Mistake: better understanding of system
 Abowd and Beale Framework
• Extension of Norman’s
• Has 4 parts:
• User
• Input
• System
• Output
• Each has its own unique language
• Interaction = translation between languages
• Problems in interaction = problems in translation
Abowd and Beale Framework
Ergonomics
Physical aspects of interfaces
 Ergonomics
• Study of the physical characteristics of interaction
• Also known as human factors
 Ergonomics: Examples
• 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 color
• e.g. use of red for warning, green for okay, awareness of
colour-blindness
 Physical Environment
• Ergonomics is concerned with the design of the
work environment
• Where will the system be used?
• By whom will it be used?
• Will users be sitting, standing or moving about?
• The physical environment in which the system is
used may influence how well it is accepted
• User should be able to reach all the controls (this
may include a user in a wheelchair)
• For long periods of use, the user should be seated
for comfort and stability
 Physical Environment Factors
• Physical position
• Users should be able to reach all controls comfortably
and see all displays
• If sitting, should be provided with back support expected
to stand for long periods
• Temperature
• Although most users can adapt to slight changes in
temperature, extremes of hot or cold will affect
performance and health
 Physical Environment Factors
• Lighting
• Adequate lighting should be provided to allow users to
see the computer screen without discomfort or
eyestrain
• Noise
• Excessive noise can be harmful to health
• Noise levels should be maintained at a comfortable level
• Time
• The time users spend using the system should be
controlled
• Excessive use of CRT displays can be harmful to users
 The Use of Color
• Blue should not be used to display critical information
• The colors used should also correspond to common
conventions and user expectations
• Red, green and yellow are colors frequently associated
with stop, go and standby respectively
• Therefore, red may be used to indicate emergency and
alarms; green, normal activity; and yellow, standby
• These conventions should not be violated without very
good cause
 The Use of Color
• Color conventions are culturally determined
• For example, red is associated with danger and
warnings in most western cultures, but in China it
symbolizes happiness and good fortune
• Awareness of the cultural associations of color is
particularly important in designing systems and
websites for a global market
Interaction Styles
Dialogue between computer and user
Distinct styles of interaction
 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
• Way of expressing instructions to the computer
directly
• Brings difficulty in use and learning; better for
expert users than novices
• Command names/abbreviations should be
meaningful
• Example: the Unix system, DOS
 Menus
• Set of options displayed on the screen, selected
using the mouse, or numeric or alphabetic keys
• Options visible
• Less recall; easier to use
• 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
 Natural Language
• Familiar to user
• Speech recognition or typed natural language
• Problems
• Ambiguous (e.g. The boy hit the dog with the stick)
• Language is by nature vague and imprecise while
computers require precise instructions
• Solutions
• Try to understand a subset
• Pick on key words
 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
 Point and Click Interfaces
• Used in:
• Multimedia
• Web browsers
• Hypertext
• Just click something
• Icons, text links or location on map
• Minimal typing
• Closely related to the WIMP style
 Three Dimensional Interfaces
• Virtual reality
• 3D workspaces
• Use for extra virtual space
• Light and occlusion give depth
• Distance effects
Elements of the
WIMP Interface
Windows, icons, menus, pointers
Buttons, toolbars,
Dialog boxes
 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
 Icons
• Small picture or image
• Represents some object in the interface
• Often a window or action
• Windows can be closed down (iconified)
• Small representation for many accessible windows
• Icons can be many and various
• Highly stylized
• Realistic representations
 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
 Menus
• Choice of operations or services offered on the screen
• Required option selected with pointer

File Edit Options Font

Typewriter
Screen
Times

• Problem: take a lot of screen space if too many items

• Solution: pop-up (menu appears when needed)
 Kinds of Menus
• Menu Bar at top of screen (normally), menu drags
down
• Pull-down menu - mouse hold and drag down 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
 Menus Extras
• 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
 Menus Design Issues
• Which kind to use
• What to include in menus
• Including too many items makes menus too long
• Words to use
• How to group items
• Items that relate to the same topic need to come under
the same heading
• Choice of keyboard accelerators
 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
 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
 Dialogue Boxes
• Information windows that pop up to inform of an
important event or request information