PHASE 3 :
SYSTEM DESIGN
LESSON 10
FORM AND INPUT DESIGN
INTRODUCTION
In the previous lesson, we have learned several types of output and how to design a good
report and output for information system. In this lesson 10, we will explain how to design forms
and input for the system design. Input design is the third activity involved during the system
design. This lesson consists of two sections:

overview of form and input design

graphical user interface controls for input

guidelines for good form and screen design
LEARNING OUTCOMES
At the end of this lesson, students should be able to :

define the importance of input design

list and explain graphical user interface controls for input

describe and construct a good form and screen based on guidelines for good form and
screen design
TERMINOLOGY
No
1
Word
Form
Definition
A business document contains predefined data and may include
certain parts to be filled in
2
10.1
Input
Whatever a system takes from its environment to fulfill its purpose
OVERVIEW OF FORM AND INPUT DESIGN
Form is used to collect or present information into or outside from the system. Form can be
used to get input or to present output, but normally, it has been used to collect input from users.
System input has been identified during the system requirement process. A form is a business
document contains predefined data and may include certain parts that need to be filled in by
user. The form should be designed to meet the purposed of the form. Designing a form, is
known as user-focused activity since the development of forms should be based on user’s
requirements and needs. And that’s why the use of prototyping approach is the most
appropriate. Figure 10-1 shows the form and input design that should be conducted during this
phase.
System
Planning
System
Analysis
Files and Database
Output Design
√ Input Design
User Interfaces
Design
System
Design
System
Implementation
System
Maintenance
Figure 10-1: Output Design Activities in the System Design Phase
10.2 GUI CONTROLS FOR INPUT
Today, most application being developed include graphical user interface (GUI). Graphical User
Interface design provides user friendly interface and also provide complex design issues. When
designing input, we must consider on selecting a proper screen-based control for users to enter
data on GUI screen. Here, we examine few types of common control used in GUI-based input
forms. These common controls such as text box, radio button,
check box, drop down list
and buttons. Each of this controls have its own purpose, advantages and disadvantages. Figure
10-2 shows an example of screen-based control for input data.
Text box
Drop down list
Radio button
Check box
Button
Figure 10-2: Sample Input Form
10.2.1 Text box
Text box is known as the most widely used common. Most data input screen have text box. A
text box consists of a rectangular shape box, should be followed with its caption. This text box
requires user to type the data inside the text box. A text box is used when there is no specific
value to be selected by users, so we ask users to key in their own preferable data. There are
two types of text box; single-line and multiple-lines. Single lines text box is suitable when
capturing a student’s name, because normally name don’t require a long number of input. While
multiple-lines text box is suitable when capturing a student’s address, since address requires a
long number of input. Text box should be accompanied by its caption, describe what types of
data should be entered. Caption should be located to the left near the text box to avoid the
confusing among users. An example of input types that is suitable to use text box are NAME,
ADDRESS, and TELEPHONE NUMBER.
10.2.2 Radio Button
In figure 10-2 shows an example of radio button. Radio buttons provide the users with an easy
way to select the preferable value from the value set. Radio buttons consist of a small circle
(where the users need to select) and an associated textual value belongs to that circle. Small
circle is located at the left of the textual value choice. Radio buttons is used when users need to
select only one value from the set of available values. It’s used when the choice available is
more than one. Radio buttons are used when it’s compulsory for users to select the value, and
the value should be only one from the choices.
When using radio buttons for data input, same as text box, it should be accompanied by its main
data caption and followed by available values to be chosen. In some cases, it important to list
out the values based on alphabetical order or by its range. For example, ANNUAL SALRY
INCOME should be list out from low range to high range. An example of input types that is
suitable to use text box are GENDER, HOUSE TYPE and ANNUAL SALARY INCOME.
10.2.3 Check Box
Figure 10-2 shows an example of check box. Check box consists of a small square box followed
by a description of the input field where the users are provided with values. Check box consists
of a small square (where the users need to select) and an associated textual value belongs to
that square. Small square is located at the left of the textual value choice. If radio buttons are
only require users to select only one choice, but with check box, users are allow to select more
than one value. Check box is used when users are able to select one or more than one values
or may be none from the set of the values.
When designing check box, try to arrange the check box accordingly, aligned vertically and leftjustified. Is should be accompanied by its caption describing the input. In some cases when the
check box contains money ranges or any other measurements, the sequencing should be in
ascending order. An example of that is suitable to use check box are SKILLS QUALIFIED, and
TYPE OF VEHICLE OWNED.
10.2.4 Drop Down List
Figure 10-2 shows an example of drop down list. A drop down list is a control that requires that
a user select a data item’s value from a list of possible choices. Drop down list is represented
using a rectangular and contains one or more rows from a list of possible choices. Drop down
list can have a large number of possible values may include scroll bars for navigating to the rest
of the choices. Normally, drop down list is used in representing a large number of values. A set
of values are represented and needed to scroll down so all the rest will be appears when users
scroll down the list. Users need to select only one value from the list as the input.
What are the differences between using radio button and drop down list? Both controls require
users to select only one value from the available list. But, by using drop down list, the amount of
space provided can be minimized since the value in the list appears once we scroll down the
list. Same with other controls, drop down list also should be accompanied by its description
about the input. It’s recommend that the drop down list have a highlighted default value. We
should carefully designed the drop down list’s value to make it easy for users to scan and scroll
down, and users are not wrongly select.
10.2.5 Buttons
Figure 10-2 shows that there are two buttons; SUBMIT and BACK button. Button is not an input
control. But, input form is not complete without button. The use of button indicates the process
that need to be done with the data input. Buttons allow users to commit all of the data to be
processed, or cancel a transaction. Once users click the button, all values selected will be sent
to the application.
10.2.6 Exercises
Answer TRUE or for FALSE for each of the questions below.
1. Forms are used to present or collect information. TRUE
2. A text box requires the user to type the data inside the box. It can allow for single or multiple
lines of data characters to be entered. TRUE
3. Buttons provide the users with an easy way to select the preferable value from the value set.
FALSE
4. Drop down list can have a large number of possible values may include scroll bars for
navigating to the rest of the choices. TRUE
5. Button is an input control. FALSE
10.3
GUIDELINES FOR FORM AND INPUT DESIGN
As mentioned earlier, forms are important component in system input. In a manual system, a
form is a preprinted or duplicated paper that requires people to fill in responses in a
standardized way. A form serve as a source documents for data entry personnel. Today, most
input is designed by developing a prototype. There are few guidelines need to follow when
designing a good form as for input design.
Figure 10-3: A sample input form design
10.3.1 Meeting the Purposes Designed
As noted above, form serve as a source in recording, processing, storing, and retrieving of
information for business transaction. A form provides information to the business. When
designing form, we should consider the purposes of the form and the form should meet the
purposes designed. We have to make the form designed are meeting the purposed it designed.
10.3.2 Making Forms Easy to Fill in
It’s important to design a form where it is easy to fill in so that it can reduce errors, speed
completion and can facilitate the data entry. It’s important to minimize the time spend in filling
the form. Designing a form with a proper flow can minimize the time and effort expended by
users in form of completion. Forms should flow from left to right, and top to bottom. There are
three main sections of a form:

Heading

Body

Signature and verification
Every form design at least has these three components. Heading introduced the users the
purpose of the form, while the body indicate the information needed in the form. This is the
place where users have to interact with the system. Signature and verification will mention
people involved in the form.
10.3.3 Keeping the Screen Simple
The most important thing in screen design is to keep the screen design simple. The screen
design should consist particular action being taken. There are three main screen sections;
heading, body and comments and instruction sections. Heading section describes to users
where he/she in the package. By reading the heading, users know what type of operations
offered by the screen. Body section is the major section in a screen. This section tells user what
types of information is needed in the operation. Normally, information gathered in the body
section will be used, processed and stored in a database. Third section; “comments and
instructions” display a short menu of commands; so that it can help users in completed the
operation needed in the middle section.
10.3.4 Creating an Attractive Screen
Form is a place where the information system gathers an input from users. So, the form should
be attractive in order to attract users. Form appearance is also important to attract people to
deal with the forms. An organized form will attract people to use the form. If people feel
comfortable with the forms, the input given are accurate and less errors.
If users find the screen is attractive, they feel happy to use the screen, so, it will make them
more productive, need less assistance and make fewer errors. When designing a screen, we
need to consider two types of user; novice user and expert user. Novice users is a person who
have less experience and knowledge in using computer and expert user in a person who have
much experience in using computer. So, novice users need more assistance more than expert
users. Besides that, screen design should be easy for them as a novice user to understand and
use; but sometimes, it makes the expert user feels bored. That’s why in certain cases. There is
a need to design two types of screen; they can switch each other to choose which one they
prefer.
Besides this, there are many other ways how to attract user. Using different types of font is good
to enhance differentiation between categories. The use of graphics, animations is sometimes
useful in screen; for example when designing a screen for children’s system.
10.3.5 Keeping the Screen Presentation Consistent
Next guideline in designing a good screen and web forms are to keep the screen display
consistent. If users transform the paper-based form to web-based form, make sure the screen is
following what shown on paper. Keeping the data entry fields in the same place for every screen
helps to maintain the screen consistency. The information should be located in the same area
for every time the screen is accessed. The captions used in any screen should be consistent.
For example, if the first screen, the caption “Name” is refers to name of people. So, the same
caption (Name) should be used in any areas referring to name of people.
10.3.6 Facilitating User Movement among Screen
Next guideline in designing a good screen and web form is to make it easy to move from one
screen to another screen. Normally, in web-based screen, its facilitate the movement by
scrolling down the screen or using a hyperlink to another new screen. Scrolling technique is a
way where user uses the cursor to move to other information available in the screen. But, the
most attracting technique used for user movement among screen is direct manipulation using
graphical user interface. An example of this technique are the use of icons to illustrate the
instruction; Back and Home button or House icon is referring to Go Back to the first screen is an
example of on-screen icon.
10.3.7 Exercises
Answer TRUE or for FALSE for each of the questions below.
1. A form designed should be followed and meets its purpose. TRUE
2. The best way to attract users when interacting with a form is, designed an attractive forms.
TRUE
3. A form should be flow from right to left. FALSE
4. Two types of users should be considered when designing a form; novice users and expert
users. TRUE
5. When designing a web form, scrolling technique has been used to facilitate the user’s
movement. TRUE
SUMMARY
This is the end of lesson Ten. In this lesson, we have learned :

overview of form and input design

GUI controls for input

guidelines for good form and screen design
In the next lesson, we will discuss the fourth activity involved during the system design; user
interface design. Interface is an interaction between user and system. It’s a method which users
interact with an information system.
SELF ASSESSMENT
Fill in with the correct answer
1. ________________________ has been identified during the system requirement process.
System input
2. ________________________ is a business document contains predefined data and may
include certain parts to be filled in. Form
3. ________________________ design provides user friendly interface and also provide
complex design issues. Graphical User Interface
4. A ________________________ is used when there is no specific value to be selected by
users, so we ask users to key in their own preferable data. There are two types of text box;
single-line and multiple-lines. text box
5. ________________________ is used when users need to select only one value from the
set of available values. Radio button
6. ________________________ is used when users are able to select one or more than one
values or may be none from the set of the values. Check box
7. ________________________is represented using a rectangular and contains one or more
rows from a list of possible choices. Drop down list
8. ________________________ allow users to commit all of the data to be processed, or
cancel a transaction. Buttons
9. Form
should
flow
from
left
________________________,
to
right
and
three
main
sections
________________________
of
a
form;
and
________________________heading; body and signature and verification
10. Keeping the data entry fields in the same place for every screen helps to maintain the
screen ________________________. consistency