93% of communication is non-verbal. The verbal content of any exchange accounts for only 7% of the experience. If you consider that text is to online interactions what words are to conversation, then the other elements of your design are accounting for the bulk of user experience. Visual elements of your design serve three important purposes: Provide Guidance – show people how to navigate Give meaning or context to your words Create a holistic experience by engaging both the right and left hemispheres of the brain
The visual elements of your design help people to navigate through your content. One common mistake in online design is the Obstructed View – when doing eye tracking research we have seen a number of subjects get incredibly frustrated over pop up windows. They click a link which opens a new window that now covers their original screen and the instruction to close window is either missing or lacks enough saliency to be easily found. Done properly pop-up windows are nice because they allow people to explore while maintaining their orientation in the application. Done poorly pop-up windows can create confusion and result in a frustrating user experience.
Another challenge in designing online interaction is unclear meaning. Designers tend to overestimate the clarity of their designs. When you design something much of the context of that design is maintained in your head. This sign this sign makes perfect sense when you assume that someone who is blind is likely to be accompanied by a sighted companion or driver. How many aspects of your design require prior knowledge in order to make sense? The only way to fix these types of error is with user testing.
Helpful guidance doesn’t just point the way, it gives clear warning signs about the potential dangers ahead. It never assumes anything about the user.
Visual elements of design
Charts can be very helpful for summarizing certain types of information. However, charts with a lot of information crammed into them can dilute important points in your discussion. By including all of the data points in this chart, the salience (quality of an item standing out relative to its neighbor) of the final data point is lessened.
This chart contains the same information as the previous slide, but with less noise. Now the point that the presenter wanted to make with the previous chart (the rate of obesity in the US) is much more salient. When using graphics with your text content the graphic should decrease the amount of noise in the presentation, not add to it.
Graphics should help to make certain pieces of information stick. While charts are nice for portraying numbers there are other options. The text on this slide was excerpted from a much longer article. This sentence was pulled out to emphasize the two numbers in the sentence. In this case we see that opium production is down and the area under poppy cultivation is on the decline.
This slide once again illustrates how images can be used to help make information stick. The image is not intended to stand on its own, but to make important pieces of information stand out.
This is a particularly bad example of text based instructions. However, it will help to illustrate the point that pictures serve as interpreters. Without looking at the next slide try to map out these instructions.
How did you do? If you compare this map to the instructions on the previous slide, you will find that the instructions are correct. They are not, however, easy to interpret. Being from the US, I would have never figured out what to do at the round about.
Often in the world of training and education, people forget that it is just as important to create interest as it is to impart information
The brain has two halves or hemispheres. The right half of the brain is the creative, emotional side. The left half of the brain is the rational, logical side of the brain. In order to learn more efficiently, both hemispheres need to be stimulated. The visual content of your design serves the purpose of stimulating and engaging the right hemisphere. The principles on the following slides are based on the book “Made to Stick” by Chip and Dan Heath. The ideas for the slide designs were shamelessly stolen from Garr Reynolds’ book “PresentationZen” Both of these books are highly recommended.
Simple. If everything is important then nothing is important. If everything is priority then nothing is priority. You must be ruthless in your efforts to simplify — not dumb down — your message to its absolute core. We’re not talking about shallow sound bites here. Every idea — if you work hard enough — can be reduced to it bare essential meaning. For your presentation, what’s the key point? What’s the core? Why does (should) it matter? For your visuals the mantra is: Maximum effect, minimum means
Unexpectedness. You can get people’s interest by violating their expectations. Surprise people. Surprise will get their interest. But to sustain their interest you have to stimulate their curiosity. The best way to do that is to pose questions or open up holes in people’s knowledge and then fill those holes, say the authors. Make the audience aware that they have a gap in their knowledge and then fill that gap with the answers to the puzzle (or guide them to the answers). Take people on a journey of discovery.
Concrete. Use natural speech and give real examples with real things, not abstractions. Speak of concrete images not of vague notions. Proverbs are good, say the authors, at reducing abstract concepts to concrete, simple, but powerful (and memorable) language. For example, here in Japanwe say “ii seki ni cho” or “kill two birds with one stone.” Easier than saying something like “…let’s work toward maximizing our productivity by increasing efficiency across departments,” etc. And the phrase “…go to the moon and back” by JFK (and Ralph Kramden before him)? That’s concrete. You can visualize that.
Credible. If you are famous in your field you may have built-in credibility (but even that doesn’t go as far as it used to). Most of us, however, do not have that kind of credibility so we reach for numbers and cold hard data to support our claims as market leaders and so on. Statistics, say the Heath brothers, are not inherently helpful. What’s important is the context and the meaning of those statistics. Put it in terms people can visualize. “66 grams of fat” or “the equivalent of three Big Macs”? And if you showed a photo of the burgers, wouldn’t that stick? There are many ways to establish credibility, a quote from a client or the press may help, for example. But a long-winded account of your company’s history won’t help.
Emotional. People are emotional beings. It is not enough to take people through a laundry list of talking points and information on your slides, you must make them feel something. There are a million ways to help people feel something about your content. Images, of course, are one way to have audiences not only understand your point better but also to feel and to have a more visceral and emotional connection to your idea. Explaining the devastation of the Katrina hurricane and flood in the US, for example, could be done with bulletpoints, data, and talking points, but images of the aftermath and the pictures of the human suffering that occurred told the story in ways words alone never could. Just the words “Hurricane Katrina” conjure up vivid images in your mind today no doubt. We make emotional connections with people not abstractions. When possible put your ideas in human terms. “90 grams of fat” may seem concrete to you, but for others it's an abstraction. A picture (or verbal description) of an enormous plate of greasy French fries stacked high, a double cheese burger (extra cheese), and a large chocolate shake (extra whip cream) is visceral and sticky.
Stories. We tell stories all day long. It’s how humans have always communicated. We tell stories with our words and even with our art. We express ourselves through the stories we share. We teach, we learn, and we grow through stories. Why is it that when the majority of smart, talented people have the chance to present we usually get streams of information rather than story from them? Great ideas and great presentations have an element of story to them. But you see storytelling everywhere in the workplace. In Japan, for example, it’s a custom for a senior worker (sempai) to mentor a younger worker (kohai) on various issues concerning the company history and culture, and of course on how to do the job. The sempai does much of his informal teaching trough storytelling, though nobody calls it that. But that’s what it is. Once a younger worker hears the “story” of what happened to the poor guy who didn’t wear his hardhat on the factory floor one day he never forgets the lesson (and he never forgets to wear his hardhat). Stories get our attention and are easier to remember than lists of rules.
The visual components of your design are not there just to be pretty. They serve a purpose. It is important to understand the value of the component to the overall purpose. These elements support your content and must be clear, simple, and salient. For further reading: “ Made to Stick ” by Chip and Dan Heath . “ PresentationZen ” by Garr Reynolds