20

CHAPTER
11:
Designing
Effective
Output
(WRITTEN REPORT)
Submitted by:
pg. 1

20

Allauigan, Jemmary E.
Cristobal, Kristeen G.
Gabaldon, Iana Christelle B.
Sacol, Joann L.
BSA 2-2
LEARNING OBJECTIVES:
1. Understand the objectives for effective output design.
2. Relate output contents to output methods inside and outside the
organization.
3. Realize how output bias affects users.
4. Design display output.
5. Design dashboards, widgets and gadgets.
6. Design a web for ecommerce.

Output
Is information delivered to users through the information system
by ways of intranets, extranets or the World Wide Web.
Can take many forms such as hard copy of printed files, softcopy,
audio and video output.
One way of evaluating the current system.

Six Objectives in Designing Output

1. Designing output to serve intended purpose
All outputs should have purpose. During the information
requirements determination phase of analysis, the systems analyst finds
out what user and organizational purpose exist.
2. Designing output to fit the user.
With a large information system serving many users for many
different purposes, it is often difficult to personalize output.
3. Delivering the appropriate quantity of output

pg. 2

20

Part of task of designing output is deciding what quantity of output

is correct for users. No one is served if excess information is given only
to flaunt the capabilities of the system.
4. Making sure the output is where it is needed
Output is often produced at one location and then distributed to the
user. To be used and useful, output must be presented to the right user.
5. Providing the output on time
One of the most common complaints of users is that they do not
receive information in time to make necessary decisions.
6. Choosing the right output method
Much output now appears on display screens, and users have the
option of printing it out.

RELATING OUTPUT CONTENT TO OUTPUT

METHOD
EXTERNAL OUTPUTS VS INTERNAL OUTPUTS
-Differs in its distribution, design and appearance
-Placed on pre-printed forms or web sites
-Include various reports to decision makers
-Range from short summary reports to lengthy detailed reports

OUTPUT TECHNOLOGIES

pg. 3

20

PRINTERS

Together with the users, the systems analyst must determine the purpose
of the printer.

THREE KEY FACTORS OF PRINTERS TO KEEP IN

MIND:
1. Reliability
2. Compatibility with software and hardware
3. Manufacturer support
pg. 4

20

DISPLAYS AS OUTPUT
-Allows the user to change output information in real time either
through deletion, addition or modification
-Permits review of stored output through access to network and the
display of items from a relevant database

VIDEO, AUDIO AND ANIMATION

Video is a complex form of output, as it combines the strength and
potential emotional impact of audio with visual channel
Audio output is said to be the opposite of printed output. Sounds can
also enhance a presentation.
Audio input must be scripted into well-designed and clear-sequenced
for the customers
Animation output that can be used to enhance a Web site or
presentation

pg. 5

20

CD-ROMs AND DVDs

With the demand for multimedia output growing, the display of
materials on CD-ROMs has become widespread

CD-ROMs
Compact disc-Read Only Memory
Contains books, pictures or computer programs stored in a form
that cannot be changed

DVD
Digital versatile disc
pg. 6

20

Computer disk that contains a large amount of information (such as

movies)
Can also be used for back-up storage

ELECTRONIC OUTPUT
Many of the new web-based systems you design will have the capability
of sending electronic output in the form of email, faxes and bulletin
board messages that can be sent from one computers to another without
the need for hard copy.

2 NEWER GROUPS OF TECHNOLOGIES

1. PULL technology
2. PUSH technology

FACTORS TO CONSIDER WHEN CHOOSING

OUTPUT TECHNOLOGY
1. Who will use the (see) the output?
2. How many people need the output?
3. Where is the output needed?
4. What is the purpose of the output?
5. What is the speed with which output is needed?
6. How frequently will the output be accessed?
7. How long will (or must) the output be stored?
8. Under what special regulations is the output produced, stored
and distributed?
9. What are the initial and ongoing costs of maintenance and
suppliers?
10. What are the human environmental requirements for output
technologies?

Realizing How Output Bias Affects Users

Recognizing Bias in the Way Output Is Used
pg. 7

20

Presentations of output are unintentionally biased in 3 main ways:

1. How information is stored
2. Setting of acceptable limits
3. Choice of graphics

Avoiding Bias in the Design of Output

1. Be aware of the sources of bias.
2. Create an interactive deign of output during prototyping that
includes users and a variety of differently configured systems when
testing the appearance of web documents.
3. Work with users so that they are informed of the outputs biases
and can recognize the implications of customizing their displays.
4. Create output that is flexible and that allows users to modify limits
and ranges.
5. Train users to rely on multiple outputs for conducting reality test
on system outputs.
Reports fall into three categories:
1. Detailed reports print a report line for every record on the master
file.
2. Exceptions report print a line for all records that match a set of
condition.
3. Summary reports print one line for a group of records.

Guidelines for Printed Report Design

Report design conventions
- constant information
- variable information
paper quality, type and size
design considerations
functional attributes

DESIGNING OUTPUT FOR DISPLAYS

pg. 8

20

Guidelines for Display Design

