PHASE 3 :
SYSTEM DESIGN
LESSON 11
USER INTERFACE DESIGN
INTRODUCTION
In the previous lesson, we have learned several types of GUI controls for input and how to
design a good form and input. In this Lesson 11, we will discuss how to design a good user
interface for an information system. This lesson consists of four sections:

overview of user interface

types of user interface

principles for good user interface design

designing dialogue
LEARNING OUTCOMES
At the end of this lesson, students should be able to :

define the important of user interface design

list and explain several types of user interface

explain and design the user interface based on the principles

design a dialogue diagram
TERMINOLOGY
No
1
Word
Definition
Command language interfaces
An interface types whereby users enter explicit
statements into a system to invoke operations
2
Dialogue
A sequence in which information is displayed to and
obtained from user
3
Menu
An interaction methods in which a list of system
options is provided and a specific command is
invoked by a user selection
4
Natural language interfaces
An interface types it permit users to interact with the
computer in their everyday or natural language
5
Question-and-answer dialogue
An interface type where the system displays a
question to the user on the screen
6
User interface
A method by which users interact
information system
11.1
OVERVIEW OF USER INTERFACE DESIGN
with an
Interface is an interaction between user and system. It’s a method which users interact with an
information system. An interface is a medium where users interact with the system. A user
interface should provide a friendly interface which users can interact with the system to process
inputs and obtain an output. In the previous lessons, we have learned how to design good input
and output. Interface design is where we integrate both input and output design into an overall
user interfaces that established the communication between users and system. Interface design
focuses on how information system is provided to and captured from users to an information
system. Figure 11-1 shows that user interface design should be conducted after both input and
output design.
System
Planning
System
Analysis
Files and Database
Output Design
Input Design
√ User Interfaces
Design
System
Design
System
Implementation
System
Maintenance
Figure 11-1: User Interface Design Activities in the System Design Phase
11.2
TYPES OF USER INTERFACE
There are various types of methods which users can interact with the system. In this section, we
will discuss several types of user interface; menus, question-and-answer dialogue, forms,
command language interfaces and natural language interfaces. Although output design involves
a separate set of physical design issues, it is an integral part of a larger concept called user
interface. A user interface describes how users interact with an information system, and it
consists of hardware, software, screens, menus, functions, and output and features hat affect
two way communications between user and information system (Shelly et. al., 2006). User
interface consisted of process-control screens that allowed the users to send commands to the
system. Before this, the primary focus is also changed to users itself; either inside or outside the
company regarding how they communicate with an information system.
A user interface is based on basic principles of human-computer interaction. Human computer
interaction describes the relationship User interface (HCI) defines the ways in which users
interact with an information system. User interface design is the specification of a dialogue or
interaction between user and information system. User interface design is the specification of a
dialogue or conversation between the system user and the information system.
11.2.1 Menus
Menu is the most commonly employed in information system. Menu interface is an interface
types in which a list of system options is provided and a specific command is invoked by user
selection of a menu option. A menu has a list of options; so users can select from the list of
options. A specific command is invoked or another menu is activated. Menus have become
widely used interface types in today information system development. There are two methods
for positioning menus; pop-up menu and drop down menus. Most applications combine these
two types of methods; pop-up and drop down menu.
Pop-up menus
A menu-positioning method that places a menu near the current cursor position; so users don’t
have to move the position or their eyes to view system options. Figure 11-2 shows an example
of pop-up menus from Microsoft Word application. There are various uses available from the
pop-up menus (e.g. save, delete, copy).
Drop-down menus
A menu-positioning method that places the access point of the menu near the top line of the
display; when accessed, menus open by dropping down onto the display. This type of menus, a
list of available menus drops down from the main top line of the menus when accessed. Figure
11-3 shows an example of drop-down menus from Microsoft Word application. Drop down
menus have become popular since it provide consistency in menu location and operation
among applications and efficiently use display space.
Figure 11-2: Pop-up Menus from Microsoft Word Application
Figure 11-3: Drop-down Menus from Microsoft Word Application.
When designing menus, there are several guidelines that need to follow. Figure 11-4 shows an
example of good menu design for menu options in Student Registration System.
Figure 11-4: Good Design for Menu Option
11.2.3 Question-and-Answer Dialogue
This type of interface, the system displays a question to the user on the screen. In order to
communicate, users need to answer the question by using keyboard or mouse. Then, the
computer acts on the input information in a preprogrammed manner, typically by moving to the
next questions. There are two types of common question-and-answer interface; First, users
answering the question and the information system directs the question in sequence basis.
Normally, the next questions are related or connected by the previous questions. Figure 11-5
shows an example of question-and-dialogue from Microsoft Word application. Second, by using
a dialog box. Users are prompted with questions to which they supply the answer. In Figure 115, notice that users are suggested an answer by the system. Question-and-answer dialogues
are popular in a web based applications. For example, in course registration system, students
were asked to confirm the registration.
Figure 11-5: Question-and-Dialogue from Microsoft Word Application
11.2.4 Forms
The purpose of forms it to allow users to fill in the blanks when working with a system. Normally,
form was used to get input and present the information. A good form should have selfexplanatory title and field headings, followed by fields that have been organized into grouping
with boundaries to differentiate them. Blank fields are sometimes provided with a default values,
and the cursor is moved by the users from field to field by a mouse click; for instance. We also
need to minimize the need to scroll down the windows. We already discussed in designed a
form in previous chapter; Input design. Form-fill interfaces consist of on-screen forms or webbased forms displaying fields containing data items or parameters that need to be
communicated to the users. In the previous lesson, we have discussed in detail about forms.
11.2.5 Command Language Interfaces
Command language interface is an interface types whereby users enter explicit statements into
a system to invoke operations. For example; to copy a file name database.doc from C location
to disk A using DOS can be done by using the statement :
COPY C:DATABASE.DOC A:DATABASE.DOC
This type of interface requires user to remember the syntax, names and operation to be done. A
command language allows the users to control the application with a series of keystrokes,
commands, phrases, or some sequence of these three methods. Command-language
manipulates the computer as a tool by allowing the users to control the dialog. When user gives
a command to the computer using a command language, it is executed by the system
immediately. Then the user can proceed to another command.
11.2.6 Natural Language Interface
Natural language interfaces are perhaps the dream and ideal of inexperienced users, since they
permit users to interact with the computer in their everyday or natural language. This technique
accepts inputs and produce outputs in a conventional language such as English. Natural
language interface is being applied within both keyboard and voice entry system. There is no
special skill required of the users, who interfaces with the computer using natural language.
Figure 11-6 shows an example of natural language interface. For example, first question, “List
all the students who get A for Course: CCES2332” is a straightforward question.
Figure 11-6: Natural Language Interface
Most today’s user interfaces are graphical are graphical. The graphical user interface is
provided within either the computer operating system or the internet browser. There are several
types of graphical user interface. Not all types of interfaces discussed above are considered as
graphical user interface. The most popular used of graphical user interfaces are menus.
11.2.7 Exercises
Answer TRUE or for FALSE for each of the questions below.
1. A user interface should provide a friendly interface so that users can interact with the
system. TRUE
2. Interface is only for processing input but not for presenting output. FALSE
3. There are two types of menus; pop-up menus and drop-down menus. TRUE
4. Command Language interface is a type of interface where it requires user to remember the
syntax, names and operation to be done. TRUE
5. Users need to have a special skill when interacting with sing natural language interfaces.
FALSE
11.3
PRINCIPLES FOR USER INTERFACES DESIGN
The goal of designing a good user interface is to make the user interface pleasing to the eye
and easy to use, and at the same time minimizing the user effort in accomplishing their task.
There are several principles that need to be considered when designing a user interface.
11.3.1 Easy to Use
First and the most important things in designing a good interface is it should be designed clearly
labeled with all controls, buttons and icons. If the images are used in the interface, select only
images that users can understand easily. For example; house images, can be used to represent
the go back command. Figure 11-7 shows an example of images and commands that can be
used in any interface design. The interface also need to provide on-screen instructions that are
logical, concise and clear. A good interface design is an interface which is easy to navigate or
return to any level in the menu structure.
Home
Previous
page
Next page
Figure 11-7: Icon and Commands
11.3.2 An Attractive Layout
The important element in any user interface design is the basic layout of the screen, form, or
report. When designing interface, we should have and follow a standard formats for computerbased forms and reports similar to those the paper-based one. Most of the screen is divided
with at least three main components :

