Systems Analysis and Designmiftakulamin.polsri.ac.id/adbo/ch12 Principles for User Interface...

Systems Analysis and Systems Analysis and DesignDesignDesignDesign

Alan Dennis, Barbara Wixom, and David Tegardenega de

John Wiley & Sons, Inc.

Slides by Fred Niederman

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.

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.

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

Principles for User Interface Principles for User Interface Design

P i i lPrinciples

User Interface Design User Interface Design Process

Chapter 12

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

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.

U S i D lUse Scenario Development

Wi d N i i DiWindow Navigation Diagram

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.

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

Formal Usability Testing

NAVIGATION DESIGN

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.

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

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

May not be intuitive for all commands

A Traditional Menu in a UNIX S tUNIX System

C T f MCommon Types of Menus

E l f I MExample of an Image Map

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

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

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

An Example of Crafting an E MError Message

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?

INPUT DESIGN

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

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

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?

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

T f I tTypes of Inputs

Data items linked to fieldsData items linked to fieldsTextNumbersSelection boxesSelection boxes

T f I t BTypes of Input Boxes

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

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

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?

OUTPUT DESIGN

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

T f R tTypes of Reports

Types of Reports WhenTypes of Reports

Detail reports

WhenWould YouUse Each ofTh

pSummary reportTurnaround documentGraphs

These ReportTypes?yp

R t M diReport Media

Electronic

Versus Paper

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?

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

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/

Systems Analysis and Designmiftakulamin.polsri.ac.id/adbo/ch12 Principles for User Interface...

Documents

Product Catalogue - Pinter Mess- und Regeltechnik GmbH...0 - 60 bar P1213A-030-ADZO P1213A-030-ADXO P1213A-030-ADBO P1213A-030-ADIO 0 - 100 bar P1213A-031-ADZO - P1213A-031-ADBO -

Ch12 Miranda

KUIS ADBO Qurban Online

Ch12 portfolio

Ch12 Encryption

Ch12 enzymes

Brakes Ch12

Robertson ch12

Laporan Tugas Akhir ADBO - Sistem Informasi Pengelolaan Acara

MedTerm Ch12

CH12 MANIVES

Ch12 randalgs

HazMat Ch12

Management ch12

Fm10e ch12

Apus ch12

Ch12 speedsection2

Ch12 speedsection3

MGT366 Ch12

Ch12 presidentppt