MMG3033

HUMAN-COMPUTER INTERACTION
Presentation Title
By the end of this lesson, students will be able to:
Discuss the difference between theories, principles and guidelines for designing
interactive systems.
Discuss the 5 high-level goals guideline in organizing the display (Smith & Mosier).
Discuss the 5 Principles of Good Design.
Discuss the 8 Golden Rules of Interface Design.
T O P I C 6
THEORIES, PRINCIPLES AND
GUIDELINES
2
I n t e r a c t i o n D e s i g n
INTERFACE is a device (hardware) or
program or area (software) used by a
user to communicate with a computer.

HCI interface mediates between the
user and the computer system.

The user forms a model known as
mental model of how the system and
enables users to predict system
performance.

3
I n t e r a c t i o n D e s i g n
It is all about facilitating the user to perform a specific task in a specific context in
a fast and efficient manner by leveraging the power of technology and design.


USER BEHAVIOR
1. There is an intended behavior that we want to create.
2. We have no direct control over the user.
3. Via IxD we have means to control the environment and to evaluate the resulting effects
L e w i n s E q u a t i o n
(, )
Behavior is a function of the user and the environment.
4
I n t e r a c t i o n D e s i g n
Designers need to understand the difference between theory, principles and
guidelines; and how they relate to each other.


DESIGN GUIDELINES DESIGN PRINCIPLES
Specific and usually context dependent
rules for designers to follow in order to
achieve the principles.

Guidelines documents can derived from
best practices from practical experience
or empirical studies.

Example:
iOS Human Interface Guidelines
OS X Human Interface Guidelines
High-level and context-free design goals
based on theories of HCI.
5
I n t e r a c t i o n D e s i g n
The FIVE high-level goals (guidelines) for data display (Smith & Mosier, 1986):
1. Consistency of data display
Consistency has been one of the cardinal rules of design.
If the interface is consistent, the user can adapt it.
During the design process, the terminology, abbreviations, formats,
colors, capitalization, and so on should all be standardized and
controlled by use of a written (or computer-managed) dictionary of
these items.
Three types of consistency: (1) Internal; (2) Analogical; and (3) External.



6
I n t e r a c t i o n D e s i g n
The FIVE high-level goals (guidelines) for data display (Smith & Mosier, 1986):
1. Consistency of data display
a. Internal consistency: the same appearance, meaning and operation
holds true for all the users interactions within the same application.



Save as and Open dialogue boxes in MS PowerPoint illustrating internal consistency
7
I n t e r a c t i o n D e s i g n
The FIVE high-level goals (guidelines) for data display (Smith & Mosier, 1986):
1. Consistency of data display
b. Analogical consistency: the correspondence between the systems
representation and the real-world phenomenon in terms of appearance,
meaning and operation.




Recycle Bin in the MS Windows environment illustrating analogical consistency
8
I n t e r a c t i o n D e s i g n
The FIVE high-level goals (guidelines) for data display (Smith & Mosier, 1986):
1. Consistency of data display
c. External consistency: the same appearance, meaning and operation
holds true for the users interactions across applications.





Save as dialog boxes in MS Word and MS PowerPoint illustrating external consistency.
9
I n t e r a c t i o n D e s i g n
The FIVE high-level goals (guidelines) for data display (Smith & Mosier, 1986):
1. Consistency of data display





DESIGN RULES FOR CONSISTENCY
Standardization of interface designs: follow accepted (usually published)
guidelines whenever possible.
Stability: do not change something unless it really needs changing.
Training: add new skills to the users skill set rather than expecting the user to
modify existing skills.
Visibility: Do not change anything unless it needs changing. If you must change,
make it a large and obvious one.
Interpretation: Consistent interpretation of user behavior by the system is more
important than consistent system objects or behaviors.
10
I n t e r a c t i o n D e s i g n
The FIVE high-level goals (guidelines) for data display (Smith & Mosier, 1986):
1. Consistency of data display