Header

Body or data details

Comments or signatures
The above components apply when designing input and output. When designing layouts to
records or display information from a paper-based forms, we should try to make is as similar as
possible with computer-based forms and reports.
A good layout with creative and attractive design can attract users in using the system. Use
appropriate colors in order to highlight different areas of the screen, but need to avoid gaudy
and bright colors. The use of animations and sound might be effective in some situations, but
not too many special effects. For example, when designing an e-learning system, it can attract
users especially kids when the system contains animations and sounds. Every layout has its
own title. Arrange the title of the screen accordingly in a consistent manner together with its
messages and instructions. When a user enters data, please ask the users to reconfirm their
input before it goes to the next field. Ensure that all the available commands have same
meaning. For example, if NEXT control button indicates that the next screen will appears, the
NEXT button should always perform the same command throughout the system.
11.3.3 Minimize Input Errors
One objective of user interface design is to reduce data input errors. As data input are entered
into a system, steps must be taken to ensure that the input is valid. It’s important to provide data
validation checks. As a system analyst, we must anticipate the types of errors users may make
and design features into the system’s interface to avoid, detect, and correct data input mistakes.
Establish a list of predefined values that users can click to select. Predefined values prevent
spelling errors, avoid inappropriate data in a field and make the user’s job easier – the input
screen displays a list of acceptable values and the user simply points and clicks the choice.
There are several types of tests conducted for catching the invalid data before saving or
transmission. There are several validation tests that can be conducted such as class or
composition, combination, expected values, missing data, range, self-checking digits, size and
values. Most of these tests are widely used and since it is a straightforward technique. It is a
need and easier to correct the data before permanently stored in a system. The other way is,
the system can notify users of input errors as data are being entered.
In addition to data validation tests, control must be established to verify that all input records are
correctly entered and that they are only processed once. A common method used to enhance
the validity of entering data records is to create an audit trail of the entire sequence of data
entry, processing and storage. If an error occurred, correction can be made by reviewing the
contents of the log.
When entering data, a user should also not be required to specify units of a particular value.
Field formatting and the data entry prompt should make easier and clear the type of data being
requested. The use of input mask, which is a template or pattern that make it easier for users to
enter data. In other words, a caption describing the data to be entered should be in a same
format to the requested data field. As with the display of information, all data entered onto a
form should automatically justify in a standard form.
11.3.4 User Feedback and Help
When designing interfaces, providing appropriate feedback is an easy method for making a
user’s interaction more enjoyable. In (Hoffer et. al., 2005), there are three types of system
feedback :

