Everybody Loves Puppies, but The Instructional Potential of This Image is Zero
Careless use of imagery – particularly photographs – is often the difference between a dull “brochure-ware” site and a persuasive information experience. When we redesigned www.dummies.com, we initially populated our design mock-ups with the type of stock photography that professional designers mostly use… only to find that the otherwise attractive imagery added a level of generic-ness that felt downright off-brand. Then we created a style guideline only to use imagery that had true instructional value, whenever possible framed and centered on the action that was being discussed in the content. This applied not only to imagery embedded in the how-to articles, but also the landing page teaser thumbnail photos for the articles and videos. This is a policy the mega-successful book line has had for years, but it wasn’t immediately obvious to us on the web design side. Once we made this change the site felt instantly better. The difference? We thought like an instructional designer.
Interaction designers, graphic designers, and anybody else involved in the ongoing production of commercial websites should pay a lot more attention to instructional principles – even if the site is not overtly instructional. What makes material good for learning also makes it good for other conversion goals – such as explaining products, services, and brand building.
Dummies.com Uses Explanatory Imagery Even in Thumbnails
In fact, why not audit your site’s imagery right now for instructional potential? If you find that most or all of your visuals are falling into the “decorative” category – unless of course it’s fluffy puppies or blondes on the hoods of sports cars (two time-tested exceptions) – then it’s time to make a change. Fortunately, the educational psychologist Richard Mayer has conveniently classified types of imagery in terms of their instructional benefit and effectiveness for learning. The good folks behind the Wiley Visualizing series, which is a textbook line that is highly committed to applying cognitive theories of learning to the design of their products, put together the following summary table, which I’ve adapted with examples that might apply to a typical web designer’s challenge…
Types of Visuals Commonly Used in Instruction
| Category of Visual | Instructional Potential | Examples |
|---|---|---|
| Decorative - visuals used for aesthetic appeal, entertainment, or to stimulate interest. | None |  Caption: America's 5 Dog Friendliest Cities |
| Representational - visuals that portray a single object or piece of information in isolation from related objects or pieces of information. | Minimal to None |  Caption: San Francisco: A Dog-Friendly City |
| Organizational - visuals that display relations, structures or organization among multiple objects or pieces of information. | High |  Caption: America's 5 Dog Friendliest Cities |
| Explanative - visuals that explain how systems, processes, or cause/effect sequences work. | High |  Caption: What Makes A City Dog Friendly? |
Recent Comments