McGraw-Hill/Irwin Copyright © 2009 by The McGraw-Hill Companies, All Rights Reserved.

Designing Documents, Data Displays, and Visuals Chapter 6 Designing Documents, Data Displays, and Visuals Design Importance Designs & Conventions Levels of Design Page Design Guidelines Using Visuals Visual Design Guidelines Integrating Visuals Designing Brochures Designing Web pages Usability Testing

Why Design Matters Saves time and money Reduces legal problems Builds goodwill Attractive pages look friendly, easy to read Grouping ideas shows structure

Design: Part of Writing Think about design at each step As you plan, think about audience Skilled or busy? Read straight through or skip around? As you write, use lists, headings. Use visuals to convey numerical data clearly Get feedback from your audience As you revise, check the design guidelines that follow

Design & Conventions Vary widely by audience, geographic area, industry, or department Change over time Violating is risky Presents incorrect interpretations Signals author is unreliable or unknowledgeable

Levels of Design Intra—individual letters and words Inter—blocks of text Extra—graphics that go with the text Supra—entire document

Page Design Guidelines Use white space Use headings Limit words in all capital letters Use no more than two fonts per document

Page Design Guidelines, continued… Justify margins selectively Put key items at top left or bottom right Use a grid for visual unity Use highlighting, decorative devices, and color in moderation

Use White Space White Space—empty space on the page Makes message easier to read To create white space, use Headings Mix of paragraph lengths Lists of parallel items (same form) Bullets or numbers when order is exact XXXXX XXXXXXXXXXXXXXXX

Use Headings Headings—words, phrases, or short sentences Group points; divide document Show organization Help reader; save reader’s time Make page look interesting To create headings Make each specific Keep headings parallel Make sure they cover material until next heading

Limit Words in All Capital Letters Words in all capitals Lose their unique shapes Have same rectangular shape Lack ascenders and descenders Causes reader to slow down Causes more reading errors people PEOPLE

Use No More Than Two Fonts Fonts—unified styles of type Serif font – letters have feet Easy to read; used for paragraphs Ex: New Courier, Times Roman Sans serif font – letters lack feet Harder to read; used for headings, tables Ex: Arial, Tahoma, Univers

Use No More Than Two Fonts, continued… Most documents use just one font Create emphasis by using Bold Italics Varied sizes Font size 12-point ideal for most business documents Headings may be larger

Justify Margins Selectively XXXXX XXXXXXXXXXXX Full justification— text even at left and right margin Want formal look Want to use fewest pages Ragged right margin— text even on left, uneven on right Want informal look Use very short lines Want to revise selected pages XXXXX XXXXXXXXXXXX XXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXX

Put Key Items at Top Left or Bottom Right Reader’s eye moves in Z pattern Starts at upper left corner of page Reads to the right and down Quadrants in order of importance Top left Bottom right Bottom left Top right 1 2

Use a Grid for Visual Unity Grid—2 or 3 imaginary columns on page; may be subdivided All elements lined up in columns Creates pleasing symmetry Unifies long documents

Use Decorative Devices in Moderation Use decorative devices sparingly Add interest/emphasis with dingbats, clip art      Use color for main headings, not details In North America, red usually means danger

Every visual should tell a story Use Visuals To present ideas completely To find / show relationships To make points vivid To emphasize material To present material concisely, with less repetition Every visual should tell a story

Visual Design Guidelines Check quality of data Determine story you want to tell Choose visual that fits the story Follow conventions for designing visuals Use color and decoration with restraint Be sure that visual is accurate, ethical

1. Check Quality of Data Check data comes from reliable source Check you have data for all factors you should consider Use data based on assumptions and definitions in careful titles Do not use visuals of unreliable data

2. Determine Story You Want to Tell Good stories may Support a hunch you have Surprise or challenge knowledge Show unexpected trends or changes Have commercial or social significance Provide information needed for action Be relevant to audience

2. Determine Story You Want to Tell To find stories Focus on a topic Simplify the data on that topic and convert number to simple units Look for relationships and changes Process the data to find more stories

3. Choose the Right Visual for the Story Use table when reader needs exact values Use pie chart to show parts of a whole

