Lecture Note 12 Designing Effective Input - PowerPoint PPT Presentation


PPT – Lecture Note 12 Designing Effective Input PowerPoint presentation | free to download - id: 6f87de-OWFjM


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation

Lecture Note 12 Designing Effective Input


Part IV: The Essentials of Design Lecture Note 12 Designing Effective Input Systems Analysis and Design Kendall & Kendall Sixth Edition – PowerPoint PPT presentation

Number of Views:134
Avg rating:3.0/5.0
Slides: 45
Provided by: Allen157


Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Lecture Note 12 Designing Effective Input

Lecture Note 12 Designing Effective Input
Part IV The Essentials of Design
  • Systems Analysis and Design
  • Kendall Kendall
  • Sixth Edition

Major Topics
  • Input Design
  • Form Design
  • Display Design
  • GUI Screen Design
  • GUI Controls
  • Web Design Guidelines

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 users attention.
  • Attractiveness (????) Implies that users will
    enjoy using input forms because of their
    appealing (??) design.

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
  • 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.

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.

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 (??)
  • Totals
  • Comments

Requiring ending totals and a summary of comments
is a logical way to provide closure for the
person filling out the form.
(No Transcript)
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.

  • 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.

Shows a video club membership application, which
is an example of a source document with various
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 (??) .

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.

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 dont 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.
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.

Computer-Assisted Form Design
  • Numerous microcomputer form design software is

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.
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.
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.

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
  • Finally, create an attractive display.

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.

  • Display output should be divided into three
  • 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.

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.

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 .

An example of a context-sensitive pop-up window.
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.

An example of an order entry display that is
effective. These features are also available for
Web-based fill-in form.
  • 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.

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.

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.

  • 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.
(No Transcript)
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
  • 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.

Option Buttons and Drop-down List Boxes
  • Option or radio buttons are used for exclusive
  • 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

Slider and Spin Button Example
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.

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.

  • 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 are graphical overlays that allow customers
to change the appearance of a Web site depending
on their preferences for a particular kind of
A data entry screen for the student registration
system. This screen uses several design features
that are described in the text.
When a user clicks the Find Student command
button, a dialog box is displayed with
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
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.
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

This figure shoes a fill-in form order page that
shows many elements of good design for the Web.
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.

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.
About PowerShow.com