Chapter 7:

Design
Learning Objectives
✔ Define key database design terms.
✔ Explain the role of database design in
the IS development process.
✔ Choose storage formats for fields.
✔ Explain when to use different types of
file organizations.
✔ Describe the purpose and appropriate
use of indexes.
Learning 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.
Learning Objectives
✔ Explain the process of interface and dialogue
design.
✔ Contrast and apply methods for interacting
with a system.
✔ List and describe various input devices and
factors affecting their usability.
✔ Describe guidelines for designing interface
layout, data entry field structure, feedback,
and system help.
✔ Design graphical user interfaces.
• Conceptual: Business requirements are
translated into common language to be
understood by users and developers. It is
created by architect and customer
together. There is no technical aspect
involved. This phase brings out the user's
requirements.
• Logical: all the scenarios are broken into
basic elements. Decisions are made about
how the interaction and integration would
take place between these elements. This
phases brings out all the logical errors that
might occur while integration of various
system components.
• Physical: Decisions are made and ways
are found about how to implement the
logical design successfully. The
technology used to implement the design
is decided in physical design phase. This
brings out the constraints found during the
implementation.
Logical Database Design
• Based upon the conceptual data model
• Four key steps
1. Develop a logical data model for each known user interface for
the application using normalization principles.
2. Combine normalized data requirements from all user interfaces
into one consolidated logical database model (view integration).
3. Translate the conceptual E-R data model for the application into
normalized data requirements.
4. Compare the consolidated logical database design with the
translated E-R model and produce one final logical database
model for the application.
Physical Database Design
• Based upon results of logical database design
• Key decisions
1. Choosing storage format for each attribute from the logical
database model
2. Grouping attributes from the logical database model into
physical records
3. Arranging related records in secondary memory (hard disks and
magnetic tapes) so that records can be stored, retrieved and
updated rapidly
4. Selecting media and structures for storing data to make access
more efficient
Deliverables and
Outcomes

• Logical database design

– must account for every data element on a
system input or output
– normalized relations are the primary
deliverable
• Physical database design
– converting relations into database tables
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.
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
non-routine 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 (cont.)
• 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
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.
Form/Report Design
Specification
• The major deliverable of interface
design
• Involves three parts:
– Narrative overview: characterizes users, tasks,
system, and environmental factors
– Sample design: image of the form (from coding
sheet or form building development tool)
– Assessment: measuring test/usability results
(consistency, sufficiency, accuracy, etc.)
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
• 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.
Methods for Highlighting
• Blinking • Reverse video
• Audible tones • Boxing
• Intensity • Underlining
differences • All capital letters
• Size differences • Offset positions of
• Font differences nonstandard
information
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 • Problems from Using
– Soothes or strikes the eye Color
– Accents an uninteresting – Color pairings may wash
display out or cause problems for
– Facilitates subtle some users
discriminations in complex
displays – Resolution may degrade
– Emphasizes the logical with different displays
organization of information – Color fidelity may degrade
– Draws attention to warnings on different displays
– Evokes more emotional – Printing or conversion to
reactions other media may not
easily translate
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 (cont.)
• 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 (cont.)
• 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
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
• 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
• User: experience, skills, motivation,
education, personality
• Task: time pressure, cost of errors, work
durations
• System: platform
• Environment: social and physical issues
Methods for Assessing
Usability
• Time to learn
• Speed of performance
• Rate of errors
• Retention over time
• Subjective satisfaction
Errors in Web Page
Layout Design
• Non-standard widgets
• Appearance of advertising
• Bleeding edge technology
• Scrolling text and looping animations
• Outdated information
• Slow download times
• Fixed formatted text
• Long pages
Good Web Design
Practices
• Lightweight Graphics: small images to
quick image download
• Forms and Data Integrity
• 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
Interface/Dialogue
Design
– Layout (of widgets, text, and table data)
– Structuring data entry (tab order)
– Controlling data input (validation and
format controls)
– Feedback (prompting, status, warning,
and error messages)
– Dialogue sequencing
Deliverables and
Outcomes
A typical
interface/dialogue
design
specification:

Similar to form
design, but
includes multiple
forms and
dialogue
sequence
specifications
Interface Methods
• Interface: the method by which a user
interacts with the information system
• Common interaction methods
– Command line
– Menu
– Form
– Object-based
– Natural language
Command Line
Interaction
• Users enter explicit statements into a
system to invoke operations
• Example from MS DOS:
– COPY C:PAPER.DOC A:PAPER.DOC
– This copies a file from the C: drive to the A:
drive
• Includes keyboard shortcuts and function
keys
Menu Interaction
• A list of system options is provided and
specific command is invoked by user
selection of a menu option
• Two common menu types:
– Pop-up: menu placed near current cursor
position
– Drop-down: access point to menu placed at
top line of display, menu drops down when
access point clicked
Guidelines for Menu
Design

• Wording: meaningful titles, clear command

