December Workshop Review: Intuitive Images

by Mel Haughton, LSC Immediate Past President

On December 7, 2007, Visual Interaction Designer Patrick Hofmann presented an all-day workshop for LSC titled Intuitive images: creating and evaluating usable graphics for international audiences.

We started our morning with a visualization exercise. How do you explain how to use a toilet to a community who has never used a toilet before? Do you use the human figure? Do you show different ways of performing the task? Do you need to consider the user’s past experiences?

After several minutes of intense drawing and giggling, we came to the conclusion that, more often than not, we don’t need to include the human figure in our instructions. Also, we should always show the simplest, most succinct way of doing a task. And ALWAYS consider how users are going to perform the task before you start writing instructions or sketching graphics.

When you need to visualize something—create mental images of instructions before you write them—think Origin, Action, and Result (OAR) or Intro, Cause, and Effect (ICE). Think first about why you are writing about this topic and introduce it (Origin or Intro). Then, think about what you have to do next (Action or Cause) and what happens as a consequence (Result or Effect). Always conceptualize steps at a higher level, with less detail, and provide information in small chunks.

The rest of this article presents the main points I took from Patrick’s presentation.

Keep It Simple Stupid! (KISS)

Only show what is necessary for the user to perform a task. For example, don’t show all the details behind a VCR if all you’re trying to show is one little connector. Visualize the instruction—not the objects in their true form.

Keep information to a minimum. Create 2” by 2” squares for each step and enter either handwritten information or text in 10 pt Arial. If the text doesn’t fit in the squares, you have too much text and you KNOW to cut it down.

Style Sheets

Determine the style of primary, secondary, and annotation text. It’s hard to come up with standardized text, but if you think of it beforehand, you will save time.

Besides building style sheets for your text, you also need to establish illustration style sheets and build graphics of standard sizes. Even lines should have consistent weight. To ensure consistency, draw or render your pictures at the size that they’e going to take on the page.

Tips for Using Screenshots

Here are some basic tips for screenshots:

• If you have big screenshots, use a legend instead of using callouts.
• If you use colors for legends, stick with different tones for light/dark contrast.
• If you have light screenshots, readers look for darker items.
• If you have dark screenshots, readers look for lighter items.

General Tips for Graphics

The focus of attention should be the heaviest part of your illustration. Patrick reminded us that exaggeration can be a good friend. He said that different sizes make people pay attention and notice something on the screen. Make one graphic bigger than the other to get people’s attention and highlight the focus.

• Differentiate between icons and photos.
• Use different shades/tones of colors.
• Reduce proximity of eye movement.
• Simplify your message so you have less to draw.

Tips for Creating Flowcharts

When creating flowcharts:

• Create vertical flowcharts most of the time.
• Use horizontal flowcharts only for historical timelines.
• Make boxes and lines consistent.
• Create breaks or stopping points that are clearly labeled, and make the tree trunk bold.

Good Resources

Patrick shared a list of resources with us. We truly thank Patrick for giving us an excellent workshop and spending his day with us!

1. Horton, W. “Illustrating Computer Documentation: The Art of Presenting Information Graphically on Paper and Online.” (ISBN 978-0471538455)

2. Horton, W. “The Icon Book: Visual Symbols for Computer Systems and Documentation.” (ISBN 978-0471599005)

3. Dreyfuss, H. “Symbol Sourcebook: An Authoritative Guide to International Graphic Symbols.” (ISBN 978-0471288725)

4. Modley, R., Myers, W.R., and Comer, D.G. “Handbook of Pictorial Symbols.” (ISBN 978-0486233574)

5. Evany, M. “World Without Words.” (ISBN 978-1856693196)

6. Mullet, K., and Sano, M. “Designing Visual Interfaces: Communication Oriented Techniques.” (ISBN 978-0133033892)

7. Krug, S. “Don’t Make Me Think! A Common Sense Approach to Web Usability.” (ISBN 978‑0321344755)

8. McCloud, S. “Understanding Comics: The Invisible Art.” (ISBN 978-1563895579)

9. Arts & Letters

10. Open Source Initiative