Status information
It’s a simple technique for keeping users informed of what is going on within a system.
For example, relevant status information such as displaying the number of pages has
been completed, e.g.; 3 pages out of 5 pages have been completed. Providing
information while the system processing the operation is important especially when the
processing takes longer time as an example in Figure 11-8. Figure 11-8 shows that
Malaysia Airlines Web site provide a status information page for user while completing
their request.
Figure 11-8: Status information provided by the System

Prompting cues
It is a system feedback used to display prompting cues. When prompting the user for
information or action, it is useful to be specific in your request. With a prompt, system
designer assumes that the user knows exactly what to enter. For example :
Enter your Matric Number (XXX12345): ________

Error or warning messages
This system feedback display messages that is specific and free of error codes. This
message should guide the users toward a resolution. For example :
Sorry, No Student Found with the Matric Number
This message can help user in their transaction.
Besides providing feedback, it’s good if we can provide helps to user. When designing help, we
need to put ourselves in the user’s place. As users, they want to know, what they should do
next, what types of information needed.
11.3.5 Exercises
Answer TRUE or for FALSE for each of the questions below.
1. The goal of designing a good user interface is to make it attractive and easy to use. TRUE
2. The use of images will make the user interface complex and difficult for users. FALSE
3. Interface should follow a standard formats for computer-based forms and reports similar with
the paper-based. TRUE
4. The use of input mask is good to assist users about the template of the input, so it easy for
user enters data. TRUE
5. System feedback provides status information, prompting cues, and error or warning
messages. TRUE
11.4
DESIGNING DIALOGUE
Dialogue is a sequence in which information is displayed to and obtained from user. Dialogue
design is a process of designing the overall sequences that user needs to follow to interact with
an information system. As a system designer, we have to understand how users use the
system and from there we can transform these activities into a formal dialogue specification.
Dialogue diagram is a formal method used when designing and representing dialogues.
Dialogue diagram have one symbol, a box with a three sections. All lines connecting between
the boxes are bidirectional. By using dialogue diagram, we can easily represent the sequencing
of displays, selection of displays in a system. Figure 11.9 shows an example of dialogue
diagram with three types of connection; sequence, iteration and selection.
0
Login Page
System
Sequence
1
Main Menu
0, System
Iteration
2
3
4
Student
Profile
Course
Registration
Reports
0, 1
0, 1
0, 1
0
Report
Selection
Figure 11.9: A Dialogue Diagram
11.4.1 Exercises
Answer TRUE or for FALSE for each of the questions below.
1. Dialogue is a sequence in which information is displayed to and obtained from user. TRUE
2. Dialogue diagram have one symbol, a box with a four sections. FALSE
3. Dialogue diagram can be drawn after understanding in a way how users will use the system.
TRUE
4. Using a dialogue diagram, make it easy to represent the sequencing of displays, selection of
displays in a system. TRUE
5. Three types of connection in a dialogue diagram; sequence, iteration and repetition. FALSE
SUMMARY
This is the end of lesson 11. In this lesson, we have learned :

