CSUN Information Systems
Systems Analysis & Design
http://www.csun.edu/~dn58412/IS431/IS431_F15.htm
Input/Output Design &
User Interface
IS 431: Lecture 10
1
Interface Design in SDLC
IS 431 : Lecture 10
2
Output Design
 Internal, external, and turnaround outputs.
 Detailed, summary, and exception reports.
 Output implementation methods (Media).
 Formats for presenting information (Charts, Tables,
Screen Outputs)
 Guidelines and process for output design.
IS 431 : Lecture 10
3
Internal Outputs
 Internal outputs: for the internal system owners and
system users within an organization.
– Detailed reports present information with little or no
filtering.
– Summary reports categorize information for managers
who do not want to wade through details (presented in
graphical formats - executive info systems).
– Exception reports filter detailed information before
presenting it.
IS 431 : Lecture 10
4
External Outputs
 External outputs: for customers, suppliers, partners,
or regulatory agencies outside the organization.
 Turnaround documents are external outputs that
eventually re-enter the system as inputs
 Bills and invoices include a stub to be returned by the customer
with payment.
IS 431 : Lecture 10
5
Computer Outputs
Distribution Internal Output
(reporting)
Delivery
Turnaround Output
(external; then internal)
External Output
(transactions)
Printer
Detailed, summary, or
exception information
printed on hard-copy
reports for internal
business use.
Business transactions
printed on business forms
that will eventually be
returned as input business
transactions.
Business transactions
printed on business
forms that conclude
the business
transactions.
Screen
Detailed, summary, or
exception information
displayed on monitors
for internal business
use.
Business transactions
displayed on monitors in
forms or windows that will
also be used to input other
data to initiate a related
transaction.
Business transactions
displayed on business
forms that conclude
the business
transactions.
Point-of-Sale
Terminals
Information printed or
displayed on specialpurpose terminals
dedicated to specific
internal business
functions.
Information printed or
displayed on a specialpurpose terminal for the
purpose of initiating a
follow-up business
transaction.
Information printed or
displayed on specialpurpose terminals
dedicated to
customers.
IS 431 : Lecture 10
6
Computer Outputs …
Distribution Internal Output
(reporting)
Delivery
Turnaround Output
(external; then internal)
External Output
(transactions)
Multimedia
(audio or
video)
Information transformed
into speech for internal
users.
Information transformed into
speech for external users
who respond with speech or
tone input data.
Information
transformed into
speech for external
users.
E-mail
Displayed messages
related to internal
business information.
Displayed messages
intended to initiate business
transactions.
Displayed messages
related to business
transactions.
Hyperlinks
Web-based links to
internal information that is
enabled via HTML or
XML formats.
Web-based links
incorporated into Web-based
input pages to provide users
with access to additional
information.
Web-based links
incorporated into
Web-based
transactions.
Microfiche
Archival of internal
management reports to
microfilm that requires
minimal physical storage
space.
Not applicable unless there is Not applicable unless
an internal need to archive
there is an internal
turnaround documents.
need for copies of
external reports.
IS 431 : Lecture 10
7
Chart Types
Sample
Selection Criteria
Line Chart
Line charts show one or more series of data over a
period of time. They are useful for summarizing and
showing data at regular intervals. Each line represents
one series or category of data.
Area Chart
Area charts are similar to line charts except that the
focus is on the area under the line. That area is useful
for summarizing and showing the change in data over
time. Each line represents one series or category of
data.
Bar Chart
Bar c harts are useful for comparing series or
categories of data. Each bar represents one series or
category of data.
Column Chart
Column charts are similar to bar charts except that
the bars are vertical. Also, a series of column charts
may be used to compare the same categories at
different times or time intervals. Each bar represents
one series or category of data.
IS 431 : Lecture 10
8
Chart Types …
Sample
Selection Criteria
Pie Chart
Pie charts show the relationship of parts to a whole.
They are useful for summarizing percentages of a
whole within a single series of data. Each slice
represents one item in that series of data.
Donut Chart
Donut charts are similar to pie charts except that they
can show multiple series or categories of data, each as
its own concentric ring. Within each ring, a slice of
that ring represents one item in that series of data.
Radar Chart
Radar charts are useful for comparing different
aspects of more than one series or category of data.
Each data series is represented as a geometric shape
around a central point. Multiple series are overlaid so
that can be compared.
Scatter Chart
Scatter charts are useful for showing the relationship
between two or more series or categories of data
measured at uneven intervals of time. Each series is
represented by data points using either different colors
or bullets.
IS 431 : Lecture 10
9
Tabular Report Design
Principles
Design Issue
Design Guideline
Examples
Page Size
Today the page sizes of choice are
standard (8½" x 11") and legal (8½" x 14").
Not applicable
Page Orientation
Portrait orientation is often preferred
because it is oriented the way we orient
most books and reports; however,
landscape is often necessitated for tabular
reports because more columns can be
printed.
Page Headings
At a minimum, page headers should
include a recognizable report title, date and
time, and page numbers.
Report Legends
A legend is an explanation of
abbreviations, colors, or codes used in a
report. In a printed report, a legend can be
printed on only the first or last page. On a
display screen, a legend can be made
available as a pop-up dialogue box.
IS 431 : Lecture 10
portrait
landscape
JAN 4, 2004
Page 4 of 8
Oversubscriptions By Course
REPORT LEGEND
SEATS – Number of seats in classroom
LIM – Course Enrollment Limit
10
Tabular Report Design
Principles …
Design Issue
Design Guideline
Examples
Column
Headings
Column headings should be short and
descriptive. Avoid abbreviations or include
a Report Legend
Self-explanatory
Heading
Alignments
Alignment should be tested with users for
preferences with a special emphasis on the
risk of misinterpretation of the information.
NAME
XXXXXXX XXXXXX
STATUS
X
AMOUNT
$X.XX
Column Spacing If columns are too close, users may not
Self explanatory
properly differentiate between the columns.
If they are too far apart, the user may have
difficulty following a single row. Rule of
thumb is to use 3-5 spaces between each.
Row Headings
The first one or two columns should identify
data that differentiates each row. Rows
should be sequenced in a fashion that
supports their use. Frequently rows are
sorted on a numerical key or alphabetically.
IS 431 : Lecture 10
STUDENT ID
999-38-8476
999-39-5857
STUDENT NAME
Mary Ellen Kukow
Robert Flynn
11
Tabular Report Design
Principles …
Design Issue
Design Guideline
Formatting
Data is often stored without formatting
characters to save storage space.
Outputs should reformat data to match
the users’ norms.
Control Breaks
Groups of rows should be logically
grouped in the report. The transition
from one group to the next is called a
control break and is frequently followed
by subtotals for the group.
End of Report
Examples
The end of a report should be clearly
indicated to ensure that users have the
entire report.
IS 431 : Lecture 10
As stored:
307877262
8004445454
02272004
As output:
307-87-7262
(800) 444-5454
Feb 27, 2004
RANK
CPT
CPT
CPT
CPT
NAME
JANEWAY, K
KIRK, J
PICARD, J
SISKO, B
CAPTAINS TOTAL
SALARY
175,000
225,000
200,000
165,000
765,000
LTC
OTC
LTC
LTC
CHAKOTAY
DATA
RICKER, W
SPOCK, S
EXEC OFFCR TOTAL
110,000
125,000
140,000
155,000
530,000
*** END OF REPORT ***
12
Screen Output Design
Screen Design
Consideration
Design Guidelines
Size
The designer should consider the “lowest common denominator.” The default
window size should be less than or equal to the worst resolution display in the
user community.
Scrolling
On-line outputs have the advantage of not being limited by the physical page. This
can also be a disadvantage if important information such as column headings scrolls
off the screen. If possible, freeze important headings at the top of a screen.
Navigation
Users should always have a sense of where they are in a network of on-line
screens. Users also require the ability to navigate between screens.
Partitioning
In Windows, zones are forms within forms. On the Internet, frames are pages within
pages.
Information
Hiding
On-line applications offer capabilities to hide information until it is either needed or
becomes important. Techniques include drill-down and pop-up dialogue boxes.
Highlighting
Highlighting can call users’ attention to erroneous data, exception data, or specific
problems. Highlighting can also be a distraction if misused.
Printing
Always provide users the option to print a permanent copy of the report.
IS 431 : Lecture 10
13
Logical Data Structure
for Output Requirements
INVOICE
ADDRESS
=
+
+
+
+
+
+
+
+
+
+
+
+
+
+
INVOICE NUMBER
INVOICE DATE
CUSTOMER NUMBER
CUSTOMER NAME
CUSTOMER BILLING ADDRESS = ADDRESS >
1 { SERVICE DATE +
SERVICE PROVIDED +
SERVICE CHARGE } n
PREVIOUS BALANCE DUE
PAYMENTS RECEIVED
TOTAL NEW SERVICE CHARGES
INTEREST CHARGES
NEW BALANCE DUE
MINIMUM PAYMENT DUE
PAYMENT DUE DATE
( DEFAULT CREDIT CARD NUMBER )
( [ CREDIT MESSAGE, PAYMENT MESSAGE ] )
=
+
+
+
+
( POST OFFICE BOX NUMBER )
STREET ADDRESS
CITY
STATE
ZIP CODE
IS 431 : Lecture 10
14
Output Design Principles
 Right User: the distribution of (or access to)
