Systems Analysis & Design: Tenth Edition

Systems Analysis & Design
Tenth Edition
Chapter 11
Designing Effective Output
Copyright © 2019, 2014, 2011 Pearson Education, Inc. All Rights Reserved
Learning Objectives
11.1 Understand the objectives for effective output design
11.2 Relate output content to output methods
11.3 Realize how output bias affects users
11.4 Design display output
11.5 Design dashboard, widgets, and gadgets
11.6 Design a websites for ecommerce and corporate uses that include
Web 2.0 technologies
11.7 Design output for social media
11.8 Understand the development process for apps used on
smartphones and tablets
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
Major Topics
• Designing output
• Output technologies
• Factors in choosing an output technology
• Report design
• Screen design
• Web site design
• Smartphone and tablet design
• Responsive Web design
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
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
External Output
• Differs from internal output in:
– Distribution
– Design
– Appearance
Internal Output
• Examples:
– Summary reports
– Detailed reports
– Historical reports
– Exception reports
• Might consist of material available on an intranet
Figure 11.1 A Comparison of Output
Methods (1 of 2)
Output Method Advantages Disadvantages
Printer Affordable for most organizations Still requires some operator
Flexible in types of output, location, intervention
and capabilities Compatibility problems with
Handles large volumes of output computer software
Highly reliable with little down time May require special, expensive
supplies
Depending on model, may be slow
Environmentally unfriendly
Display screen Interactive May require cabling and setup space
Online, real-time transmission Requires system for taking
Quiet “snapshots” of screen and storing
them for future use
Takes advantage of computer
capabilities for movement within
databases and files
Good for frequently accessed,
ephemeral messages
Figure 11.1 A Comparison of Output
Methods (2 of 2)
Output Method Advantages Disadvantages
Audio output Good for individual user Needs earbuds where output will
and podcasts Good for transient messages interfere with other tasks
Good where worker needs hands Has limited application
free
Good if output needs to be
widely distributed
Mobile devices Highly portable Screen may be too small for text
Very interactive using gestures Icons and buttons may be confusing
Zoom and magnification are possible May be lost more easily
Electronic output Reduces paper Is not conducive to formatting (email)
(email, websites, Can be updated very easily Is difficult to convey context of
blogs, and RSS messages (email)
feeds) Can be “broadcast”
Can be made interactive Websites need diligent maintenance
Factors to Consider When Choosing Output
Technology (1 of 2)
• 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?
Factors to Consider When Choosing Output
Technology (2 of 2)
• 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
Green IT Initiatives
• May limit the quantity of paper reports that are printed
• Electronic transactions
• Encourage customers to think about environmental savings
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
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
Figure 11.4 A Misleading Graph Will Most
Likely Bias the User
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
Designing Output for Displays
• Keep the display simple
• Keep the presentation consistent
• Facilitate user movement among displayed output
• Create an attractive and pleasing display
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
Dashboards (1 of 3)
• Make sure the data has context
• Display the proper amount of summarization and precision
• Choose appropriate performance measures for display
• Present data fairly
Dashboards (2 of 3)
• Choose the correct style of graph or chart for display
• Use well-designed display media
• Limit the variety of item types
• Highlight important data
Dashboards (3 of 3)
• Highlight important data
• Arrange the data in meaningful groups
• Keep the screen uncluttered
• Keep the entire dashboard on a single screen
• Allow flexibility
Figure 11.8 Dashboard Example
Infographics
• Combine numbers, charts, and different types of graphs
together in one view at the same time in an infographic
• Infographic can mean any graph, chart, or picture that
communicates the data better than words or tables
• Infographics should be newsworthy
Creating Infographics (1 of 2)
• Start the infographic with a headline, something brief but
catchy
• Then artfully design a small page of information
• Mix in visuals that together tell a story
Creating Infographics (2 of 2)
• Design elements include charts and graphs, images (mostly
icons, cartoons)
• Photos should be rarely used
• Summary information in brief text
• Contact information
• Some action the reader might want to take
Figure 11.9 An Infographic Using a Variety
of Design Elements
Responsive Web Design (1 of 4)
• There is no “standard” screen resolution anymore
• Individuals may set a browser to use different fonts and may
disable the use of JavaScript, cookies, and other Web
programming elements
• Responsive Web design means that a website is developed so
that it can be viewed on any device: a desktop, tablet, or
smartphone
• This means seeing all of the content, experiencing the same
design concepts, and being able to perform all of the tasks on
any device
• Websites are designed in percentages rather than a fixed
number of pixels
• The Web designer might need to develop different landing
pages for each type of device
• Ajax can recognize a device and display different sized
advertising components on a page
• Adaptive design uses a fixed grid rather than the fluid
(percentage) grid in responsive Web design
Flat Web Design (1 of 2)
• Web design trends moved away from skeuomorphic design to
flat Web design
• Skeuomorphic design means that objects were meant to look
realistic and three-dimensional
• Flat Web design is a minimalistic approach to design
Flat Web Design (2 of 2)
• Web design is clean, two-dimensional, and simple in many
ways
• Using a bright color palette that is adhered to in all design
• Concentrate on only what is necessary
Figure 11.10 Comparing Skeuomorphic
Icons with Flat Web Design
Designing a Website (1 of 3)
• Use professional tools
• Study other sites
• Examine the sites of professional website designers
• Use the tools you’ve learned
• Use storyboarding, wireframing, and mockups
• Creating Web templates
– Style sheets allow you to format all Web pages in a site
consistently
• Using plug-ins, audio, and video sparingly
Storyboarding
• In developing a website or app a storyboard could be used to
show the differences between screens
• It can show how a visitor to the site would navigate the website
Wireframing (1 of 2)
• Page design can be accomplished using a process called
wireframing
• Wireframing because it shows only the basics
• There is no color, no type style; graphics are shown as a simple
box with an X drawn in
• In this way, each of the items acts as a placeholder
Wireframing (2 of 2)
• Wireframing allows the designer to plan:
– The overall design, showing what element appears at each
position on the page
– The navigational design, showing how to move from one
page to the next using buttons, tabs, links, and pull-down
menus
– The interface design, showing how to interact with the Web
site by inputting data or responding to questions
Mockups (1 of 2)
• The term wireframe has largely been replaced with mockup
• Mockups show what the output and input will look like
• Abundant software is available to help a systems designer
develop a mockup
Mockups (2 of 2)
• The software has objects that can be dragged and dropped onto
the screen
• Templates are available for any type of display including:
– Desktops
– Notebooks
– Smartphones
– Tablets
• When designing for smartphones and tablets, both screen
orientations are included
• Plan ahead, pay attention to:
– Structure
– Content
– Text
– Graphics
– Presentations style
– Navigation
– Promotion
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
• Look for applications that do Web functionality testing or error
checking
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
Text
• Each Web page should have a title
• Place meaningful words in the first sentence appearing on your
Web page
• Clear writing is important
Content Management Systems
• Content on ecommerce sites needs to be constantly updated
• Content management systems (CMSs) are software tools that
help to develop and maintain websites and online applications
Graphics
• Use either JPEG, GIF, or PNG formats
• Keep the background simple and readable
• Create a few professional-looking graphics for use on your
pages
• Keep images small and reuse bullets or navigational buttons
• Include tooltip help for images and image hot spots
• Examine your Web site on a variety of displays and screen
resolutions and on mobile devices
Presentation Style (1 of 2)
• 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
Presentation Style (2 of 2)
• 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
Navigation
• The three-clicks rule
• Include a navigation bar and links to the home page on every
page on the Web site
Promotion
• Promote your site
• Submit often to search engines
• Include key words in metatags
• Encourage your readers to bookmark your Web site
Figure 11.12 Website Example
Web 2.0 Technologies and Social Media
Design
• It is important to include Web 2.0 technologies that focus on
enabling and facilitating user-generated content and
collaboration
• Types of technologies you should think about including:
– Blogs
– Wikis
– Links to social networks on which the company has a
presence
– Tagging
Tagging
• Tagging or social bookmarking provides useful pointers to
online resources such as:
– Web sites
– Content on corporate intranets
– Corporate documents, or photos that are relevant to the
organization and to users
Reasons for Using Collaborative Tools
• Companies use collaborative tools to:
– Communicate an integrated branding and messaging
strategy across multiple platforms
– To gauge consumer opinion
– To gather feedback
– To create a community of users
Internal Use of Social Media
• Inward-facing Web technologies can be useful in:
– Building employee relationships
– Maintaining trust
– Sharing knowledge
– Innovating among employees and groups of employees
– Locating corporate resources more readily
– Nurturing corporate culture and subcultures inside the
organization
Five Aspects an Analyst Should Consider
1. Realize differences between corporate objectives and objectives of
key stakeholders
2. Serve as the voice of the customer to your client organization
3. Recognize the importance of visual page design for effectively
displaying collaborative tools
4. Revise and update the Web 2.0 technologies offered frequently
5. Work to integrate Web 2.0 technologies with the existing branding
Figure 11.13 Many Different Web 2.0 Sets
of Icons
Social Media Design (1 of 3)
• Businesses use social media for a number of reasons:
– Growing their audiences
– Increasing traffic to already well-established Web sites
– Reinforcing brand awareness
– Developing an online persona that can be trusted
• Numerous options, including:
– Facebook
– Instagram
– Twitter
– Snapchat
– Google+
– YouTube
– Others
• Designing content for social media is highly visual
• Visual content is 40 times more likely to be shared on social
media
• Sharing is what allows a designer of social media to leverage
social media for its best networking aspects
Social Media Design Guidelines
• Emphasize the goal of the design
• Develop a consistent look
• Create appealing design flow
• Simplify to use space in a positive way
Designing for Smartphones and Tablets (1 of 3)
1. Set up a developer account

