CHAPTER 4.

SYSTEM DESIGN
PART 1
1
 Learning Outcome
At the end of this chapter, student should be able to :
4.1 Understand user interface design
⚫Explain Concept of user interface design & human computer
interaction including basic principles of user-centered design.
⚫List user interface design guidelines
⚫Describe user interface components
⚫Describe source documents

2
 USER INTERFACE DESIGN
⚫The system by which people (users) interact with a
computer system that affect two-way communications
between the user and the computer.
⚫The computer system includes hardware (physical)
and software (logical) components, screens, menus,
functions, output, and features.
⚫User interfaces exist for various systems, and provide
a means of:
– Input, allowing the users to manipulate a system, and/or
– Output, allowing the system to indicate the effects of the
users' manipulation.

3
HUMAN COMPUTER INTERACTION

⚫A user interface is based on basic principles of human-

computer interaction.
⚫Human-computer interaction (HCI) describes the
relationship between computers and people who use
them to perform their jobs.
⚫HCI concepts apply to everything from PC desktops to
global networks. In its broadest sense, a user interface
includes all the communications and instructions
necessary to enter input to the system and to obtain
output in the form of screen displays or printed reports.

4
 HUMAN COMPUTER INTERACTION

⚫The human-computer interface started in the 1980s with

users typing complex commands in green text on a black
screen.
⚫Then came the graphical user interface (GUI), which was a
huge improvement, because it used icons, graphical
objects, and pointing devices. Today, designers strive to
translate user behavior, needs, and desires into an
interface that users don’t really notice.
⚫The goal of user interface design is to make the user's
interaction as simple and efficient as possible

5
 USER CENTERED DESIGN
⚫User centered design (UCD) is a process and design
philosophy focused on placing input from user research as
the focus point of design decisions.

⚫UCD is an iterative methodology that puts the user at the

center of all design decisions.

⚫The objective is to create a design process that would

increase the usability of the product.

⚫The ultimate goal of UCD is to optimize a user’s

experience of a system, product or process.

6
 WHY USER CENTERED DESIGN

⚫Decreased development cost

⚫Increased revenue
⚫Improved user productivity
⚫Reduces training costs
⚫Better customer loyalty
⚫Reduced customer service costs

7
USER CENTERED DESIGN
PRINCIPLES

8
 USER-CENTERED DESIGN
PRINCIPLES
Principle Description
The interface designer must understand the underlying business
functions and how the system supports individual, departmental, and
Understand enterprise goals. The overall objective is to design an interface that helps
the Business users to perform their jobs. A good starting point might be to analyze a
functional decomposition diagram (FDD).

A well-designed interface can help users learn a new system rapidly, and
Maximize be more productive. Also, in a graphical environment, a user can display
Graphical and work with multiple windows on a single screen and transfer data
Effectiveness between programs. If the interface supports data entry, it must follow the
guidelines for data entry screen Design.

A systems analyst should understand user experience, knowledge, and

Think Like a skill levels. If a wide range of capability exists, the interface should be
User flexible enough to accommodate novices as well as experienced users.
To develop a user-centered interface, the designer must learn to think
like a user and see the system through a user’s eyes.
9
 USER-CENTERED DESIGN
PRINCIPLES
Principle Description
An interface designer should get as much feedback as possible, as early
as possible. You can present initial screen designs to users in the form
Use Models of a storyboard, which is a sketch that shows the general screen layout
and and design. The storyboard can be created with software, or drawn
Prototypes freehand. Users must test all aspects of the interface design and
provide feedback to the designers. User input can be obtained in
interviews, via questionnaires, and by observation.

The user interface should include all tasks, commands, and

communications between users and the information system. Each
screen option leads to another screen, with more options. The
objective is to offer a reasonable number of choices that a user easily
Focus on can comprehend. Too many options on one screen can confuse a user
Usability — but too few options increase the number of submenu levels and
complicate the navigation process. Often, an effective strategy is to
present the most common choice as a default, but allow the user to
select other options.
10
 USER-CENTERED DESIGN
