System Analysis and

Design
System Design: User Interface Design
 Introduction
• A user interface is the part of the system with which the users
interact. It includes the screen displays that provide navigation
through the system, the screens and forms that capture data, and the
reports that the system produces (whether on paper, on the Web, or
via some other media).
• Interface design is the process of defining how the system will
interact with external entities (e.g., customers, suppliers, other
systems). The focus shall be design of user interfaces, however, note
that there are also system interfaces that exchange information with
other systems.
• The user interface design defines the way in which the users will
interact with the system and the nature of the inputs and outputs
that the system accepts and produces. The user interface includes
three fundamental parts as follows:
 Introduction Cont.
• The first is the navigation mechanism, the way in which the user
gives instructions to the system and tells it what to do (e.g.,
buttons, menus). The second is the input mechanism, the way in
which the system captures information (e.g., forms for adding
new customers). The third is the output mechanism, the way in
which the system provides information to the user or to other
systems (e.g., reports,Web pages).
• Each of these is conceptually different, but all are closely
intertwined: All computer displays contain navigation
mechanisms, and most contain input and output mechanisms.
Therefore, navigation design, input design, and output design are
tightly coupled.
 Principles for User Interface
Design
• In many ways, user interface design is an art. The goal is to make
the interface pleasing to the eye and simple to use, while
minimizing the effort users expend to accomplish their work.
• We briefly discuss some fundamental interface design
principles, which are common for navigation design, input
design, and output design.
Layout
• The first principle of user interface design deals with the layout
of the screen, form, or report. Layout refers to organizing areas
of the screen or document for different purposes and using
those areas consistently throughout the user interface.
Figure 1: Web page Layout with Multiple Navigation Areas
Figure 2: Interface Flow Between Sections
 Principles for User Interface Design Cont.
Content Awareness
• Content awareness refers to the ability of an interface to make the user
aware of the information it contains with the least amount of effort by the
user. All interfaces should have titles (on the screen frame, for example).
Menus should show where the user is and, if possible, where the user
came from to get there.
Aesthetics
• Aesthetics refers to designing interfaces that are pleasing to the eye.
Colour and patterns should be used carefully and sparingly and only when
they serve a purpose.
• In general, there should be one font for the entire form or report and no
more than two sizes of that font on the form or report. A larger font size
may be used for titles, section headings, etc., and a smaller font for the
report or form content.
 Principles for User Interface Design Cont.
User Experience
• User experience refers to designing the user interface with
the users’ level of computer experience in mind. A computer
system will be used by people with experience and by people
with no experience; the user interface should be designed
for both types.
• Novice users usually are most concerned with ease of
learning—how quickly and easily they can learn to use the
system. Expert users are typically more concerned with ease
of use—how quickly and easily they can complete a task with
the system once they have learned how to use it.
 Principles for User Interface Design Cont.
Consistency
• Consistency in design is probably the single most important factor in
making a system simple to use, because it enables users to predict
what will happen. When interfaces are consistent, users can interact
with one part of the system and then know how to interact with the
rest—aside, of course, from elements unique to those parts.
Minimize User Effort
• Finally, interfaces should be designed to minimize the amount of
effort needed to accomplish tasks. This means using the fewest
possible mouse clicks or keystrokes to move from one part of the
system to another. Most interface designers follow the three-clicks
rule: Users should be able to go from the start or main menu of a
system to the information or action they want in no more than three
mouse clicks or three keystrokes.
Figure 3: Principles of the User Interface Design
 User Interface Design Process
• User interface design is a five-step process that is iterative—analysts
often move back and forth between steps rather than proceed
sequentially from step 1 to step 5 (see Figure 2).
• First, interview users to develop use scenarios that describe users’
commonly employed patterns of actions so that the interface can
enable users to quickly and smoothly perform these scenarios.
• Second, the analysts develop the interface structure diagram (ISD)
that defines the basic structure of the interface. This diagram (or set
of diagrams) shows all the interfaces (e.g., screens, forms, and
reports) in the system and how they are connected.
• Third, the analysts design interface standards, which are the basic
design elements on which interfaces in the system are based.
 User Interface Design Process Cont.
• Fourth, the analysts create an interface design prototype for
each of the individual interfaces in the system, such as
navigation controls, input screens, output screens, forms
(including preprinted paper forms), and reports.
• Finally, the individual interfaces are subjected to interface
evaluation to determine whether they are satisfactory and
how they can be improved.
• Interface evaluations almost always identify improvements,
so the interface design process is repeated in a cyclical
process until no new improvements are identified.
Figure 4: User Interface Design Process
 User Interface Design Process
Cont.
Use Scenario Development
• A use scenario is an outline of the steps that the users perform
to accomplish some part of their work.
Interface Structure Design
• The interface structure design defines the basic components
of the interface and how they work together to provide
functionality to users.
• An interface structure diagram (ISD) is used to show how all
the screens, forms, and reports used by the system are related
and how the user moves from one to another.
• An ISD is somewhat similar to a DFD in that it uses boxes and
lines to show structure.
 User Interface Design Process