MS Access 97 Interface versus MS Access 2000. Violation of the second rule of the Consistency.
11
I n t e r a c t i o n D e s i g n
The FIVE high-level goals (guidelines) for data display (Smith & Mosier, 1986):
2. Efficient information assimilation by the user
Minimal input actions by users.
The format should be familiar to the operator and should be related to
the tasks required to be performed with the data.
This objective is served by rules for neat columns of data, left
justification for alphanumeric data, right justification of integers, lining
up of decimal points, proper spacing, use of comprehensible labels, and
appropriate measurement units and numbers of decimal digits.
12
I n t e r a c t i o n D e s i g n
The FIVE high-level goals (guidelines) for data display (Smith & Mosier, 1986):
3. Minimal cognitive load on the user
Users should not be required to remember information from one screen
for use on another screen.
Tasks should be arranged such that completion occurs with few actions,
minimizing the chance of forgetting to perform a step.
Labels and common formats should be provided for novice or
intermittent users.
13
I n t e r a c t i o n D e s i g n
The FIVE high-level goals (guidelines) for data display (Smith & Mosier, 1986):
4. Compatibility of data display with data entry
The format of displayed information should be linked clearly to the
format of the data entry.
Where possible and appropriate, the output fields should also act as
editable input fields.
14
I n t e r a c t i o n D e s i g n
The FIVE high-level goals (guidelines) for data display (Smith & Mosier, 1986):
5. Flexibility for user control of data displayed
Users should be able to get the information from the display in the form
most convenient for the task on which they are working.
GETTING THE USERS ATTENTION
Intensity
Marking
Size
Choice Of Font
Inverse Video
Blinking
Color
Audio
15
I n t e r a c t i o n D e s i g n
Control and feedback go hand in hand.
Providing feedback is probably the most accepted guideline in the design of any
interaction.
However, it is important to understand the rationale for each specific feedback
instance.
Our basic assumption is that optimal control depends on both the type of user
activity that needs to be controlled and the level of interaction. Ask:
What effect their action has had on the system?
Possible consequences of that action.
The new system state.
The new location of the user in the system or state.
Feedback can support three important factors of user activity: motivation,
control and learning.
16
I n t e r a c t i o n D e s i g n
1. Feedback should be presented in the manner that most directly supports the
action to be taken - strive for fit between the information representation needed
and presented.
2. Feedback should correspond to goals and intentions.
3. Feedback should help evaluate goal accomplishment.
4. Feedback should be sufficiently specific to control user activity. For example, the
user should always be able to abort one activity and initiate another (the system
should not take over control). Furthermore, the user should be able to control
the pace and format of presentation (e.g., controlling the speed of scrolling and
the size of the font).
5. Feedback should help develop accurate mental models.
6. Feedback should fit the task representation (verbal and visual).
7. Feedback should fit the type of behavior (controlled, automatic).
17
I n t e r a c t i o n D e s i g n
Users Feedback
18
I n t e r a c t i o n D e s i g n
Metaphor: the use of familiar terms and associations to represent a new concept.
The metaphor of the Desktop is one of the most commonly used metaphors in
HCI.
Figure depicts a metaphor. It is a globe with a chain link over it.
19
I n t e r a c t i o n D e s i g n
METAPHOR APPLICATION
Typewriting (typing, using keyboard). Word processor
Document (elements of a document and their attributes and operations). Desktop publishing
Ledger sheet (matrix structure for numbers). Spreadsheet
Drawing (with paper, pencil and palettes). Drawing and painting
Table of data (managing data organized in rows and columns). Database
20
I n t e r a c t i o n D e s i g n
Direct manipulation: an interaction style in which objects are represented and
manipulated in a manner analogous to the real world (e.g. by directly pointing at
an object and dragging it to a location rather than issuing logical instructions to
bring about the same effect).
The general guideline is to use direct manipulation whenever possible.
Consider the simple example of moving a file to a trash bin by clicking on its
icon and dragging it to the trash bin icon.
Contrast this with the same action carried out by a sequence of menu options
and commands (e.g. locating the appropriate directory of files, finding the exact
name of the file, specifying a delete command and receiving (at least in some
operating systems) confirmation that the file had been deleted).


21
I n t e r a c t i o n D e s i g n
22
I n t e r a c t i o n D e s i g n
Designs should be aesthetically pleasing ideally without compromising on the
usefulness and usability of the system.