overview of user interface

types of user interface

principles for good user interface design

designing a dialogue
In the next lesson, we will discuss the fourth phase involved in system development life cycle;
system implementation. The purpose of system implementation is to build a properly working
system, install it in organization, replace and old systems, preparing system and user
documentation and train users.
SELF ASSESSMENT
Fill in with the correct answer
1. ________________________ focuses on how information is provided to and captured from
users. Interface design
2. A ________________________ is a menu positioning method that places a menu near the
current cursor position. pop-up menu
3. _______________________________ syntax allows users to enter questions and
commands in their native language. Natural-language interface
4. ________________________ refers to a human-computer interaction method where users
enter explicit statements into a system to invoke operations. Command language interface
5. A(n) _______________________________ dialogue style is primarily used to supplement
either menu-driven or instruction-driven dialogues. Users are prompted with questions to
which they supply answers. question-and-answer interface
6. ____________________________ moves the displayed information up or down on the
screen, one line at a time. Scrolling
7. ________________________ refers to graphical pictures that represent specific functions
within a system. Icon
8. Referencing interface ________________________, the standard screen navigation that
users use to move between fields should be from left-to-right and top-to-bottom. layout
guidelines
9. ________________________,
________________________and
________________________ are three types of system feedback. Status information;
prompting cues error; warning messages
10. The
sequence
of
interaction
between
________________________. dialogue
a
user
and
a
system
is
called
a