Modern Systems Analysis
and Design
Fourth Edition
Jeffrey A. Hoffer
Joey F. George
Joseph S. Valacich
Chapter 12
Designing Interfaces and
Dialogues
© 2005 by Prentice Hall
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.
12-2
© 2005 by Prentice Hall
12-3
© 2005 by Prentice Hall
Interface/Dialogue Design
Layout (of text, and table data)
 Structuring data entry
 Controlling data input (validation and
format controls)
 Feedback (prompting, status,
warning, and error messages)
 Dialogue sequencing

12-4
© 2005 by Prentice Hall
Deliverables and Outcomes
A typical
interface/dialogue
design
specification:
Similar to form
design, but
includes multiple
forms and
dialogue
sequence
specifications
12-5
© 2005 by Prentice Hall
Characteristics for Consideration
User: experience, skills, motivation, education,
personality
Tasks: differ in amount of information that must be
obtained or provided

Task demands: time pressure, cost of errors, work durations
(fatigue)
System: the platform on which the system is
constructed will influence interaction styles and
devices.
Environment:


12-6
social issues: user’s role and status
physical issues: lighting, sound, task interruptions,
temperature, humidity
© 2005 by Prentice Hall
Interface Methods
Interface: the method by which a user
interacts with the information system
Common interaction methods





12-7
Command line
Menu
Form
Object-based
Natural language
© 2005 by Prentice Hall
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
12-8
© 2005 by Prentice Hall
Interface Methods
Interface: the method by which a user
interacts with the information system
Common interaction methods





12-9
Command line
Menu
Form
Object-based
Natural language
© 2005 by Prentice Hall
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:


12-10
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
© 2005 by Prentice Hall
12-11
© 2005 by Prentice Hall
12-12
© 2005 by Prentice Hall
12-13
© 2005 by Prentice Hall
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 (gray text)
12-14
© 2005 by Prentice Hall
12-15
© 2005 by Prentice Hall
Good Menu Design
12-16
© 2005 by Prentice Hall
Visual
editing
tools help
designers
construct
menus.
12-17
© 2005 by Prentice Hall
Interface Methods
Interface: the method by which a user
interacts with the information system
Common interaction methods





12-18
Command line
Menu
Form
Object-based
Natural language
© 2005 by Prentice Hall
Form Interaction
Allows users to fill in the blanks when working
with a system
Measures of an effective design:






12-19
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
© 2005 by Prentice Hall
12-20
© 2005 by Prentice Hall
Interface Methods
Interface: the method by which a user
interacts with the information system
Common interaction methods





12-21
Command line
Menu
Form
Object-based
Natural language
© 2005 by Prentice Hall
Object Interaction
Symbols are used to represent
commands or functions.
Icons:



12-22
Graphic symbols that look like the
processing option they are meant to
represent
Use little screen space
Can be easily understood by users
© 2005 by Prentice Hall
12-23
© 2005 by Prentice Hall
Interface Methods
Interface: the method by which a user
interacts with the information system
Common interaction methods





12-24
Command line
Menu
Form
Object-based
Natural language
© 2005 by Prentice Hall
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 feasible
as other interaction methods
12-25
© 2005 by Prentice Hall
Hardware Options for System
Interaction
Keyboard
Mouse
Joystick
Trackball
12-26
Touch Screen
Light Pen
Graphics Tablet
Voice
© 2005 by Prentice Hall
Usability Problems with
Hardware Devices
Visual Blocking (device blocks
display when using)
 touch screen, light pen
Adequate Feedback
(device provides adequate
feedback)
User Fatigue (potential for fatigue
over long use)
touch screen, light pen
Movement Scaling (device


movement translates to equivalent screen
movement)

keyboard, mouse, joystick,
trackball, graphics tablet,
voice
Durability (need for maintenance)

12-27
trackball, touch screen
keyboard, mouse,
joystick, trackball,
graphics tablet, voice
Speed (cursor movement)

keyboard
Pointing Accuracy (ability
to precisely direct cursor

joystick, touch screen,
light pen, voice
© 2005 by Prentice Hall
12-28
© 2005 by Prentice Hall
Designing Interfaces
Use standard formats similar to paper-based
forms and reports
Left-to-right, top-to-bottom navigation
Flexibility and consistency:



12-29
Free movement between fields
No permanent data storage until the user requests
Each key and command assigned to one function
© 2005 by Prentice Hall
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
(by looking up a value in a table, or automatic filling the rest
of a word)
Captioning
Always place a caption adjacent to fields
Format
Justify
Help
Provide formatting examples (like $ or decimal point)
12-30
Automatically justify data entries
Provide context-sensitive help when appropriate
© 2005 by Prentice Hall
Entering Text
12-31
© 2005 by Prentice Hall
Controlling Data Input
Objective: reduce data entry errors
Common sources data entry errors in a
field:




12-32
Appending: adding additional characters
Truncating: losing characters
Transcripting: entering invalid data
Transposing: reversing sequence of
characters
© 2005 by Prentice Hall
Types of Validation Tests
Class or Composition

Type check
Combinations


Check if reasonable,
E.g.: quantity of sold + type of product?
Expected Values

E.g. Match with existing customer
Missing Data

E.g. All fields of a record
Pictures/Templates

12-33
Standard format, E.g.hyphens …
© 2005 by Prentice Hall
Range
Reasonableness

For situation
Self-checking Digits
Size

9 digit ID
Values

12-34
Come from set of standards: Two-letter state
code
© 2005 by Prentice Hall
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
12-35
© 2005 by Prentice Hall
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
12-36
© 2005 by Prentice Hall
What is a Dialogue?
A sequence of interactions between the
system and a user
Dialogue design involves:



12-37
Designing a dialogue sequence
Building a prototype
Assessing usability
© 2005 by Prentice Hall
Guidelines for Dialogue Design
Consistency
Shortcuts and
Sequence
Feedback
Closure (clear
start, and end)
12-38
Error Handling
Reversal
Control
Ease
© 2005 by Prentice Hall
Dialogue Diagramming
A formal method for designing and representing
human-computer dialogues using box and line
diagrams
12-39
© 2005 by Prentice Hall
Dialogue
diagrams
depict the
sequence,
conditional
branching, and
repetition of
dialogues.
12-40
© 2005 by Prentice Hall
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.

12-41
Become familiar with standards for menus
and forms.
© 2005 by Prentice Hall
12-42
© 2005 by Prentice Hall
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
12-43
© 2005 by Prentice Hall
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.
12-44
© 2005 by Prentice Hall
Summary
In this chapter you learned how to:





12-45
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.
© 2005 by Prentice Hall