Transcript Web Site Design

CSE323
การวิเคราะห์ และออกแบบระบบ
(Systems Analysis and Design)
Lecture 10:
Designing Effective Output and Input
www.themegallery.com
Designing Effective Output
Systems Analysis and Design
Kendall and Kendall
www.themegallery.com
Major Topics






Designing output
Output technologies
Factors in choosing an output technology
Report design
Screen design
Web site design
Kendall &
Kendall
Copyright ©
2002 by
15-3
External and Internal Output
 Internal output is used within the corporation
 External output is used outside the organization
 External output differs from internal output in its design
and appearance
 A turnaround document is one that is sent out and then
returned
Kendall &
Kendall
Copyright ©
2002 by
15-4
Designing Output
 Output should be designed to






Kendall &
Kendall
Serve the intended purpose
Be meaningful to the user
Deliver the right quantity of output
Deliver it to the right place
Provide output on time
Choose the right output method
Copyright ©
2002 by
15-5
Output Technologies
 Output can be in the form of








Kendall &
Kendall
Print
Screen
Audio
CD-ROM or CD-RW
DVD
E-mail
The World Wide Web
Electronic output
Copyright ©
2002 by
15-6
Output Technologies
 Output technologies differ in their





Kendall &
Kendall
Speed
Cost
Portability
Flexibility
Storage and retrieval possibilities
Copyright ©
2002 by
15-7
Video Clips
 Video clips are useful for
Supplementing static, printed output
Distance collaboration
Showing how to perform an action
Providing brief training episodes
Shifting the time of an actual event by recording it
for later output
 Preserving an important occasion for addition to an
organization’s archives





Kendall &
Kendall
Copyright ©
2002 by
15-8
Animation
 Animation is composed of four elements:




Kendall &
Kendall
Elemental symbols
Spatial orientation
Transition effects
Alteration effects
Copyright ©
2002 by
15-9
Electronic Output
 Electronic output includes




Kendall &
Kendall
Fax
Electronic mail
The World Wide Web
Bulletin board messages
Copyright ©
2002 by
15-10
Disadvantages of Electronic Output
 Drawbacks of electronic and Web-based output are
 The design of CD-ROM is very time- consuming and
expensive
 CD-ROM is troublesome to update
 CD-ROM is difficult to use on a network
 Electronic mail has difficulty in formatting control
Kendall &
Kendall
Copyright ©
2002 by
15-11
Disadvantages of Electronic Output
 Disadvantages, continued
 Electronic mail has a potential for abuse
 Junk electronic mail may become a problem
 It is difficult to express a mood with electronic mail
and communication may be more informal
Kendall &
Kendall
Copyright ©
2002 by
15-12
Push and Pull Technology
 Pull technology allows the user to take formatted data
from the Web
 Push technology sends solicited or unsolicited
information to a customer or client
Kendall &
Kendall
Copyright ©
2002 by
15-13
Factors in Choosing an Output
Technology
 Factors that must be considered when choosing an
output technology are
 Who will use the output?
 How many people need the output?
 Where is the output needed?
 What is the purpose of the output?
 What is the speed with which output is needed?
Kendall &
Kendall
Copyright ©
2002 by
15-14
Factors in Choosing an Output
Technology
 How frequently will the output be accessed?
 How long will the output be stored?
 Under what special regulations is the output
produced, stored, and distributed?
 What are the initial and ongoing costs of
maintenance and supplies?
 What are the environmental requirements for output
technologies?
Kendall &
Kendall
Copyright ©
2002 by
15-15
Output Bias
 Analysts must be aware of sources of output bias and
inform users of the possibilities of bias in output
 Bias is introduced in three main ways:
 How information is sorted
 Setting of acceptable limits
 Choice of graphics
Kendall &
Kendall
Copyright ©
2002 by
15-16
Strategies to Avoid Bias
 Strategies to avoid output bias
 Awareness of the sources of bias
 Design of output that includes users
 Working with users so that they are informed of the
output's biases
 Creating output that is flexible and allows users to
modify limits and ranges
 Train users to rely on multiple output for conducting
"reality tests" on system output
Kendall &
Kendall
Copyright ©
2002 by
15-17
Printed Reports
 Design reports using software
 Design guidelines for printed reports are
 Include functional attributes, such as headings, page
numbers, and control breaks
 Incorporate stylistic and aesthetic attributes, such as
extra blank space and grouping data
Kendall &
Kendall
Copyright ©
2002 by
15-18
Report Design Considerations
 Examine the type of data: alphabetic, special, or
numeric
 Constant information does not change when the report
