mmg3033 - topic 06 theories principles & guidelines

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


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


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


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




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




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




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




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




MS Access 97 Interface versus MS Access 2000. Violation of the second rule of the Consistency.

11



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



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



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



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


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


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


Users Feedback

18


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


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


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


22


Designs should be aesthetically pleasing ideally without compromising on the

usefulness and usability of the system.

Aesthetics in Screen Design

23


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


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


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.


26


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.


27


1. NATURALNESS


28


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.


29


2. CONSISTENCY


30


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.


31


3. NON-REDUNDANCY


32


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?


33


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.


34


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.


35


5. FLEXIBILITY


36


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


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.


38


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.


39


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.


40


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.

TOPIC 06

SUMMARY

mmg3033 - topic 06 theories principles & guidelines

Documents

n t e r

t o p i c

e w i n s e q u

highlevel goals guidelines

data display smith mosier

internal consistency

analogical consistency

guidelines documents