Modern Systems Analysis
and Design
Jeffrey A. Hoffer
Joey F. George
Joseph S. Valacich
Chapter 10
Designing Forms and Reports
Systems Analysis
& Design
V. Implementation
I. Foundations II. Planning III. Analysis IV. Design
& Maintenance
4. Identify & Select 6. Determine 13. System
1. SD Environment 9. Design DB
SD Projects Systems Req’s Implementation
7. Structure
2. Origins of 5. Initiate & Plan 10. Design Forms
Systems Process 14. Maintaining IS
Software SD Projects & Reports
Req’s
8. Structure 11. Design
3. Manage IS
Systems Data Interfaces &
Project
Req’s Dialogues
12. Design Dist &
Internet Systems
Learning Objectives
• Explain the process of designing forms and reports and the
deliverables for their creation.
• Apply the general guidelines for formatting forms and
reports.
• Use color and know when color improves the usability of
information.
• Format text, tables, and lists effectively.
• Explain how to assess usability and describe how variations in
users, tasks, technology, and environmental characteristics
influence the usability of forms and reports.
• Discuss guidelines for the design of forms and reports for
Internet-based electronic commerce systems.
© 2014 Pearson Education, Inc. Publishing as
3
Prentice Hall
Designing Forms and Reports
FIGURE 10-1
Systems development life
cycle with logical design
phase highlighted
© 2014 Pearson Education, Inc. Publishing as
4
Prentice Hall
What’s
wrong with
this form?
© 2014 Pearson Education, Inc. Publishing as
5
Prentice Hall
© 2014 Pearson Education, Inc. Publishing as
6
Prentice Hall
Designing Forms and Reports
• Form: a business document that contains some
predefined data and may include some areas where
additional data are to be filled in
– An instance of a form is typically based on one database
record.
• Report: a business document that contains only
predefined data
– It is a passive document used solely for reading or viewing
data.
• A report typically contains data from many unrelated
records or transactions.
© 2014 Pearson Education, Inc. Publishing as
7
Prentice Hall
Designing Forms and Reports
• Common Types of Reports:
– Scheduled: produced at predefined time intervals for
routine information needs
– Key-indicator: provides summary of critical information on
regular basis
– Exception: highlights data outside of normal operating
ranges
– Drill-down: provides details behind summary of key-
indicator or exception reports
– Ad-hoc: responds to unplanned requests for non-routine
information needs
© 2014 Pearson Education, Inc. Publishing as
8
Prentice Hall
Process of Designing Forms and Reports
• Is a user-focused activity.
• Follows a prototyping approach.
– First steps are to gain an understanding of the intended
user and task objectives by collecting initial requirements
during requirements determination.
© 2014 Pearson Education, Inc. Publishing as
9
Prentice Hall
Process of Designing Forms and Reports
• Requirements determination:
– Who will use the form or report?
– What is the purpose of the form or report?
– When is the report needed or used?
– Where does the form or report need to be delivered and
used?
– How many people need to use or view the form or report?
© 2014 Pearson Education, Inc. Publishing as
10
Prentice Hall
Process of Designing Forms and Reports
• Prototyping
– Initial prototype is designed from requirements.
– Users review prototype design and either accept the
design or request changes.
– If changes are requested, the construction-evaluation-
refinement cycle is repeated until the design is accepted.
© 2014 Pearson Education, Inc. Publishing as
11
Prentice Hall
Process of Designing Forms and Reports
• A coding sheet is an “old” tool for designing forms
and reports, usually associated with text-based forms
and reports for mainframe applications.
• Visual Basic and other development tools provide
computer-aided GUI form and report generation.
© 2014 Pearson Education, Inc. Publishing as
12
Prentice Hall
Process of Designing Forms and Reports
FIGURE 10-2
The layout of a data input form
using a coding sheet
© 2014 Pearson Education, Inc. Publishing as
13
Prentice Hall
Process of Designing Forms and Reports
FIGURE 10-3
A data input screen designed in
Microsoft’s Visual Basic .NET
(Source: Microsoft Corporation.)
© 2014 Pearson Education, Inc. Publishing as
14
Prentice Hall
Deliverables and Outcomes
• Design specifications are the major deliverables and
inputs to the system implementation phase.
• Design specifications have three sections:
– Narrative overview: characterizes users, tasks, system,
and environmental factors
– Sample design: image of the form (from coding sheet or
form building development tool)
– Testing and usability assessment: measuring test/usability
results (consistency, sufficiency, accuracy, etc.)
© 2014 Pearson Education, Inc. Publishing as
15
Prentice Hall
Formatting Forms and Reports
• Meaningful titles — use clear, specific, version
information, and current date
• Meaningful information — include only necessary
information, with no need to modify
• Balanced layout — use adequate spacing, margins,
and clear labels
• Easy navigation system — show how to move
forward and backward, and where you are currently
© 2014 Pearson Education, Inc. Publishing as
16
Prentice Hall
Formatting Forms and Reports
FIGURE 10-5
Contrasting customer
information forms
(Pine Valley Furniture)
(Source: Microsoft
Corporation.)
(a) Poorly designed form
© 2014 Pearson Education, Inc. Publishing as
17
Prentice Hall
Formatting Forms and Reports
FIGURE 10-5 (continued)
(b) Improved design for form
© 2014 Pearson Education, Inc. Publishing as
18
Prentice Hall
Highlighting Information
• Notify users of errors in data entry or processing.
• Provide warnings regarding possible problems.
• Draw attention to keywords, commands, high-priority
messages, unusual data values.
© 2014 Pearson Education, Inc. Publishing as
19
Prentice Hall
Highlighting Information
Highlighting can include use of
– upper case – all capital letters
– bold – blinking
– italics – reverse video
– underlining – audible tones
– boxing – intensity differences
– size and color – offsetting nonstandard
differences information
© 2014 Pearson Education, Inc. Publishing as
20
Prentice Hall
Highlighting Information
FIGURE 10-6
Customer account
status display using
various highlighting
techniques
(Pine Valley Furniture)
(Source: Microsoft
Corporation.)
© 2014 Pearson Education, Inc. Publishing as
21
Prentice Hall
Color vs. No Color
• Benefits — Color:
– Soothes or strikes the eye.
– Accents an uninteresting display.
– Facilitates subtle discriminations in complex displays.
– Emphasizes the logical organization of information.
– Draws attention to warnings.
– Evokes more emotional reactions.
© 2014 Pearson Education, Inc. Publishing as
22
Prentice Hall
Color vs. No Color
• Problems from Using Color
– Color pairings may wash out or cause problems for some
users.
– Resolution may degrade with different displays.
– Color fidelity may degrade on different displays.
– Printing or conversion to other media may not easily
translate.
© 2014 Pearson Education, Inc. Publishing as
23
Prentice Hall
Displaying Text
• Case: display in mixed upper and lower case, use
conventional punctuation
• Spacing: use double spacing if possible, otherwise
blank lines between paragraphs
• Justification: left justify text, ragged right margins
• Hyphenation: don’t hyphenate words between lines
• Abbreviations: use only when widely understood and
significantly shorter than full text
© 2014 Pearson Education, Inc. Publishing as
24
Prentice Hall
Displaying Text
FIGURE 10-7
Contrasting the display of
textual help information
(Source: Microsoft
Corporation.)
(a) Poorly designed help
screen with many
violations of the general
guidelines for displaying
text
© 2014 Pearson Education, Inc. Publishing as
25
Prentice Hall
Displaying Text
FIGURE 10-7 (continued)
(b) An improved design for
a help screen
© 2014 Pearson Education, Inc. Publishing as
26
Prentice Hall
Designing Tables and Lists
• Labels
– All columns and rows should have meaningful labels.
– Labels should be separated from other information by
using highlighting.
– Redisplay labels when the data extend beyond a single
screen or page.
© 2014 Pearson Education, Inc. Publishing as
27
Prentice Hall
Designing Tables and Lists
• Formatting columns, rows and text:
– Sort in a meaningful order.
– Place a blank line between every five rows in long columns.
– Similar information displayed in multiple columns should
be sorted vertically.
– Columns should have at least two spaces between them.
– Allow white space on printed reports for user to write
notes.
– Use a single typeface, except for emphasis.
– Use same family of typefaces within and across displays
and reports.
– Avoid overly fancy fonts.
© 2014 Pearson Education, Inc. Publishing as
28
Prentice Hall
Designing Tables and Lists
• Formatting numeric, textual and alphanumeric data:
– Right justify numeric data and align columns by decimal
points or other delimiter.
– Left justify textual data. Use short line length, usually 30
to 40 characters per line.
– Break long sequences of alphanumeric data into small
groups of three to four characters each.
© 2014 Pearson Education, Inc. Publishing as
29
Prentice Hall
Designing Tables and Lists
FIGURE 10-8
Contrasting the display of tables
and lists (Pine Valley Furniture)
(Source: Microsoft Corporation.)
(a) Poorly designed form
© 2014 Pearson Education, Inc. Publishing as
30
Prentice Hall
Designing Tables and Lists
FIGURE 10-8 (continued)
(b) Improved design for form
© 2014 Pearson Education, Inc. Publishing as
31
Prentice Hall
Designing Tables and Lists
• Use tables for reading individual data values.
• Use graphs for:
– Providing quick summary.
– Displaying trends over time.
– Comparing points and patterns of variables.
– Forecasting activity.
– Simple reporting of vast quantities of information.
© 2014 Pearson Education, Inc. Publishing as
32
Prentice Hall
Designing Tables and Lists
FIGURE 10-9
Tabular report
illustrating numerous
design guidelines
(Pine Valley Furniture)
© 2014 Pearson Education, Inc. Publishing as
33
Prentice Hall
Designing Tables and Lists
FIGURE 10-10
Graphs for comparison
(a) Line graph
(b) Bar graph
© 2014 Pearson Education, Inc. Publishing as
34
Prentice Hall
Assessing Usability
• Objective for designing forms, reports and all human-
computer interactions is usability.
• There are three characteristics:
– Speed — Can you complete a task efficiently?
– Accuracy — Does the output provide what you expect?
– Satisfaction — Do you like using the output?
• Usability: an overall evaluation of how a system
performs in supporting a particular user for a
particular task
© 2014 Pearson Education, Inc. Publishing as
35
Prentice Hall
Usability Success Factors
• Consistency — of terminology, formatting, titles,
navigation, response time
• Efficiency — minimize required user actions
• Ease — self-explanatory outputs and labels
• Format — appropriate display of data and symbols
• Flexibility — maximize user options for data input
according to preference
© 2014 Pearson Education, Inc. Publishing as
36
Prentice Hall
Usability Success Factors
• Characteristics for consideration:
– User: experience, skills, motivation, education, personality
– Task: time pressure, cost of errors, work durations
– System: platform
– Environment: social and physical issues
© 2014 Pearson Education, Inc. Publishing as
37
Prentice Hall
Measures of Usability
• Time to learn
• Speed of performance
• Rate of errors
• Retention over time
• Subjective satisfaction
• Consistency of layout
© 2014 Pearson Education, Inc. Publishing as
38
Prentice Hall
Measures of Usability
• The layout of information should be consistent both
within and across applications, whether information
is delivered on screen display or on a hard-copy
report.
© 2014 Pearson Education, Inc. Publishing as
39
Prentice Hall
EC Application: Designing Forms and Reports
for PVF WebStore
• General guidelines for rapid deployment of Internet
Web sites have resulted
• Three possible solutions to the problem:
– Make it possible to design reasonably usable sites without
having UI experience.
– Train more people in good Web design.
– Live with poorly designed sites that are hard to use.
© 2014 Pearson Education, Inc. Publishing as
40
Prentice Hall
Designing Forms and Reports at PVF
• PVF established the following guidelines:
– Use lightweight graphics.
– Establish forms and data integrity rules.
– Use template-based HTML.
© 2014 Pearson Education, Inc. Publishing as
41
Prentice Hall
Lightweight Graphics
• Lightweight Graphics: the use of small, simple
images to allow a Web page to more quickly be
displayed
– Quick image download
– Quick feedback from the Web site will help to keep
customers at the PVF WebStore longer
© 2014 Pearson Education, Inc. Publishing as
42
Prentice Hall
Forms and Data Integrity Rules
• All forms that request information should be clearly
labeled and provide adequate room for input.
• Specific fields requiring specific information must
provide a clear example.
• Forms must designate which fields are optional,
required, and which have a range of values.
© 2014 Pearson Education, Inc. Publishing as
43
Prentice Hall
Template-Based HTML
• Template-based HTML: templates to display and
process common attributes of higher-level, more
abstract items
– Creates an interface that is very easy to maintain
– Advantageous to have a “few” templates that could be
used for entire product line
– Not every product needs its own page
© 2014 Pearson Education, Inc. Publishing as
44
Prentice Hall
Summary
• In this chapter you learned how to:
• Explain the process of designing forms and reports
and the deliverables for their creation.
• Apply the general guidelines for formatting forms and
reports.
• Use color and know when color improves the
usability of information.
© 2014 Pearson Education, Inc. Publishing as
45
Prentice Hall
Summary
• Format text, tables, and lists effectively.
• Explain how to assess usability and describe how
variations in users, tasks, technology, and
environmental characteristics influence the usability
of forms and reports.
• Discuss guidelines for the design of forms and
reports for Internet-based electronic commerce
systems.
© 2014 Pearson Education, Inc. Publishing as
46
Prentice Hall
Copyright © 2014 Pearson Education, Inc.
Publishing as Prentice Hall