Systems Analysis and Design
Slides adapted from
Jeffrey A. Hoffer, University of Dayton
Joey F. George, Florida State University
Joseph S. Valacich, Washington State University
Modern Systems Analysis and Design, 4/E, Pearson Prentice Hall, 2004
Chapter 12
Designing Interfaces and
Dialogues
Objectives
Explaining the process of interface and
dialogue design.
Understanding methods for interacting with a
system.
Describing various input devices and factors
affecting their usability.
Presenting guidelines for designing interface
layout, data entry field structure, feedback,
and system help.
Defining design of graphical user interfaces.
12-2
© R Gustas
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
12-3
© R Gustas
Deliverables and Outcomes
A typical
interface/dialogue
design
specification:
Similar to form
design, but
includes multiple
forms and
dialogue
sequence
specifications
12-4
© R Gustas
Interface Methods
Interface: the method by which a user
interacts with the information system
Common interaction methods
12-5
Command line
Menu
Form
Object-based (Icons represent specific functions)
Natural language
© R Gustas
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-6
© R Gustas
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-7
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
© R Gustas
12-8
© R Gustas
Drop-down menu
12-9
© R Gustas
12-10
© R Gustas
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
12-11
© R Gustas
Poor Menu Design
12-12
© R Gustas
Good Menu Design
Better Menu Design
12-13
© R Gustas
Form Interaction
Allows users to fill in the blanks when working
with a system
Measures of an effective design:
12-14
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
© R Gustas
MS Visio tool can be used to design screen layouts
(File=>Stencils=>Software=>Windows and Dialogs)
12-15
© R Gustas
Object Interaction
Symbols are used to represent
commands or functions.
Icons:
12-16
Graphic symbols that look like the
processing option they are meant to
represent
Use little screen space
Can be easily understood by users
© R Gustas
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
12-17
© R Gustas
Hardware Options for System
Interaction
Keyboard
Mouse
Joystick
Trackball
12-18
Touch Screen
Light Pen
Graphics Tablet
Voice
© R Gustas
Designing Interfaces
Use standard formats similar to paper-based
forms and reports
Left-to-right, top-to-bottom navigation
Flexibility and consistency:
12-19
Free movement between fields
No permanent data storage until the user requests
Each key and command assigned to one function
© R Gustas
Structuring Data Entry
Entry
Never require data that are already online or that
can be computed
Defaults
Units
Always provide default values when appropriate
Make clear the type of data units requested for
entry (for instance: tons, £,$, kg)
Replacement Use character replacement when appropriate
(e.g.: allow user to look up the value in a table)
12-20
Captioning
Format
Always place caption (names) adjacent to fields
Justify
Automatically justify data entries (text should be
justified left)
Help
Provide context-sensitive help when appropriate
Provide formatting patterns/examples
© R Gustas
Entering Text
12-21
© R Gustas
Controlling Data Input
Objective: reduce data entry errors
Common sources of data entry errors in
a field:
12-22
Appending: adding additional characters
Truncating: losing characters
Transcripting: entering invalid data
Transposing: reversing sequence of
characters
© R Gustas
Types of Validation Tests
Data Type (e.g., all
alphabetic or Numeric)
Combinations (based
on common sense)
Expected Values
(e.g., match with existing
customer names)
Missing Data (e.g.,
incomplete data based on
dependency)
12-23
Range (e.g., 0 - 1)
Reasonableness
Self-checking digits
(extra digit is used)
Size (social security
number)
Templates
Values (e.g., Jan, Feb …)
© R Gustas
Feedback Messages
Status information: keep user informed of
what’s going on, helpful when user has to wait
for response (eg: customer, order information)
Prompting cues: tell user when input is needed,
and how to provide the input
Enter Customer Account Number: ___-___-___
Warning or Error: inform user that something is
wrong, either with data entry or system operation
12-24
No customer record found for Customer ID
© R Gustas
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-25
© R Gustas
What is a Dialogue?
A sequence of interactions between the
system and a user
Dialogue design involves:
12-26
Designing a dialogue sequence
Building a prototype
Assessing usability
© R Gustas
Guidelines for Dialogue Design
Consistency (same
terminology on all screens)
Shortcuts and
Sequence (special keys can
be used for advanced users)
Feedback (for very user
action, eg: record is added)
Closure (e.g.: indication of
first or last screen)
12-27
Error Handling
(errors should be detected
and reported)
Reversal (reverse
actions)
Control (consistent
response time)
Ease (e.g.: transitions to
first and last screen)
© R Gustas
Dialogue Diagramming
A formal method for designing and representing
human-computer dialogues using box and line
diagrams
12-28
© R Gustas
Dialogue
diagrams
depict the
sequence,
conditional
branching, and
repetition of
dialogues.
12-29
© R Gustas
Summary
In this chapter you learned:
12-30
The process of interface and dialogue
design.
To apply methods for interacting with a
system.
Input devices and factors affecting their
usability.
Guidelines for designing interface layout,
data entry field structure, feedback, and
system help.
To design graphical user interfaces.
© R Gustas