outputs to relevant users.
 Right Format: outputs should be simple to read
and interpret (user friendly).
 Right Info: outputs must be acceptable (satisfy
business requirements) to the system users who
will receive them.
 Right Time: just in time, currency.
IS 431 : Lecture 10
15
Output Design Process
1. Identify system outputs and review logical requirements.
•
Physical DFD
2. Specify physical output requirements.
•
Media, timing, volume, distribution
3. If necessary, design any preprinted forms.
•
Layout, mailing, turnaround
4. Design, validate and test outputs using some combination of:
•
•
•
Layout tools (e.g., hand sketches, spacing charts, or CASE tools.
Prototyping tools (e.g., spreadsheet, PC DBMS, 4GL)
Code generating tools (e.g., report writer)
IS 431 : Lecture 10
16
Output Design with a
Modern CASE Tool
IS 431 : Lecture 10
17
Input Design
 Data capture, data entry, and data input.
 Format and media for a computer input.
 Human factors in computer inputs design.
 Internal controls for computer inputs.
IS 431 : Lecture 10
18
Data Capture, Entry, and
Processing
Data capture = identification and acquisition of new data
(at its source).
– Source documents = forms used to record business
transactions in terms of data describing those transactions.
Data entry = translating the source data or document into
a computer readable format.
Data processing = all processing occurs on the data after
it is input from a machine readable form.
– In batch processing, the entered data is collected into files
called batches and processed as a complete batch.
– In on-line processing, the captured data is processed
immediately
– In remote batch processing, data is entered and edited on-line,
but collected into batches for subsequent processing.
IS 431 : Lecture 10
19
Input Implementation
Methods
 Keyboard
 Mouse
 Point-of-sale terminals
 Sound and speech
 Automatic data capture
–
–
–
–
–
–
Optical mark recognition (OMR): Bar codes
Optical character recognition (OCR)
Magnetic Ink
Electromagnetic transmission
Smart cards
Biometric
IS 431 : Lecture 10
20
Computer Inputs
Process Method
Data Capture
Data Entry
Data Processing
Keyboard
Data is usually captured on
a business form that
becomes the source
document for input. Data
can be collected real-time.
Data is entered via keyboard.
This is the most common input
method but also the most
prone to errors.
OLD: Data can be collected
into batch files (disk) for
processing as a batch.
NEW: Data is processed as
soon as it has been keyed.
Mouse
Same as above.
Used in conjunction with
keyboard to simplify data
entry. Mouse serves as a
pointing device for a screen.
Same as above, but the use of
a mouse is most commonly
associated with online and
real-time processing.
Touch Screen
Same as above.
Data is entered o a touch
screen display or handheld
device. Data entry users either
touch commands and data
choices or enter data using
handwriting recognition.
On PCs, touch screen choices
are processed same as
above. On handheld
computers, data is sorted on
the handheld for later
processing as a remote batch.
Point of Sale
Data is captured as close
to the point of sale as
humanly possible. No
source documents.
Data is often entered directly
by the customer or by an
employee directly interacting
with the customer.
Data is almost always
processed immediately as a
transaction or inquiry.
IS 431 : Lecture 10
21
Computer Inputs …
Process Method
Data Capture
Data Entry
Sound
Data is captured as close to
the source as possible,
even when the customer is
remotely located.
Data is entered using touch-tones Data is almost always
(typically from a telephone).
processed immediately as
Usually requires fairly rigid
a transaction or inquiry.
command menu structure and
limited input options.
Speech
Same as sound.
Data (and commands) is spoken.
This technology is not as mature
and is much less reliable and
common than other techniques.
Data is almost always
processed immediately as
a transaction or inquiry.
Optical Mark
Data is recorded on optical
scan sheets as marks or
precisely formed letter,
numbers, and punctuation.
Eliminates the need for data
entry.
Data is almost always
processed as a batch.
Magnetic Ink
Data is usually prerecorded
on forms that are
subsequently completed by
the customer. The customer
records additional
information on the form.
A magnetic ink reader reads the
magnetized data. The customeradded data must be entered
using another input method.
Data is almost always
processed as a batch.
IS 431 : Lecture 10
Data Processing
22
Computer Inputs …
Process Method
Data Capture
Data Entry
Data Processing
Electromagnetic
Data is recorded directly on
the object to be described
by data.
Data is transmitted by radio
frequency.
Data is almost always
processed immediately.
Smart Card
Data is recorded directly on Data is read by smart card
a device to be carried by the readers.
customer, employee, or
other individual that is
described by that data.
Data is almost always
processed immediately.
Biometric
Unique human
characteristics become data
Data is processed
immediately.
Data is read by biometric
sensors. Primary applications are
security and medical monitoring
IS 431 : Lecture 10
23
Input Design Guidelines
 Capture only variable data (quantity bought).
 Do not capture data that can calculated (sales total)
or stored in computer programs as constants (unit
prices).
 Minimize errors from user’s entry: user friendly
format with business ID codes / available options
for appropriate attributes .
IS 431 : Lecture 10
24
Source Document / Form
Design Guidelines
 Include instructions for completing the form.
 Minimize the amount of data handwriting/keying.
 Data to be entered (keyed) should be sequenced:
top-down and left-right.
 When possible, based input design on known
metaphors (similar layout to paper docs).
IS 431 : Lecture 10
25
Bad Flow in a Form
IS 431 : Lecture 10
26
Good Flow in a Form
IS 431 : Lecture 10
27
Internal Controls for Inputs
 Each input, and the total number of inputs should be
monitored (to minimize the risk of lost transactions).
– For batch processing
 Use batch control slips (batch total)
 Use one-for-one checks against post-processing detail reports
– For on-line systems
 Log each transaction as it occurs
 Assign each transaction a confirmation number (common in webbased systems)
 Validate all data
–
–
–
–
–
–
Existence checks (required fields)
Data type checks (alphanumeric vs. numeric)
Domain checks (range value)
Combination checks (related range for details of a category)
Self-checking digits (bit check of ID numbers)
Format checks (input masks for currency, date, phone, SSN)
IS 431 : Lecture 10
28
Common GUI Controls
(Windows and Web)
 Text boxes
 Radio buttons
 Check boxes
 List boxes
 Drop down
lists
 Combination
boxes
 Spin boxes
 Buttons
IS 431 : Lecture 10
29
Common GUI Controls …
 Text boxes
– When the input data values are unlimited in scope
 Radio buttons
– When data has limited predefined set of mutually exclusive values
 Check boxes
– When value set consists of a simple yes or no value
 List boxes
– When data has a large number of possible values
 Drop down lists
– When data has large number of possible values and screen space is too
limited for a list box
 Combination boxes
– When need to provide the user with option of selecting a value from a list
or typing a value that may or may not appear in the list
 Spin boxes
– When need to navigate through a small set of choices or directly typing a
data value
IS 431 : Lecture 10
30
Input Design Process
1. Identify system inputs and review logical
requirements.
2. Select appropriate input GUI components/controls.
3. As necessary, design any source documents.
4. Design, validate and test inputs using some
combination of:
•
•
Layout tools (e.g., hand sketches, spacing charts, or
CASE tools.
Prototyping tools (e.g., spreadsheet, PC DBMS, 4GL)
IS 431 : Lecture 10
31
A Logical Data Structure
for Input Requirements
ORDER
=
+
+
+
+
+
+
+
ADDRESS =
+
+
+
+
ORDER NUMBER
ORDER DATE
CUSTOMER NUMBER
CUSTOMER NAME
CUSTOMER SHIPPING ADDRESS = ADDRESS >
( CUSTOMER BILLING ADDRESS = ADDRESS > )
1 { PRODUCT NUMBER +
QUANTITY ORDERED } n
( DEFAULT CREDIT CARD NUMBER )
( POST OFFICE BOX NUMBER )
STREET ADDRESS
CITY
STATE
ZIP
IS 431 : Lecture 10
32
User Interface Design
 System users and special design considerations.
 Human engineering factors and guidelines for an
integrated user interface design
 Integrate output and input design into an overall
user interface.
IS 431 : Lecture 10
33
System User
Classifications
Expert User – an experienced computer user
– Spends considerable time using specific application programs.
– Use of a computer is usually considered non-discretionary.
– In the mainframe computing era, this was called a dedicated user.
Novice User – a less experienced computer user
– Uses computer on a less frequent, or even occasional, basis.
– Use of a computer may be viewed as discretionary (although this is
becoming less and less true).
– Sometimes called a casual user.
IS 431 : Lecture 10
34
Interface Problems
Interface problems result in confusion, panic,
frustration, boredom, misuse, abandonment, and other
undesirable consequences.
– Excessive use of computer jargon and acronyms
– Non-obvious or less-than-intuitive design
– Inability to distinguish between alternative actions (“what
do I do next?”)
– Inconsistent problem-solving approaches
– Design inconsistency
IS 431 : Lecture 10
35
Human Engineering
Guidelines
 The user should always be aware of what to do next
–
–
–
–
–
Tell user what the system expects right now.
Tell user that data has been entered correctly.
Tell user that data has not been entered correctly.
Explain reason for a delay in processing.
Tell user a task was completed or not completed.
 Format screen so instructions and messages always
appear in the same general display area.
 Display messages and instructions long enough so
user can read them.
IS 431 : Lecture 10
36
Human Engineering
Guidelines …
 Use display attributes sparingly.
 Default values should be specified.
 Anticipate errors users might make.
 Users should not be allowed to proceed without
correcting an error.
 If user does something that could be catastrophic, the
keyboard should be locked to prevent any further
input, and an instruction to call the analyst or technical
support should be displayed.
IS 431 : Lecture 10
37
Guidelines for Dialogue
Tone and Terminology
 Tone:
– Use simple, grammatically correct sentences.
– Don’t be funny or cute: overuse of humor.
– Don’t be condescending: overuse of praise.
 Terminology
–
–
–
–
–
Don’t use computer jargon.
Avoid most abbreviations.
Use simple terms.
Be consistent in your use of terminology.
Carefully phrase instructions—use appropriate action
verbs (select vs. pick, type vs. enter, press vs. hit).
IS 431 : Lecture 10
38
User Interface Design
Process
1. Chart the user interface dialogue.
2. Prototype the dialogue and user interface.
3. Obtain user feedback.
Special Issues to Consider
•
•
Internal controls—authentication and authorization
On-line help
IS 431 : Lecture 10
39
Sample Dialogue Chart
IS 431 : Lecture 10
40
Common Approaches
for Display Area
• Paging displays a complete screen of characters at a
time. The complete display area is known as a page
(or screen). The page is replaced on demand by the
next or previous page.
•Scrolling moves the displayed information up or
down on the screen, one line at a time.
IS 431 : Lecture 10
41
Styles in Designing
Graphical User Interfaces
 Windows and frames
 Menu-driven interfaces
 Instruction-driven interfaces
 Question-answer dialogue
IS 431 : Lecture 10
42
GUI Menus
 Pull down and cascading menus
 Tear-off and pop-up menus
 Toolbar and iconic menus
 Hypertext and hyperlink menus
IS 431 : Lecture 10
43
Automated Tools for
User Interface Design
 Microsoft Access
 CASE Tools
 Visual Basic
 Excel
 Visio
Visual Basic
Menu
Construction
IS 431 : Lecture 10
44
A Classical Hierarchical
Menu Dialogue
IS 431 : Lecture 10
45
Pull-Down and
Cascading Menus
Cascading
menu
menu
bar
Ellipses indicates
dialogue box
Pull-down
menu
IS 431 : Lecture 10
46
Dialogue Box
IS 431 : Lecture 10
47
Pop-Up Menus
IS 431 : Lecture 10
48
Tool Bars
IS 431 : Lecture 10
49
Iconic Menus
IS 431 : Lecture 10
50
Consumer-Style Interface
IS 431 : Lecture 10
51
Hybrid Windows/Web
Interface
IS 431 : Lecture 10
52
Instruction-Driven
Interface
IS 431 : Lecture 10
53
Authentication Log-in
Screen
IS 431 : Lecture 10
54
Help Tool Tip
IS 431 : Lecture 10
55
Help Wizard
IS 431 : Lecture 10
56
SoundStage Main Menu
IS 431 : Lecture 10
57