Modern Systems Analysis 

and Design 

Prof. David Gadish

Chapter 12 
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.

Chapter 12  2 
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.

Chapter 12  3 
Designing Interfaces and 
Dialogues 
n  User­focused activity. 
n  Prototyping methodology of iteratively: 
¨ Collecting information. 
¨ Constructing a prototype. 
¨ Assessing usability. 
¨ Making refinements. 

n  Answer the who, what, where, and how 
questions.
Chapter 12  4 
Designing Interfaces and 
Dialogues (Cont.) 

Chapter 12 5 
Deliverables and Outcomes 
n  Creation of a design specification. 
n  A typical interface/dialogue design 
specification is similar to form design, but 
includes multiple forms and dialogue 
sequence specifications. 

Chapter 12 6 
Deliverables and Outcomes (Cont.) 

n  The specification includes: 
¨ Narrative overview. 
¨ Sample design. 
¨ Testing and usability assessment. 
¨ Dialogue sequence. 

n  Dialogue sequence  is the ways a user 
can move from one display to another. 

Chapter 12 7 
Interaction Methods and Devices 

n  Interface: a method by which users 
interact with an information system. 
n  All human­computer interfaces must: 
¨  have an interaction style; and 
¨ use some hardware device(s) for supporting 
this interaction.

Chapter 12  8 
Methods of Interacting 

n  Command line 
¨ Includes keyboard shortcuts and function keys. 
n  Menu 
n  Form 
n  Object­based 
n  Natural language

Chapter 12  9 
 Command Language Interaction 
n  Command language interaction: a 
human­computer interaction method 
whereby users enter explicit statements into 
a system to invoke operations. 
n  Example from MS DOS: 
¨ COPY C:PAPER.DOC A:PAPER.DOC 
¨ This copies a file from C: drive to A: drive.

Chapter 12  10 
Menu Interaction 
n  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. 
n  Pop­up menu: a menu­positioning method 
that places a menu near the current cursor 
position.

Chapter 12  11 
Menu Interaction (Cont.) 
n  Drop­down menu: 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. 

Chapter 12 12 
Menu Interaction (Cont.) 
n  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. 
Chapter 12 13 
Menu Interaction (Cont.) 

Chapter 12 14 
Form Interaction 
n  Form interaction: a highly intuitive 
human­computer interaction method 
whereby data fields are formatted in a 
manner similar to paper­based forms. 
n  Allows users to fill in the blanks when 
working with a system.

Chapter 12  15 
Form Interaction (Cont.) 

Chapter 12 16 
Object­Based Interaction 
n  Object­based interaction: a human­ 
computer interaction method in which 
symbols are used to represent commands 
or functions. 
n  Icons: graphical pictures that represent 
specific functions within a system. 
¨ Use little screen space and are easily 
understood by users.

Chapter 12  17 
Object­Based Interaction (Cont.) 

Chapter 12 18 
Natural Language Interaction 
n  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. 
n  Based on research in artificial intelligence. 
n  Current implementations are tedious and 
difficult to work with, not as viable as other 
interaction methods.
Chapter 12  19 
Usability Problems with Hardware 
Devices 
n  Visual Blocking  n  Adequate Feedback 
¨  touch screen, light pen  ¨  keyboard, mouse, joystick, 
n  User Fatigue  trackball, graphics tablet, 
¨  touch screen, light pen 
voice 

n  Movement Scaling  n  Speed 
¨  keyboard 
¨  keyboard, mouse, joystick, 
trackball, graphics tablet,  n  Pointing Accuracy 
voice  ¨  joystick, touch screen, light 
n  Durability  pen, voice
¨  trackball, touch screen 

Chapter 12  20 
Natural Language Interaction (Cont.) 
n  Usability problems with hardware devices: 
n  Visual Blocking 
¨ touch screen, light pen. 

n  User Fatigue 
¨ touch screen, light pen. 

Chapter 12 21 
Natural Language Interaction (Cont.) 
n  Movement Scaling 
¨ keyboard, mouse, joystick, trackball, graphics 
tablet, voice. 
n  Durability 
¨ trackball, touch screen. 

Chapter 12 22 
Natural Language Interaction (Cont.) 
n  Adequate Feedback 
¨ keyboard, mouse, joystick, trackball, graphics 
tablet, voice. 
n  Speed 
¨ Keyboard. 

n  Pointing Accuracy 
¨ joystick, touch screen, light pen, voice. 

Chapter 12 23 
Natural Language Interaction (Cont.) 

Chapter 12 24 
Designing Interfaces 
n  Forms has several general areas common 
to most forms: 
¨ Header information. 
¨ Sequence and time­related information. 
¨ Instruction or formatting information. 
¨ Body or data details.

