Designing Interfaces and
Dialogues
1
Learning Objectives
1.
2.
3.
4.
5.
6.
7.
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.
Discuss the general guidelines for interface design.
Discuss the design of human-computer dialogues
and the use of dialogue diagramming.
Design graphical user interfaces.
Explain interface design guidelines unique to the
design of Internet based e-commerce systems.
2
System Development Life Cycle
SDLC
3
Introduction

Interface Design focuses on how information is
provided to and captured from users

Dialogue design focuses on the sequencing
of interface displays

Dialogues = conversation between two people

Interface = rules followed by each person
during conversation.
4
The Process of Designing
Interfaces and Dialogues

User-focused activity

Employs prototyping methodology:


Collect info.

Construct prototype

Assess usability

Make refinements
Follows the same questions that are answered in
the forms and reports design process

Who, What, When, Where, How.??????
5
Deliverables and Outcomes
Same as the Forms and Reports
Deliverables.
Design
Specifications

Narrative overview: Title (Name), User, Task, System
and Environment characteristics.
Sample Design: Form/Report Design and Dialogue
Sequence (Storyboard)
Testing and usability assessment: Measuring
Usability (Time To learn, rate of error).
With one exception:
Dialogue sequence: the ways a user can move from one
display to another.
6
Design specification for interfaces and dialogues
7
Interaction Methods & Devices


Interface: a method by which users
interface with an information system.
Methods of Interaction for designing usable
interfaces include:
1.
2.
3.
4.
5.
Command Language Interaction
Menu Interaction: (Pop-Up & Drop-Down)
Form Interaction
Object Based Interaction
Natural Language Interaction
8
Interaction Methods
1) Command Language Interaction



Command Language Interaction: Users enter
explicit statements into a system to invoke
operations within a system.
Difficult to interact with – requires remembering
commands, names, syntax.
Good for expert users.
9
Interaction Methods
2) Menu Interaction



Menu Interaction: a method in which a list of
options is provided and specific command is
invoked by user selection of a menu option.
Menu complexity varies according to the needs of
a system and capabilities of development
environment.
 Single menu
 Hierarchies (levels)
Two common placement methods:
 Pop-up
 Drop-down
10
11
12
Interaction Methods
2.1) Pop-Up Menu


A menu positioning method that places a
menu near the current cursor position
Used to:



Group commands
for a certain job
Provide a list of
possible use
Fill a table with valid
values
13
Interaction Methods
2.2) Drop-Down Menu

A menu positioning method that
places the access point of the menu
near the top-line of display; when
accessed, menus open by droppingdown onto display.

Provide consistency and efficient
display space

Toolbars? Input Device Menus?

Most advanced operating
environments, such as Microsoft
windows or the Apple Macintosh,
provide a combination of both popup and drop-down menu.
14
Interaction Methods
Guidelines for Menu Design
Quit
15
Poor Menu Design
16
Good Menu Design
17
Interaction Methods
3) Form Interaction
A highly intuitive human-computer interaction 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
Measures of an effective design
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
18
19
Interaction Methods
4) Object-Based Interaction

A human-computer interaction method in which symbols
are used to represent commands or functions.

Symbols are used to represent commands or
functions
Icons





Graphic symbols that look like the processing
option they are meant to represent
Use little screen space
Can be easily understood by users
Used to display desktops in modern operating
systems and starting interfaces.
20
21
Interaction Methods
5) 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.
Not as viable (practical) as other interface methods.
Can be tedious, frustrating and time-consuming (might
require learning).
Used in a narrow domains (database quires,
accessibility)
Might be applied using voice entry systems
22
Hardware Options for System
Interaction








Keyboard
Mouse
Trackball
Joystick
Touch Screen
Light Pen
Graphic Tablet
Voice
23
Usability Problems with Hardware
Devices

Visual Blocking (extent to which device
blocks display when using)