PRINCIPLES
Principle Description
Even after the system is operational, it is important to monitor system
usage and ask user suggestions. You can determine if system features
are being used as intended by observing and surveying users.
Invite Sometimes, full-scale operations highlight problems that were not
Feedback apparent when the prototype was tested. Based on user feedback,
Help screens might need revision and design changes to allow the
system to reach its full potential.

You should document all screen designs for later use by programmers.
If you are using a CASE tool or screen generator, number the screen
designs and save them in a hierarchy similar to a menu tree. User-
Document approved sketches and storyboards also can be used to document the
Everything user interface. By applying basic user-centered design principles, a
systems analyst can plan, design, and deliver a successful user
interface.

11
 USER INTERFACE DESIGN
GUIDELINES
1 • Design a transparent interface.

2 • Create an interface that is easy to learn and use.

3 • Enhance user productivity.

4 • Make it easy for users to obtain help or correct errors.

5 • Minimize input data problems.

6 • Provide feedback to users.

7 • Create an attractive layout and design.

8 • Use familiar terms and images.

12
 1. Design a transparent interface
⚫Facilitate the system design objectives, rather than calling
attention to the interface.
⚫Create a design that is easy to learn and remember.
⚫Design the interface to improve user efficiency and
productivity.
⚫Write commands, actions, and system responses that are
consistent and predictable.

13
2. Create an interface that is easy to
learn and use
⚫Clearly label all controls, buttons, and icons.
⚫Select only those images that users can understand
easily, and provide on-screen instructions that are
logical, concise, and clear.
⚫Show all commands in a list of menu items.
⚫Make it easy to navigate.

14
 3. Enhance user productivity
⚫Organize tasks, commands, and functions in groups that
resemble actual business operations.
⚫Create alphabetical menu lists.
⚫Provide shortcuts so experienced users can avoid multiple
menu levels – using hot keys.
⚫Use default values if the majority of values in a field are
the same.
⚫Use a natural language feature that allows users to type
commands or requests in normal English phrases.
⚫Use a duplicate value function that enables users to insert
the value from the same field in the previous record.

15
 4. Make it easy for users to obtain
help or correct errors

⚫Ensure that Help is

always available.
⚫Provide user-selected
Help and context-
sensitive Help.

16
5. Minimize input data problems

⚫Create input masks.

⚫Display event-driven messages and reminders.
⚫Establish a list of predefined values that users
can click to select.
⚫Build in rules that enforce data integrity.

17
 6. Provide feedback to users
⚫Display messages at a logical place on the screen.
⚫Alert usersto lengthy processing times or delays.
⚫Allow messages to remain on the screen long
enough for users to read them.
⚫Let the user know whether the task or operation
was successful or not.

18
7. Create an attractive layout and
design
⚫Use appropriate colors to highlight different
areas of the screen.
⚫Use special effects sparingly.
⚫Use hyperlinks that allow users to jump to
related topics.
⚫Group related objects and information.

19
8. Use familiar terms and images
⚫Remember that users are accustomed to a
pattern of red=stop, yellow=caution, and
green=go.
⚫Provide a keystroke alternative for each menu
command.
⚫Use familiar commands if possible.
⚫Provide a Windows look and feel in your
interface design if users are familiar with
Windows-based applications.

20
 USER INTERFACE DESIGN
GUIDELINES
Good user interface design is based on a combination of :

• describes how people work, learn, and

ergonomics interact with computers;

• focuses on how an interface can be made

aesthetics attractive and easy to use;

interface • provides the operational structure required

technology to carry out the design objectives.

21
 USER INTERFACE COMPONENTS
⚫The designer can include many features, such as menu
bars, toolbars, dialog boxes, text boxes, toggle buttons,
list boxes, scroll bars, drop-down list boxes, option
buttons, check boxes, command buttons, and calendar
controls, among others.

A data entry screen for the student When a user clicks the Find Student
registration system. This screen uses command button, a dialog box is displayed
several design features that are with instructions.
described in the text. 22
SAMPLE USER INTERFACE
COMPONENTS

23
SAMPLE USER INTERFACE
COMPONENTS

24