Four guidelines facilitate the design of displays:
1. Keep the display simple.
2. Keep the presentation consistent.
3. Facilitate user movement among displayed output.
4. Create an attractive and pleasing display

Using Graphical Output in Screen Design

Graphical output can be powerful. It is much easier to identify a trend or
notice a pattern when
pg. 9

20

the right graph is displayed. Most people notice differences in graphs

more easily than they notice
differences in tables.
In designing graphical output, the systems analyst and any users
involved in design prototyping
must determine;
(1) the purpose of the graph,
(2) the kind of data that need to be displayed,
(3)its audience, and
(4) the effects on the audience of different kinds of graphical output.
In the instance of a decision support system, the purposes of
graphical displays are to support any of the three phases of problem
solving a user experiences: intelligence, design, or choice.

Dashboards
Decision makers need output that helps them make decisions effectively
and quickly. It helps executives
and other decision makers if all the information they need to make
decisions is displayed
in front of them.

pg. 10

20

Widgets and GadgetsChanging the Desktop Metaphor

Widgets (as they are called by Yahoo!), Dashboard Widgets (as
they are called by Apple), and Gadgets (as they are called by
Google and Microsoft) can be any type of program that maybe
useful to anyone interacting with a computer. Example: Clocks,
calculators, bookmark helpers, translators,search engines, easy
access to utilities, quick launch panels, and sticky notes that are
popular productivity widgets.
*Widgets and gadgets possess dual, almost paradoxical
natures.
-They can empower users to take part in the design of their own desktop,
and designers who are observant can learn a lot about what users prefer
when they study user designed desktops.
-But widgets and gadgets can also distract people from system-supported
tasks.
-Designers need to work with users to support them in achieving a
balance.
-One possibility is to add user-specific performance measures as widgets
and gadgets that are helpful to decision makers.
pg. 11

20

DESIGNING A WEB SITE

General Guidelines for Designing Web Sites

1. USE PROFESSIONAL TOOLS - Use software called a Web

editor such as Adobe Dreamweaver or Microsoft Expression Web.

2. STUDY OTHER WEB SITES - Look at Web sites you and other
users think are engaging. Analyze what design elements are being
used and see how they are functioning, then try to emulate what
you see by creating prototype pages.

pg. 12

20

3. USE THE RESOURCES THAT THE WEB HAS TO OFFER.

Look at Web sites that give hints on design. One such site is
useit.com.
4. EXAMINE THE WEB SITES OF PROFESSIONAL
DESIGNERS. As you look at professionally designed
pages, ask yourself, What works? What doesnt work? In what ways
can users interact with the site?
5. USE THE TOOLS YOUVE LEARNED - You might want to
use copies of the form to help you compare and contrast the many
Web sites you will visit as you go about learning Web page design.

pg. 13

20

6. CONSULT THE BOOKS- Something that can add to your

expertise in this new field is to read about Web design.
7. LOOK AT SOME POOR EXAMPLES OF WEB PAGES,
TOO- Critique poor Web pages and remember to avoid those
mistakes.
8. CREATE TEMPLATES OF YOUR OWN- If you adopt a
standard-looking page for most of the pages
you create, youll get the Web site up and running quickly and it will
consistently look good. Web sites may be made using cascading style
sheets (CSS) that allow the designer to specify the color, font

pg. 14

20

9. USE PLUG-INS, AUDIO, AND VIDEO VERY SPARINGLY. It

is wonderful to have features that the professional pages have, but
remember that everyone looking at your site doesnt have every
new plug-in. Dont discourage visitors to your page.
10.
PLAN AHEAD. Good Web sites are well thought out. Pay
attention to the following:
A). Structure- Planning the structure of a Web site is one of the most
important steps in developing a professional Web site. Think about your
goals and objectives. Each page in the overall Web
structure should have a distinct message or other related information.
Sometimes it is useful to examine professional sites to analyze them for
content and features.

B). Content - Provide something important to Web site users. Exciting

animation, movies, and sounds are fun, but you have to include
appropriate content to keep the user interested. Stickiness is a quality

pg. 15

20

a Web site can possess. Every Web site should include an FAQ
(Frequently Asked Questions) page.
C). Text- Remember that text is important, too. Each Web page should
have a title. Place meaningful words in the first sentence appearing on
your Web page. Let people know that they have indeed navigated to the
right Web site. Clear writing is especially important.
D). Graphics -The following list provides details about creating
effective graphics for Web sites:
1. Use one of the most commonly used image formats, JPEG or GIF.
JPEGs are best for photographs, and GIFs are best for artwork images.
GIFs are limited to 256 colors but may include a transparent
background, pixels that allow the background to show through the GIF
image. GIF images may also be interlaced, meaning that the Web
browser will show the image in successive stages, presenting a clearer
image with each stage.
2. Keep the background simple and make sure users can read the text
clearly. When using a background pattern, make sure that you can see
the text clearly on top of it.
3. Create a few professional-looking graphics for use on your pages.
4. Keep graphic images small, and reuse bullet or navigational buttons
such as BACK, TOP, EMAIL, and NEXT. These images are stored in a
cache, an area on the browsing computers hard drive. Once an image
has been received, it will be taken from the cache whenever it is used
again. Using cached images improves the speed with which a browser
can load a Web page.
5. Include text in what is called a title attribute for images and image hot
spots. The text displays when the user moves the mouse over the image.
pg. 16