2. Choose a development process
3. Be an original
4. Determine how you will price the app
5. Follow the rules for output design

6. Design your icon
7. Choose a name for the app
8. Design for a variety of devices
9. Design the output for the app
10. Design the output a second time for different orientation

11. Design the logic
12. Create the user interface using gestures
13. Protect your property
14. Market your app
Choose a Development Process
• Prototyping is most likely the best way to develop your app
• Quick releases are important
• Quality should not be sacrificed, but you can introduce an app and
then add features later
• Advantages of introducing an app first:
– It allows you to gain an advantage
– Revise the app adding new features
– Increases visibility because the app appears on a list of apps that
have been updated
Determine Pricing the App
• There are six basic options for pricing:
1. Choose a low-cost strategy
2. Introduce an app as a “premium” app
3. Adopt a “freemium” model
4. Offer an app for free
5. Promote an app by reducing its price
6. Accept advertising
Figure 11.15 Design the App Icon
Size for Older Size for High- Size for High-
Size for Older
Icon Required iPhones in Resolution Resolution iPad
iPad (pixels)
(pixels) iPhone (pixels) (pixels)
Display size 320 × 480 640 × 1136 1024 × 768 2048 × 1536
Application
icon (Home 57 × 57 114 × 114 72 × 72 144 × 144
screen icon)
App icon for 1024 × 1024 1024 × 1024
512 × 512 512 × 512
the app store recommended recommended
768 × 1004 and 1536 × 2008 and
Launch image 320 × 480 640 × 960
1024 × 748 2048 × 1496
Spotlight
29 × 29 58 × 58 50 × 50 100 × 100
search icon
Settings icon 29 × 29 50 × 50 29 × 29 50 × 50
Documents 64 × 64 and 128 × 128 and
22 × 29 44 × 58
icon 320 × 320 640 × 640
Design the App’s Logic
• Tablets and smartphones fit in well with the prototyping
method of development
• Sometimes the best way is to sketch out the logic using
structured decision making techniques
Design Movement
• Moving from screen to screen may make a big difference in a
user’s experience
• Don’t leave movement to chance
• Plan movement carefully
• Use storyboards or an app
Figure 11.17 App Cooker Plans Movement
Create the User Interface Using Gestures
• Smartphones and tablets have innovative user interfaces
• Technically called touchscreen capacitive sensing
• Design apps assuming that users will demand touch-sensitive
interfaces
• Use gestures such as:
– Swipes
– Pinches
– Tugs
– Shakes
Market Your App
• Need to convince a person to pay for and download your app
• To market your app, you will need:
– A large icon
– A description
– A section explaining what is new in the current version
– A sample set of screenshots
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)
Extensible Style Language Transformations
(XSLT)
XSLT allows you to:

• Select XML elements
• Sort sequence
• Selection of data
Figure 11.18 Extensible Style Language
Transformation (XSLT) Can Transform XML
Documents into Many Different Formats
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
Summary (1 of 2)
• Output
• Output design objectives
• Output content
• Output technologies
• Presentation of output
• Responsive Web design
Summary (2 of 2)
• Flat Web design
• Display output
• Web design
• Social media
• Smart phone and tablet design
• XML transformation
Copyright

Systems Analysis & Design: Tenth Edition

Uploaded by

Copyright:

Available Formats

Systems Analysis & Design: Tenth Edition

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Systems Analysis & Design: Tenth Edition

Uploaded by

Copyright:

Available Formats

Systems Analysis & Design

• Who will use the output?

• How long will the output be stored?

1. Set up a developer account

5. Follow the rules for output design

10. Design the output a second time for different orientation

XSLT allows you to:

You might also like