Aesthetics in Screen Design
23
I n t e r a c t i o n D e s i g n
CRITERION AESTHETICS RULE EXAMPLE
Balance Balance the optical weight of screen elements. Do not place heavy (large) elements on one side
of the screen and light elements on the other
side.
Equilibrium Maintain a midway center of suspension. Place the center of the layout on the center of
the screen.
Symmetry Arrange elements so that elements on one side
of the center line are replicated on the other
side.
Background colors gradually fade off similarly in
upper and lower parts of the screen.
Order Order elements to correspond with hierarchy of
perceptual prominence.
Order from left to right the bigger objects on the
screen.
Consistent
ratios
Maintain a consistent ratio between height and
width.
If the overall frame is wider than higher, arrange
the elements to follow this ratio.
Unity Attempt coherence of the layout by keeping
elements in relative proximity.
Arrange elements in closer proximity one to
another than distance to frame.
Alignment Align elements horizontally and vertically. Three text boxes roughly of the same size but
misaligned are usually disturbing to the eye.
Density Optimize the occupied areas of the screen. Leaving about half of the screen area as white
space is pleasing to the eye.
Rhythm Introduce regular patterns of changes in the
elements.
Two moving elements on the screen should
move at the same pace.
24
I n t e r a c t i o n D e s i g n
More fundamental, widely applicable, and enduring than guidelines.
Why we refer to principles? To prevent errors.
Need more clarification.
Fundamental principles:
Determine users skill levels
Identify the tasks and user needs
More specific example of enhance principles in HCI are:
The 5 Principles of Good Design
The 8 Golden Rules of Interface Design



25
I n t e r a c t i o n D e s i g n
1. NATURALNESS
A good interface appears to be natural and seem to be an appropriate way of
performing the task.
Should reflect the users task syntax and semantic.
Should be self explanatory and idiomatic.
Should not use the jargon of information technology but it might well use
jargon of the users task (language that the user is familiar with).
The system should adapt to the needs of the user and not expect the user to
adapt to its needs.
Where possible, do not require the user to learn and remember new
concepts or vocabulary.

The 5 Principles of Good Design
26
I n t e r a c t i o n D e s i g n
1. NATURALNESS
A natural dialogue is one which does not cause the user to significantly alter
their approach to the task in order to interact with the system.
Use vocabulary familiar to the user. Jargon should be that used in the client
company or target user, and not that used in the software development
house.
Vocabulary should be self-explanatory. For example print and copy are
easy to interpret, whereas mv (move the Unix keyword for rename) isnt.
Use of non-standard abbreviations should be avoided since they slow down
word recognition and introduce unnecessary stress.
The 5 Principles of Good Design
27
I n t e r a c t i o n D e s i g n
1. NATURALNESS

The 5 Principles of Good Design
28
I n t e r a c t i o n D e s i g n
2. CONSISTENCY
The interface should reinforce the users expectations from any previous
interaction with the system or with similar systems.
Ensure that all labels are used consistency, e.g. make sure that exit is
always exit and not sometime quit.
Means, consistent throughout :
Requirement for input
Getting command from user
Language of system messages
System prompts
Methods for selection
Termination of input or cancelling of commands
Format of screen output
Format for menus, messages etc.


The 5 Principles of Good Design
29
I n t e r a c t i o n D e s i g n
2. CONSISTENCY
The 5 Principles of Good Design
30
I n t e r a c t i o n D e s i g n
3. NON-REDUNDANCY
The interface should not ask for redundant material. It should require the
minimum of user input and system output necessary for the completion of
users task ---- MINIMALISTIC DESIGN @ MINIMALISM
There should be the minimum keyset / keystroke effort to maximize user
performance and prevent unnecessary errors.
The system should not offer or request anything that it can derive from
previous inputs, or anything that will not be used.
Information requests should be obvious and relevant.
The systems output should be simple and easy to understand.
Making technical implementation is more easier than on the users needs and
comfort. HCI must emphasis to be placed firmly on the users needs.
The 5 Principles of Good Design
31
I n t e r a c t i o n D e s i g n
3. NON-REDUNDANCY
The 5 Principles of Good Design
32
I n t e r a c t i o n D e s i g n
4. SUPPORTIVENESS
The supportiveness of a dialogue refers to the amount of assistance the
dialogue provides to the user in running the system.
It has 3 major aspects:
The quantity and quality of instructions provided;
The nature of the error messages produced; and
The confirmation of what the system is doing.
A good development team will know well in advance what the user is doing
and the level of understanding the user has of both the task and the system.
The sort of questions the user may well want answered are :
Where am I? How did I get here? What is happening? Where can I go next? How do I get
there? What can I do?
The 5 Principles of Good Design
33
I n t e r a c t i o n D e s i g n
4. SUPPORTIVENESS
Error messages should be helpful and not obscure, for example syntax error
is not at all helpful. At very least, the system should tell the user what caused
the syntax error, for example: missing : on line 42.

