Systems Analysis and Designmiftakulamin.polsri.ac.id/adbo/ch12 Principles for User Interface Design.pdfTitle: Microsoft PowerPoint - ch12 Principles for User Interface Design [Compatibility

Systems Analysis and Systems Analysis and DesignDesignDesignDesign

Alan Dennis, Barbara Wixom, and David Tegardenega de

John Wiley & Sons, Inc.

Slides by Fred Niederman

PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and DesignCopyright 2001 © John Wiley & Sons, Inc. All rights reserved.

Slide 1

Copyright © 2001 J h Wil & S IJohn Wiley & Sons, Inc.

All rights reserved. Reproduction or translation of this All rights reserved. Reproduction or translation of this work beyond that permitted in Section 117 of the 1976 United States Copyright Act without the express written permission of the copyright owner is unlawful. p py gRequest for further information should be addressed to the Permissions Department, John Wiley & Sons, Inc. The purchaser may make back-up copies for his/her own The purchaser may make back up copies for his/her own use only and not for redistribution or resale. The Publisher assumes no responsibility for errors, omissions, or damages, caused by the use of these omissions, or damages, caused by the use of these programs or from the use of the information contained herein.

PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and DesignCopyright 2001 © John Wiley & Sons, Inc. All rights reserved.

Slide 2

Obj tiObjectives■ Understand several fundamental user interface

design principles.■ Understand the process of user interface design.■ Understand how to design the user interface ■ Understand how to design the user interface

structure.■ Understand how to design the user interface

standards.standards.■ Understand commonly used principles and

techniques for navigation design.■ Understand commonly used principles and ■ Understand commonly used principles and

techniques for input design.■ Understand commonly used principles and

techniques for output design.


Slide 3

techniques for output design.■ Be able to design a user interface.

Principles for User Interface Principles for User Interface Design


Slide 4

P i i lPrinciples


Slide 5

User Interface Design User Interface Design Process

Chapter 12


Slide 6

K D fi itiKey Definitions

The navigation mechanism provides the The navigation mechanism provides the way for users to tell the system what to doThe input mechanism defines the way the system captures informationy pThe output mechanism defines the way the system provides information to users or other systems


Slide 7

K D fi itiKey Definitions

The graphical user interface The graphical user interface (GUI) is the most common type f f dof interfaces most students are

likely to use personally and for developing systems.


Slide 8

U S i D lUse Scenario Development


Slide 9

Wi d N i i DiWindow Navigation Diagram


Slide 10

I f S d d D iInterface Standards Design

The interface standards are the The interface standards are the basic design elements that are

h d d lcommon across the individual screens, forms, and reports within the system.


Slide 11

I f D i P iInterface Design Prototyping

StoryboardStoryboardHTML PrototypeLanguage PrototypeInterface Evaluation

HeuristicWalkthroughWalkthroughInteractive

Formal Usability TestingPowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design

Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.Slide 12

Formal Usability Testing

NAVIGATION DESIGN


Slide 13

B i P i i lBasic Principles

Assume usersAssume usersHave not read the manualHave not attended trainingDo not have external help readily p yat hand

All controls should be clear and All controls should be clear and understandable and placed in an intuitive location on the screen.


Slide 14

intuitive location on the screen.


Prevent mistakesPrevent mistakesLimit choicesNever display commands that can’t be used (or “gray them out”)C fi ti th t diffi lt Confirm actions that are difficult or impossible to undo

Si lif f i kSimplify recover from mistakesUse consistent grammar order


Slide 15

Use consistent grammar order

Types of Navigation C t lControl

LanguagesLanguagesCommand languageNatural languagea u a a guage

MenusGenerally aim at broad shallow menuConsider using “hot keys”

Direct ManipulationUsed with icons to start programsUsed to shape and size objectsM t b i t iti f ll d


Slide 16

May not be intuitive for all commands

A Traditional Menu in a UNIX S tUNIX System


Slide 17

C T f MCommon Types of Menus


Slide 18

E l f I MExample of an Image Map


Slide 19

T f MTypes of Menus

Types of Menus WhenTypes of Menus

Menu barDrop-down menu

WhenWould YouUse Each ofTh M

pPop-up menuTab menuToolbar

These MenuTypes?

Image map


Slide 20

M TiMessage Tips

Should be clear concise and Should be clear, concise, and completeShould be grammatically correct and free of jargon and and free of jargon and abbreviations (unless they are the users)the users)Avoid negatives and humor