is printed
 Variable information changes each time the report is
printed
 Specify the paper quality, type, and size
Kendall &
Kendall
Copyright ©
2002 by
15-19
Computer-Aided Report Design
 Steps to follow when designing reports using a
computer-aided software tool
 Determine the need for the report
 Determine the users
 Determine the data items to be included
 Estimate the overall size of the report
 Title the report
 Number the pages of the report
Kendall &
Kendall
Copyright ©
2002 by
15-20
Computer-Aided Report Design
 Further steps for designing reports
Include the preparation date on the report
Label each column of data appropriately
Define variable data indicating the type of data
Indicate the positioning of blank lines used to help
organize information
 Review prototype reports with users and
programmers




Kendall &
Kendall
Copyright ©
2002 by
15-21
Report Stylistic and Aesthetic
Elements
 Stylistic/aesthetic elements of printed reports include





Kendall &
Kendall
Organization
Control breaks
Blank spaces
Margins
Color coding
Copyright ©
2002 by
15-22
Online Screen Design
 Online screens are designed using screen design
software
 Guidelines for screen design are
 Keep the screen simple
 Keep the screen presentation consistent
 Facilitate user movement among screens
 Create an attractive screen
Kendall &
Kendall
Copyright ©
2002 by
15-23
Graphs
 Primary considerations for designing graphical output
 Output must be accurate, easy to understand and
use
 The purpose of the graph must be determined
 Decision makers must be trained in using it
 Provide the ability to call up a variety of user views
as well possible commands
Kendall &
Kendall
Copyright ©
2002 by
15-24
Web Site Design
 Design principles must be used when designing Web
sites
 These include
 Using professional tools
 Studying other sites
 Using Web resources
 Examining the sites of professional Web site
designers
Kendall &
Kendall
Copyright ©
2002 by
15-25
Web Site Design
 Further principles
Using tools that you are familiar with
Consulting books
Looking at examples of poorly designed pages
Creating Web templates. Style sheets allow you to
format all Web pages in a site consistently
 Using plug-ins, audio, and video sparingly




Kendall &
Kendall
Copyright ©
2002 by
15-26
Web Graphics
 Guidelines for using graphics when designing Web sites
are
 Use either JPEG or GIF formats
 Create a few professional-looking graphics for use on
your page
 Keep the background simple and readable
 Examine your Web site on a variety of monitors and
graphics resolutions
Kendall &
Kendall
Copyright ©
2002 by
15-27
Web Graphics
 Guidelines continued
 Save JPEG images at the highest quality possible
within a reasonable size
 Use horizontal rules to separate sections of Web
pages
 Use colorful bullets for lists and hot buttons for links
 Keep graphics images small and reuse images
Kendall &
Kendall
Copyright ©
2002 by
15-28
Web Graphics
 Guidelines continued
 Use transparent GIF files to make images that are
not rectangular
 Use a graphics package to tilt your image
 Follow the three clicks rule which states that you
should be able to go to any page in three clicks
Kendall &
Kendall
Copyright ©
2002 by
15-29
Tips for Corporate Web Sites
 To improve the presentation of a corporate Web site
 Provide an entry screen or home page
 Keep the number of graphics to a reasonable
minimum
 Use large and colorful fonts for headings
 Use interesting images and buttons for links
Kendall &
Kendall
Copyright ©
2002 by
15-30
Tips for Corporate Web Sites
 Ideas continued
 Use the same graphics image on several Web pages
 Avoid overusing animation, sound, and other “busy”
elements
 Provide an area on the left side or on the top of the
Web page for links to other pages in the Web site
Kendall &
Kendall
Copyright ©
2002 by
15-31
Tips for Corporate Web Sites
 Ideas continued
 Make sure that your Web page does not scroll
horizontally, keep the vertical page under 2½
screens
 Make sure that your initial page loads quickly
 Add one or two Java applets if possible
Kendall &
Kendall
Copyright ©
2002 by
15-32
Planning a Web Site
 Planning a Web site involves




Kendall &
Kendall
Designing the structure of the Web site
Focusing on the content
Using meaningful text
Including appropriate graphics
Copyright ©
2002 by
15-33
Planning a Web Site
 Further Web site planning guidelines
 Paying attention to the presentation of the Web site,
with a consideration of download times
 Constructing navigational links
 Promoting the Web site
Kendall &
Kendall
Copyright ©
2002 by
15-34
Apr-16
CSE323
Systems
35
Designing Effective Input
Systems Analysis and Design
Kendall and Kendall
www.themegallery.com
Major Topics







