Half Day Tutorial Details

By Day - Selected
By Presenter
By Track
View My Agenda

Intuitive images

Tips and techniques for creating and evaluating graphics for international audiences

Learn tips and techniques for maximizing the usability of graphics in your interfaces and publications. From screenshots to flowcharts, icons to instructional diagrams, discover the methods and conventions that performed well in our usability research, and those that failed miserably.

Half Day Tutorial by Patrick Hofmann (Google)
Advanced Practitioners (AP)
  • 6:30pm to 9:30pm on Monday, May 24, 2010
  • 6:30pm to 9:30pm on Monday, May 24, 2010

About the Half Day Tutorial

In our end-user manuals, web pages, portable digital devices, and interface designs, our pictures always seem to play second fiddle to our words. We find them too hard to illustrate; we encounter too many resolution and incompatibility issues, and we can never seem to make them attractive enough, meaningful enough, and usable enough. In this tutorial, we will get very graphic (ha ha) with these challenges. We will spend a fun-filled session sharing common problems, evaluating your existing design challenges, visualizing different types of information, and working on some neat hands-on exercises. In the end, the tutorial’s goal is to help both information developers and usability professionals evaluate and boost the visual appeal and usability of the information that they produce, and to empower them with simple tips and tricks to become visually and graphically savvy. In the past, this presentation has attracted more managers and information specialists than illustrators and graphic designers, because it reveals that the former group is clearly vital to the development of usable visual information, and offers solutions that benefit both ‘textual’ designers and ‘visual’ designers alike. The tutorial covers the following topics: Part 1: Surveying the problems with pictures: Let's share and address our specific problems with the visuals, pictures, images, and graphics files that we place in our information. Let's identify what problems are common, what has led to them, and how can we solve them. Furthermore, let’s highlight the elements of design theory that can address such problems, by improving contrast, repetition, alignment, and proximity. Part 2: Templating your pictures: Just like building style sheets and standards for our textual information, we should build standard sizes and standard attributes for our visuals. Whether our images include screenshots, flowcharts, maps, illustrations, or conceptual diagrams, we can create templates that standardize and professionalize our images to make them consistent throughout our information. In this section, we will discuss several scenarios and types of pictures, and perform a templating exercise that addresses the attributes of graphic design that affect usability: including typography, layout, and line weights. Part 3: Showing what you mean: Even with the most effectively applied picture templates, our pictures are not effective if we don't convey the real message of the picture. We will discuss:  What is the picture trying to say?  How can we visualize it to better address the needs of our audience?  What strategies can we use to best apply "a focus of attention" in our picture? Just like the words in our information, we must craft ways of amplifying the meaning in our pictures while keeping the message brief and succinct. In this section, we will go through a series of visual improvement exercises, to identify usability problems with different visuals and how we can solve them. Part 4: Illustrating fundamental pieces: What if the most appropriate visual to use is an illustration of an object, and you don't have a technical illustrator on your team? Even if you have very primitive drawing tools (like the Drawing palette in Microsoft Word and PowerPoint), you have the power to draw a technical illustration. By breaking down complex objects into the most simple, fundamental shapes, we can illustrate and recycle pieces of an image to create highly polished and usable visual images. This highly engaging and motivating section is an audience favorite: it gets the audience to collectively illustrate a digital camera using the speaker’s laptop, without getting too detailed on any specific tool. By doing so, this section enables the audience to know the general makeup of many applications, including Adobe Illustrator and Photoshop, CorelDraw and PhotoPaint, and the drawing and painting tools embedded in Windows applications like Word and PowerPoint. Part 5: Improving the usability of screenshots: How can we take the principles learned earlier and apply them to our screenshots? As the most frequently used visual in our documents, what strategies can we use to improve the scan-ability and read-ability of our screenshots, and make them as easy to understand as possible? What tools can we use to generate and modify them? In this section, we will work through several different scenarios in a screenshot usability exercise, which we will evaluate together. Part 6: Improving the usability of flowcharts: Often considered more daunting than screenshots, flowcharts can often contain too much elements, too many messages, and too many reading directions. In this section, we will discuss:  What can we do to improve our flowcharts or diagrammatic maps?  How do best create "a focus of attention"?  How do we best de-construct a flowchart before re-constructing it?  How can we make it as uni-directional and symmetrical as possible? What tools can we use to create them most effectively? This section contains a very challenging and memorable flowchart exercise, which we will evaluate together.