Topic 11:
Designing the Human
Interface
Object-Oriented Systems Analysis and
Design
Joey F. George, Dinesh Batra,
Joseph S. Valacich, Jeffrey A. Hoffer
© Prentice Hall, 2007
11-1
Chapter Objectives

After studying this chapter you should be
able to:
– Explain form and report design.
– Apply general guidelines for formatting forms
and reports.
– Explain effective text, table, and list formatting.
– Explain common Web layout design errors
Topic 11
© Prentice Hall, 2007
11-2
Chapter Objectives
(Continued)

After studying this chapter you should be
able to:
– Explain interface and dialogue design.
– Apply general guidelines for designing
interfaces and dialogues.
– Explain common errors in developing Web
interfaces.
– Design human-computer dialogues, including
the use of dialogue diagrams.
Topic 11
© Prentice Hall, 2007
11-3
Topic 11
© Prentice Hall, 2007
11-4
What Is a Form?

A business document that contains some
predefined data and may include some areas
where additional data are to be filled in

Typically based on a database record or
query
Topic 11
© Prentice Hall, 2007
11-5
What Is a Report?

A business document that contains only
predefined data

A passive document meant only for reading
or viewing, not data input

Typically contains data from many
unrelated transactions or records
Topic 11
© Prentice Hall, 2007
11-6
Fundamental Questions when
Designing Forms and Reports
1. Who will use the form or report?
2. What is the purpose of the form or report?
3. When is the form or report needed and
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?
Topic 11
© Prentice Hall, 2007
11-7
Types of Reports

Scheduled Reports
– Predefined interval presentation of routine information

Key-Indicator Reports
– Summarize critical information on a recurring basis

Exception Reports
– Highlight data outside normal operating range

Drill Down Reports
– Provide details of summaries from key-indicator or
exception reports

Ad Hoc Reports
– Unplanned information requsts for nonroutine decisions
Topic 11
© Prentice Hall, 2007
11-8
A coding sheet is an
“old” tool for designing
forms and reports,
usually associated with
text-based forms and
reports for mainframe
applications.
Topic 11
© Prentice Hall, 2007
11-9
Visual Basic and other development tools provide
computer-aided GUI form and report generation.
Topic 11
© Prentice Hall, 2007
11-10
A typical form design specification:
Based on a use case connection
Involves three parts:
1) Narrative overview
2) Sample design
3) Assessment
Topic 11
© Prentice Hall, 2007
11-11
Topic 11
© Prentice Hall, 2007
11-12
Guidelines for Displaying Text

Case – mixed upper/lower case, using conventional
punctuation

Spacing – double-space if possible, otherwise insert
blank lines between paragraphs

Justification – left-justfiy with ragged right margins

Hyphenation – no hyphenation of words between lines

Abbreviations/Acronyms – only when commonly
understood and significantly shorter than actual words
Topic 11
© Prentice Hall, 2007
11-13
Topic 11
© Prentice Hall, 2007
11-14
Grouping, organization, layout, and highlighting are
important considerations in form design
Topic 11
© Prentice Hall, 2007
11-15
Highlighting can
include use of upper
case, font size
differences, bold,
italics, underline,
boxing, and other
approaches.
Topic 11
© Prentice Hall, 2007
11-16
Methods of Highlighting
Blinking and audible
tones
Color differences
Intensity differences
Size differences
Font differences
Topic 11
Reverse video
Boxing
Underlining
All capital letters
Offsetting and position
of nonstandard
information
© Prentice Hall, 2007
11-17
Topic 11
© Prentice Hall, 2007
11-18
Printed Reports
Business reports are static, no user interaction.
Therefore, business reports are often printed in
hardcopy form.
Considerations:
Laser or Inkjet printers – good for graphics, but too
expensive for large batches
Impact printers – fast, reliable, inexpensive, but not
good at displaying graphical content
Topic 11
© Prentice Hall, 2007
11-19
Topic 11
© Prentice Hall, 2007
11-20
Bar and line graphs give pictorial summary information
that can enhance reports and graphs.
Topic 11
© Prentice Hall, 2007
11-21
Designing Web Layouts

For e-commerce applications, web form is the contact
point between customer and company
good design is very important

But, rapid proliferation of web sites without
corresponding increase in UI experts

Possible solutions:
– Make Web design easy enough for non-UI experts
– Train more people in Web design
– Tolerate poorly-designed Web layouts
Topic 11
© Prentice Hall, 2007
11-22
Topic 11
© Prentice Hall, 2007
11-23
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
Topic 11
© Prentice Hall, 2007
11-24
Common Areas in Forms

Header information
 Sequence and time-related information
 Instruction or formatting information
 Body or data details
 Totals or data summary
 Authorization or signatures
 Coments
Topic 11
© Prentice Hall, 2007
11-25
Topic 11
© Prentice Hall, 2007
11-26
A typical
interface/dialogue
design
specification:
Similar to form design,
but includes
multiple forms and
dialogue sequence
specifications
Topic 11
© Prentice Hall, 2007
11-27
Data entry structure is concerned with navigation flow.
Navigation flow should be natural and intuitive to the user, not
disjointed and confusing.
Left-to-right, top-to-bottom is best.
Topic 11
© Prentice Hall, 2007
11-28
Topic 11
© Prentice Hall, 2007
11-29
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 – informs user that something
is wrong, either with data entry or system
operation
Topic 11
© Prentice Hall, 2007
11-30
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
Topic 11
© Prentice Hall, 2007
11-31
Guidelines for Dialogue Design
– Consistency
– Allow sequence, shortcuts, and reversals
in navigation
– Frequent feedback
– Logical grouping and sequencing of
diagrams, with beginning, middle, and
end
– Comprehensive error handling
– Maximize ease and control of use
Topic 11
© Prentice Hall, 2007
11-32
Topic 11
© Prentice Hall, 2007
11-33
Dialogue
diagrams
depict the
sequence,
conditional
branching,
and
repetition
of
dialogues.
Topic 11
© Prentice Hall, 2007
11-34
Recap

After studying this chapter we learned to:
– Design forms, reports, interfaces, and
dialogues.
– List and apply accepted guidelines during
interface design.
– Properly format text, tables, and lists.
– Design dialogues using dialogue diagrams.
Topic 11
© Prentice Hall, 2007
11-35
Recap (cont.)

After studying this chapter we learned to:
– Explain interface and dialogue design.
– Apply general guidelines for designing
interfaces and dialogues.
– Explain common errors in developing Web
interfaces.
– Design human-computer dialogues, including
the use of dialogue diagrams.
Topic 11
© Prentice Hall, 2007
11-36