Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.

Yonglei TaoYonglei TaoSchool of Computing & Info School of Computing & Info

SystemsSystemsGVSUGVSU

Ch 7 Design Guidelines

GuidelinesGuidelines

1. Help the user build and use a workable mental model

2. Minimize modal interaction3. Reduce the cognitive workload

of the user4. Let the user be in charge

1-2

Guideline 1Guideline 1Help the user build and use a

workable mental model◦Consistent with the intended tasks◦Consistent representations◦Use concrete and familiar ideas for

metaphors◦Use the user’s language◦Guide new users through normal and

reasonable patterns of usage◦Provide feedback

1-3

4

ConsistencyConsistencyFunctional consistency

◦ The same action should have the same result regardless of the mode the application is in

Consistent appearance/behavior◦ comparable operations should be

expressed in the same wayConsistency within and among

applications

BenefitsBenefitsPredictable in appearance and

behavior throughout the application’s display of information, manner of manipulating information, and methods of navigation

Facilitating user’s learning◦ Result in great productivity and efficiency

Reusable design◦ Increase productivity and product quality

1-5

6

Consistent Appearance Consistent Appearance and Behaviorand Behavior

7

User FamiliarityUser Familiarity Do not force users to adapt to an

interface just because it is convenient to implement◦ Use terms and concepts from the

experience of users◦ Hide the underlying implementation of

interfaces (such as files and data structures)

Consistency with the real world◦ base interface design on a real-world

metaphor

8

Minimal SurpriseMinimal Surprise Users get irritated when a system

behaves in an unexpected way Need to ensure that comparable

actions have comparable effects Users become confused or panic if no

response to their actions from the system

Guideline 2Guideline 2Minimize modal interactionVisibility

1-9

VisibilityVisibilityMaking the user aware of the system’s

components and processes, including all possible functionality and feedback from user actions.◦ Reduce memory load

Recognition/Recall◦ the principle of visibility is based on the fact that we

are better at recognition than we are at recall

1-10

Show everything at once, and the result is

chaos.

Don’t show everything, and then stuff gets lost.

(Norman, 1998, 74)

11

Can You Tell between Edit Can You Tell between Edit and Preview ?and Preview ?

12

Excel ModeExcel Mode

13

Excel Mode (Cont.)Excel Mode (Cont.)

Mode of a Mobile Phone Mode of a Mobile Phone

1-14

Guideline 3Guideline 3Reduce the cognitive workload of

the user◦Present options clearly and explicitly

without multiple, reasonable interpretations

◦Reduce the number of cognitive transformations or translations from the interface to the user’s mental model

1-15

16

ClarityClarity

Visual clarity◦ graphical representations can be clearly

identified Conceptual clarity

◦ behavior of control is clear◦ the metaphor is easily recognized

Linguistic clarity◦ meaning of labels and static text clarify

contents

17

Visual ClarityVisual Clarity

Reduce the User’s Info Reduce the User’s Info LoadLoadUsers 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.

1-18

Common TechniquesCommon TechniquesRecognition, rather than recallAllow users to perform actions by

choosing alternatives presented on the screen, as opposed to remember particular command or name

Build on user's frame of reference Labels and common formats should be

provided for users

1-19

Techniques - SimplicityTechniques - Simplicity

Simple things are easy to understand and, therefore, easy to learn and remember

◦ 80/20 Rule - 80% of an application’s usage involves 20% of its functionality

◦ Combines the conflicting needs of finding the optimal solution that satisfies all the requirements

1-20

1-21

ExampleExample

1-22

ExampleExample

Techniques - Progressive Disclosure

1-23

ConstraintsConstraints

Limiting the actions that can be performed in a particular design

Controls the design’s simplicity

1-24

Guideline 4Guideline 4Let the user be in charge

◦Allow users to accomplish tasks directly

◦Allow users to try again◦Provide appropriate feedback to

users

1-25

26

Make the Interface Make the Interface ForgivingForgiving

Users inevitably make mistakes when using a system

Users should be able to explore without fear of causing an irreversible mistake◦ Prevention◦ Toleration◦ Recovery

Common TechniquesCommon TechniquesAllow the user to select instead of

typingDisable improper menu items or

buttons by graying the option Confirm destructive actions or actions

that result in an unexpected loss of user info (such as Cancel, OK command buttons)

Provide undo and redo facilities

1-27