I’ve been working on a user interface and was searching for examples of User Experience (UX) icons. It got me thinking about the many user interface images the world has adopted and how they work. I’m sure some folks are well aware of the meanings, but I’m just as sure many don’t.
We call them “icons” but they really are a mix of things…
A CLICHÉ for example, has a widely understood meaning. A skull and crossbones, for example, represents a danger to life.
AN ICON is an image that suggests its meaning. For example, an opened padlock represents the state of being unlocked.
A METAPHOR suggests a likeness between two ideas. Example: A half full/half empty glass of water is analogous to one’s attitude about life.
A SIGN is a shorthand device that stands for something else. Example: The @ sign, for example, represents at.
A VISUAL PUN uses one or more symbols to create two or more possible meanings. In this illustration, the sharks’ fins represent the concepts of money and caution.
A SYMBOL is a visible image of something invisible. Example: An hourglass represents time.
The assumption is images are more effective than labels correct? Not necessarily. This piece by Zoltan Gocza from UX Myths makes the case that, among other things, icons need labels…
Myth #13: Icons enhance usability…
Food for thought.
Also, among the many UX icon sources I visited, there were very few that identified the intended use of each image. Here are a couple of sites that include captions…
This page on semantic-ui.com does a good job of defining purpose…
And here’s another, less complete list from Apple…
In my search, I also ran across this very useful collection of UI style guides, some of which I have pointed to in the past…
A UI Style Guides resource from Experience Dynamics…
Finally, here are a few solid sources of icon examples…
From Alexander Kahlkopf and iconmonstr.com…
From Google’s Material Design site…
Thoughts?