On Icons…
--
A few thoughts on an important UI element.
As an art teacher and an aspiring UX Designer I become fascinated when the two disciplines overlap. Today I’ll mention pragmatic definitions of icons, show a few examples, and share some uses of icons throughout art history.
So what is an icon?
It’s a simple graphic symbol or sign to represent something.
Charles Sanders Peirce, was the founder of what we know as pragmatism-the study of how we see the world on a practical level. He theorized that there are three modes of signs or signifiers: symbolic, icon, and index. In his blog a web designer, Steven Bradley summarizes this as:
- “An Icon has a physical resemblance to the signified, the thing being represented. A photograph is a good example as it certainly resembles whatever it depicts.
- An Index shows evidence of what’s being represented. A good example is using an image of smoke to indicate fire.
- A Symbol has no resemblance between the signifier and the signified. The connection between them must be culturally learned. Numbers and alphabets are good examples. There’s nothing inherent in the number 9 to indicate what it represents. It must be culturally learned. “
source
That being said: icons are signs that guide us with simple pictures that may or may not represent the real thing. They help us understand meaning using a simple picture.
I searched around my house to seek some real life examples of various icons. I collected a few and drew them. Let’s take a closer look at their style, their application, and what they represent.
This is a close up of an icon found on a glue stick. As an art teacher I need this icon on all my art supplies or I tend not to use them. This is a seal that indicates that the material you are using is non-toxic. So it’s safe for kids to experiment with and yes all the rumors are true there is always that one kid that loves eating paste. :) This is a symbolic sign because it doesn’t make any resemblance to anything that is non-toxic. It includes a lot of text enshrined in a circular outline. Inside are serif letters AP that stand for “Approved Product” and the text that surrounds the circle says “Art and Creative Materials Institute Certified” the organization that certifies if art supplies and materials are safe to use. This is an icon whose meaning is made clear by use of text.
Next, is an icon on my sunscreen bottle that indicates that the product is cruelty free and has not been tested on animals in order to be made. This one varies on different products, most commonly it’s a symbol of a bunny rabbit. I knew what it was supposed to mean even though it’s an outline of a monkey due to the text. The icon itself is really similar to the last one I showed you. It’s circular text is enclosed in an outline that helps label the icon “Cruelty Free” twice to fill up the space. I find the picture fascinating because of the use of negative space once the boundaries of the circle are passed by the monkey figure outline. Also interesting how the dot bullet point is above and below the monkey’s tail and hand. Since it doesn’t really resemble what being cruelty free looks like, it is a an index because it shows evidence of what is represented, a monkey that looks like he is doing okay, the results of no cruelty being used.
Here is another icon with text to support. It is a “no” or “do not” symbol which is a red circle with a diagonal line through it. This is symbol because it does not resemble anything in real life but it has a pre-set meaning assigned. Under the “no” is an icon of a plug and socket. The plug and socket are filled in, the socket has black and white to create a bit of detail. These seem like cartoonish depictions for simplicity. I do find it interesting the “no” symbol has a gradient going on where it’s lighter on top and more red on the bottom. I ponder if this is for usability. Mainly because I understand that a color blind person may be confused if they see green and red together, something designers (and art teachers alike) must be aware of when creating accessible icons!
Here is the Non-GMO label that I found on a dietary supplement. In it there is an icon of a butterfly on a blade of grass, also doubling as a check mark. A signifier that has many meaning but in this case means, “yes” this is indeed non-GMO we verified it. This label is part of The Non GMO Project that much like the ACMI AP Certification, investigates foods and determines whether or not is is a non-GMO food/substance. The shapes are filled in and graphical almost like a pictogram. Since this picture has two meanings it is like the last example, symbolic due to the check mark having no real life representation and iconic because the orange and black shapes indicate what a simplified picture of a monarch butterfly might look like on a blade of green grass under the sky. This label is much more accessible due to the contrasting colors for those with colorblindness. :)
This was found on my remote control to my TV it is one of the many various buttons but was an icon of a muted speaker. It is both a representation of what a sideview of a speaker looks like and a symbol of a crossing out strike which means “no” or “off”, in this case “volume off” or “mute”. This icon is much simpler than many of the others because it has a finite amount of space and I would imagine the manufacturing process had a lot to do with the amount of colors and space the creator had to place an icon on a rubber button. It is simply a white outline shape, a very simplistic icon.
I found this on my glue bottle. It signifies that there is a hazard in this case a choking hazard as small children may want to do that thing that that one kid always wants to do, put the glue lid in their mouth. So the glue makers issued a choking hazard warning to let you know. This again a very simple icon: an exclamation mark within a triangle outline, all in black. This is a symbolic signifier because it has an assigned meaning not representative of the signified and the sign.
Lastly, this is the power button that also doubles as the bluetooth pairing button when it’s turned on. It has a small light above that is lit and blinks when it is searching for a bluetooth device. I wanted to include this one because it’s label is different from the symbol and I found that interesting. I can’t recall if I did but having a double meaning on a button gets complicated with using a device. I think the use of a simple well known icon is a good choice for a button that also needs to do another function to minimize confusion. This interests me because as a designer we’ll likely run into similar complicated constraints with a product’s engineering that we need to design our way out of. Keeping it simple surely can’t hurt. The “power on/off” symbol used here is a circle with a short line intersecting perpendicularly. In this case it is raised from the surface of the physical interface. Something so simple as this shape also lends to accessibility. It might be harder to access with a dual function and a more complex symbol.
What makes a good icon?
As designers making something so simple as we have seen can get complicated and confusing really quickly. Anyone who has ever devised a set of icons will know how difficult it might be on their first try. Especially with practical constraints. Icons as we know it can be easily understood when:
- If it is symbolic- stick to symbols that are very well known in a culture and don’t deviate without labeling as well
- Is simple- not too many colors, types of lines, fancy shapes
- Is accessible- includes color choices that are high in contrast and accessible for those that are color blind
Why is this important?
When I went on my observation, something that most good artists and designers practice on a regular basis, I saw that icons are used to signal qualities of the product that of utmost priority to the user. This means life or death, who is liable if something unfortunate occurs, and guides choices of if and when something is to be used and the easiest way to find the most important features on the product in use. So if it can’t be easily identified users may not have the best outcomes for their needs.
Just for fun: Some art history!
I enjoy teaching people about icons too. Some of our oldest known artworks often contain pictures and representations that lasted throughout the span of time. They are examples of good icons because even though their creators and their civilizations may be gone or modernized we still know what their creations mean.
Here are a few examples:
Newspaper Rock in Utah was carved during a span of 2,000 years that included many Native American cultures. All of these cultures were different but take a look. Are there pictures here you understand the meaning of? If so it’s likely because the icons that are carved into the rock likely followed some of the points I mentioned before on what makes a good icon. Symbolic, simple, high contrast, and representative. We can easily see animals, people, and paw prints and we don’t necessarily need to be part of those ancient cultures to understand.
This is the Chumash Painted Cave in California. I included because the paintings in this cave were made later in time than Newspaper Rock but we don’t quite know their meaning because they are more symbolic. They used a different medium, painting rather than carving which opened up the possibility of more colors to use. They are still however high contrast due to limitations in colors (they used natural materials around them) and the shapes are very simplistic. We can see figures being represented that may be people but we see more abstract shapes. Look closely at Newspaper Rock, it also has a similar “wheel” shape. These cultures may not have had a lot of contact due to distance and time but we can see similar symbols being used implying it’s universal nature.
Last is Painted Rock Monument also in California. The Chumash tribe as well as many other cultures like the Salinian and Yokut tribes, much like Newspaper Rock gathered to carve and paint a rock structure about 3,000–4,000 years ago. Notice many similar shapes and color motifs. Again very very simple. Lasting the test of time.
That’s the point I want to make here. Is that these images stress importance and similarity throughout time, keep colors and form simple in order to represent a meaning. Perhaps cavemen were way more intelligent than we traditionally give credit for! If we can look back 4,000 years and still know what it means, it’s likely a really great icon!
