D. Suleiman H.

Mustafa 1
 Systems Design

Reviewed and Modified

by Dr. Suleiman H. Mustafa
2.1
Dr. Suleiman H. Mustafa
 UNIT 04
(Part-2)

D. Suleiman H. Mustafa 3
 Designing Forms, Reports,
and User Interfaces

Reviewed and Modified

by Dr. Suleiman H. Mustafa
2.1
Dr. Suleiman H. Mustafa
Design Activities

5
Introduction

Dr. Suleiman H. Mustafa

 User Interface Design
• Two major activities are the focus of user
interface design:
– Designing inputs and outputs (forms and
reports) and
– Designing interfaces and dialogues which
show how the users will interact with the
system.
• The general guidelines applied for
designing forms and reports also apply to
interfaces and dialogues.
Dr. Suleiman H. Mustafa
 Designing
Forms and Reports

Dr. Suleiman H. Mustafa

 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
– Examples of business forms are product order forms,
employment applications, and class registration
sheets.
– An instance of a form is typically based on one
database record.

8.9
Dr. Suleiman H. Mustafa
 Forms and Reports
• Report
– A business document that contains only predefined
data
– Examples of reports include invoices, weekly sales
summaries by region and salesperson, or a pie chart
of population by age categories
– A passive document for reading or viewing data
– Typically contains data from many database records
or transactions

8.10
Dr. Suleiman H. Mustafa
Dr. Suleiman H. Mustafa
 Process of Designing Forms &
Reports
• User Focused Activity
• Follows a Prototyping Approach
• System inputs and outputs are produced at
the end of the analysis phase
– But, precise appearance was not defined during
this phase
– Forms and reports are integrally related to DFD
and E-R diagrams.

8.12
Dr. Suleiman H. Mustafa
 Process of Designing Forms &
Reports
• Important questions to answer:
1. Who will use the form or report?
2. What is the purpose of the form or report?
3. When is the report needed or used?
4. Where does the form or report need to be
delivered and used?
5. How many people need to use or view the form
or report?

8.13
Dr. Suleiman H. Mustafa
Dr. Suleiman H. Mustafa
 Process of Designing Forms & Reports

• Prototyping
– An 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-request cycle is repeated until
the design is accepted

8.15
Dr. Suleiman H. Mustafa
 Deliverables and Outcomes
• Design specifications are major deliverables
and contain three sections
1. Narrative overview
Provides a general overview of the
characteristics of the target users, tasks, and
environment factors.
2. Sample design
3. Testing and usability assessment

• See Next Slide

8.16
Dr. Suleiman H. Mustafa
Dr. Suleiman H. Mustafa
Dr. Suleiman H. Mustafa
8.19
Dr. Suleiman H. Mustafa
8.20
Dr. Suleiman H. Mustafa
Dr. Suleiman H. Mustafa
 Displaying Text

• Display text in mixed upper and lower case and

use conventional punctuation
• Use double spacing if space permits. If not,
place a blank line between paragraphs
• Left-justify text and leave a ragged right margin
• Do not hyphenate words between lines
• Use abbreviations and acronyms only when they
are widely understood by users and are
significantly shorter than the full text

8.22
Dr. Suleiman H. Mustafa
 Displaying Tables and Lists
• Displaying 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

8.23
Dr. Suleiman H. Mustafa
 Displaying Tables and Lists
• Formatting columns, rows, and text
– Sort in a meaningful order
– Place a blank line between every 5 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

8.24
Dr. Suleiman H. Mustafa
 Displaying 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
8.25
Dr. Suleiman H. Mustafa
8.26
Dr. Suleiman H. Mustafa
8.27
Dr. Suleiman H. Mustafa
 Usability Success Factors
• Usability: An overall evaluation of how a system
performs in supporting a particular user for a
particular task.
• Success factors:
• Consistency
• Organization
• Clarity
• Format
• Flexibility

Dr. Suleiman H. Mustafa

Dr. Suleiman H. Mustafa
 Measures of Usability
• Learnability: How difficult is it for a user to perform a
task for the first time?
• Efficiency: How quickly can users perform tasks
once they know how to perform them?
• Error rate: How many errors might a user encounter,
and how easy it is to recover from those errors?
• Memorability: How easy is it to remember how to
accomplish a task when revisiting the system after
some period of time?
• Satisfaction and Aesthetics: How enjoyable is the
system’s visual appeal and how enjoyable is the
system to use?
Dr. Suleiman H. Mustafa
 Designing
