Systems analysis and design methods 7th whitten and benley chapter 14

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.

1


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.

2


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.

3


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

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

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.

5


User Interface Design and
Prototyping

Menu Bar

6


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.

7


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.

8


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


User Interface Design and
Prototyping

Pull-down Menu

10


User Interface Design and
Prototyping

Dialogue Box

11


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.

12


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.

13


User Interface Design and
Prototyping

Cascading Menu

14


User Interface Design and
Prototyping

Cascading Menu

15


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.

16


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.

17


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.

18


User Interface Design and
Prototyping

19


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.

20


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.

21


User Interface Design and
Prototyping

Iconic Menu

22


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.

23


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.

24

User Interface Design and
Prototyping

25