20

An alt attribute provides text for screen readers and is essential to

support Web accessibility for visually impaired site visitors.
6. Examine your Web site on a variety of displays and screen
resolutions. Scenes and text that look great on a high-end video display
may not look good to others with poorer-quality equipment.
E). Presentation style -The following list gives added details about how
to design engaging entry displays for Web sites:
1. Provide an entry display (also called a home page) that introduces the
visitor to the Web site. The page must be designed to load quickly. A
useful rule of thumb is to design a page that will load in 14 seconds.
(Although you may be designing the page on a workstation at the
university, a visitor to your Web site may be accessing it from home.)
This entry display should be 100 kilobytes or less, including all graphics.
The entry page should contain a number of choices, much like a menu.
An easy way to accomplish that is to design a set of links or buttons and
position them on the left side or the top of the screen. These links can be
linked to other pages on the same Web site or linked to different Web
sites. A specialized text menu may be included in a smaller font at the
top or bottom of the page. An example of this is shown in Figure 11.16,
an entry page that contains a large image and some content but that
directs the visitor to journey elsewhere in the site. This page was
constructed with software that allows designers to see HTML code (at
the bottom of the screen) at the same time they see what the page would
look like in a browser.
2. Keep the number of graphics to a reasonable minimum. It takes
additional download time to transfer a graphics-intensive site.
3. Use large and colorful fonts for headings.
4. Use interesting images and buttons for links. A group of images
combined into a single image is called an image map, which contains
various hot spots that act as links to other pages.
pg. 17

20

5. Use cascading style sheets (CSS) to control the formatting and layout
of the Web page. CSS separates the content (the text and images) from
how they look (the presentation). Cascading style sheets are commonly
stored in a file external to the Web page, and one style sheet may control
the formatting of many pages. An advantage of using external style
sheets is making a change in the style sheet; for example, changing the
color of bold text will change the formatting of all the Web pages that
use the style sheet. Cascading style sheets may also be used in a single
Web page, and any duplicate styles will override an external style sheet
if one is used. This allows the designer to vary from the standard look
and feel of a Web site, perhaps for a special sale Web page or some
other exception. Styles may be added to individual items on a Web page,
overriding any other style sheets.
6. Use divisions and cascading styles or tables to enhance a layout.
Tables are easy to use and provide adequate layout. However, tables are
not well suited for visually impaired visitors.
Screen reading software reads across the page, not necessarily in a table
column. Divisions control the layout by providing blocks of text on the
Web page. Each block may be defined with a position from the top and
left of the screen or a larger block, and it may have a width and height,
as well as border style and background color. Divisions eliminate the
need for tables within tables and simplify design; screen reading
software will read all the text in the division, making the site accessible
for visually impaired viewers.
7. Use the same graphics image on several Web pages. Consistency will
be improved, and the pages will load more quickly because the computer
stores the image in a cache and doesnt have to load it again.
8. Use JavaScript to enhance the Web page layout by having images that
change when a mouse is moved over them, having menus expand, and
so on. JavaScript may be used to reformat the Web page based on the
height and width of the screen. If the Web site is multinational,
pg. 18

20

JavaScript can detect the language being used (a browser setting) and
redirect the viewer to a different Web page in a different language.
9. Avoid overusing animation, sound, and other elements.
F). Navigation- Observe the Three-clicks rule. Users should be able to
move from the page they are currently on to the page containing the
information they want in three clicks of the mouse button.
G). Promotion - Dont assume that search engines will find you right
away. Submit your site every few months to various search engines.
Include keywords, called metatags, that search engines will use to link
search requests to your site.

OUTPUT PRODUCTION AND XML

Output Production
Output production varies depending on the platform used to produce it.
There are many different ways to create output, ranging from simple
database software, such as Microsoft Access, to programs such as SAS,
Crystal Reports, and Adobe Acrobats PDF files.

XML
One of the advantages of using XML is that the XML document may be
transformed into different output media types.
This is done using cascading style sheets (CSSs) or extensible style
language transformations (XSLTs).

Cascading style sheets?

These are an easy way to transform an XML document. The style sheet
provides a series of styles, such as font family, size, color, border, and so
on, that are linked to the elements of the XML document.
These styles may vary for different media, such as a screen, printed
output, or a handheld device. The transforming software detects the type
of device and applies the
correct styles to control the output.
pg. 19

20

Extensible Style Language Transformation

Extensible style language transformations (XSLT) are a more
powerful means of transforming an XML document.
They allow the analyst to select the elements and insert them into
a Web page or another output medium.

AJAX?
It uses both JavaScript and XML to obtain small amounts of data, either
plain text or XML, from a server without leaving the Web page.
This is a big advantage because it means that the entire Web page does
not need to be reloaded. It works by allowing the Web page to reformat
itself based on choices that a user inputs.

pg. 20