University of Illinois at Chicago: Great CIties Urban Data Visualization Lab UIC Home

| Home | GCUDV Home | Mission | Mission | Projects | Projects | Research | Research | People | People

Visual Communication Methods

Visualizing Information: Tips for Organizing & Presenting Information

 

 

Overview of Primary contents of this document

Determine you audience
Organize by creating a hierarchy of information on the page
Use color carefully and intentionally
Shape leads the eye over the surface
Make comparisons on the same page
Good Examples of Maps in publications

 

 

How you structure your argument is just as important as how you structure your visual materials. Effective communication is to make the greatest possible impact and to persuade your audience to use the material for as long as possible. Every material such as a website, book, magazine, Power Point presentation, email announcement, or essay has several of the primary design elements. These elements are line, type, shape, and texture. How these elements are arranged is the overall structure of the piece. When building a structure, consider balance, contrast, unity, and color. Good design can often be made great by the skillful arrangement of primary design elements within a structure.

 

This paper will lead you through some of the best practice graphic and presentation techniques to logically piece communication materials together to form a strong narrative.
----------------------------------------------------------------------

 

1: Focus first on the intention of your data and information.

Consider the primary design elements: Line, Type, Shape, and Texture existing in an overall structure.

Your intention should be shaped to speak to the appropriate audience. Ask yourself, do my materials need further explanation or are they clear? Are my charts and graphs logical and easy to read? Reviewing the overall quality of your materials first can help you determine what falls outside your intention and which pieces need reinforcement for your audience.

Key elements used to organize information are theme, color, size, meaning, keyword, contrast, size, pattern, detail, average, and variation, to name a few. Information is multivariate, nearly every attempt to explain it demands extensive compromise. Knowing how and when to compromise requires training and experience.

2: Basic elements such as hierarchy, color, and shape can be used to make a big impact.

 

Hierarchy

1. Organize the information according to importance. A simple list consisting of the hierarchical structure will determine where the elements appear on the page.

2. Check to ensure the hierarchy respects the theme. The central theme should run through all the individual pieces.

3. Organize the information, the most important information appears at the top, in bold or large font, and secondary information follows the primary. This is accomplished by layering information; failure to differentiate among layers leads to cluttered and incoherent displays filled with disinformation.

Making & Breaking the Grid

On this website, I decided that users of this page would like to scan the page to suck out the details and read the whole thing later. This is why I highlighted the information in the indentation and gave it more weight and separation. This information also appears at the top of the page as the most important. It visually comes first and stands out in the linear format.

4. Determine the visual impact you want to have on the viewer and the best format for impact. Will the final piece need to fit in a folder, a binder, be mailed, go online or fit in a poster tube? What happens to it after you present it? This can help you determine the structure.

The hierarchy of information is supported by the overall structure. The grid is the fundamental structure used to organize, contain, and arrange information. Be aware, as Tufte explains, the self important grid is ugly and distracting.

"To often epidemics of data-imprisonment and decorative gridding break down when contemporary commercial designers are faced with information. The aggressive visual presence of stylized grids, little boxes surrounding words here and there, and cadenced accents--all so empty of content, irrelevant--becomes the only way you can tell if something has been "designed." At any rate, the self important grid is for the birds..."[1]

Edward Tufte

5. Build a structure where large area background works quietly to allow smaller brighter areas to stand out most vividly.

Avoid patterns, gradients, and textures as backgrounds.


Color

the Color Wheel

Color could make or break your design. Juxtaposed, uncomplimentary colors can cause a distraction, warp a color into appearing to be another color, and cause unwanted busyness. If you are interested in Color Theory, learn how these disturbances are created. Gray is regarded as one of the most important colors and is very helpful to minimize the background. Correct color use can lead to clear results with amazing payoff.

Color is helpful to separate, quantify, and unify information.

Label information using color to differentiate it from the whole such as in navigation systems on web sites, software, and magazine headings. Use color to show measurement in charts and graphs. It is helpful to illustrate in color when it is important to differentiate key elements in a drawing. For example, show different shapes in the same color to suggest different categories of the same quantity. Additionally, color theory helps the designer to create and organize information with visual appeal.


Rules for Color:


· Small blocks of bright color against light gray highlight & italicize information
· Bold, bright shapes promote vibration all over, use them sparingly.
· Use black sparingly
· Yellow is the only color that is light in value & at the same time intense & saturated.
· Limited & Focused color is better than strong rainbow colors
· Pure, bright colors in large quantities are loud, use these colors to highlight information
· On light backgrounds, a varying range of lighter colors will minimize incidental clutter
· Gray and strongly muted colors provide the best background for the overall design.

Suggestion: On a land use map, only use the colors that matter. Background colors such as pastels relieve the eye and clutter. In large areas, glaring rich colors have a disordered confusing effect.

 

Shape

Always be aware of foreground (figure) and background

As an urban planner, you work with a variety of tangent shapes and colors on maps. Plans and maps create movement and vibration on the page and must be controlled to present information without confusion. Labeling without creating awkward gaps, shading and varying line widths, and offsetting shapes can dramatically change the clarity of your data. The fundamental principle of information design is 1 + 1 = 3 or more. This means adding elements creates more elements in the negative space. For instance, when I draw a line, I have the line as foreground and the background. If I draw 2 parallel lines, I have enclosed the background between the lines and created 3 objects over the background. To offset the 1 + 1=3 rule, give enclosed shapes one thick edge. For instance, the street blocks in your map could have all thin sides with one thick side.

Shapes sustain interest. Grouping and repeating shapes with minor alterations is not only a direct way to compare the differences among objects, but it is useful because it allows for direct contrast (as opposed to alternatives on separate pages).

A photograph, illustration or block of shading can provide shape. Choose your photographs wisely; they can be a conceptual tool to lead the viewer's eyes across the page and create visual appeal. Another way to create visual interest is to give a heavier stroke weight to objects in a drawing. Human cognitive processing gives considerable & often decisive weight to contour information.

Shape can be:
· A part of the overall structure
· Line and Contours
· Photographs & Illustrations

Rules for shape:
· Create contrast of foreground from background
· Delineate boundaries
· Communicate quantity
· Create contour to separate elements

 

3: Comparison is the heart of quantitative reasoning

Time helps us to compare and contrast. Change over time could manifest in the narrative, maps, or a literal time line series. Creating timetables is a great way to envision information. Organizing large arrays of data coupled with images and multivariate techniques is the heart of visual communication. You can show change over time with 2 variables by doubling up along the horizontal. Time along the horizontal, multiple growth along the time line, showing the object at a height along the vertical.

Good Examples of Maps in publications

Paying attention to Hierarchy, Color, Shape, and dimension of time, evaluate each of these layouts.

1 | 2 | 3 | 4 | 5

 

[1] Tufte page 64 Envisioning Information

 

This material © UIC Board of Trustees, College of Urban Planning & Public Affairs, GCUDV. This tentative course curriculum has been prepared by Crystal Wilson.

© 2004 - 2005 The Board of Trustees of the University of Illinois

Adobe, the Adobe logo, Acrobat, the Adobe and Adobe Acrobat, and "Better by Adobe" are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Mac is a trademark of Apple Computer, Inc., registered in the United States and other countries. Windows is either a registered trademark or a trademark of Microsoft Corporation in the United States and/or other countries.