We
looked at a number of areas this week – data capture, extraction,
reception and various data inputs, which are helpful to businesses. Pick
one of the areas you examined this week, and discussion the area you
read about and how could that assist you with system design.Systems Analysis & Design
Tenth Edition
Chapter 12
Designing Effective Input
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Learning Objectives (1 of 2)
12.1 Design functional input forms for users of business
systems
12.2 Design engaging input displays for users of
information systems
12.3 Use pervasive navigational elements and icons to give
Web designs a professional look
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Learning Objectives (2 of 2)
12.4 Design useful input forms for people interacting on the
Web
12.5 Design useful input pages for users of intranets, the
Web, smartphones, and tablets
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Input Design Objectives (1 of 2)
• The quality of system input determines the quality of
system output
• Input design objectives:
– Effectiveness
– Accuracy
– Ease of use
– Consistency
– Simplicity
– Attractiveness
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Input Design Objectives (2 of 2)
• Use standard navigational elements and icons to give
Web designs a professional look
• Context-sensitive help
• Input validation
• A breadcrumb trail
• Fat footers
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Major Topics (1 of 2)
• Input design
• Form design
• Display design
• GUI screen design
• GUI controls
• Web design guidelines
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Good Form Design
• Make forms easy to fill in
• Ensure that forms meet the purpose for which they are
designed
• Design forms to assure accurate completion
• Keep forms attractive
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Make Forms Easy to Fill in
• Form flow
• Seven sections of a form
• Captioning
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Form Flow
• Can minimize the time and effort expended in form
completion
• Should flow from left to right and top to bottom
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Seven Sections of a Form
• Heading
• Identification and access
• Instructions
• Body
• Signature and verification
• Totals
• Comments
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Caption Types
• Line caption
– Putting the caption on the same line or below the line
• Boxed caption
– Providing a box for data instead of a line
• Check off caption
– Lining up choices or alternatives vertically
• Horizontal check off caption
– Lining up choices or alternatives horizontally
• Table caption
– Work well in the body of a form
• Combination
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Figure 12.2 Major Captioning Alternatives
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Meeting the Intended Purpose
• Systems analysts may use different types of specialty
forms for different purposes
• Specialty forms
– Multiple-part
– Continuous-feed
– Perforated
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
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
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Keeping Forms Attractive
• Aesthetic forms draw people into them and encourage
completion
• Forms should look uncluttered, and elicit information in
the expected order
• Using different fonts and line weights within the same
form can help make it more attractive for users
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Computer-Assisted Form Design
• Numerous form design packages are available for
desktop systems—there are tools to set up:
– Fields
– Check boxes
– Lines
– Boxes
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Controlling Business Forms
• Make sure that each form in use fulfills its specific purpose
• Make sure that the specified purpose is integral to
organizational functioning
• Prevent duplication of information collected and of the forms
that collect it
• Design effective forms
• Decide on how to reproduce forms in the most economical
way
• Establish procedures that make forms available, at the lowest
possible cost
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Good Display and Web Forms Design
• Keep the display simple
• Keep the display presentation consistent
• Facilitate user movement among display screens and
pages
• Create an attractive and pleasing display
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Keeping the Display Simple
• Heading
• Body
• Comments and instructions
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Keeping the Display Consistent
• Locate information in the same area each time a new
display is accessed
• Information that logically belongs together should be
consistently grouped together
• Information should not overlap from one group to another
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Facilitating Movement
• The three-clicks rule says that users should be able to
get to the screens they need within three mouse or
keyboard clicks
• Movement among screens:
– Scrolling by using arrows or Pg D n keys
– Context-sensitive pop-up windows
– Onscreen dialogue
a
e
ow
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Designing an Attractive and Pleasing Display
• Should draw users into them and hold their attention
• Use logical flows in the plan to your display pages
• Color or shaded boxes and creating three-dimensional
boxes and arrows
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Using Icons in Screen Design
• Icons are pictorial, onscreen representations symbolizing
computer actions that users may select using a mouse,
keyboard, lightpen, touch screen, or joystick
• Shapes should be readily recognizable
• Icons for a particular application should be limited to 20
recognizable shapes
• Use icons consistently throughout
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Graphical User Interface (GUI) Controls
• GUI Controls:
– Text boxes
– Check boxes
– Option or radio buttons
– List and drop-down list boxes
– Sliders and spin buttons
– Image maps
– Text area
– Message boxes
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Figure 12.3 The Designer Has Many GUI Components
That Allow Flexibility in Designing Input Screens for
the Web or Other Software Packages
This example is from Microsoft Access
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Text Boxes
• Text boxes should be large enough to accommodate all
the characters
• Captions should be to the left of the text box
• Character data is left-aligned within the box
• Numeric data is right-aligned
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
HTML5 Browsers Features (1 of 4)
• Placeholder puts a small amount of help text into a text
box, displaying in a lighter color
• When the cursor is placed in the field the text vanishes
• New text boxes:
– Email
– Telephone
– URL, a Web address
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
HTML5 Browsers Features (2 of 4)
• These appear as normal text boxes on a computer
• When used on a tablet or smartphone, they can be used
to customize the pop-up keyboard
– Telephone number, the keyboard layout changes to a
number pad
– A URL, the keyboard includes a .com button
– An email address, the keyboard includes an @
symbol
• Helps the user enter data quickly and accurately
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
HTML5 Browsers Features (3 of 4)
• A datalist displays a drop-down list of predefined
suggestions to make entry easier for the user
• As the user begins to type the first few letters, the datalist
is displayed
• The user can choose one of the items in the list to make
a selection
• This is used in the autocomplete function
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
HTML5 Browsers Features (4 of 4)
• A calendar control to select a date, a date and time, or a
local date and time
• Selecting dates from a pop-up calendar is easier and less
error-prone than entering text
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
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 ten check boxes, group together in
a bordered box
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Option Buttons
• Option or radio buttons are used for exclusive choices
• Choices are listed to the right of the button, in some
sequence
• Often they are placed in a rectangle called an option
group
• If more than six option buttons are used, a list box or
drop-down list box should be implemented
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
List and Drop-Down List Boxes
• Used when there is little room available on the page
• If there is a commonly selected choice, it is usually
displayed in the drop-down list by default
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Tab Control Dialogue Boxes
• Create a separate tab for each unique feature
• Place the most commonly used tabs in front and display
them first
• Consider including three basic buttons in your design:
– OK
– Cancel
– Help
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Sliders, Spin Buttons, and Image Maps
• Sliders and spin buttons are used to change data that
have a continuous range of values
• Image map fields are used to select values within an
image
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Text Area
• A text area is used for entering a larger amount of text
• Can view data larger then the box area
• Handling text:
– Hard return is used to force new lines
– Use word wrap within the text area
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Message Boxes and Command Buttons
• Message boxes are used to warn users and provide
feedback messages in a dialog box
• Command buttons perform an action when the user
selects it
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Form Controls and Values
• Each control in a GUI interface stores data associated
with the control
• Web pages use a name and value pair that are
transmitted to the server or in an email sent along with
the form
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Figure 12.4 Web Based Input Form
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Hidden Fields
• Not visible to the viewer
• Do not take up any space on the Web page
• Can only contain a name and value
• Used to store values sent from one Web form to the
server
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Event-Response Charts
• Used to:
– List the variety of events that can occur
– Show what should happen
– Build a Web form that requires minimal action from
the user
– Explore improvements to the web page
• Events may be used to:
– Control navigation between web pages
– Change the contents of drop-down lists
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Figure 12.5 Website to Estimate Resort Cost
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Figure 12.6 Event-Response Chart
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Dynamic Web Pages
• Web pages that change themselves as the result of some
user action
• Advantage
– Modify themselves quickly
• Disadvantage
– Will not work if JavaScript is turned off
– Dynamic Web pages may not be compliant with the
American Disabilities Act
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Three Dimensional Web Pages (1 of 2)
• Use stacked layers
• Code is moved in front of the Web page
• Code may be created using JavaScript
• Analyst must determine when to use layers
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Three Dimensional Web Pages (2 of 2)
• Analyst must determine:
– How is the layer built?
– What events cause the layer to be created?
– What events remove the layer?
– Where should the block be placed?
– The size of the block?
– How to frame the region?
– What happens when an option is selected?
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Ajax (Asynchronous JavaScript and XML)
• Uses JavaScript and XML
• Allows Web developers to build a Web page that works like a
traditional desktop program
• The data may be either a small text file or an XML document
containing many customers or repeating data
• Has the advantage of making the Web work faster and of
providing a smoother viewing experience for users
• The disadvantages are that JavaScript must be enabled and
the Web page may violate the American Disabilities Act
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Figure 12.7 Dynamic Web Page
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Figure 12.8 Ajax Techniques and Dynamic
Web Page
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Color
• The five most legible foreground/background color
combinations:
– Black on yellow
– Green on white
– Blue on white
– White on blue
– Yellow on black
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Website Design
• Effective Web design using:
– Hamburger icon
– Context-sensitive help
– Input validation
– Using a breadcrumb trail
– Fat footer
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Hamburger Icon
• The hamburger icon / hamburger menu is depicted with
three stacked bars
– The three bars are stacked together in a parallel
position within a square
– Place this icon at the top of a graphical display
– User can click on the hamburger icon to display a
menu of the Web site
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Context Sensitive Help
• Help users as they progress through an application or a
Web site
– Cursor changes to a question mark as the user
hovers over a word that is part of the context-sensitive
help feature
– Clicking the question mark will bring up a specific
comment designed to help the user with the feature
they are currently trying to use
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Input Validation
• Input validation is a way to prevent the user from entering
the wrong type of data or incorrectly formatted data into
the file or database
• The design is such that the user is not permitted to
advance to the next input field until the problem is
corrected
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Breadcrumb Trail
• A breadcrumb trail is a navigational element to let the
user know where they are on a large Web site, in a
program, or in a complex document
• Show the path the user has used to arrive at that page,
such as:
– Home>Help>Contact Us>Email>Live Chat
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Fat Footer
• Bottom of a Web page is called the footer
• Fat footers are an entire section of the Web site and can
feature:
– Social media links
– Recommend what visitors should check out next on
the Web site
– Add search engine keywords and tags
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Website Page Design (1 of 2)
• Provide clear instructions
• Demonstrate 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
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Website Page Design (2 of 2)
• 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
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Ecommerce Applications
• Ecommerce applications involve more than just good
designs of Web sites.
• Customers need to feel confident in the site
– Shopping cart
– Customer can edit the quantity of the item ordered or
can remove the item entirely
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Summary (1 of 4)
• Guidelines for well-designed input forms:
– Forms must be easy to fill out
– Forms must meet the purpose for which they are
designed
– Forms must be designed to ensure accurate
completion
– Forms must be pleasing and attractive
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Summary (2 of 4)
• Guidelines for well-designed displays:
– Displays must be kept simple
– Displays must be consistent in presentation
– Design must facilitate movement between pages
– Displays must be attractive
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Summary (3 of 4)
• Guidelines for Web fill-in forms:
– Provide clear instructions
– Demonstrate a logical entry sequence for fill-in forms
– Use a variety of text boxes, push buttons, drop-down
menus, check boxes, and radio buttons
– Provide a scrolling text box if you are uncertain about
how much space users will need to respond to a
question
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Summary (4 of 4)
• Guidelines for Web fill-in forms: [continued]
– Prepare two basic buttons on every Web fill-in form:
Submit and Clear Form
– If the form is lengthy and the users must scroll
extensively, divide the form into several simpler forms
on separate pages
– Create a feedback screen that highlights errors in an
appropriate color and refuses submission of the form
until mandatory fields are correctly filled in
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Copyright
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved

Purchase answer to see full
attachment




Why Choose Us

  • 100% non-plagiarized Papers
  • 24/7 /365 Service Available
  • Affordable Prices
  • Any Paper, Urgency, and Subject
  • Will complete your papers in 6 hours
  • On-time Delivery
  • Money-back and Privacy guarantees
  • Unlimited Amendments upon request
  • Satisfaction guarantee

How it Works

  • Click on the “Place Order” tab at the top menu or “Order Now” icon at the bottom and a new page will appear with an order form to be filled.
  • Fill in your paper’s requirements in the "PAPER DETAILS" section.
  • Fill in your paper’s academic level, deadline, and the required number of pages from the drop-down menus.
  • Click “CREATE ACCOUNT & SIGN IN” to enter your registration details and get an account with us for record-keeping and then, click on “PROCEED TO CHECKOUT” at the bottom of the page.
  • From there, the payment sections will show, follow the guided payment process and your order will be available for our writing team to work on it.