Chapter 3c
Designing Interfaces and
Dialogues
© 2005 by Prentice Hall
Learning Objectives
 Explain the process of interface and dialogue
design and the deliverables.
 Contrast and apply methods for interacting with a
system.
 Describe guidelines for designing interface layout,
data entry field structure, feedback, and system
help.
 Design human-computer dialogues and
understand how dialogue diagramming can be
used.
12-2
© 2005 by Prentice Hall
12-3
© 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-4
© 2005 by Prentice Hall
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
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-6
© 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-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
© 2005 by Prentice Hall
Pop-up menu
12-8
© 2005 by Prentice Hall
12-9
© 2005 by Prentice Hall
12-10
© 2005 by Prentice Hall
12-11
© 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
12-12
© 2005 by Prentice Hall
Contrasting Menu Designs
12-13
© 2005 by Prentice Hall
Visual
editing
tools help
designers
construct
menus.
12-14
© 2005 by Prentice Hall
Form Interaction
Allows users to fill in the blanks when working
with a system
Measures of an effective design:






12-15
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-16
© 2005 by Prentice Hall
Object Interaction
Symbols are used to represent commands
or functions.
Icons:



12-17
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-18
© 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 viable as other
interaction methods
Both keyboard and voice entry
12-19
© 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-20
Free movement between fields
No permanent data storage until the user requests
Each key and command assigned to one function
© 2005 by Prentice Hall
Guidelines for Structuring Data
Entry Fields
Entry
Never require data that are already online or that can
be computed
Defaults
Units
Always provide default values when appropriate
Replacement
Captioning
Format
Justify
Help
Use character replacement when appropriate
12-21
Make clear the type of data units requested for entry
Always place a caption adjacent to fields
Provide formatting examples
Automatically justify data entries
Provide context-sensitive help when appropriate
© 2005 by Prentice Hall
Options for Entering Text
12-22
© 2005 by Prentice Hall
Controlling Data Input
Objective: reduce data entry errors
Common sources data entry errors in a
field:




12-23
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
Combinations
Expected Values
Missing Data
Pictures/Templates
12-24
Range
Reasonableness
Self-checking Digits
Size
Values
© 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-25
© 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-26
© 2005 by Prentice Hall
DESIGNING DIALOGUES
Dialogue: A sequence of interactions
between the system and a user
Dialogue design involves:



12-27
Designing a dialogue sequence
Building a prototype
Assessing usability
© 2005 by Prentice Hall
Guidelines for Dialogue Design
Consistency
Shortcuts and
Sequence
Feedback
Closure
12-28
Error Handling
Reversal
Control
Ease
© 2005 by Prentice Hall
Designing the Dialogue
Sequence
Dialogue diagramming: A formal method for designing and
representing human-computer dialogues using box and line
diagrams. See Figure 12-19 for example.
12-29
© 2005 by Prentice Hall
Dialogue
diagrams depict
the sequence,
conditional
branching, and
repetition of
dialogues.
12-30
© 2005 by Prentice Hall
Summary
In this chapter you learned how to:




12-31
Explain the process of interface and dialogue
design and the deliverables.
Contrast and apply methods for interacting with a
system.
Describe guidelines for designing interface
layout, data entry field structure, feedback, and
system help.
Design human-computer dialogues and
understand how dialogue diagramming can be
used.
© 2005 by Prentice Hall