Modern Systems Analysis

and Design
Chapter 11
Designing Interfaces and Dialogues
Learning Objectives
• Explain the process of designing interfaces and dialogues and the
deliverables for their creation.
• Contrast and apply several methods for interacting with a system.
• List and describe various input devices and discuss usability issues for
each in relation to performing different tasks.
• Describe and apply the general guidelines for designing interfaces and
specific guidelines for layout design, structuring data entry fields,
providing feedback, and system help.
Learning Objectives (Cont.)
• Design human-computer dialogues and understand how dialogue
diagramming can be used to design dialogues.
• Design graphical user interfaces.
• Discuss guidelines for the design of interfaces and dialogues for
Internet-based electronic commerce systems.
Designing Interfaces and Dialogues
• User-focused activity
• Prototyping methodology of iteratively:
Collecting information
Constructing a prototype
Assessing usability
Making refinements
• Must answer the who, what, where, and how questions
Designing Interfaces and Dialogues (Cont.)
Deliverables and Outcomes
• Creation of a design specification
 A typical interface/dialogue design specification is similar to form
design, but includes multiple forms and dialogue sequence specifications.
Deliverables and Outcomes (Cont.)
• The specification includes:
Narrative overview
Sample design
Testing and usability assessment
Dialogue sequence
• Dialogue sequence is the ways a user can move from one display to
another.
Interaction Methods and Devices
• Interface: a method by which users interact with an information
system
• All human-computer interfaces must:
 have an interaction style, and
use some hardware device(s) for supporting this interaction.
Methods of Interacting
• Command line
Includes keyboard shortcuts and function keys
• Menu
• Form
• Object-based
• Natural language
Command Language Interaction
• Command language interaction: a human-computer interaction
method whereby users enter explicit statements into a system to
invoke operations
• Example from MS DOS:
COPY C:PAPER.DOC A:PAPER.DOC
Command copies a file from C: drive to A: drive
Menu Interaction
• Menu interaction: a human-computer interaction method in which a
list of system options is provided and a specific command is invoked
by user selection of a menu option
• Pop-up menu: a menu-positioning method that places a menu near
the current cursor position
Menu Interaction (Cont.)
• Drop-down menu is a menu-positioning method that places the
access point of the menu near the top line of the display.
When accessed, menus open by dropping down onto the display.
Visual editing tools help designers construct menus.
Menu Interaction (Cont.)
• 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
Menu Interaction (Cont.)
Form Interaction
• Form interaction: a highly intuitive human-computer interaction
method whereby data fields are formatted in a manner similar to
paper-based forms
Allows users to fill in the blanks when working with a system.
Form Interaction (Cont.) FIGURE 11-9 Example of form interaction from the
Google Advanced Search Engine (Source: Google.)
Object-Based Interaction
• Object-based interaction: a human computer interaction method in
which symbols are used to represent commands or functions
• Icons: graphical pictures that represent specific functions within a
system
Use little screen space and are easily understood by users
Natural Language Interaction
• Natural language interaction: a human computer interaction method
whereby inputs to and outputs from a computer-based application are
in a conventional spoken language such as English
 Based on research in artificial intelligence.
 Current implementations are tedious and difficult to work with, not
as viable as other interaction methods.
Usability Problems with Hardware Devices
•Visual Blocking
 touch screen, light pen
•User Fatigue
 touch screen, light pen
•Movement Scaling
 keyboard, mouse, joystick, trackball, graphics tablet, voice
•Durability
 trackball, touch screen
Natural Language Interaction (Cont.)
• Usability problems with hardware devices:
Visual Blocking
 touch screen, light pen
User Fatigue
 touch screen, light pen
Designing Interfaces
• Forms have several general areas in common :
 Header information
 Sequence and time-related information
 Instruction or formatting information
 Body or data details
 Totals or data summary
 Authorization or signatures
 Comments
Designing Interfaces (Cont.)
• Use standard formats similar to paper based forms and reports.
• Use left-to-right, top-to-bottom navigation
Controlling Data Input
• Objective: Reduce data entry errors
• Common sources data entry errors in a field:
Appending: adding additional characters
Truncating: losing characters
Transcripting: entering invalid data
Transposing: reversing sequence of characters
Providing Feedback
• Three types of system feedback:
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
Error or warning messages: inform user that something is wrong,
either with data entry or system operation
Providing Help
• Place yourself in user’s place when designing help.
• Guidelines for designing usable help:
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.
Designing Dialogues
• Dialogues: the sequence of interaction between a user and a system
 Dialogue design involves:
• Designing a dialogue sequence.
Building a prototype.
Assessing usability.
Designing the Dialogue Sequence
• Typical dialogue between user and Customer Information System:
Request to view individual customer information.
Specify the customer of interest.
Select the year-to-date transaction summary display.
Review the customer information.
Leave system.
Designing the Dialogue Sequence (Cont.)
• Three sections of the box are used as:
Top contains a unique display reference number used by other
displays for referencing it.
Middle contains the name or description of the display.
Bottom contains display reference numbers that can be accessed from
the current display.
Designing the Dialogue Sequence (Cont.)
FIGURE 11-17 Sections of a dialogue diagramming box
Summary
• In this chapter you learned how to:
• Explain the process of designing interfaces and dialogues and the
deliverables for their creation.
• Contrast and apply several methods for interacting with a system.
• List and describe various input devices and discuss usability issues
for each in relation to performing different tasks.
• Describe and apply the general guidelines for designing interfaces and
specific guidelines for layout design, structuring data entry fields,
providing feedback, and system help