verbs, mixed upper/lower case
• Organization: consistent organizing principle
• Length: all choices fit within screen length
• Selection: consistent, clear and easy selection
methods
• Highlighting: only for selected options or
unavailable options
Good Menu Design
Visual
editing
tools help
designers
construct
menus.
Form Interaction
• Allows users to fill in the blanks when working
with a system
• Measures of an effective design:
– Self-explanatory title and field headings
– Fields organized into logical groupings
– Distinctive boundaries
– Default values
– Displays appropriate field lengths
– Minimizes the need to scroll windows
Object Interaction
• Symbols are used to represent commands
or functions.
• Icons:
– Graphic symbols that look like the processing
option they are meant to represent
– Use little screen space
– Can be easily understood by users
Natural Language
Interaction
• Inputs to and outputs from system are in a
conventional speaking language like
English
• Based on research in artificial intelligence
• Current implementations are tedious and
difficult to work with, not as viable as other
interaction methods
Hardware Options
for System Interaction
• Keyboard • Touch Screen
• Mouse • Light Pen
• Joystick • Graphics Tablet
• Trackball • Voice
Usability Problems
with Hardware Devices
• Adequate Feedback
• Visual Blocking
– keyboard, mouse, joystick,
– touch screen, light pen trackball, graphics tablet,
• User Fatigue voice
– touch screen, light pen • Speed
• Movement Scaling – keyboard
– keyboard, mouse, joystick, • Pointing Accuracy
trackball, graphics tablet, – joystick, touch screen, light
voice pen, voice
• Durability
– trackball, touch screen
Designing Interfaces
• Use standard formats similar to paper-based
forms and reports
• Left-to-right, top-to-bottom navigation
• Flexibility and consistency:
– Free movement between fields
– No permanent data storage until the user requests
– Each key and command assigned to one function
Structuring Data Entry
Entry Never require data that are already online or that
can be computed
Defaults Always provide default values when appropriate
Units Make clear the type of data units requested for
entry
Replacement Use character replacement when appropriate
Captioning Always place a caption adjacent to fields
Format Provide formatting examples
Justify Automatically justify data entries
Help Provide context-sensitive help when appropriate
Entering Text
Controlling Data Input
• Objective: reduce data entry errors
• Common sources data entry errors in a
field:
– Appending: adding additional characters
– Truncating: losing characters
– Transcripting: entering invalid data
– Transposing: reversing sequence of
characters
Types of Validation
Tests
• Class or • Range
Composition • Reasonableness
• Combinations • Self-checking
• Expected Values Digits
• Missing Data • Size
• Pictures/Templates • Values
Feedback Messages
• Status information: keep user informed of
what’s going on, helpful when user has to wait
for response

• Prompting cues: tell user when input is needed,

and how to provide the input

• Warning or Error: inform user that something is

wrong, either with data entry or system operation
Providing Help
• Place yourself in user’s place when designing
help
• Guidelines:
– Simplicity
• Help messages should be short and to the point
– Organize
• Information in help messages should be easily absorbed by
users
– Show
• It is useful to explicitly show users how to perform an
operation
What is a Dialogue?
• A sequence of interactions between the
system and a user

• Dialogue design involves:

– Designing a dialogue sequence
– Building a prototype
– Assessing usability
Guidelines for Dialogue
Design
• Consistency • Error Handling
• Shortcuts and • Reversal
Sequence • Control
• Feedback • Ease
• Closure
Dialogue Diagramming
A formal method for designing and representing
human-computer dialogues using box and line
diagrams
Dialogue
diagrams depict
the sequence,
conditional
branching, and
repetition of
dialogues.
Designing Interfaces and
Dialogues in Graphical Environments

• Become an expert user of the GUI

environment.
– Understand how other applications have
been designed.
– Understand standards.
• Gain an understanding of the available
resources and how they can be used.
– Become familiar with standards for menus
and forms.
GUI Window Properties
That Can Be Turned On or Off
• Modality: require user to finish action before
proceeding
• Resizable: allow user to change size of
window
• Movable: allow user to reposition window
• Maximize: allow user to make window take
entire screen
• Minimize: allow user to completely hide
window
• System menu: allow window to have access
to system level functions
GUI Dialogue Design
Issues
• Goal is to establish the sequence of displays that users
will encounter when working with system.
• Ability of some GUI environments to jump from
application to application or screen to screen makes
sequencing a challenge.
• One approach is to make users always resolve requests
for information before proceeding.
• Dialogue diagramming helps analysts better manage the
complexity of designing graphical interfaces.
Summary
• In this chapter you learned how to:
✔ Define key database design terms.
✔ Explain the role of database design in
the IS development process.
✔ Choose storage formats for fields.
✔ Explain when to use different types of file
organizations.
✔ Describe the purpose and appropriate
use of indexes.
Summary

✔ 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.
Summary
✔ Explain the process of interface and dialogue
design.
✔ Contrast and apply methods for interacting
with a system.
✔ List and describe various input devices and
factors affecting their usability.
✔ Describe guidelines for designing interface
layout, data entry field structure, feedback,
and system help.
✔ Design graphical user interfaces.