Designing Effective Output – Comprehensive Study Notes

Previous Lecture Review (UML Refresher)

Notations & methodologies covered:
- UML Use Case, Activity, CRC, Sequence, Class, State-chart diagrams
Common DON’Ts:
- Don’t forget UML notation conventions
- Don’t name use-cases with verbs (should be nouns) – e.g., exam, assignment, grades
- Don’t confuse association with inheritance
- Don’t omit attributes & methods in classes
Common DOs:
- Actors ≜ humans, external systems, or hardware
- Use verbs in use-case names (e.g., Take assignment instead of Assignment)
- Each class ⇒ rectangle containing name + attributes + methods
- Apply inheritance for classes sharing attributes/methods

Learning Objectives for Chapter 11 – Designing Effective Output

Understand the overall objectives for effective output design
Relate output content ↔ output method inside & outside an organization
Recognize how output bias affects users
Learn to design:
- Display output & reports
- Dashboards & infographics
- Social-media content
- Smartphone & tablet apps (responsive design)
Comprehend factors in choosing technologies & the design process

Output Fundamentals

Definition: Information delivered to users
Major forms:
- Hard copy: printed reports
- Soft copy: screens, microforms, audio, web
Delivery channels: intranets, extranets, public web
Development: analyst iteratively prototypes with users until output ≈ satisfactory

Major Topics in the Chapter

Output design principles & objectives
Output technologies & selection factors
Report, screen, web, mobile, & responsive design

Output Design Objectives

Serve a specific user / organizational purpose
Be meaningful & usable
Provide the right quantity
Arrive where & when needed
Select the most effective method for the context

Relating Output Content to Method

Interrelation: content often dictates medium
External output (outside the business):
- E.g., utility bills, ads, paychecks
- Differs in distribution, aesthetic design, branding
Internal output (inside the business):
- Summary, detailed, historical, exception reports
- Frequently posted on intranets

Output Methods – Advantages & Disadvantages

Printer
- + Affordable, flexible media, high volume, reliable
- – Operator intervention, supply cost, slow models, environmental impact
Display screen
- + Interactive, real-time, good for transient info
- – Needs cabling, storage of snapshots for audit
Audio / Podcast
- + Hands-free, wide distribution, transient alerts
- – Earbuds if disruptive, limited scope
Mobile devices
- + Highly portable, gesture interaction, zooming
- – Small screens, confusing icons, easy to lose
Electronic (email, blogs, RSS)
- + Low paper, easily updated, broadcast & interactive
- – Formatting limits, context loss in email, maintenance burden for sites

Factors in Choosing Output Technology

Audience: job roles, accessibility needs
Quantity: many users ⇒ web + printable; single user ⇒ screen/audio
Location of use/delivery
Purpose & required speed
Frequency of access; retention period (prefer digital for long term)
Regulations (e.g., $\text{HIPAA}$ , $\text{SOX}$ ) governing storage/distribution
Cost (initial + maintenance) & environmental footprint
Human/environmental constraints: lighting, noise, temperature, Wi-Fi proximity
Summary mnemonic: $\text{speed \; | \; cost \; | \; portability \; | \; flexibility \; | \; accessibility \; | \; storage \; | \; retrieval}$

Green-IT Initiatives

Limit printed pages; discourage printing e-mails via footer reminders

Graphic & Visualization Design Principles

Elements: Color, Typography, Structure, Scale, Layout, Representation (chronological, radial, spiral, grid, etc.)
Dimensions: linear, logarithmic, relative; sequential vs faceted timelines
Iterate: prototype → evaluate → refine

Output Bias

Definition: Systematic unfair influence favoring or disadvantaging interpretations
Sources (3):
1. Sorting/order of information
2. Choice of acceptable limits/ranges
3. Graphic choice & scaling (e.g., truncated axes)
Mitigation:
- Designers stay aware; include users in design; flexible parameters; train users to cross-check multiple outputs
Example: Misleading bar chart (difference appears 2× though actual ≈ $5\%$ )

Designing Printed Output

Detailed report: line-per-record
Exception report: only records meeting a condition
Summary report: one line per group for decision making

Designing Output for Displays

Keep display simple
Maintain presentation consistency
Facilitate user navigation/movement
Make it attractive & pleasing

Printed vs Display Differences

Graphical Output on Screens

Tailor to purpose, data type, audience impact
Typical goals: comparisons, proportions, relationships, hierarchy, process flow, distribution, location
Media: pictures, symbols, color coding, words, dimensions
Representations: charts, diagrams, maps, timelines, word clouds/trees, multiple-variable plots

