Part IV: The Essentials of Design
Lecture Note 12
Designing Effective Input
Systems Analysis and Design
Kendall & Kendall
Sixth Edition
Major Topics
•
•
•
•
•
•
Input Design
Form Design
Display Design
GUI Screen Design
GUI Controls
Web Design Guidelines
CS206 System Analysis & Design
Note 12 By ChangYu
2
Input Design Objectives
• The quality of system input determines the quality of system output.
It is vital (重要的) that input forms, displays, and interactive Web
documents be designed with this critical relationship in mind.
• Well-designed input objectives:
– Effectiveness: Input design all serve specific purposes in the
information system.
– Accuracy: The design ensures proper completion.
– Ease of Use: The forms and displays are straightforward (坦率的)
and require no extra time to decipher (難懂的東西) .
– Consistency: All input forms group data similarly from on
application to the next.
– Simplicity: Refers to keeping those same designs uncluttered (整
齊) in a manner (方式) that focuses the user’s attention.
– Attractiveness (引入注意): Implies that users will enjoy using
input forms because of their appealing (要求) design.
3
Good Form Design
• Forms are important instruments (工具) for steering (方向) the
course of work. They are preprinted papers that require
people to fill in responses in a standardized way.
• Forms often serve as source documents for data entry
personnel or for input to ecommerce applications.
• Guidelines for good form design:
– Make forms easy to fill out.
– Ensure that forms meet the purpose for which they are
designed.
– Design forms to assure accurate completion.
– Keep forms attractive.
CS206 System Analysis & Design
Note 12 By ChangYu
4
Making Forms Easy to Fill In
• To make forms easy to fill out, the following
techniques are used:
– First, design forms with proper flow, from left to
right and top to bottom that can minimize the
time and effort.
– Second, group information logically using the
seven sections of a form.
– Third, provide people with clear captions.
• Captions tell the person completing the form
what to put on a blank line, space, or box.
CS206 System Analysis & Design
Note 12 By ChangYu
5
Seven Sections of a Form
The seven sections of a form are:
– Heading: Includes the name and address of the business origination the
form.
– Identification and Access: Includes codes that may be used to file the
–
–
–
–
–
report and gain access to it at a later date. This information is very important
when an organization is required to keep the document for a specified
number of year.
Instructions (指導) : This section tells us how the form should be filled
out and where it should be routed when complete.
Body: composed approximately half of the form. This part requires the
most detail and development from the person completing it . It always
contain explicit (明確), variable data.
Signature and verification (核實) Requiring ending totals and a
summary of comments is a logical
Totals
way to provide closure for the person
filling out the form.
Comments
CS206 System Analysis & Design
Note 12 By ChangYu
6
CS206 System Analysis & Design
Note 12 By ChangYu
7
Caption Types
• Clear captioning is another technique that can make easy
work of filling out a form. Captions tell the person completing
the form what to put in a blank line, space or box.
• Captions may be one of the following:
– Line caption, putting the caption on the same line or below
the line.
– Boxed caption, providing a box for data instead of a line.
Captions can be placed inside, above or below the box.
– Vertical check off, lining up choices or alternatives
vertically.
– Horizontal check off, lining up choices or alternatives
horizontally.
• A combination of captions can also be used effectively.
Different captions serve different purposes, it is generally
necessary to employ several caption styles in each form.
CS206 System Analysis & Design
Note 12 By ChangYu
8
• The advantage of putting the
caption below the line is that
there is more room on the line
itself for data. The disadvantage
is that it is sometimes unclear
which line is associated with the
caption: the line above or below
the caption.
• Table captions can be used to
specify categories such as
quantity. It work well in the body
of a form on which details are
required.
• Line captions can be used to
indicate where the subtotal, sale
tax and total should be.
CS206 System Analysis & Design
Note 12 By ChangYu
9
Shows a video club
membership
application, which is
an example of a
source document with
various zones.
CS206 System Analysis & Design
Note 12 By ChangYu
10
Meeting the Intended Purpose
– Forms are created to serve one or more
purposes in the recording, processing, storing,
and retrieving of information for businesses.
– Sometimes it is desirable to provide different
information to different departments or users
but still share some basic information. This
situation is where specialty forms are useful.
• Systems analysts may use different types of
specialty forms for different purposes.
• Specialty forms can also mean forms prepared by a
stationer (文具) .
CS206 System Analysis & Design
Note 12 By ChangYu
11
Ensuring Accurate Completion
• To reduce error rates associated with data
collection, forms should be designed to assure
accurate completion.
• Design forms to make people do the right thing
with the form whenever they use it.
• To encourage people to complete forms, systems
analysts should keep forms attractive.
• The form design implements the correct flow: top
to bottom and left to right.
CS206 System Analysis & Design
Note 12 By ChangYu
12
This form design
provides an
internal double
check, with
column totals and
row totals
expected to add up
to the same
number. If the row
and column totals
don’t add up to the
same number, the
employee filling
out the form
knows there is a
problem and can
correct it on the
spot.
An error is
prevented and
the employee
can be
reimbursed the
amount due;
both outcomes
are attributable
to a suitable
form design.
CS206 System Analysis & Design
Note 12 By ChangYu
13
Attractive Forms
• To be more attractive, forms should look
uncluttered (不雜亂的) , and elicit (引出) information
in the expected order.
• Aesthetic (美觀) forms or usage of different fonts
and line weights within the same form can help
make it more attractive.
CS206 System Analysis & Design
Note 12 By ChangYu
14
Computer-Assisted Form Design
• Numerous microcomputer form design software is available.
Paper forms
can be scanned
in and then
published to the
Web. The
analyst can use
a set of tools to
set up fields,
check boxes
lines, boxes and
many other
features.
This example display created by OmniForm by ScanSoft. This software is
enormously (極大地) useful to an analyst seeking to automate quickly business
processes for which paper forms are already in existence.
CS206 System Analysis & Design
Note 12 By ChangYu
16
This example shows the scanning process. The bottom of the split screen
shows the form as it was scanned in and the top portion of the screen shows an
enlarged view of some of the fields automatically identified by the software.
CS206 System Analysis & Design
Note 12 By ChangYu
17
Controlling Business Forms
• Controlling business forms is an important task. Businesses
often have a forms specialist (專家) who controls forms. System
analyst sets up and implements forms control.
• Controlling forms include:
– Making sure that each form in use fulfills its specific
purpose.
– Making sure that the specified purpose is integral to
organizational functioning.
– Preventing (預防) duplication of information collected and the
forms that collect it.
– Designing effective forms.
– Deciding on how to reproduce forms in the most
economical way.
– Establishing procedures that make forms available when
needed, at the lowest possible cost.
CS206 System Analysis & Design
Note 12 By ChangYu
18
Good Display and Web Forms Design
Guidelines for good display design:
– First, keep the display simple.
– Second, keep the display presentation
consistent.
– Third, facilitate user movement among display
screens.
– Finally, create an attractive display.
CS206 System Analysis & Design
Note 12 By ChangYu
19
Keep the Display Simple
• Displaying a few necessary basic commands
using windows or hyperlinks is another way
to keep screens simple.
• For the occasional (偶尔的) user, only 50
percent of the screen should contain useful
information.
• Simplistic design includes maximizing or
minimizing the window size as needed.
• Use context-sensitive help and other pop-up
menus.
CS206 System Analysis & Design
Note 12 By ChangYu
20
• Display output should be divided into three sections:
– Heading: which contains titles of software and
open files, pull down menus and icons that do
certain tasks.
– Body: which is used for data entry and is
organized from left to right and top to bottom.
Captions and instructions should be supplied in
this section to help the user enter the pertinent (恰當
的) data in the right place.
– Comments and instructions (指導) : This section
may display a short menu of commands that
remind the user of basics such as how to change
pages or functions, save the file or terminate entry.
CS206 System Analysis & Design
Note 12 By ChangYu
21
Keeping the Display Consistent
• If user are working from paper forms,
displays should follow what is shown on
paper.
• Displays can be kept consistent by location
information in the same area each time a
new display is accessed.
• Also, information that logically belongs
together should be consistently grouped
together.
CS206 System Analysis & Design
Note 12 By ChangYu
22
Facilitating Movement
Guidelines for facilitating movement from one page to
another:
– Clicking--the three clicks rule says that users should be
able to get to the screens they need within three mouse or
keyboard clicks. Web-base forms facilitate movement with
the use of hyperlinks to other relevant Web pages.
– There are at least three ways this illusion of physical
movement among screens is developed
• Scrolling--using arrows or PgDn keys.
• Using context-sensitive pop-up windows.
• Using onscreen dialogue .
CS206 System Analysis & Design
Note 12 By ChangYu
23
An example of a context-sensitive pop-up window.
CS206 System Analysis & Design
Note 12 By ChangYu
24
Designing an Attractive Screen
To make the screen attractive use:
– If the display is necessarily complex, different
thickness of separation lines between
subcategories can be varied to add further
distinctions. Variety helps the user to see quickly
both the purpose of the screen and what data
items are required.
– With the advent of GUIs, it is possible to make
input displays very attractive. By using colour or
shaded boxes and creating three-dimensional
boxes and arrows, you can make forms user
friendly and fun to use.
CS206 System Analysis & Design
Note 12 By ChangYu
25
An example of an order entry display that is effective. These features
are also available for Web-based fill-in form.
CS206 System Analysis & Design
Note 12 By ChangYu
26
– Other techniques can also effectively enhance
the attractiveness of displays, but only if they
are used sparingly (節省的). They include inverse
video, a blinking cursors or fields, and font
types in various styles and sizes.
– Different combinations of colors.
– Different type fonts.
CS206 System Analysis & Design
Note 12 By ChangYu
27
Using Icons in Screen Design
• Icons are used in graphical screens to run
programs and execute commands.
• Graphical User Interface (GUI) are used in
conjunction (聯合) with a mouse, keyboard,
lightpen, or joystick (操縱杆) for making selections
and entering data.
CS206 System Analysis & Design
Note 12 By ChangYu
28
Graphical User Interface (GUI) Design
GUI controls or fields:
–
–
–
–
–
–
–
–
Text boxes.
Check boxes.
Option or radio buttons.
List and drop-down list boxes.
Sliders and spin buttons.
Image maps.
Text area.
Message boxes.
CS206 System Analysis & Design
Note 12 By ChangYu
29
• Text boxes.
• Check boxes.
• Option buttons.
• List and drop-down
list boxes.
• Image maps.
• Text area
A Microsoft Access input display showing a variety of GUI controls.
CS206 System Analysis & Design
Note 12 By ChangYu
30
CS206 System Analysis & Design
Note 12 By ChangYu
31
Text Boxes
• Text boxes should be large enough to accommodate
all the field characters.
• Captions should be to the left of the text box.
• Character data should be left aligned within the box.
• Numeric data right aligned.
Check Boxes
• Check boxes are used for nonexclusive choices.
• Check box text or label is placed to the right of
the check box.
• If there are more than 10 check boxes, group in
a bordered box.
CS206 System Analysis & Design
Note 12 By ChangYu
32
Option Buttons and Drop-down List Boxes
• Option or radio buttons are used for exclusive choices.
• Often they are placed in a rectangle called an option
group.
• List and drop-down list boxes are used to select one
choice out of many.
Sliders, Spin Buttons, and Image Maps
• Sliders and spin buttons are used to change data that
have a continuous range of values.
• Image maps are used to select values within an
image.
CS206 System Analysis & Design
Note 12 By ChangYu
33
Slider and Spin Button Example
CS206 System Analysis & Design
Note 12 By ChangYu
34
Text Area
• A text area is used for entering a larger amount of
text.
• These areas may have text that wraps (包, 裹) when
the text reaches the end of the box.
• There are two ways to handle the text:
– Hard return is used to force new lines.
– Use word wrap within the text area.
Message Boxes and Command Buttons
• Message boxes are used to display warning and
other messages in a rectangular window.
• Command buttons perform an action.
CS206 System Analysis & Design
Note 12 By ChangYu
35
Tab Control Dialogue Boxes
• Tab control dialog boxes help organize GUI
features (controls) for users.
• Each tab dialog box should have three basic
buttons: OK. Cancel. Help.
Web Page Dialogue Boxes
• A new type of dialogue box has the look and
feel of a Web page.
• Buttons are called places and are hyperlinked
to items a user would wish to access.
CS206 System Analysis & Design
Note 12 By ChangYu
36
Color
• The five most legible (易讀的) foreground/background color
combinations for display monitors are:
–
–
–
–
–
Black on yellow.
Green on white.
Blue on white.
White on blue.
Yellow on black.
Use colour to highlight important fields on displays. fields
Skins
Skins are graphical overlays that allow customers to
change the appearance of a Web site depending on their
preferences for a particular kind of image.
CS206 System Analysis & Design
Note 12 By ChangYu
37
A data entry screen for the student registration
system. This screen uses several design features that
are described in the text.
CS206 System Analysis & Design
Note 12 By ChangYu
When a user clicks the Find
Student command button, a
dialog box is displayed with
38
instructions.
Layout and
design also is
important on
Web-based
forms. Consider
the online
subscription for
InfoWorld uses
various features
to make it easier
for the
subscriber to fill
out.
Option buttons
Drop-down list boxes
Text boxes
CS206 System Analysis & Design
Note 12 By ChangYu
39
Dr. Jakob Nielsen believes
that users scan Web material
rather than reading it. He
suggests that Web designers
must use scannable text and
employ usability metrics to
measure the results.
CS206 System Analysis & Design
Note 12 By ChangYu
40
Internet and Intranet Design Guidelines
Guidelines for creating intranet and Internet input
pages:
– Provide clear instructions.
– Use a logical entry sequence for fill-in forms.
– Use a variety of text boxes, push buttons, radio buttons,
drop-down lists, and other GUI features.
– Provide a scrolling text box if you are uncertain how much
text will be entered.
– Include two basic buttons: Submit and Clear.
– If the form is lengthy, divide it into several simpler forms on
separate pages.
– Create a feedback screen that lists error messages if a form
has not correctly been filled out.
CS206 System Analysis & Design
Note 12 By ChangYu
41
This
figure
shoes a
fill-in
form order
page that
shows
many
elements
of good
design for
the Web.
CS206 System Analysis & Design
Note 12 By ChangYu
42
Ecommerce Applications
• Ecommerce applications add more demands to the analyst who
must design Web sites to meet several business objectives:
– Setting forth the corporate mission
– Values regarding confidentiality
– Privacy
– Product returns
– Efficient processing of transaction
– Building good customer relationships.
• Ecommerce applications involve more than just good Web site
design.
• Customers need to be confident (有信心) of the site, including
privacy and security.
CS206 System Analysis & Design
Note 12 By ChangYu
43
This figure
shows the
contents of a
shopping cart
for a customer
making a
purchase. An
important
feature of the
shopping cart is
that the
customer can
edit the
quantity of the
item ordered or
can remove the
item entirely.
CS206 System Analysis & Design
Note 12 By ChangYu
44