feedback for each operation)
touch screen, light pen
User Fatigue( potential
Adequate Feedback
(extent to which device provides adequate

for fatigue over
long use)


touch screen, light pen

keyboard, mouse, joystick,
trackball, graphics tablet, voice
Durability (lack of durability or need for
Speed( cursor movement speed)

Movement Scaling (extent to which
device movement translates to equivalent screen
movement)



keyboard, mouse, joystick,
trackball, graphics tablet, voice
keyboard
Pointing Accuracy( ability to
precisely direct cursor)

joystick, touch screen, light
pen, voice
maintenance (e.g., cleaning)

trackball, touch screen
24
25
Designing Interfaces

Guidelines for:
1. Designing Interface Layouts
2. Structuring Data Entry fields
3. Controlling Data Input
4. Providing Feedback
5. Providing Help
26
1. Designing Interface Layouts

Use Standard formats similar to both paper-based forms and
reports.

Forms have several general common areas :
1. Header information
2. Sequence and time-related information.
3. Instruction or formatting information
4. Body or data details
5. Totals or data summary
6. Authorization or signatures
7. Comments.
27
paper-based
form for reporting customer sales activity.
28
computer-based activity form reporting customer sales activity.
29

Another concern when designing the layout of computer-based
forms is:-

Screen navigation on data entry: screens should be left-to-right, topto-bottom as on paper forms

Flexibility and consistency :

Users should be able to move freely between fields

Data should not be permanently saved until the user
explicitly requests this

Each key and command should be assigned to one
function:

Cursor capabilities.

Editing capabilities.

Exit capabilities.

Help capabilities.
30
2. Structuring Data Entry Rules
Entry
Never require data that are already on-line or that
can be computed (time,date,….)
Defaults
Always provide default values when appropriate
(loan)
Units
Make clear the type of data units requested for entry
(currency)
Replacement
Use character replacement when appropriate
(lookup value/autocomplete)
Captioning
Always place a caption adjacent to fields
Format
Provide formatting examples(decimal points,.$,…)
Justify
Automatically justify data entries (text to
left,numbers to right)
Help
Provide context-sensitive help when appropriate
31
Entering Text
32
3. Controlling Data Input

One objective of interface design is to reduce data
entry errors

Achieved by anticipating user errors and designing
features into the system’s interfaces to avoid, detect
and correct data entry mistakes

Sources of data errors:

Appending: adding additional characters

Truncating: losing characters

Tran scripting: entering invalid data into a field

Transposing: reversing the sequence of characters
33
34
Controlling Data Input

Although DBMS can ensure data validity, it is
faster and easier to correct erroneous data
before they are stored. If a DBMS cannot
perform these tests, then you must design
the tests into program modules. An example
of one item that is a bit sophisticated, selfchecking digits, is shown in Fig 12-14
35
36
Studies

J. Verhoeff (Error Detecting Decimal Codes, Mathematical Centre Tract
29, The Mathematical Centre, Amsterdam, 1969, cited in Wagner and
Putter, "Error Detecting Decimal Digits“.

single errors: a becomes b (60% to 95% of all errors)
omitting or adding a digit (10% to 20%)
adjacent transpositions: ab becomes ba (10% to 20%)
twin errors: aa becomes bb (0.5% to 1.5%)
jump transpositions: acb becomes bca (0.5% to 1.5%)
jump twin errors: aca becomes bcb (below 1%) [lower for
longer jumps]
phonetic errors: a0 becomes 1a [since the two have
similar pronunciations in some languages, e.g. thirty and
thirteen] (0.5% to 1.5%)






37
Schemes for detecting decimal
number errors





ISBN mod 11 check
IBM check (used with most credit cards)
Electronic Funds Transfer routing number
check
UPC check (used on product bar codes)
Verhoeff's dihedral group D5 check
38
4. Providing Feedback
Feedback is very important in any
conversation between people!
Similarly, in a human-computer interaction,
system feedback is vital for a satisfactory
interaction
There are three types of system feedback



1.
2.
3.
Status Information
Prompting Cues
Error and Warning Messages
39
Status Information
1.

Keeps users informed of what is going on in system

Displaying status information is especially important if the
operation takes longer than a second or two

Using different textual and visual effects
Progress Bars, Status Bars, Mouse Icons
Prompting Cues
2.
Best to keep as specific as possible


ID ____________

Enter Student ID: _ _ _ _ _ _ _ _
Error and Warning Messages
3.




Messages should be specific and free of error codes and
jargon
User should be guided toward a result rather than scolded
Use terms familiar to user
Be consistent in format and placement of messages
40
41
5. Providing Help

Place yourself in user’s place when designing
help Guidelines:

Simplicity
Help messages should be short and to the point

Organization
Information in help messages should be easily
absorbed by users

Demonstration
It is useful to explicitly show users how to perform an
operation (Tutorials, Animation)
42
Poor Design of a HELP display
43
Hypertext-based help system for Microsoft’s
Internet Explorer 5.
44
Providing Help

Context-Sensitive Help



Enables user to get field-specific help
Users should always be returned to where they
were when requesting help
Help and Support technologies





Built-in help files.
HTML Help (CHM files: Windows Compiled Help)
Online Help and Support
Knowledge Based (KB) and User Forums
Virtual Assistants
45
Many commercially available systems provide
extensive system help.
46
Designing Dialogues


Dialogue: The sequences of interaction
between a user and a system.
Dialogue design: The process of designing
these overall sequences .
47
Guidelines for the Design of Dialogues
1. consistency: same labels, and same
information locations on all displays.
2. Shortcut &sequence: allow short cuts for
advanced users.
3. Feedback
4. Closure: indication of dialogue ending.
5. Error handling: reasons and suggestions.
6. Reversal: undo and double confirmation.
7. Control: acceptable timing for data dealing.
8. Ease
48



The dialogue design process has three major steps:
1. Designing the dialogue sequence
2. Building a prototype
3. Assessing Usability
 Designing the dialogue sequence
Define the dialogue sequence. How?
1.
By having a clear understanding of the user, task,
technological and environmental characteristics.
2.
Transform this activities into Dialogue Diagramming.
Dialogue Diagram: A formal method for designing
and representing human-computer dialogues using
box and line diagrams
49
Dialogue Diagram

Consists of a box with three
sections
1.
Top: Unique display
reference number
2.
Middle: Contains the name
or description of the display
3.
Bottom: Contains display
reference numbers that can
be accessed from the
current display
50
51
Dialogue diagram for Customer Info
System
Reference No of display
Description of display
Item 2
Reference No of return display
User can choose any item
User can choose different customer
52
Step 2: Building Prototypes
Step 3: Assessing Usability



Often optional activities
Task is simplified by using graphical design
environment
Assessing usability was discussed in the
previous chapter:





Time to learn
Speed of performance
Rate of errors
Retention over time
Subjective satisfaction
53
Designing Interfaces and Dialogues in
Graphical Environments (GUIs)
To become an effective GUI designer, you
need to:

1.
Become an expert user of the GUI environment


2.
Understand how other applications have been
designed
Understand standards for menus and forms
Gain an understanding of the available resources
and how they can be used


Become familiar what can be done for each control
Improve flexibility (more than one way to archive a
task)
54
Dialogue Design Issues in GUIs




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 – e.g.
Installation process.
Dialogue diagramming helps analysts better
manage the complexity of designing graphical
interfaces
55
56
57