User Interface Design and Prototyping
Introduction

The chapter will address the following questions:





Which features on available terminal and microcomputer displays
can be used for effective user interface design?
What are the backgrounds and problems encountered by different
types of terminal and microcomputer users?
How do you design and evaluate the human engineering in a user
interface for a typical information system?
How do you apply appropriate user interface strategies to an
information system? How do you use a state transition diagram to
plan and coordinate a user interface for an information system?
How can prototyping can be used to design a user interface.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
1
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Styles of User Interfaces

Introduction


User interface design is the specification of a conversation
between the system user and the computer.
This conversation generally results in either input or output -possibly both.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
2
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Styles of User Interfaces

Menu Selection

The menu selection strategy of dialogue design presents a list of
alternatives or options to the user. The system user selects the
desired alternative or option by keying in the number or letter that
is associated with that option.
 More sophisticated technology allows menu selection by
touching the screen, or selecting menu options with a pen,
mouse, cursor keys, or other pointing devices.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
3
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Styles of User Interfaces

Menu Selection

Menu Bars:
 Menu bars are used to display horizontally across the top of the
screen/window a series of choices from which the user can
select.
• The choices typically correspond to commands or properties that
the user can select or toggle.
• The choices themselves are typically organized from left-to-right
on the basis of the frequency that a choice is selected.

Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
Menu bars are used to identify common and frequently used
actions that take place in a wide variety of different windows
that make up the application.
4
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Styles of User Interfaces

Menu Selection

Menu Bars:
 Menu bars advantages:
• Always being readily visible to the user
• Consistently located
• Easily selected via the keyboard or mouse

Menu bars disadvantages:
• Menu choices are organized for left-to-right scanning.
– Studies have shown that users can more easily browse and
select from a list that is vertically arranged.
– To aid in clearly scanning the list, adequate spacing between
choices is necessary.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
5
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Menu Bar
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
6
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Styles of User Interfaces

Menu Selection

Pull-Down Menus:
 Pull-down menus provide a vertical list of choices to the user.
 A pull-down menu is made available once the user selects a
choice from a menu bar.
 The list of choices are typically organized from top-to-bottom
according to the frequency in which they are chosen
 One special type of pull-down menu is called a tear-off menu.
• With a tear-off menu, the user can select the menu and drag to
relocate it elsewhere on the screen.
• The tear-off menu is then available for continual referencing.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
7
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Styles of User Interfaces

Menu Selection

Pull-Down Menus:
 Pull-down menu advantages:
• Allows the designer to simplify a menu bar that may otherwise
contain too many choices.
– Related set of choices are “grouped” into its own separate list.
• Pull-down menu items can be selected via the keyboard or mouse.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
8
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Styles of User Interfaces

Menu Selection

Pull-Down Menus:
 Pull-down menu disadvantages:
• The user is not provided with a visual clue that suggests the menu
exists.
• Pull-down menu may obstruct the user’s view of other areas of
interest appearing within the body of the screen/window.
• A choice appearing on a pull-down menu may result in yet another
list or menu of choices.
– Choices which have a a right-pointing arrow next to the label
result in a cascading menu.
– Choices which have an eclipse next to the label result in a
dialogue box being displayed that contains commands and
properties for the user to complete a task.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
9
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Pull-down Menu
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
10
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Dialogue Box
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
11
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Styles of User Interfaces

Menu Selection

Cascading Menus:
 A cascading menu is a menu that must be requested by the user
from another higher-level menu.
 The cascading menu’s existence is suggested by the visual clue
of a right-pointing arrow appearing next to the higher-level
menu choice.
 When requested, the menu list will appear to the immediate
right (in some cases, to the left) of the selected choice from the
higher-level menu.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
12
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Styles of User Interfaces

Menu Selection

Cascading Menus:
 Cascading menu advantages:
• Cascading menus simplify higher-level menus into a smaller set of
related group of choices.
• Vertical arrangement of the choices also makes scanning the
choices easier.

Cascading menu disadvantages:
• Menu must be requested by the user.
• User may have to traverse several levels of menus to locate and
select a desired option.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
13
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Cascading Menu
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
14
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Cascading Menu
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
15
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Styles of User Interfaces

Menu Selection

Pop-up Menus:
 A pop-up menu is a vertical listing of choices that must be
requested by the user.
 A pop-up menu is requested by clicking the right mouse button.
 Unlike pull-down and cascading menus, the pop-up menu’s
appearance depends on where the pointer was located when the
menu was requested.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
16
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Styles of User Interfaces

Menu Selection

Pop-up Menus:
 Pop-up menu advantages:
• Provide a list of options that pertain to a specific object that the
user selected.
– When the cursor is positioned over an object of interest and the
right mouse button is clicked, a pop-menu containing
commands or properties pertaining to that object appears in the
vicinity of the object.
• Allows the user to obtain a list of actions without changing their
focus away from the object or work area on the screen.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
17
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Styles of User Interfaces

Menu Selection

Pop-up Menus:
 Pop-up menu disadvantages:
• No visual clue that suggests their existence.
• Users must learn about the existence pop-up menus.
• May obstruct portions of the viewing area of interest to the user.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
18
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
19
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Styles of User Interfaces

Menu Selection

Iconic Menus:
 An iconic menu uses graphic representations for menu options.
• These types of menus are typically used to present the user with
options that pertain to special functions that can be performed
within the application.

Iconic menu advantages:
• Easy recognition of options.
– The use of graphic images helps the user to memorize and
recognize the functions available within an application.
• The choice presented in the form of an icon also provide a
relatively larger selection target than the previously discussed
menus.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
20
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Styles of User Interfaces

Menu Selection

Iconic Menus:
 Iconic menu disadvantages:
• May be difficult to find or create meaningful graphic images.
• Not everything can easily be represented as a picture.
• What is a readily identifiable and meaningful picture to one person
may not be to the next person.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
21
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Iconic Menu
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
22
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Styles of User Interfaces

Instruction Sets

Instead of menus -- or in addition to menus – applications can be
designed using a dialogue around an instruction set (also called a
command language interface).
 Users must learn the syntax of the instruction set and this
approach is suitable only for dedicated users.
 There are three types of syntax.
• A form of Structured English can be defined as a set of
commands that control the system.
• A mnemonic syntax is built around meaningful abbreviations for
all commands.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
23
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Styles of User Interfaces

Instruction Sets

There are three types of syntax. (continued)
• Natural language syntax is when the system user enters
commands using natural English (either conversational or formal,
written English).The system interprets these commands against a
known syntax and requests clarification if it doesn't understand
what the user wants. As new interpretations become known, the
system learns the system user's vocabulary by saving it for future
reference.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
24
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
25
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
26
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Styles of User Interfaces

Question-Answer Dialogues


Question-answer dialogue strategy is an style that was primarily
used supplement either menu driven or syntax-driven dialogues.
This strategy involves the system asking the system user questions.
 The simplest questions involve yes or no answers.
 This strategy requires that you make sure to consider all
possible correct answers and deal with the actions to be taken if
incorrect answers are entered.
 Question-answer dialogue is difficult because you must try to
consider everything that the system user might do wrong!
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
27
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Question
Answer
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
28
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Styles of User Interfaces

Direct Manipulation




Allows direct manipulation of graphical objects appearing on a
screen.
This user interface style focuses upon using icons, small graphic
images, to suggest functions to the user.
Selecting the icon with a pointing device like a mouse or light pen
executes the function.
Icons can work in conjunction with one another.
 A pointing device can be used to drag the icon of a file folder
(representing a named file) to a trash can icon — intuitively
instructing the system to delete (or throw away) the file.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
29
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
30
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Human Factors for User Interface Design

Introduction

System users can be broadly classified as either dedicated or
casual.
 A dedicated system user is one who will spend considerable
time using specific programs. This user is likely to become
more comfortable and familiar with the terminal or PC's
operation.
 The casual system user may only use a specific program on an
occasional basis. This user may never become truly
comfortable with the terminal or the program.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
31
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Human Factors for User Interface Design

General Human Engineering Guidelines


Guideline 1: The system user should always be aware of what to
do next.
 Tell the user what the system expects right now.
 Tell the user that data has been entered correctly.
 Tell the user that data has not been entered correctly.
 Explain to the user the reason for a delay in processing.
 Tell the user that a task was completed or was not completed.
Guideline 2: The screen should always be formatted so that the
various types of information, instructions, and messages always
appear in the same general display area.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
32
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Human Factors for User Interface Design

General Human Engineering Guidelines




Guideline 3: Messages, instructions, or information should be
displayed long enough to allow the system user to read them.
Guideline 4: Use display attributes sparingly.
Guideline 5: Default values for fields and answers to be entered
by the user should be specified.
Guideline 6: Anticipate the errors users might make.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
33
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Human Factors for User Interface Design

Dialogue Tone and Terminology


The overall tone and terminology of a dialogue are important and
the session should be user friendly.
With respect to the tone of the dialogue, the following guidelines
are offered:
 Use simple, grammatically correct sentences.
 Don't be funny or cute!
 Don't be condescending; that is, don't insult the intelligence of
the system user.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
34
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Human Factors for User Interface Design

Dialogue Tone and Terminology

With respect to the terminology used in the dialogue, the following
guidelines are offered:
 Don't use computer jargon.
 Avoid most abbreviations.
 Use simple terms.
 Be consistent in your use of terminology.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
35
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Human Factors for User Interface Design

Dialogue Tone and Terminology

With respect to the terminology used in the dialogue, the following
guidelines are offered: (continued)
 Instructions should be carefully phrased, and appropriate
action verbs should be used.
• The following recommendations should prove helpful:
– Try SELECT instead of PICK when referring to a list of
options.
– Use TYPE, not ENTER, to request the user to input specific
data or instructions.
– Use PRESS, not HIT or DEPRESS, to refer to keyboard
actions.
– When referring to the cursor, use the term POSITION THE
CURSOR, not POINT THE CURSOR.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
36
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Display Features That Affect User Interface
Design

