Systems Analysis and
Design
Alan Dennis, Barbara Wixom, and David
Tegarden
John Wiley & Sons, Inc.
Slides by Fred Niederman
Edited by Dr. Sara Stoecklin
Slide 1
PowerPoint Presentation for Dennis, Wixom & Tegarden
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Copyright © 2001
John Wiley & Sons, Inc.
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.
Request 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
use only and not for redistribution or resale.
The Publisher assumes no responsibility for errors,
omissions, or damages, caused by the use of these
programs or from the use of the information contained
herein.
Slide 2
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Objectives
■ Understand several fundamental user interface
design principles.
■ Understand the process of user interface design.
■ Understand how to design the user interface
structure.
■ Understand how to design the user interface
standards.
■ Understand commonly used principles and
techniques for navigation design.
■ Understand commonly used principles and
techniques for input design.
■ Understand commonly used principles and
techniques for output design.
■ Be able to design a user interface.
Slide 3
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Principles for User Interface
Design
Slide 4
PowerPoint Presentation for Dennis, Wixom & Tegarden
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
User Interface Design
Process
Chapter 12
Slide 5
PowerPoint Presentation for Dennis, Wixom & Tegarden
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Key Definitions
The navigation mechanism provides the
way for users to tell the system what to
do
The input mechanism defines the way
the system captures information
The output mechanism defines the way
the system provides information to users
or other systems
Slide 6
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Key Definitions
The graphical user interface
(GUI) is the most common type
of interfaces most students are
likely to use personally and for
developing systems.
Slide 7
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
HCI Requirements
HCI Specifications
Standards
MIL-H-46855B
AFSC-DH 1-3
MIL-STD-1472
MIL-HDBK-759A
Factors
Noise, Lighting, Temperature, Humidity, Air Flow, Vibration,
G-Forces, Motion, Reduced Oxygen, Air Pressure
Slide 8
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Principles
Slide 9
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Principles - Layout
First Element of Design – Basis Layout of the
screen, form, or report. Items to Consider
Multiple layout areas
Navigation Areas
Data Areas
Boundaries
Order of the layout
Horizontal vs. Vertical
Slide 10
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Principles – Content Awareness
Content Awareness – ability of a user interface
to make the user aware of the information it
contains with the LEAST amount of effort.
All elements in the design need to be
considered when making sure this principle is
followed. Items such as navigation, fields,
areas, information, graphics, all need to be
considered.
Slide 11
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Principles – Aesthetics
Aesthetics deals with the pleasing to the eyd
component of design.
In most cases “simple, minimalist designs are
best”
White space is good to make the eye feel
comfortable searching for items.
Fonts less than 8 are usually not pleasing.
Colors can help but be careful.
Slide 12
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Principles – User Experience
There are two types of users– those with
experience using user interfaces and those
without.
You have to present your interfaces as if they
had no experience.
Make quick access to well-known functions.
Keep it simple.
Slide 13
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Principles – Consistency
Single most important factor in the design of
interface.
Make things as standard as possible.
If no standard exists, try to make everyone
agree on just a few.
The back key, the pagedown key should always
work the same. Other standards help to make
the interface intuitive.
Slide 14
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Principles – Minimize User Effort
Make sure there is not more effort than needed.
We all know from BB that one more click may
do NOTHING but add to your stress.
Slide 15
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
We have defined use cases, objects and
their relationships through object
diagrams and sequence diagram to define
interactions between objects.
We are now ready to define and design our
screens. Perhaps we need a method of
specification.
Slide 16
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Use Scenario Development
Step 1
Step 5
Step 4
Slide 17
Step 2
Step 3
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Use Scenario Development
Step 1
Analyst examines
use casesStep
and
use case
Step 5
2
descriptions (we have not yet developed
sequence diagrams in our methodology).
Analyst interviews users to determine their
needs to perform the necessary actions quickly
Step 4
Step 3
and smoothly
Slide 18
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Use Scenario Development
Step 2
The structure defines the
basic components of Step
the1
interface and shows their
Step 5
functionality.
Select edit
Esc, back
Edit Screen
Step 2
Main Menu
Select
Stepsave
4
Step
3 Dialog
Save
Esc
Slide 19
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Use Scenario Development
Step 2
The structure defines the
basic components of Step
the1
interface and shows their
Step 5
functionality.
Screen
Main Menu
Main Menu
N/A
Edit Screen
Esc, back
Save Dialog
Slide 20
------
Step 2
Edit Screen
Select Edit
N/A
esc
Save Dialog
------
Select save
N/A
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Window Navigation Diagram
Slide 21
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Use Scenario Development
Step 3
Interface Standards Design
Step 1
This process is done after some of the more
5
Step 2
common user Step
interfaces
have
been defined
and designed.
It is used to define those
items common to most of
the user interfaces.
Slide 22
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Interface Standards Design
The interface standards are the
basic design elements that are
common across the individual
screens, forms, and reports
within the system.
Slide 23
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Use Scenario Development
Step 4
Step 1
Interface Design Prototyping
5
Step 2
This process isStep
done
again iteratively
after a
few and then more screens are designed.
Getting user signoff as
you go is much easier
than one big splash at the
end.
Slide 24
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Interface Design Prototyping
Storyboard
HTML Prototype
Language Prototype
Slide 25
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Interface Design Prototyping
Storyboard
Simplest technique
Paper-based with hand drawn
mock up screens on paper
Navigation is done by the story
teller flipping thru the screens as
you would a cartoon tale.
Slide 26
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Interface Design Prototyping
HTML Prototype
Most common type of prototype
Web pages are built with the most
fundamental portions of the
screens
Users click thru the screens
entering pretend data
Slide 27
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Interface Design Prototyping
Language Prototype
Built using a prototype language
or tool to build the screens and
navigation.
Users can move thru the screens
with no real processing behind the
screen.
These screens can be exactly as
the user will eventually use them.
Slide 28
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Interface Design Prototyping
Selecting the right technique
Storyboard is simplest and cheapest
but least like the real screens
Language is expensive but is the most
detailed and most like the real screens
HTML is not cheap but not expensive
and makes the screens seem real.
Slide 29
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Interface Design Prototyping
Interface Evaluation
Need 10 or more users
Should be as complete as possible
Four techniques
Heuristic
 Walkthrough
 Interactive
 Formal Usability Testing

