Do your graphics say the wrong thing?

If a picture really is worth a thousand words, which words? Graphics are usually the best tool we've got for sending a message--instructions, sign, marketing, entertainment, interface, etc.-- but what are we doing to make sure the person viewing the image sees the message we intended?

The picture above is a sign posted at a local trailhead. What does it mean? (Getting it wrong, by the way, means a $50 fine.) It's supposed to mean, "Each human can have no more than two dogs under their control." (this is a leash-optional trail) And while most people could--after cocking their head to the side--figure it out, I have to laugh about what else this sign says like:

"You can have a German Shepard, and an Old English Sheepdog, but SPRINGER SPANIELS ARE STRICTLY PROHIBITED!"

On a trail it's no big deal if you get it wrong or need to take a few extra moments to study it (or read the accompanying text, if there is some). But... imagine situations where it's a lot more important--where the consequences of misinterpretation are serious, and/or time-to-getting-it is scarce. Or imagine a situation where the person viewing the graphic is simultaneously bombarded with so much info that even the smallest bit of cognitive overhead means trouble...

So, what went wrong? How can we make it better? [UPDATE: for this sign, text really WOULD work fine. But the idea here is to practice on something simple.] The exercise is this: assume that for some reason you CANNOT use words, and have to convey the message that "a person can have no more than two dogs under voice/sight control (i.e. off-leash). Here's one idea I had for and a few simple suggestions. I'm hoping the information and/or graphic designers will jump in to improve on or extend what I've done...

RECOMMENDATION:
Use only one breed of dog in the graphic. Or better yet, use an abstract representation of a dog rather than a specific dog type.

Having three different dogs is misleading--it makes it appear that the breed of dog matters, when the sign is about the quantity of dogs per person. Having different dogs suggests that there's something relevant about dog breeds (which in some contexts is true--some of the most aggressive breeds are banned from parts of Colorado).

GENERAL PRINCIPLE:
Differences in an image are interpreted as meaningful information. If two things represent the same idea, make them the visually similar. Conversely, if two things represent different ideas, make them different!

Examples:

User interface: if two buttons on a website are blue with round corners, they'll be interpreted as having some common function. If one of them is a navigation button and the other is a transaction button, there's a problem.

API design: if two methods in two related classes have a similar naming scheme, they'll be interpreted as performing a similar action. One of the worst examples I can think of in J2EE is ejbCreate() method--which means "create a new object" in Session beans, but for Entity beans, "insert a new record in the database and, oh yeah, pull an existing object from the pool..." It would have been easier to remember what ejbCreate() does for entity beans if they'd given it a completely different name... even an arbitrary name (although ejbInsert() might have been nice). Having two different behaviors with the same name means cognitive load because your brain wants to find the pattern between the two matching names...

In the dog sign, using three different dog pictures/breeds introduces cognitive noise that the viewer's brain will try to process as a meaningful distinction.

---

RECOMMENDATION:
Include a person in the graphic (especially an abstract representation of a person).

The trailhead rule is about the relationship between dogs and people. It's not about the quantity of dogs--it's that each person cannot have more than two dogs.

GENERAL PRINCIPLE:
Include the context! Show all relevant relationships, and if necessary, draw attention to the key concept.

Example:

In code samples in our book, rather than using code snippets, we reproduce the code in which that snippet matters, but draw attention to the key pieces by screening back the for-context-only pieces and bolding/highlighting the new or relevant piece.

---

RECOMMENDATION:
The sign should have an "X" through three dogs, not just one, and show that one dog is OK and two dogs are OK (per person).

GENERAL PRINCIPLE:
Think about what a sign/graphic is really supposed to say--if spoken--and try to "say" that same thing visually, in the least confusing way. In this case, the sign is supposed to say:

* A single individual can have one dog, or two dogs, but not three dogs.

So, the sign should show a picture of a person with one dog as OK, a person with two dogs as OK, and a person with three dogs as NOT OK.

---

RECOMMENDATION:
The numbers on the side, "1, 2, 3" should go away (or be placed to the right of the dog images as reinforcement). And if the numbers are used, the "3" should ALSO have an "X" (or NO symbol) through it! In the current sign, the number "3" is bigger and bolder than the other numbers (what's up with THAT? And why is the "2" bigger than the "1"? There's no difference between one and two dogs...), but there's nothing to indicate that "3" is NOT OK.

GENERAL PRINCIPLE:
Do not "say" something that isn't true. Whatever the brain sees first is likely to stick, so any attempt to qualify or make exceptions or explain what's on the sign in a way that conflicts with the image is a problem.

Examples:

A shop window that lists hours of operation, then lists the exception underneath:

OPEN 7 AM to 7 PM
(Sundays Noon to 5)

In our books, we try not to show code or a process that's wrong without putting a big ol' warning over the top of it or right next to it. We want the learner's brain to see the code and the big flashing lights at the same time, processing them as one image--the image we want to stick. We don't want the wrong or untrue thing to take hold in their brain, and trying to undo it with a later exception or caveat or warning doesn't always work.

---

TWO MORE PRINCIPLES (not related to the dog sign):

COLOR
Think about the implicit information conveyed by color, and exploit that (or at least don't violate it). For example, look at the following two images--one with the blue rectangle on top, and the other with the brown rectangle on top.

---

Does one of them feel a little...off? Even if you don't consciously notice it, your brain feels the difference. We're more used to seeing the blue sky above the brown earth, and the brain perceives cool, less saturated colors as "higher" while perceiving warmer, more saturated colors as "lower".

Trying to convey numeric or spatial relationships using color might cause cognitive dissonance if you represent a "higher" thing using brown, and a "lower" thing using light blue. On the other hand, you can use this hard-wired color perception to add a second layer of info to give the viewer one more chance to "get it" the way you meant it. Because of color blindness, or problems with different displays, etc., we try to avoid using color as the sole info channel, but color makes a nice way to add another channel that viewers will often feel rather than consciously think.

CLARITY TRUMPS STYLE:
Although the best designers can be both clear and stylish, instructors don't always have that luxury. My favorite worst-case example comes from (where else) Sun, where the graphics/editorial department "prettied up" some of the graphics from one of the technical course books. The problem was... the graphics they "improved" were actually UML diagrams, where just about everything in the image means something.

For example, in UML the difference between a closed and open triangle is HUGE! But the non-technical designers thought the open triangles looked unattractive and decided to fill them in. They also took the squares and rounded the corners and, well, if you're a programmer, you get the idea of just how bad this was. The "new and improved" graphics now conveyed something completely different (or nothing at all) than the originals. But I'll be damned if they didn't look nicer on the page... ; )

[Disclaimer--I'm guilty of some really bad graphics myself, both in the blog and my books, so I don't get to be all graphicker-than-thou] What about you? Any bad signs or graphics you can point to? Any before-and-afters? Cheers!

[I'm back but only for two more days, then I leave again for two weeks. Thanks to everyone for continuing the conversation.]