Chapter 11
Designing Forms and Reports
Objectives:





Explain the process of form and report design.
Apply 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
factors affecting usability.
Forms vs. 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.
• A passive document for reading or viewing data.
• Typically contains data from many database
records or transactions.
Forms vs. Reports





System inputs and outputs were identified
during Requirements Structuring
Every input form will be associated with a data
flow entering a process on a DFD
Every output form or report will be a data flow
produced by a process on a DFD
Data on forms and reports must consist of data
elements in data stores and on the E-R data
model or must be calculated from these
Will uncover flaws in DFDs and E-R diagrams
Common Types of Reports





Scheduled: produced at predefined time
intervals for routine information needs
Key-indicator: provide summary of critical
information on regular basis
Exception: highlights data outside of normal
operating ranges
Drill-down: provide details behind summary of
key-indicator or exception reports
Ad-hoc: respond to unplanned requests for nonroutine information needs
The Process of Designing Forms and
Reports
User-focused activity
 Follows a prototyping approach
 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?

The Process of Designing Forms and
Reports

Prototyping
• Initial prototype is designed from requirements
• If possible, use standard development tools
used with your company
• Mock screens – word processor, etc. can be
used
• Users review prototype design and either
accept the design or request changes
• If changes are requested, the constructionevaluation-refinement cycle is repeated until
the design is accepted
Visual
Basic and
other
developme
nt tools
provide
computer
aided GUI
form and
report
generation.
Form/Report Design Specification


The major deliverable of interface design
Involves three parts (reference figure 11-4):
• Narrative overview: characterizes users, tasks,
system, and environmental factors
• Used primarily to highlight some exception
that must be considered during
implementation
• Sample design: image of the form (from coding
sheet or form building development tool)
• Assessment: measuring test/usability results
(consistency, sufficiency, accuracy, etc.)
• If required
Guidelines for Form and Report
Design
Meaningful titles: clear, specific, version
information, current date
 Meaningful information: include only necessary
information, with no need to modify
 Balanced layout: adequate spacing, margins,
and clear labels
 Easy navigation system: show how to move
forward and backward, and where you are
currently

A poor
form
design
A better
form
design
Uses of Highlighting in Forms and
Reports





Use sparingly!
Notify users of errors in data entry or
processing.
Provide warnings regarding possible problems –
unavailable device.
Draw attention to keywords, commands, highpriority messages, data values that have
changed or are outside normal operating range.
Boxes clarify different categories of data, capital
letters and different fonts distinguish labels
from actual data
Methods for Highlighting






Blinking
Audible tones
Intensity differences
Size differences
Font differences
Blinking, audiblecritical, turn off as
soon as correction
made







Reverse video
Boxing
Underlining
All capital letters
Offset positions of
nonstandard
information
Use consistently!
Think of output
device
Highlighting
can include
use of upper
case, font size
differences,
bold, italics,
underline,
boxing, and
other
approaches.
Color vs. No Color

Benefits from Using 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
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
• Color has little effect if presentation format is
inappropriate
Guidelines for Displaying Text





Case: mixed upper and lower case, use
conventional punctuation
Spacing: double spacing if possible, otherwise
blank lines between paragraphs
Justification: left justify text, ragged right
margins
Hyphenation: no hyphenated words between
lines
Abbreviations: only when widely understood
and significantly shorter than full text
A poor
help
screen
design
A better
help
screen
design
Guidelines for 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.
Guidelines for 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.
Guidelines for 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.
A poor
table
design
A better
table
design:
row and
column
spacing,
soritng
Tables vs. Graphs
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

Bar and line
graphs give
pictorial summary
information that
can enhance
reports and forms.
Assessing Usability
Overall evaluation of how a system performs in
supporting a particular user for a particular task
 There are three characteristics
1. Speed
2. Accuracy
3. Satisfaction

Guidelines for Maximizing Usability





Consistency: of terminology, formatting, titles,
navigation, response time
Efficiency: minimize required user actions; align
for efficient navigation and entry; avoid data
entry where possible
Ease: self-explanatory outputs and labels
Format: appropriate display of data and
symbols
Flexibility: maximize user options for data input
according to preference
Characteristics for Consideration
When Designing Forms/Reports
User: experience, skills, motivation, education,
personality
 Task: account for time pressure, cost of errors,
work durations (fatigue) that the task demands
from the user
 System: platform will influence interaction style
and devices
 Environment: social (user’s role) and physical
issues (may need to change physical work
space)

Methods for Assessing Usability






Time to learn – placement of most commonly
used functions
Speed of performance
Rate of errors
Retention over time
Subjective satisfaction
Collect by observation, interviews, keystroke
capturing, etc.
Errors in Web Page Layout Design








Non-standard widgets – radio buttons example
(selection, not selection and action!)
Appearance of advertising and legitimate
information
Bleeding edge technology – make sure users don’t
need the latest browsers or plug-ins to use your site
Scrolling text and looping animations – hard to read
and like advertising
Outdated information – you’ll lose credibility
Slow download times
Fixed formatted text – avoid horizontal scrolling
Long pages
Good Web Design Practices
Lightweight Graphics: small images to quick
image download
 Forms and Data Integrity:

• Forms should be clearly labeled
• Enough room for input
• Example of input format
• Fields: designate optional, required, range of values
Good Web Design Practices

Template-based HTML
• Templates to display and process common
attributes of higher-level, more abstract
items
• Have a few templates that can be used to
display the entire product line
• “display all finishes” can be built using a
template and then applied to all furniture
requiring a finish
• Creates an interface that is very easy to
maintain