Slide 30
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Interface Design Prototyping
Heuristic –
evaluates by some principles of
interface design –
team develops a checklist of
principles about navigation, input
and output design and assures
the interface meets the checklist
requirements.
Slide 31
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Interface Design Prototyping
Walkthrough
A meeting conducted by the team
to allow the users to operate the
system mentally with the
guidance of the team physically.
User identifies improvements and
problems.
Slide 32
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Interface Design Prototyping
Interactive
Users themselves operate the
system
Document improvements and
problems.
Slide 33
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Interface Design Prototyping
Formal Usability Testing
A formal walkthru of the user
interface with recordings of
keystrokes, errors, etc.
The interface either fails or passes
the test done by the user. The
user never fails
Usually the user is a professional
tester.
Slide 34
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
NAVIGATION DESIGN
Slide 35
PowerPoint Presentation for Dennis, Wixom & Tegarden
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Basic Principles
Assume users
Have not read the manual
Have not attended training
Do not have external help readily
at hand
All controls should be clear and
understandable and placed in an
intuitive location on the screen.
Slide 36
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Basic Principles
Prevent mistakes
Limit choices
Never display commands that can’t be
used (or “gray them out”)
Confirm actions that are difficult or
impossible to undo
Simplify recover from mistakes
Use consistent grammar order
Slide 37
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Types of Navigation
Control
Languages
Command language
Natural language
Menus
Generally aim at broad shallow menu
Consider using “hot keys”
Direct Manipulation
Used with icons to start programs
Used to shape and size objects
May not be intuitive for all commands
Slide 38
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
A Traditional Menu in a
UNIX System
Slide 39
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Menu Tips
Menus should be broad and shallow rather than
narrow and deep.
Most information is presented initially requiring
less keystrokes
One menu should contain no more than 8 items
and take no more than two clicks to perform an
action (BB should have read this)
Menus should put together like items so the user
can intuitively guess what each contains. Better
to group them by types of objects
Slide 40
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Common Types of Menus
Menu
Bar
Tool
Bar
Drop
Down
Menu
Slide 41
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Example of an Image Map
Slide 42
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Types of Menus
Types of Menus
Menu bar
Drop-down menu
Pop-up menu
Tab menu
Toolbar
Image map
Slide 43
When
Would You
Use Each of
These Menu
Types?
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Message Tips
Should be clear, concise, and
complete
Should be grammatically correct
and free of jargon and
abbreviations (unless they are
the users)
Avoid negatives and humor
Slide 44
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Types of Messages
Types of Messages
Error message
Confirmation message
Acknowledgment message
Delay message
Help message
Slide 45
When
Would You
Use Each of
These
Message
Types?
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
An Example of Crafting an
Error Message
Slide 46
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
INPUT DESIGN
Slide 47
PowerPoint Presentation for Dennis, Wixom & Tegarden
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Basic Principles
The goal is to simply and easily
capture accurate information for
the system
Reflect the nature of the inputs
Find ways to simplify their
collection
Slide 48
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Online versus Batch
Processing
Online processing immediately records
the transaction in the appropriate
database
Batch processing collects inputs over
time and enters them into the system at
one time in a batch
Batch processing simplifies data
communications and other processes,
but means that inventory and other
reports are not accurate in real time
Slide 49
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Capture Data at the
Source
Reduces duplicate work
Reduces processing time
Decreases cost
Decreases probability of error
Slide 50
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Source Data Automation
Can be obtained by using the
following technologies:
bar code readers
optical character recognition
magnetic stripe readers
smart cards
How can internet be used for
source data automation?
Slide 51
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Minimize Keystrokes
Never ask for information that
can be obtained in another way
List selection is more efficient
than entering information
Use default values where
possible
Slide 52
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Types of Inputs
Data items linked to fields
Text
Numbers
Selection boxes
Slide 53
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Types of Input Boxes
Slide 54
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Types of Selection Boxes
Types of Boxes
Check box
Radio button
On-screen list box
Drop-down list box
Combo box
Slider
Slide 55
When
Would You
Use Each of
These
Box
Types?
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Types of Input Validation
Types of Validation
Completeness check
Format check
Range check
Check digit check
Consistency check
Database checks
Slide 56
When
Would You
Use Each of
These
Validation
Methods?
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
OUTPUT DESIGN
Slide 57
PowerPoint Presentation for Dennis, Wixom & Tegarden
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Basic Principles
Understand report usage
Reference or cover-to-cover?
Frequency?
Real-time or batch reports?
Manage information load
All needed information, no more
Minimize bias
Slide 58
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Bias in Graphs
Slide 59
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Types of Reports
Types of Reports
Detail reports
Summary report
Turnaround document
Graphs
Slide 60
When
Would You
Use Each of
These
Report
Types?
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Report Media
Electronic
Versus Paper
Slide 61
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Summary
The fundamental goal of navigation
design is to make the system as simple
to use as possible
The goal of input mechanism is to simply
and easily capture accurate information
The goal of the output mechanism is to
provide accurate information to users
that minimize information overload and
bias
Slide 62
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.
Expanding the Domain
For many years, the University
of Maryland has been a leader
in research for ideas in humancomputer interfaces. For more
information investigate:
http://www.cs.umd.edu/hcil/
Slide 63
PowerPoint Presentation for Dennis, Wixom & Tegardem
Systems Analysis and Design
Copyright 2001 © John Wiley & Sons, Inc. All rights reserved.