Transcript Week 11 - cda college

11
Designing Effective Output
Systems Analysis and Design, 8e
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
Learning Objectives
• Understand the objectives for effective output
design.
• Relate output content to output methods
inside and outside the organizational context.
• Realize how output bias affects users.
• Design display output.
• Design dashboard, widgets, and gadgets.
• Design a Web site for ecommerce.
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-2
Output
• Information delivered to users
• Output forms
• Hard-copy—printed reports
• Soft-copy—computer screens, microforms,
and audio
• To create output, the analyst works
interactively with the user until the
output is satisfactory.
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-3
Major Topics
• Designing output
• Output technologies
• Factors in choosing an output
technology
• Report design
• Screen design
• Web site design
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-4
Output Design Objectives
• Serve a specific user or organizational
purpose
• Meaningful to the user
• Deliver the appropriate quantity of output
• Make sure the output is where it is needed
• Provide output on time
• Choosing the most effective output method
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-5
Relating Output Content to
Method
• Content of output must be considered
as interrelated to the output method.
• External—going outside the business
• Internal—staying within the business
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-6
External Output
• Examples:
• Utility bills
• Advertisements
• Paychecks
• Differs from internal output in:
• Distribution
• Design
• Appearance
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-7
Internal Output
• Examples:
•
•
•
•
Summary reports
Detailed reports
Historical reports
Exception reports
• Might consist of material available on an
intranet
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-8
Output Technologies
•
•
•
•
•
Printers
Display screen
Video, audio, and podcasts
DVD and CD-ROM
Electronic output
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-9
Printers
• The trend in printers is toward
increased flexibility.
• Key factors of printers:
• Reliability
• Compatibility with software and hardware
• Manufacturing support
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-10
Display Screen
• Advantages:
• Result in cost savings
• May be desirable from the user’s
standpoint
• Easier to keep up to date
• Disadvantages:
• Different screen resolutions
• Fonts
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-11
Video, Audio, and Animation
• Video
• Combines the impact of audio with a visual
channel
• Audio
• Transient, usually output for the benefit of one
user
• Animation
• The presentation of different images in a series,
one at a time
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-12
Video Clips
•
•
•
•
•
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
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-13
Audio
• Sound
• Music
• Sound effects
• Telephone
• Podcasting
• Technique of putting downloadable voice
files on the Web as RSS files
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-14
Animation
• Animation is composed of four
elements:
•
•
•
•
Kendall & Kendall
Elemental symbols
Spatial orientation
Transition effects
Alteration effects
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-15
CD-ROMs and DVDs
• Less vulnerable to damage from human
handling
• Can include full-color text and graphics
as well as audio and video
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-16
Electronic Output
• Email
• Faxes
• Bulletin board messages
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-17
RSS (Really Simple Syndication)
• A way of gathering and distributing news and
other content from multiple sources
• RSS news readers can either stand alone or
be integrated with your browser as plug-ins.
• Has the advantage of efficiently organizing
news and other information from a variety of
sources chosen by the user
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-18
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 © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-19
A Comparison of Output Methods
(Figure 11.2)
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-20
Factors to Consider When
Choosing Output Technology
•
•
•
•
•
•
•
•
Who will use the output?
How many people need the output?
Where is the output needed?
What is the purpose?
What is the speed with which output is needed?
How frequently will the output be accessed?
How long will the output be stored?
Regulations depicting output produced, stored, and
distributed
• Initial and ongoing costs of maintenance and supplies
• Human and environmental requirements
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-21
Output Bias
• Analysts must avoid unnecessarily
biasing output and make users aware of
the possible biases in output.
• Bias is introduced in three main ways:
• How information is sorted
• Setting of acceptable limits
• Choice of graphics
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-22
Avoiding Bias in the Design
Output
• Be aware of the sources of bias.
• Design of output that includes users.
• Work 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 © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-23
Designing Printed Output
• Detailed reports
• Print a report line for every record on the master
file.
• Exception reports
• Print a line for all records that match a certain
condition.
• Summary reports
• Print one line for a group of records that are used
to make decisions.
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-24
Report Design Conventions
• Constant information remains the same
whenever the report is printed.
• Variable information can vary each time
the report is printed.
• Paper quality, type, and size
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-25
Designing Printed Reports
• Functional attributes
• Stylistic and aesthetic considerations
• Well organized
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-26
Designing Output for Displays
• Keep the display simple.
• Keep the presentation consistent.
• Facilitate user movement among
displayed output.
• Create an attractive and pleasing
display.
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-27
Graphical Output in Screen
Design
•
•
•
•
The purpose of the graph
The kind of data to be displayed
The audience
The effects on the audience of different
kinds of graphical output
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-28
Dashboards
•
•
•
•
•
•
•
•
•
•
•
•
Make sure the data has context.
Display the proper amount of summarization and precision.
Choose appropriate performance measures for display.
Present data fairly.
Choose the correct style of graph or chart for display.
Use well-designed display media.
Limit the variety of item types.
Highlight important data.
Arrange the data in meaningful groups.
Keep the screen uncluttered.
Keep the entire dashboard on a single screen.
Allow flexibility.
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-29
Widgets and Gadgets
• Can be any type of a program that may
be useful to any person interacting with
a computer
• Can empower users to take part in
design of their own desktop
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-30
Designing a Web Site
•
•
•
•
Use professional tools.
Study other sites.
Use Web resources.
Examine the sites of professional Web site
designers.
• Use the tools you’ve learned.
• Consult the books.
• Examine poorly designed Web sites.
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-31
Designing a Web Site (Continued)
• 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 © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-32
Designing a Web Site (Continued)
• Plan ahead, pay attention to:
•
•
•
•
•
•
•
Kendall & Kendall
Structure
Content
Text
Graphics
Presentations style
Navigation
Promotion
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-33
Structure
• One of the most important steps in
developing a professional Web site
• Each page in the Web structure should
have a distinct message.
• Can benefit from using Web site
diagramming and mapping tools
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-34
Content
• Appropriate content is needed to keep
the user interested
• Use a metaphor or images that provide
metaphor for your site
• Should include a FAQ page
• May take advantage of prewritten
software
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-35
Text
• Each Web page should have a title.
• Place meaningful words in the first
sentence appearing on your Web page.
• Clear writing is important.
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-36
Graphics
• Use either JPEG or GIF formats.
• Keep the background simple and readable.
• Create a few professional-looking graphics for
use on your pages.
• Keep images small and reuse bullet or
navigational buttons.
• Include text in what is called a Title or ALT
attribute for images and image hot spots.
• Examine your Web site on a variety of
displays and screen resolutions.
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-37
Presentation Style
• Provide a 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.
• Use CSS to control the formatting and layout
of the Web page.
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-38
Presentation Style (Continued)
• Use divisions and cascading styles or
tables to enhance a layout.
• Use the same graphics image on
several Web pages.
• Use Javascript to enhance Web page
layout.
• Avoid overusing animation, sound, and
other elements.
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-39
Navigation
• The three-clicks rule
• Promote the Web site
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-40
Promotion
•
•
•
•
Promote your site.
Submit often to search engines.
Include key words in metatags.
Encourage your readers to bookmark
your Web site.
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-41
Maintaining Web Sites
• Ecommerce sites require frequent
updating.
• Content management systems (CMS)
• Software tools
• Enable the analyst to develop and maintain
Web sites
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-42
Creating Blogs (Web Logs)
•
•
•
•
•
•
•
•
•
Permalink specific for the blog post
The headline or title of the post
The primary link
An optional summary
The blog text or commentary
An optional image
A block quote
Links for comments from other people
Other blog software features
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-43
Output Production and XML
• An XML document may be transformed
into different output media types.
• Methods:
• Extensible Style Language Transformations
(XSLT)
• Ajax
• Cascading style sheets (CSS)
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-44
Extensible Style Language
Transformations (XSLT)
XSLT allows you to:
• Select XML elements
• Sort sequence
• Selection of data
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-45
Extensible Style Language Transformation (XSLT) Software Can Be
Used to Transform XML Documents into Many Different Formats for
a Variety of Platforms (Figure 11.17)
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-46
Ajax
• Uses both JavaScript and XML to obtain
small amounts of data from a server
without leaving the Web page
• The user does not have to wait for a
new Web page to display after making
a selection.
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-47
Summary
•
•
•
•
•
•
•
•
Output
Output design objectives
Output content
Output technologies
Presentation of output
Printed reports
Display output
Web design
Kendall & Kendall
Copyright © 2011 Pearson Education, Inc. Publishing as Prentice Hall
11-48
WEB DESIGN
NTRODUCTION
• A web page is often an interested page including pictures,
background and a lot of information. Each page includes
different or similar information and every web page has its own
source code. For each web page there exist different web
addresses which you have to type it in your web browser to go
in this specific page.
• To create a web page, there are some necessary tasks and
fundamental steps which you have to follow to design a good
and nice web page. First of all, is to understand how the web
work and then to be familiar and to get knowledge about
HTML, the role of the server and the importance of the
browser. Moreover is to learn how to construct the web page
and how to learn the areas of web design.
Core Disciplines
The following core disciplines for web
design are:
•
•
•
•
Graphic design : How the page looks
Interface design : How the page works
Information design: Organisation of contents
HTML production: Tagging language for web
documents
• Programming: For advance wed functionality
• Multimedia: Adding multimedia
Core Disciplines (cont)
Graphic Design
How the page looks
•
For decisions regarding
everything in the web page,
i.e. graphics, type, colours,
layout etc.
•
Requires image editing
software, I.e. Adobe
Photoshop
Interface Design
How the page works
•
Requires buttons, links,
navigations, devices etc.as
well as functional
organisations of the page
•
A specialist job
Information Design
Organisation of contents
•
Deals with flowchart,
diagrams,
HTML production
Tagging language for web
documents
•
Creation and
troubleshooting of the
HTML documents
Programming
For advanced web functionality
1.
Additional programming
skills for writing scripts,
programmes and
applications and for
working with database,
servers etc.
Multimedia
Adding multimedia
1.
Incorporating sound, video,
animation and interactivity
2.
Requires an authoring tool,
I.e. Director, Flash
3.
Background in sound and
video production is useful
Web related programming
languages
For every web design page, there are some
main programming languages which are:
• HTML (Hyper Text Markup Language).
• JavaScript
• DHTML (Dynamic Hyper Text Markup
Language).
• XML (Extensible)
• Java
Plan the Site
•
•
•
•
•
•
Identify the target stakeholders
Agree on objectives
Select strategies to meet the objectives
Write an action plan to get it done
Do a budget
Write an evaluation plan
Requirements
Hardware:
•
•
Fast computer with enough memory and a large monitor
A scanner and/or digital camera
Software:
•
•
•
•
•
Web page authoring programmes, i.e.
Macromedia Dreamweaver, Adobe GoLive, MS Frontpage
HTML editors, i.e.
Allaire HomeSite (Windows), BBEdit (Mac)
Graphics Software, I.e. Photoshop, ImageReady and Illustrator by Adobe,
Macromedia Fireworks,
JASC Paint Shop Pro
Multimedia Tools, i.e.
Flash & Director by Macromedia, LiveMotion by Adobe
Internet tools, i.e.
Variety of browsers, a file transfer programme (FTP), Telnet (optional)
Good Website
•
•
•
•
•
Every Web page needs the following items. Don’t forget that users
can enter via any page on the site, thus, each must be
freestanding.
Content: Text, graphics, photos, video, or audio that combine to
create the desired effect with target stakeholders. Have the
material in hand before you begin or you might find that the site
organization needs changing later on and you’ll have to redo all
the navigation bars.
Title: the text that shows at the top of the user’s browser.
Without it the page reads “untitled” and might not be indexed
properly by search engines.
Navigation scheme: the global links that appear on all pages,
the local links to appear on all subsections, and other important
links (such as to business partners).
Author’s identity: Logo, name with e-mail link, or other
information about who sponsored the page (not necessarily the
same as who designed it).
Meta tags: HTML tags containing key words for search engine
classification.
Good Website (cont)
• Site map: the blueprint for site design that if not created will result in
repeating much of the work.
• Home page with correct file name: use index.htm or index.html as the
name of the homepage. The Web server will deliver the index file when
the user does not specify a filename. Therefore, you save typing for the
user.
• Statement of site purpose: words, headlines, graphics, or other
elements that clearly let users know what this site is about.
• Create a design template: the home page can be somewhat different,
but all inner pages should have a consistent design. This means fonts,
graphics, color schemes, and so forth should be repeated so that users do
not have to relearn where things are on each page, and so that they
know they are on your site at all times. You can accomplish this by
making a great Web page, saving it, and using a copy to start each new
page.
• Copyright information: Create a page with terms of use or anyone can
legally take and reuse any of your content. Most developers do not try to
copyright the HTML coding unless it is unique.
• Contact information: Include an e-mail link or phone so users can
contact you. If you include an e-mail address, answer the e-mail that
comes.
What is a bad design?
•
•
•
•
•
•
long pages, too much scrolling, boring text
no structure
no navigation
“What is this page about?”
complex (very long) URL’s
“...for ... click here”
• “... best viewed with ...”
• frames suck(?)