Interfaces and Dialogues

Dr. Suleiman H. Mustafa

 Designing Interfaces and Dialogues

• Focus on how information is provided to and

captured from users
• Dialogues are analogous to a conversation
between two people
• A good human-computer interface provides a
unifying structure for finding, viewing, and
invoking the different components of a system

8.32
Dr. Suleiman H. Mustafa
 Process of Designing Interfaces
and Dialogues
• User-focused Activity
• Parallels Form and Report Design Process
• Employs Prototyping Methodology
– Collect information
– Construct prototype
– Assess usability
– Make refinements
• Deliverables: Design Specifications
– Narrative overview
– Sample design
– Testing and usability assessment

8.33
Dr. Suleiman H. Mustafa
 Designing Interfaces Layouts
• Designing Layouts
– Standard formats similar to paper-based
forms and reports should be used
– Screen navigation on data entry screens
should be left-to-right, top-to-bottom as on
paper forms

8.34
Dr. Suleiman H. Mustafa
 Designing Layouts
• Flexibility and consistency are primary
design goals
– Users should be able to move freely between
fields
– Data should not be permanently saved until
the user explicitly requests this
– Each key and command should be assigned
to one function

8.35
Dr. Suleiman H. Mustafa
Dr. Suleiman H. Mustafa
 Structuring Data Entry

8.37
Dr. Suleiman H. Mustafa
 Controlling Data Input
• One objective of interface design is to reduce
data-entry errors
• Role of systems analyst is to anticipate user
errors and design features into the system’s
interfaces to avoid, detect, and correct data-
entry mistakes
• Table 8-9 describes types of data entry errors
• Table 8-10 lists techniques used by system
designers to detect errors

8.38
Dr. Suleiman H. Mustafa
8.39
Dr. Suleiman H. Mustafa
8.40
Dr. Suleiman H. Mustafa
 Providing Feedback
1. Status Information
– Keeps users informed of what is going on in
system
– Displaying status information is especially
important if the operation takes longer than a
second or two
2. Prompting Cues
– Best to keep as specific as possible

8.41
Dr. Suleiman H. Mustafa
 Providing Feedback
3. Error and Warning Messages
– Messages should be specific and free of error
codes and jargon
– User should be guided toward a result rather
than scolded
– Use terms familiar to user
– Be consistent in format and placement of
messages

8.42
Dr. Suleiman H. Mustafa
Dr. Suleiman H. Mustafa
 Providing Help
• Place yourself in user’s place when designing
help
• Guidelines
– Simplicity
• Help messages should be short and to the point
– Organization
• Information in help messages should be easily absorbed by
users
– Show
• It is useful to explicitly provide examples to users on how to
perform an operation

8.44
Dr. Suleiman H. Mustafa
 Providing Help (continued)
• Context-Sensitive Help
– Enables user to get field-specific help
• Users should always be returned to where
they were when requesting help

8.45
Dr. Suleiman H. Mustafa
8.46
Dr. Suleiman H. Mustafa
 Designing Dialogues
• Dialogue
– Sequence in which information is displayed to
and obtained from a user
• Primary design guideline is consistency in
sequence of actions, keystrokes, and
terminology
• Three step process:
1. Design the dialogue sequence
2. Build a prototype
3. Assess usability

8.47
Dr. Suleiman H. Mustafa
 Designing the Dialogue
Sequence
• Define the sequence
• Have a clear understanding of the user, task,
technological, and environmental characteristics
• Dialogue Diagram
– A formal method for designing and representing
human-computer dialogues using box and line
diagrams
– Consists of a box with three sections
1. Top: Unique display reference number used by other
displays for referencing dialogue
2. Middle: Contains the name or description of the display
3. Bottom: Contains display reference numbers that can
be accessed from the current display

8.48
Dr. Suleiman H. Mustafa
Dr. Suleiman H. Mustafa
8.50
Dr. Suleiman H. Mustafa
 Designing Dialogues:
Building Prototypes and Assessing
Usability
• Activities often are optional
• Task is simplified by using graphical
design environment

8.51
Dr. Suleiman H. Mustafa
8.52
Dr. Suleiman H. Mustafa
 END

Dr. Suleiman H. Mustafa