Mismatched graphics


I’ve been using a particular bill payment site for over a year, but something has always bothered me about the confirmation screen. I finally figured out the problem: the graphics don’t make sense. In particular, they’re using a diamond-shaped image to indicate a successful payment. But people are trained to associate this with a warning or error message, rather than business as usual.

The takeaway here is pretty obvious. When picking graphics for your site, make sure they match up with what your text is saying. In other words, don’t put an image that is commonly used to indicate something went wrong (like a stop sign or the warning diamond from my example) on a page that says a transaction was successful.

With the web becoming so pervasive in our daily lives, I would argue that the attributes we associate with certain images are the same whether we see them online or offline. A stop sign on a website can be expected to make us pause just like it does when spotted ahead on the roadway. So, if you’re not sure what connotations a particular graphic might have, think about what it would mean if you saw it on a road sign or billboard. And if you still don’t know how to interpret it, perhaps it’s time to pick another graphic.