When Words Fail You: The Impact of Images

While much of the information we take in during the course of a day is driven by text (and, indeed, schools are placing more emphasis on their writing programs these days), it's important to also analyze how information can be conveyed through images.  Images can take the form of illustrations, photographs, icons, navigational aids/"wayfinders", symbols, charts, and graphs.  Images can be particularly useful from a usability standpoint, since, if presented and created properly, they can quickly communicate ideas and serve as supplement to, or even replace, words.  The power of images to take the place of words will be my focus for this particular blog post.  Specifically, I will give examples of effective uses of illustrations (both photographs and human-created images) and icons to convey ideas.

Illustrations

Illustrations, whether they're photographs or images created "by hand," can be an integral part of providing instruction.  They are often used to clarify or supplement the text-based directions included in the instructions.  Many "how-to" sites exist on the Web, but one that makes particularly effective use of photographic illustrations is Instructables.  According to the "About This Site" page, "Instructables is a web-based documentation platform where passionate people share what they do and how they do it, and learn from and collaborate with others."  As the screenshot below suggests, you can find instructions on how to create anything from Halloween costumes to computers.

(Happy Halloween, btw!  What are you going as?)

Here is an example of one of the instructions found on in the site.  It teaches you how to use a brown paper bag as wrapping paper.  Note the use of multiple images for this single step.

(Hooray for saving money!)

Illustrations can also be used in other contexts, and even if they serve as decoration, they can still be informative.  Consider this example, found on the "Customization" page for Mozilla Firefox.

(My computer wishes it could look like that.)

Note how a complete list of Firefox themes and extensions is not offered on this page.  That would probably be an overwhelming amount of information for the casual browser of the page.  Rather, the illustration of the computer give the viewer an idea of the kinds of features can can add to Firefox, while also serving as decoration for this particular page.  For example, the remote control coming out of the computer suggests that you can add multimedia functionality to Firefox, and the bullhorn is meant to convey the idea that you can enhance Firefox so that you can use it to receive important updates and alerts from your favorite sites.

Icons

Icons, like photographs and artistic illustrations, can be powerful communication tools.  Many designers have realized this, and, as a result, icons are found in just about every medium, including catalogs, websites, blogs (like this one!), computer desktops, and mobile phones.  If well designed with a target audience in mind, they can be particularly useful navigation aids.  Because they serve people from various cultural backgrounds, hospitals are one type of location that relies on icons to help patients and visitors make their way through often-confusing building layouts.

The Robert Wood Johnson Foundation sponsored studies that resulted in the publication of a guidebook "designed for health care facilities and graphic designers interested in learning about and using newly developed health care symbols for wayfinding programs," which is also available online.  As mentioned in the document's executive summary, "Universal symbols can be flexible and simple to implement, yet

can be integrated into complex and far reaching sign, print, and internet programs."

Here are some images from the guidebook (page 1:6).  Can you guess what they stand for?

(OK: the last one's probably pretty easy.)

Here are the answers (from left to right):

-- Top Row: Surgery, Billing Department, Intensive Care Unit, Family Practice Clinic, Social Services

-- Second Row: Cardiology, Radiology, OB Clinic, Immunizations, Waiting Room

-- Third Row: Chapel, Ambulance Entrance, Pharmacy, Laboratory, Medical Records

-- Bottom Row: Pediatrics, Emergency

These 17 icons were "found to be 'most meaningful' by at least 88% of the tested multilingual population group"  (RJW 1:7).  During this same testing session, "participants walked one foot per second faster to find
their destination when guided by symbols than when guided by multilingual word signs" (RWJ 1:7).

I would be interested in hearing about any experiences you may have with images, be they positive or negative.  Did a particular image help you in a situation when you need a quick answer?  Or did an image confuse or mislead you at some point?