What is a bad design (cont)?
• overwhelmed with multimedia
•
•
•
•
big images
too many images and/or video clips
obnoxious noise .vs. background music
boring or aggressive animation
• bad images (poor quality)
• colours, fonts, blink
• cool pages suck(?)
The Importance of
Having Images
• A newspaper page with no photos is
called gray
• A Web page with no [images] is called
unreadable
• The Web is as much a visible medium as a
written one, and readers are very likely to
pass over [web] pages without pictures
Source: http://courses.help.com
Image Caution
• On the Web, site visitors generally appreciate
creativity and passion for a subject over
spinning fire logos, dancing bologna and
other flashy graphic elements
• So, your goal as a web designer is not to create a
webpage that looks like a 5 year old's first
Christmas tree – covered in flocking and tinsel…
• Mandate: Having a clear design aesthetic in
mind let's look at available web image file
formats
•
File naming and organization
tips
Use lowercase filenames: use lowercase for all file names with no spaces
in the name: e.g., line.html, index.html, font.html but not My Line.html.
Many Web servers are case sensitive and/or have trouble with spaces in
filenames. This will save lots of time later because you won’t have to recall
how you named a file to make the link work. If you use title case (Like This)
you’ll have to match it precisely in your linking or the links won’t work:
easier to make it all lower case.
• Use short filenames: Filenames should always be short because users
often type the filename as part of the URL, and short filenames are easier
for them (and you) to remember. As with all file naming, select names that
indicate the file contents.
• Check the file extensions: Different software uses different extension
protocols. HTML files are .htm or .html; graphic files for the Web are .gif, or
.jpg; audio files are .wav, .mid, .snd, or .au; and video formats are .avi,
.mov, or .mpeg. You can also link to Word files (.doc), Exel files (.xls), or
Power Point files (.ppt), and all others. These extensions are created within
the respective software, and the file type can’t be changed by simply
changing the extension text. Be sure you are using the appropriate
extension for the task.
File naming and organization
tips (cont)
•
•
•
•
Use consistent extensions: Every HTML file must end in either .htm or .html. Do
not mix and match. Either use .htm consistently or .html consistently. Mixing
extensions opens up the likelihood of error: e.g., linking to myfile.htm when you
meant to link to myfile.html. If myfile.htm does not exist, the link will fail and you
may scratch your head and wonder why.
Page graphics: HTML code actually tells browsers to find a graphic file and present it
as part of the Web page. Unlike text, graphics are in separate files from the pages in
which they appear. For example, if you had a Web page with text, bullet graphics, an
icon, and a menu bar that is an image, you would have 4 files to make the page display
properly. All these have to be on the server to make it work.
Keep files together: Each Web page consists of an HTML file and usually one or more
graphic files. Make sure that related files are stored in the same folder. Often all HTML
files are stored in one folder while all graphic files are stored in a separate folder. The
important point here is that you need to determine in advance what your file structure
will be, develop using that structure, and send it exactly that way to the server for
publishing. This is because the HTML you code or the page authoring software codes,
actually finds the path to the graphics and codes it that way so browsers can find them.
If you move the graphics later, have fun recoding it all.
Linking to other types of files: You can put a Word file or any other file on a Web
server and link to it from a Web page. These files are not meant to be read by
browsers, although IE will now open Microsoft office files for viewing only (not editing).
Many developers link to Excel or Acrobat .pdf files or others so that users can download
and use them independently of the Web page.