The 5 Principles of Good Design
34
I n t e r a c t i o n D e s i g n
5. FLEXIBILITY
Flexibility of a dialogue refers to how well it can cater for or tolerate different
levels of user familiarity and performance.
The interface should accommodate differences in user requirements, user
preferences and level of performance.
The interface also need to provide a variety of support levels and should
allows personalized output formats.
For example, a hierarchical menu structure for use by a first time user may be
navigated using commands and parameters once the user becomes more
experienced.
The 5 Principles of Good Design
35
I n t e r a c t i o n D e s i g n
5. FLEXIBILITY
The 5 Principles of Good Design
36
I n t e r a c t i o n D e s i g n
The following design principles are published by IBM:
Simplicity: Don't compromise usability for function
Support: Place the user in control and provide proactive assistance
Familiarity: Build on users' prior knowledge
Obviousness: Make objects and their controls visible and intuitive
Encouragement: Make actions predictable and reversible
Satisfaction: Create a feeling of progress and achievement
Availability: Make all objects available at all times
Safety: Keep the user out of trouble
Versatility: Support alternate interaction techniques
Personalization: Allow users to customize
Affinity: Bring objects to life through good visual design
Commercial Example [IBM]
37
I n t e r a c t i o n D e s i g n
1. Strive for consistency.
Consistent sequences of actions should be required in similar situations;
identical terminology should be used in prompts, menus, and help screens;
and consistent commands should be employed throughout.
2. Enable frequent users to use shortcuts.
As the frequency of use increases, so do the user's desires to reduce the
number of interactions and to increase the pace of interaction.
Abbreviations, function keys, hidden commands, and macro facilities are
very helpful to an expert user.
3. Offer informative feedback.
For every operator action, there should be some system feedback. For
frequent and minor actions, the response can be modest, while for
infrequent and major actions, the response should be more substantial.
The 8 Golden Rules of Interface Design
38
I n t e r a c t i o n D e s i g n
4. Design dialog to yield closure.
Sequences of actions should be organized into groups with a beginning,
middle, and end. The informative feedback at the completion of a group of
actions gives the operators the satisfaction of accomplishment, a sense of
relief, the signal to drop contingency plans and options from their minds, and
an indication that the way is clear to prepare for the next group of actions.
5. Offer simple error handling.
As much as possible, design the system so the user cannot make a serious
error. If an error is made, the system should be able to detect the error and
offer simple, comprehensible mechanisms for handling the error.
The 8 Golden Rules of Interface Design
39
I n t e r a c t i o n D e s i g n
6. Permit easy reversal of actions.
This feature relieves anxiety, since the user knows that errors can be
undone; it thus encourages exploration of unfamiliar options. The units of
reversibility may be a single action, a data entry, or a complete group of
actions.
7. Support internal locus of control.
Experienced operators strongly desire the sense that they are in charge of
the system and that the system responds to their actions. Design the system
to make users the initiators of actions rather than the responders.
8. Reduce short-term memory load.
The limitation of human information processing in short-term memory
requires that displays be kept simple, multiple page displays be
consolidated, window-motion frequency be reduced, and sufficient training
time be allotted for codes, mnemonics, and sequences of actions.
The 8 Golden Rules of Interface Design
40
I n t e r a c t i o n D e s i g n
Beyond the specifics of guidelines.
Principles are used to develop theories.
EXPLANATORY
THEORIES
PREDICTIVE
THEORIES
PERCEPTUAL OR
COGNITIVE SUBTASKS
THEORIES
MOTOR-TASK
PERFORMANCE TIMES
THEORIES
Observing
behavior
Describing activity
Conceiving of
designs
Comparing high-
level concepts of
two designs
Training
Enable designers
to compare
proposed designs
for execution time
or error rates
Conceive

Predicting reading
times for free text,
lists, or formatted
displays

Predicting
keystroking or
pointing times
MMG3033
HUMAN-COMPUTER INTERACTION
Presentation Title
Discuss the difference between theories, principles and guidelines for
designing interactive systems.
Discuss the 5 high-level goals guideline in organizing the display (Smith &
Mosier).
Discuss the 5 Principles of Good Design.
Discuss the 8 Golden Rules of Interface Design.

TOPI C 06

SUMMARY