Dashboards

Definition: Single panel aggregating multiple visualizations / indicators
Good dashboard requirements:
- Provide context
- Proper summarization + precision balance
- Select meaningful KPIs
- Fair representation (avoid bias)
- Correct chart types per data & story
- Well-designed media; highlight critical data
- Layout guidelines:
  01 Group similar data (clustering)
  02 Keep screen uncluttered (minimalism)
  03 Entire dashboard fits one screen
  04 Allow user flexibility (filters, drill-downs)
Varieties: graph, traffic-light/problem light, textual summaries

Infographics

Hybrid of graphs/charts + limited text to tell a story
Components:
- Catchy headline (short, meaningful)
- Visual mix: icons, cartoons, minimal photos
- Concise summary text, contact info, call-to-action
Tools: Piktochart, Canva

Website Design Guidelines

Use professional tools; study good & bad sites
Resources: $\text{W3Schools}$ , UI pattern libraries, CSS Zen Garden
Design artifacts:
- Storyboards → show navigation flow & screen sequence
- Wireframes → grayscale layout skeletons (boxes w/ X for images) for design, navigation & interface planning
- Mockups → pixel-perfect color renderings (often using drag-&-drop templates)
Critical elements:
- Structure (goals, site map)
- Content (metaphors, FAQs, CMS usage)
- Text (titles, first-sentence keywords, clear writing)
- Graphics (JPEG/GIF/PNG; small size; ALT text for accessibility)
- Presentation style (home page, consistent CSS, minimal graphics, avoid overuse of animation/sound)
- Navigation (3-click rule, nav bar, constant home link)
- Promotion (SEO metatags, bookmarks, submissions)

Content Management Systems (CMS)

Pros: rapid site build, less coding
Cons: limited customization, vendor dependency

Web 2.0 & Social Media Integration

Technologies: blogs, wikis, social network links, tagging/bookmarking
Corporate reasons: branding, feedback, community, internal knowledge sharing
Internal social media benefits: build relationships, innovate, locate resources, nurture culture
Analyst responsibilities:
1. Balance corporate vs stakeholder goals
2. Act as customer voice
3. Design visual pages effectively
4. Update Web 2.0 tools frequently
5. Integrate with branding
Social media design guidelines:
1. Focus on goal
2. Consistent visual identity
3. Appealing flow
4. Simplify & leverage whitespace
Note: Visual content is $40\times$ more likely to be shared

Designing for Smartphones & Tablets (App Design)

Developer account registration
Choose dev process (prototyping preferred, quick releases)
Innovate/original concept
Pricing model choices:
- Low-cost, premium, freemium, free, promo discounts, ad-supported
Follow output design rules
Design icon (multiple resolutions) – see size table:
- Example: iPhone home-screen icon older size $57\times57$ px; retina $114\times114$ px
Appropriate app name
Support many devices & orientations (re-design for landscape/portrait)
Design output views (repeat for 2nd orientation)
Design logic (structured diagrams)
Create UI around gestures: swipes, pinches, long-press drag, double-tap, etc.
IP protection & marketing (icon, description, changes, screenshots)

Responsive Design

Adapts layout/content to varying screen sizes/devices using flexible grids & media queries

XML & Output Production

XML: Extensible Markup Language – self-describing, human & machine readable metadata wrapper
Output transformation techniques:
- $\text{XSLT}$ (Extensible Style-sheet Language Transformations): select, sort, transform XML into HTML, PDF, etc.
- $\text{CSS}$ styling
- $\text{Ajax}$ : asynchronous JavaScript + XML/JSON for dynamic partial page updates (uses XMLHttpRequest)
XSLT Example snippet shows transformation of <catalog> into HTML table
XML ➔ multiple outputs: desktop, memo, paper, smartphone

Summary Cheat-Sheet

Output = info delivered; forms = hard/soft copy, web, audio
Objectives: right purpose, user fit, quantity, place, time, method
Bias sources: sorting, limits, graphic choice – design to mitigate
Technologies: printers, screens, audio, mobile, electronic
Design artifacts: storyboard → wireframe → mockup → prototype
Special outputs: dashboards, infographics, websites, social media, mobile apps
Standards/tools: $\text{HTML/CSS/JS}$ , CMS, XML, XSLT, Ajax, Responsive Design
Always iterate with users & test across devices for accessibility, clarity, and minimal bias