Display Area



The size of the display area is critical to user interface design.
For terminal displays, the two most common display areas are 25
(lines) by 80 (columns) and 25 by 132.
For microcomputer and workstation display monitors, display size
is measured in pixels.
 The greater the number of pixels, the more information can be
displayed.
 Pixel display areas are specified in width by height.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
37
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Display Features That Affect User Interface
Design

Character Sets and Graphics




Every display uses a predefined character set.
Most displays use the common ASCII character set.
Some displays allow the programmer to supplement or replace the
predefined character set.
Most displays today offer graphics capabilities.
 Graphics capabilities must be supported by graphics
controllers and software that allow the programmer to take
advantage of the graphics capabilities.
 Graphics-based displays may support a virtually unlimited
character set.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
38
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Display Features That Affect User Interface
Design

Paging and Scrolling

The manner in which the display area is shown to the user is
controlled by both the technical capabilities of the display and the
software capabilities of the computer system.
 Paging displays a complete screen of characters at a time. The
complete display area is known as a page (also called a screen
or frame). The page is replaced on demand by the next or
previous page.
 Scrolling moves the displayed characters up or down, one line
at a time.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
39
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Display Features That Affect User Interface
Design

Display Properties


Most displays in use today provide a wide variety of display
properties that may be manipulated to more effectively present data
and information.
Display properties are characteristics that change the way in
which a character or group of characters is displayed on a screen.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
40
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Display Features That Affect User Interface
Design

Split-Screen and Windowing Capabilities


Split-screen capability is a variation on the windows concept.
The display screen, under software control, can be divided into
different areas (called windows).
 Each window can act independently of the other windows,
using features such as paging, scrolling, display attributes, and
color.
 Each window can be defined to serve a different purpose.
Windows can be resized, moved, and hidden or recalled on user
demand.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
41
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Display Features That Affect User Interface
Design

Keyboards and Function Keys

Most modern terminals and monitors are integrated with
keyboards.
 The number of keys and their layout may vary, but most
keyboards contain special keys called function keys.
• Function keys (usually labeled F1, F2, and so on) can be used to
implement certain common, repetitive operations in a user
interface (for example, START, HELP, PAGE UP, PAGE DOWN,
EXIT). These keys can be programmed to perform common
functions.

Function keys should be used consistently.
• A system's programs should consistently use the same function
keys for the same purposes.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
42
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Display Features That Affect User Interface
Design

Pointer Options

There are many selection options, such as touch-sensitive screens,
voice recognition, and pointers.
 The most common pointer is the mouse.
• A mouse is a small hand-sized device that sits on a flat surface
near the terminal. It has a small roller ball on the underside. As you
move the mouse on the flat surface, it causes the pointer to move
across the screen. Buttons on the mouse allow you to select objects
or commands to which the cursor has been moved. Alternatives
include trackballs, pens, and trackpoints.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
43
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
How to Design & Prototype a User Interface

Step 1: Chart the Dialogue

A state transition diagram is used to depict the sequence and
variations of screens that can occur when the system user sits at the
terminal (PC or workstation).
 Rectangles are used to represent display screens.
 The arrows represent the flow of control and triggering event
causing the screen to become active or receive focus.
 The rectangles only describe what can appear during the
dialogue.
 The direction of the arrows indicate the order in which these
screens occur.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
44
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
3
4
2
1
1
2
2
1
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
45
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
How to Design & Prototype a User Interface

Step 2: Prototype the Dialogue and User Interface
Many screens may have to be designed and prototyped.
 Some screens were identified for the purpose of bringing
together the application and its input and output screens.
 Some screens were identified for the purpose to provide the
user some flexibility with customizing the application’s
interaction to suit their own preferences.
 Other screens may have been identified to deal with system
controls such as backup and recovery.
 It is through studying the entire collection of screens that you
may discover the need to make revisions to some screens.
 It is likely that such issues as color, naming consistencies of
common buttons and menu options, and other look-and-feel
Prepared by Kevin C. Dittman for
conflicts may need to be resolved.
Systems Analysis & Design Methods 4ed

by J. L. Whitten & L. D. Bentley
46
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
47
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
1
2
3
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
48
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
1
2
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
49
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
50
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
51
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
52
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
53
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
54
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
55
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
How to Design & Prototype a User Interface

Step 3: Obtain User Feedback


Exercising (or testing) the user interface is a key advantage of all
prototyping environments.
 Exercising (or testing) the user interface means that system
users literally experiment with and test the interface design
prior to extensive programming and actual implementation of
the working system. Analysts can observe this testing to
improve on the design.
In the absence of prototyping tools, the analyst should at least
simulate the dialogue by walking through the screen sketches with
system users.
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
56
Copyright Irwin/McGraw-Hill 1998
User Interface Design and Prototyping
Summary



Introduction
Styles of User Interfaces
How to Design & Prototype a User Interface
Prepared by Kevin C. Dittman for
Systems Analysis & Design Methods 4ed
by J. L. Whitten & L. D. Bentley
57
Copyright Irwin/McGraw-Hill 1998