3. Choose the Right Visual for the Story Use bar chart to compare items, show relationships Use paired charts to tell complex stories

3. Choose the Right Visual for the Story Uses line charts to Compare items over time Show frequency or distribution Show correlations

3. Choose the Right Visual for the Story Use photographs to Create a sense of authenticity Show item in use Use drawings to Show dimensions Emphasize detail

3. Choose the Right Visual for the Story Use maps to emphasize location

3. Choose the Right Visual for the Story Use Gantt charts to show timelines Determine what levels of training, education and communication will be necessary for implementing the option Select most feasible option based on criteria 2 3 Develop plan for assessing option implementation 4 Determine criteria for exploring each option 1 Final Presentation Week 9/10 9/24 9/30 10/7 10/14 9/17 Interim Meeting bi-weekly status calls Develop an implementation plan Determine resources and responsibilities are necessary to complete tasks 5 Determine critical path to estimate time required to complete all tasks 7 6 Kick-off Meeting

! ! 3. Choose the Right Visual for the Story Perspective makes graphs hard to read ! !

4. Follow Conventions for Designing Visuals Six Parts of Every Visual Title that tells story visual shows Clear indication of what data are Clearly labeled units Labels or legends identifying axes, colors, symbols, etc. Source of data used to create visual Source of visual if not your work

5. Use Color & Decoration w/Restraint Audiences interpret color based on contexts Color connotations vary among cultures and professions Red = go in China; stop in U.S. Blue = masculinity in U.S.; criminality in France; strength/fertility in Egypt Use minimum shading and lines For black-and-white graphs, use shades of gray

6. Be Sure Visual is Accurate, Ethical Make sure audience does not have to study visual to learn main point Distinguish between actual and estimated or projected values Include the context of data Avoid perspective and 3-D graphs Avoid combining with multiple scales Use images that are bias-free

Integrating Visuals into Your Text Refer to every visual in your text Refer to the table or figure number, not the title Ex: Table 10 shows a detailed comparison. . . Ex: Data in Figure 6 reveals a marked trend of. . . Put visual as soon after reference as space and page design permit Ex: As Figure 3 shows (page 10), . . . Ex: (See Table 2 on page 14.)

Integrating Visuals into Your Text, continued... Summarize main point of visual before the visual itself Amount of discussion depends on audience, complexity of visual, and importance of point After visual, evaluate the data, discuss its implications Weak: Listed below are the results. Better: As Figure 4 shows, sales doubled in the last decade.

Designing Brochures Determine your objectives Use this process to create effective brochures Determine your objectives Identify your target audiences Identify central selling point Choose image you want to project Identify objections; brainstorm ways to deal with them

Designing Brochures, continued… Draft text to see how much space it takes Select visuals to accompany text Experiment with different papers and layouts Make every choice a conscious one Color – Font – Layout – Paper Polish prose and graphics

Brochure Design Principles Put central selling point on cover Use a visual that tells a story Use grid to align elements Repeat graphics; use contrasting sizes, shapes Use color effectively

Brochure Design Principles, continued… Make text look appealing Use no more than two fonts Avoid italic type and underlining Use small tab indents Insert plenty of white space Use ragged right margin Don’t put vital points on back of reply coupon

Designing Web Pages: Text Help surfing reader learn about Web page sponsor Offer contents list, link to each part Put most interesting, useful points at top of first screen Make clear what readers will get if they click a link

Designing Web Pages: Visuals Use white or light background Keep graphics small Provide visual variety Unify pages; show sponsor on each Include on every page-- Link to home page Name and e-mail address of webmaster Date page was last revised

Designing Web Pages: Visuals, continued… Use little animation; let readers control its use If page includes sound, put off button where users can see it at once Visit Xenogene, a Web design company. Thumbnails show sample Web page designs

Designing Web Pages Common Web page design mistakes Text audiences cannot read Content that doesn’t answers questions Difficult navigation and search tools Complex and lengthy forms Bugs, typos, or corrupted data Outdated content

Usability Tests Watch someone use document to do a task Ask reader to think aloud during task Interrupt at key points to find out what reader thinks Ask reader to describe thought process afterwards Ask reader to put + and - signs in margins to show likes and dislikes