Slide 21

T f MTypes of Messages

Types of Messages WhenTypes of Messages

Error message

WhenWould YouUse Each ofTh

gConfirmation messageAcknowledgment messageDelay message

These MessageTypes?

Help messageyp


Slide 22

An Example of Crafting an E MError Message


Slide 23

Y TYour Turn

Pretend that you are designing Pretend that you are designing the new interface to a career services system at your university.How would you incorporate the basic principles of input design basic principles of input design into your interface design?


Slide 24

INPUT DESIGN


Slide 25


The goal is to simply and easily The goal is to simply and easily capture accurate information for hthe system

Reflect the nature of the inputsReflect the nature of the inputsFind ways to simplify their collectioncollection


Slide 26

Online versus Batch P iProcessing

Online processing immediately records Online processing immediately records the transaction in the appropriate databaseBatch processing collects inputs over time and enters them into the system at yone time in a batchBatch processing simplifies data communications and other processes, but means that inventory and other

t t t i l tiPowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design


reports are not accurate in real time

Capture Data at the SSource

Reduces duplicate workReduces duplicate workReduces processing timeDecreases costDecreases probability of errorp y


Slide 28

S D t A t tiSource Data Automation

Can be obtained by using the Can be obtained by using the following technologies:

bar code readersoptical character recognitionmagnetic stripe readerssmart cards

How can internet be used for source data automation?


Slide 29

Mi i i K t kMinimize Keystrokes

Never ask for information that Never ask for information that can be obtained in another wayList selection is more efficient than entering informationthan entering informationUse default values where possiblepossible


Slide 30

T f I tTypes of Inputs

Data items linked to fieldsData items linked to fieldsTextNumbersSelection boxesSelection boxes


Slide 31

T f I t BTypes of Input Boxes


Slide 32

T f S l ti BTypes of Selection Boxes

Types of Boxes WhenTypes of Boxes

Check boxRadio button

WhenWould YouUse Each ofTh On-screen list box

Drop-down list boxCombo box

These BoxTypes?

Slideryp


Slide 33

T f I t V lid tiTypes of Input Validation

Types of Validation WhenTypes of Validation

Completeness checkFormat check

WhenWould YouUse Each ofTh Range check

Check digit checkConsistency check

These ValidationMethods?

Database checks


Slide 34

Y TYour Turn

Consider a Web form that a student Consider a Web form that a student would use to input student and resume information into a career resume information into a career services application.

Sketch o t ho this fo m o ld look Sketch out how this form would look and what data fields would be usedWhat validity checks would you need?What validity checks would you need?


Slide 35

OUTPUT DESIGN


Slide 36


Understand report usageUnderstand report usageReference or cover-to-cover?Frequency?Real-time or batch reports?Real time or batch reports?

Manage information loadAll d d i f i All needed information, no more

Minimize biasPowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design


Bi i G hBias in Graphs


Slide 38

T f R tTypes of Reports

Types of Reports WhenTypes of Reports

Detail reports

WhenWould YouUse Each ofTh

pSummary reportTurnaround documentGraphs

These ReportTypes?yp


Slide 39

R t M diReport Media

Electronic

Versus Paper


Slide 40

Y TYour Turn

Under what conditions would you be Under what conditions would you be most likely to replace reports on paper with ones delivered paper with ones delivered electronically? When might you NOT want to make the change?NOT want to make the change?


Slide 41



SSummary

The fundamental goal of navigation The fundamental goal of navigation design is to make the system as simple to use as possiblepThe goal of input mechanism is to simply and easily capture accurate informationy pThe goal of the output mechanism is to provide accurate information to users that minimize information overload and bias


Slide 44

E di th D iExpanding the Domain

For many years the University For many years, the University of Maryland has been a leader

h f d hin research for ideas in human-computer interfaces. For more information investigate:http://www cs umd edu/hcil/http://www.cs.umd.edu/hcil/


Slide 45

Documents

Systems Analysis and Designmiftakulamin.polsri.ac.id/adbo/ch12 Principles for User Interface Design.pdfTitle: Microsoft PowerPoint - ch12 Principles for User Interface Design [Compatibility