Cont.
Interface Standards Design
• The interface standards are the basic design elements that are
common across the individual screens, forms, and reports within the
system. Depending on the application, there may be several sets of
interface standards for different parts of the system (e.g., one for Web
screens, one for paper reports, one for input forms).
• Interface Templates The interface template defines the general
appearance of all screens in the information system and the paper-
based forms and reports that are used.
• The template design, for example, specifies the basic layout of the
screens (e.g., where the navigation area[s], status area, and
form/report area[s] will be placed) and the color scheme(s) that will
be applied.
 User Interface Design Process Cont.
Interface Design Prototyping
• An interface design prototype is a mock-up or a simulation of a
computer screen, form, or report. A prototype is prepared for each
interface in the system to show the users and the programmers how
the system will perform.
Interface Evaluation
• The objective of interface evaluation is to understand how to improve
the interface design. Interface design is subjective; there are no
formulas that guarantee a great user interface. Most interface
designers intentionally or unintentionally design an interface that
meets their personal preferences, which may or may not match the
preferences of the users. The key message, therefore, is to have as
many people as possible evaluate the interface—and the more users,
the better.
 Navigation Design

• The navigation component of the interface enables the user

to enter commands to navigate through the system and
perform actions to enter and review information it contains.
The navigation component also presents messages to the
user about the success or failure of his or her actions.

• The goal of the navigation system is to make the system as

simple as possible to use. A good navigation component is
one that the user never really notices. It simply functions the
way the user expects, and thus the user gives it little
thought.
 Navigation Design Cont.

Basic Principles
• All controls should be clear and understandable and placed in an intuitive
location on the screen. Ideally, the controls should anticipate what the
user will do and simplify his or her efforts. For example, many set-up
programs are designed so that, for a typical installation, the user can
simply keep pressing the “Next” button.
• Prevent Mistakes The first principle of designing navigation controls is to
prevent the user from making mistakes. A mistake costs time and creates
frustration. Worse still, a series of mistakes can cause the user to discard
the system.
• Mistakes can be reduced by labeling commands and actions appropriately
and by limiting choices. Never display a command that cannot be used.
 Navigation Design Cont.

• Simplify Recovery from Mistakes No matter what the system

designer does, users will make mistakes. The system should
make it as easy as possible to correct these errors. Ideally, the
system will have an “Undo” button that makes mistakes easy to
override.
Types of Navigation Controls
• There are two traditional hardware devices that can be used to
control the user interface: the keyboard and a pointing device,
such as a mouse, trackball, or touch screen.
• In recent years, voice recognition systems have made an
appearance, but they are not yet common.
 Navigation Design Cont.

• There are three basic software approaches for defining user

commands: languages, menus, and direct manipulation.
• Language (SQL, UNIX)
• Menus The most common type of navigation system today is
the menu. A menu presents the user with a list of choices,
each of which can be selected.
• Direct Manipulation With direct manipulation, the user
enters commands by working directly with interface objects.
For example, users can change the size of objects in
Microsoft PowerPoint by clicking on objects and moving the
sides, or they can move files in Windows Explorer by
dragging the file names from one folder to another.
Figure 5: Common Types of Menus
Figure 6: Types of Menus
 Navigation Design Cont.
Messages
• Messages are the way in which the system responds to a
user and informs him or her of the status of the interaction.
There are many different types of messages, such as error
messages, confirmation messages, acknowledgment
messages, delay messages, and help messages (Figure 7).
• In general, messages should be clear, concise, and complete,
which are sometimes conflicting objectives. All messages
should be grammatically correct and free of jargon and
abbreviations.
Figure 7: Types of Messages
 Input Design
• Input mechanisms facilitate the entry of data into the computer
system, whether highly structured data, such as order information
(e.g., item numbers, quantities, costs), or unstructured information
(e.g., comments).
Types of Inputs
• Text
• Number
• Selection button
Figure 3: Types of Selection boxes
 Input Design Cont.
Input Validation
• All data entered into the system must be validated in order
to ensure accuracy. Input validation (also called edit checks)
can take many forms. Ideally, to prevent invalid information
from entering the system, computer systems should not
accept data that fail any important validation check.
• There are six different types of validation checks:
completeness check, format check, range check, check digit
check, consistency check, and database check. (See figure 4)
Figure 4: Types of Input Validation
 Output Design
• Outputs are the reports that the system produces, whether on the
screen, on paper, or in other media, such as the Web. Outputs are
perhaps the most visible part of any system, because a primary
reason for using an information system is to access the information
that it produces.
Basic Principles
• The goal of the output mechanism is to present information to users
so that they can accurately understand it with the least effort. The
fundamental principles for output design reflect how the outputs are
used and ways to make it simpler for users to understand them.
• Understand Report Usage
• Manage Information Load
 Output Design Cont.
Types of Outputs
• There are many different types of reports, such as detail
reports, summary reports, exception reports, turnaround
documents, and graphs (see Fig. 5).
Figure 5: Types of Reports