Chapter 12  25 
Designing Interfaces (Cont.) 
¨ Totals or data summary. 
¨ Authorization or signatures. 
¨ Comments. 

n  Use standard formats similar to paper­ 
based forms and reports. 
n  Left­to­right, top­to­bottom navigation.

Chapter 12  26 
Designing Interfaces (Cont.) 
n  Flexibility and consistency: 
¨ Free movement between fields. 
¨ No permanent data storage until the user 
requests. 
¨ Each key and command assigned to one 
function.

Chapter 12  27 
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 
Captioning  Always place a caption adjacent to fields 
Format  Provide formatting examples 
Justify  Automatically justify data entries 
Help  Provide context­sensitive help when appropriate

Chapter 12  28 
Controlling Data Input 

n  Objective: reduce data entry errors. 
n  Common sources data entry errors in a 
field: 
¨ Appending: adding additional characters 
¨ Truncating: losing characters 
¨ Transcripting: entering invalid data 
¨ Transposing: reversing sequence of 
characters

Chapter 12  29 
Providing Feedback 
n  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. 

Chapter 12 30 
Providing Help 
n  Place yourself in user’s place when 
designing help. 
n  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.

Chapter 12  31 
Designing Dialogues 

n  Dialogues: the sequence of interaction 
between a user and a system. 
n  Dialogue design involves: 
¨ Designing a dialogue sequence. 
¨ Building a prototype. 
¨ Assessing usability.

Chapter 12  32 
Designing the Dialogue Sequence 

n  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. 

Chapter 12 33 
Designing the Dialogue Sequence 
(Cont.) 
¨ Review the customer information. 
¨ Leave system. 

n  Dialogue diagramming: a formal method 
for designing and representing human­ 
computer dialogues using box and line 
diagrams. 

Chapter 12 34 
 Designing the Dialogue Sequence 
(Cont.) 
n  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. 

Chapter 12 35 
Designing the Dialogue Sequence 
(Cont.) 

Chapter 12 36 
Designing the Dialogue Sequence 
(Cont.) 
n  Dialogue diagrams depict the sequence, 
conditional branching, and repetition of 
dialogues. 

Chapter 12 37 
Designing the Dialogue Sequence 
(Cont.) 

Chapter 12 38 
Building Prototypes and 
Assessing Usability 
n  Optional activities. 
n  Building prototypes displays using a 
graphical development environment. 
¨ Microsoft’s Visual Studio .NET 
¨ Borland’s Enterprise Studio 
¨ Easy­to­use input and output (form, report, or 
window) design utilities. 

Chapter 12 39 
Graphical Interface Design Issues 

n  Become an expert user of the GUI 
environment. 
¨ Understand how other applications have 
been designed. 
¨ Understand standards. 
n  Gain an understanding of the available 
resources and how they can be used. 
¨ Become familiar with standards for menus 
and forms.

Chapter 12  40 
Graphical Interface Design Issues 
(Cont.)

Chapter 12  41 
 Electronic Commerce Application: 
Designing Interfaces and Dialogues for 
Pine Valley Furniture WebStore 
n  Central and critical design activity. 
n  Where customer interacts with the company. 
¨ Care must be put it design! 

n  Prototyping design process is most 
appropriate to design the human interface. 
n  Several general design guidelines have 
emerged. 

Chapter 12 42 
General Guidelines 
n  Web’s single “click­to­act” method of 
loading static hypertext documents (i.e. 
most buttons on the Web do not provide 
click feedback). 
n  Limited capabilities of most Web browsers 
to support finely grained user interactivity. 

Chapter 12 43 
General Guidelines 
n  Limited agreed­upon standards for 
encoding Web content and control 
mechanisms. 
n  Lack of maturity of Web scripting and 
programming languages as well as 
limitations in commonly used Web GUI 
component libraries. 

Chapter 12 44 
Designing Interfaces and Dialogues 
for Pine Valley Furniture 
n  Key feature PVF want for their WebStore 
is:
¨ To incorporate into design was an interface 
with “menu­driven navigation with cookie 
crumbs”. 

Chapter 12 45 
Menu­Driven Navigation with 
Cookie Crumbs 
n  Cookie crumbs: the technique of placing 
“tabs” on a Web page that show a user 
where he or she is on a site and where he 
or she has been. 
¨ Allow users to navigate to a point previously 
visited and will assure they are not lost. 
¨ Clearly show users where they have been 
and how far they have gone from home. 

Chapter 12 46 
Summary 
n  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.

Chapter 12  47 
Summary (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.

Chapter 12  48