Input design
Form design
Screen design
Microcomputer/mainframe differences
GUI screen design
GUI controls
Web design guidelines
Kendall &
Kendall
Copyright ©
2002 by
16-37
Input Design Objectives
 The quality of system input determines the quality of
system output
 Well-designed input objectives
 Effectiveness
 Accuracy
 Ease of use
 Consistency
 Simplicity
 Attractiveness
Kendall &
Kendall
Copyright ©
2002 by
16-38
Form Design
 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
Kendall &
Kendall
Copyright ©
2002 by
16-39
Form Completion
 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
 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
Kendall &
Kendall
Copyright ©
2002 by
16-40
Seven Sections of a Form
 The seven sections of a form







Kendall &
Kendall
Heading
Identification and access
Instructions
Body
Signature and verification
Totals
Comments
Copyright ©
2002 by
16-41
Caption Types
 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
 Vertical check off, lining up choices or alternatives
vertically
 Horizontal check off, lining up choices or alternatives
horizontally
Kendall &
Kendall
Copyright ©
2002 by
16-42
Meeting the Intended Purpose
 Systems analysts may use different types of specialty
forms for different purposes
 Specialty forms can also mean forms prepared by a
stationer
 The disadvantages of the specialty forms are
• High cost
• Users can get bogged down with the red tape generated by
meaningless multiple-part forms
Kendall &
Kendall
Copyright ©
2002 by
16-43
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
 To encourage people to complete forms, systems
analysts should keep forms attractive
Kendall &
Kendall
Copyright ©
2002 by
16-44
Attractive Forms
 To be more attractive, forms should look uncluttered,
and elicit information in the expected order
 Aesthetic forms or usage of different fonts within the
same form can help make it more attractive
Kendall &
Kendall
Copyright ©
2002 by
16-45
Form Spacing
 Computer printer entries require a minimum of 1/6-inch
spacing between lines
 Handwritten entries require approximately 1/4 inch
 When forms are completed by either hand or by a
printer, allow about 1/3-inch intervals between lines
Kendall &
Kendall
Copyright ©
2002 by
16-46
Microcomputer Form Design
Software
 Numerous microcomputer form design software is
available
 Features of electronic form design software
 Ability to design paper, electronic, or Web- based
forms
 Form design using templates
 Form design by cutting and pasting familiar shapes
and objects
Kendall &
Kendall
Copyright ©
2002 by
16-47
Microcomputer Form Design
Software
 Further form design software features
 Facilitates completion through the use of software
 Permits customized menus, toolbars, keyboards, and
macros
 Supports popular databases
 Enables broadcasting of electronic forms
 Permits sequential routing of forms
Kendall &
Kendall
Copyright ©
2002 by
16-48
Microcomputer Form Design
Software
 Further form design software features
 Assists form tracking
 Encourages automatic delivery and processing
 Establishes security for electronic forms
Kendall &
Kendall
Copyright ©
2002 by
16-49
Controlling Business Forms
 Controlling forms include
 Making sure that each form in use fulfills its specific
purpose
 That the specified purpose is integral to
organizational functioning
 Preventing duplication of information collected and
the forms that collect it
 Designing effective forms
Kendall &
Kendall
Copyright ©
2002 by
16-50
Controlling Business Forms
 Controlling forms include (continued)
 Deciding on how to get forms reproduced in the most
economical way
 Establishing stock control and inventory procedures
that make forms available when needed, at the
lowest possible cost
Kendall &
Kendall
Copyright ©
2002 by
16-51
Screen Design Guidelines
 Guidelines for good screen design




Kendall &
Kendall
First, keep the screen simple
Second, keep the screen presentation consistent
Third, facilitate user movement among screens
Finally, create an attractive screen
Copyright ©
2002 by
16-52
Three Screen Sections
 To keep the screen simple, it is divided into three
sections:
 Heading
 Body
 Comments and instructions
Kendall &
Kendall
Copyright ©
2002 by
16-53
Screen Design Concepts for
Simplicity
 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
 For the regular user, up to 90 percent of the screen may
contain information
Kendall &
Kendall
Copyright ©
2002 by
16-54
Screen Design Concepts for
Simplicity
 Simplistic design includes maximizing or minimizing the
window size as needed
 Clicking the right mouse button is often used to display
more options for the window
Kendall &
Kendall
Copyright ©
2002 by
16-55
Consistency
 Consistency is achieved by displaying information in the
same area or by grouping information logically
 Consistency means using the same terms and acronyms
on several screens
Kendall &
Kendall
Copyright ©
2002 by
16-56
Facilitating Movement
 Guidelines for facilitating movement from one screen to
