Forms Design

Introduction
• Form is a tool with a message.
• It is the physical carrier of data/information.
• It is either an authority for action or a request for action.
 User Interface
• The user interface usually comprises various documents,
reports, and different screens of a system
• It is the sole component of the system that is viewed by
the user - the user interface is a vital component of the
system.
• It should be designed so that besides delivering
information to the user it should also be visible.
 User Interface
• Steps in designing an interface
• Generation of the interface summary table for system use
• Analysing the human-computer limit in the Data Flow Diagram (DFD).
• Filing the interface and analyzing the design to define the data elements
that have to be added in every form/document, input screen, and output
report.
• Designing the external input forms.
• Designing the human computer dialogs : Choosing the kind(s) of
dialog, Designing every dialog.
 User Interface
• Steps in designing an interface
• Designing input (data entry) screens.
• Report designing
• Choosing the output technique for every report
• Internal report designing.
• External report designing.
 Input Form design
• The objectives of the form design are to extract and
capture the needed information
• Forms act as the source documents
 Input Form design
• The guidelines of form design are as follows:
• Ease in filling out the forms.
• Provide certainty of the forms meeting the reason for their being.
• Make the forms eye-catching.
• Design the formats for confirming precise completion.
 Input Form Design
• Input Screen Design
• To enter the data in the input forms or reports of the
computer and update the data
• The four guidelines for screen design are as follows:
• It maintains the simplicity of the screen.
• It keeps the screen presentation constant.
• It improves the user movement amongst screens.
• It generates an eye-catching screen.
 Input Form Design
• Maintaining the Simplicity of the Screen:
• Only the required material for the specific action carried
out should be shown on the display screen.
• This will reduce the chances of them causing any serious
error.
 Input Form Design
• Keeping the Screen Consistent:
• Achieved through locating information in a similar area
whenever the user is accessing a new screen.
• All information that has logical similarities should be
grouped together.
 Input Form Design
• Facilitating Movement between the Screens:
• Making the users develop a feeling of physically moving to
a novel screen which can be done through the use of the
scroller.
• The designing of the screens should be done in such a way
that provides awareness to the user about the status of
every action.
 Input Form Design
• Facilitating Movement between the Screens:
• Usage of error messages for providing feedback on every error.
• To provide feedback on update actions and usage of
confirmation messages.
• In cases where there is any occurrence of backend process, the
usage of status messages.
• When the actions are far-reaching, permitting the user to
reverse an action whenever probable.
 Input Form Design
• Generation of an Attractive Screen:
• The productivity of the user will increase if he finds the
screens appealing and would also require reduced supervision
which would result in decreasing the amount of errors.
• Screens should be such that they attract the attention of the
user and make them concentrate on a single position.
• Accomplished through using more open areas adjoining the
data entry fields, thereby giving the screen a tidy look
 Input Form Design
• Basic Parts of a Form
• To make it easy to navigate from one screen to another,
one of the following methods may be used
• Scrolling the screen back and forth.
• Calling up another screen for more detail.
• Using on-screen dialogue through the prompts.
 Input Form Design
• Classification of Forms
• A printed form is generally classified by what it does in the
system.
• Action: This type of form requests the user to do something.
Example: purchase orders.
• Memory: This form records historical data that remains in a file,
is used for reference, and serves as a control on key details.
• Example: Inventory records, purchase records
 Input Form Design
• Classification of Forms
• Report: This form guides supervisors and other
administrators in the activities.
• It provides data on a project or a job. Example: profit and
loss statements, sales analysis report.
 Input Form Design
• Styles and types of forms
• None Style: This form style has no border, no title bar at
the top and
no maximize or minimize and close buttons.
• This style is usually used for splash screens
 Input Form Design
• Styles and types of forms
• Fixed Single: This form style has a border, a title bar, and
a close button
with optional minimize and maximize.
• If a form with its border style is set then it cannot be
resized except using minimize and maximize buttons.
 Input Form Design
• Styles and types of forms
• Sizable: This form style provides a form with a border, a
blue box and the entire standard buttons. The dialog can
be resized.
• Fixed Dialog: This form style has a border, a blue box, and
a close button. No minimize and maximize buttons are
allowed.
• Fixed: This form style cannot be resized
 Best Practices
• Use Label - Labels are imperative for accessibility. Screen
readers communicate each label to users. Without proper
labeling, forms are inaccessible to many people.
 Best Practices
• Use Label
 Best Practices
• Keep labels short
 Best Practices
• Keep labels short
 Best Practices
• Match field length
and structure to
the intended input
 Best Practices
• Match field length
and structure to
the intended input
 Best Practices
• Form fields
should look
like form
fields
 Best Practices
• Form fields
should look
like form
fields
 Best Practices
• Differentiate
form fields
from other
elements
 Best Practices
• Differentiate
form fields
from other
elements
 Best Practices
• Differentiate
form fields
from other
elements
 Best Practices
• Use the
appropriate
input type and
tag
 Best Practices
• Use the
appropriate
input type and
tag
 Best Practices
• Forms should
be one
column
 Best Practices
• Forms should
be one
column
 Best Practices
• Fields that
logically go
together
should be
inline
 Best Practices

• Fields that
logically go
together
should be
inline
 Best Practices
• Omit
unneeded
fields
 Best Practices

• Omit
unneeded
fields
 Best Practices
• Make action
buttons task-
specific
 Best Practices

• Make action
buttons task-
specific
 Best Practices
• Group labels
with their
inputs
 Best Practices
• Group
labels with
their inputs
 Best Practices
• Avoid all caps
 Best Practices
• Present
checkboxes
and radios
vertically
 Best Practices
• Show all
selection
options if < 6
 Best Practices
• Show all
selection
options if < 6
 Best Practices
• Show
errors
inline
 Best Practices
• Incorporate
an indication
of progress
for multiple-
step forms
 Best Practices
• Incorporate
an indication
of progress
for multiple-
step forms
 Best Practices
• Resist modals
on modals
 Best Practices
• Resist modals
on modals