another
 Scrolling the screen back and forth
 Calling up another screen for more detail
 Using onscreen dialogue through the prompts
 Web pages may use buttons or commands to
facilitate scrolling and screen movement
Kendall &
Kendall
Copyright ©
2002 by
16-57
Facilitating Movement
 Further guidelines
 The three clicks rule says that users should be able
to get to the screens they need within three mouse
or keyboard clicks
 Character-based screens scroll by displaying new
screens, using standard function keys
 GUI screens should not scroll
 Web screens often scroll
Kendall &
Kendall
Copyright ©
2002 by
16-58
Designing an Attractive Screen
 To make the screen attractive use
 Different thickness of separation lines between
subcategories
 Inverse video and blinking cursors
 Icons which are pictorial onscreen representations
symbolizing computer actions
 Different combinations of colors
 Different type fonts
Kendall &
Kendall
Copyright ©
2002 by
16-59
Microcomputer and Mainframe
Differences
 Microcomputer and mainframe computers have the
following differences in their operation:
 Microcomputers
 Respond to any keystroke
 Define fields without attribute characters
 Require no space between screen fields
Kendall &
Kendall
Copyright ©
2002 by
16-60
Mainframe Computers
 Mainframe computers
 Respond when an Attention IDentifier (AID) key is
pressed
 Define screen fields using attribute characters
 The attribute character takes up one screen position
for each field
Kendall &
Kendall
Copyright ©
2002 by
16-61
Attribute Characters
 Attribute characters indicate




Kendall &
Kendall
Protection
Intensity
Shift
Extended attributes
Copyright ©
2002 by
16-62
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 for making selections and entering data
Kendall &
Kendall
Copyright ©
2002 by
16-63
Graphical User Interface (GUI)
Controls
 GUI controls or fields








Kendall &
Kendall
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 ©
2002 by
16-64
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
Kendall &
Kendall
Copyright ©
2002 by
16-65
Check Boxes
 Check boxes are used for nonexclusive choices
 Captions are placed to the right of the check box
 If there are more than 10 check boxes, group with a
border or white space
Kendall &
Kendall
Copyright ©
2002 by
16-66
Option Buttons and Drop-down List
Boxes
 Option or radio buttons are used for mutually exclusive
choices
 Often they are placed in a border called an option group
 List and drop-down list boxes are used to select one
choice out of many
Kendall &
Kendall
Copyright ©
2002 by
16-67
Sliders, Spin Buttons, and Image
Maps
 Sliders and spin buttons are used to change data that
have a continuous range of values
 They are often accompanied by a text box for
entering exact numerical values
 Image maps are used to select values within an
image
 The x and y coordinates are sent to the program
Kendall &
Kendall
Copyright ©
2002 by
16-68
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
Kendall &
Kendall
Copyright ©
2002 by
16-69
Message Boxes and Command
Buttons
 Message boxes are used to display warning and other
messages in a dialogue box
 They have an OK button or an OK and a Cancel
button
 Command buttons perform an action
 The text is centered inside the button
Kendall &
Kendall
Copyright ©
2002 by
16-70
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
Kendall &
Kendall
Copyright ©
2002 by
16-71
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
Kendall &
Kendall
Copyright ©
2002 by
16-72
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
Kendall &
Kendall
Copyright ©
2002 by
16-73
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
Kendall &
Kendall
Copyright ©
2002 by
16-74
Internet and Intranet Design
Guidelines
 Guidelines for creating intranet and Internet input pages
 Use a variety of text boxes, push buttons, radio
buttons, drop-down lists, and other GUI features
 Provide clear instructions
 Include radio buttons when users must make a
bipolar choice
Kendall &
Kendall
Copyright ©
2002 by
16-75
Internet and Intranet Design
Guidelines
 Further intranet/Internet guidelines
 Use check boxes to test conditions to true or untrue
 Use a logical entry sequence for fill-in forms
 Include two basic buttons: Submit and Clear
Kendall &
Kendall
Copyright ©
2002 by
16-76
Internet and Intranet Design
Guidelines
 Further intranet/Internet guidelines
 Create a feedback screen that lists error messages if
a form has not correctly been filled out
 Provide a scrolling text box if you are uncertain how
much text will be entered
 If the form is lengthy, divide it into several simpler
forms on separate pages
Kendall &
Kendall
Copyright ©
2002 by
16-77
Ecommerce Applications
 Ecommerce applications involve more than just good
Web site design
 Customers need to be confident of the site, including
privacy and security
Kendall &
Kendall
Copyright ©
2002 by
16-78