A Reflection on Icon Usability

Nicole Tanoue
The Startup
Published in
5 min readJun 11, 2019

--

How icon usability affects our everyday lives, making it easier or more complicated to get things done.

How icons guide us and impact our lives

Icons and signs are so ingrained into our everyday lives, that we often take them for granted. Whether it’s the signage we see while driving or the buttons on our electronic devices or appliances, icons play a more important role that we realize. When we do notice icons, it’s usually when they are poorly designed, and result in some sort of frustration. We’re forced to look at the icon, think about what its purpose might be, and test out a few options. When icons are well-designed, we don’t really notice them (unless you’re a designer!) because we were able to do the task we set out to do. That’s the goal for successful icons.

According to Charles Sanders Peirce, there are three types of signs that differ in terms of what gives it meaning:

  • Iconic sign: a sign that physically resembles what it “stands for.”
  • Symbolic sign: a sign that is assigned arbitrarily or accepted as a societal convention.
  • Indexical sign: a sign that is defined by some sensory feature that correlates with and thus implies or `points to’ something of interest.

A sign or an icon can be perceived as one or all three types of signs depending on the context of the situation. To reflect on my relationship with signs, I found several icons on the household appliances and devices I used on a daily basis and analyzed their effectiveness.

Xfinity TV Remote

Xfinity Remote Control

The Xfinity remote control to the left utilizes several icons to guide the user through various tasks related to watching television. Most of the icons in this picture are labeled, so I’ll focus on the blue microphone icon that is circled.

The microphone is an example of an iconic sign since it physically resembles what it stands for. When I see this icon, I know that when I click it I must have to use it in a similar way as I would a microphone. I don’t need to see a label to know its purpose.

The bright red “record” button to the right of the microphone icon is a symbolic sign. As a society, we have come to expect that a red dot symbolizes the action of recording, but this was something that has become common knowledge when it was first arbitrarily assigned to that action many years ago. It differs from the microphone in that a red dot does not physically resemble the action of recording.

All of the icons have a similar weight to them and are usually filled in. In the case that the icons are not filled in (the replay button), the weight of the line is thick enough that it matches the text and doesn’t stand out.

The icons are easy to understand but are not visually consistent

Water dispenser

This water dispenser utilizes a series of five icons with a corresponding LED light to indicate the current status. The icon to the left is universally recognized as a “power on” icon, meaning it is a symbolic sign. When there is a green light above that icon, we know the appliance is turned on. The coffee cup with steam is an indexical sign since it represents the feeling of heat. When this is lit up, we know that hot water is ready for use. The same goes for the snowflake icon, which represents cold water. When this is lit up, we know cold water is ready. The icon to the right of the snowflake features an exclamation mark inside the water tank. This is a unique icon and indicates that we need to take action. The exclamation mark is a symbolic sign for attention, and the water tank icon is an iconic sign as it depicts exactly what it is. These images together tell us that we need to pay attention to the water tank (fill the water tank in most cases). The last icon is an “O” with a subscript “3” which is the iconic symbol for ozone water.

I recreated the icons to be more visually consistent

The icons on the water dispenser have varying styles. Some are just outlined, but there are even different levels of thickness, and some are filled in. There would be a more consistent look and feel if they stuck to one visual style. I tried sketching out a variation of the five icons in a way that would be more consistent.

The two buttons are misleading to the user upon first using the appliance

LG Washing Machine

The signs used in the LG washing machine are different than what you would typically think. The circled button on the left turns the washing machine on (it doesn’t start the machine). At first, I thought that the button would start the machine. It looks similar to the “power on” icon you usually see, but since it is slightly different (see “power on” icon in the previous water dispenser example), it’s not very intuitive. The button on the right has the sign for “play” and “pause” which actually starts and stops the machine. Those signs are typically used for music or for audio, so it was a bit confusing. However, after using the machine a couple of times it is not second-nature for me. In an ideal situation, however, the user would be able to identify what the buttons do right away.

If I were to change the imagery, I would change the “power button” to be the standard universally-accepted icon. I would keep the “play” and “pause” button the same, but make sure to add a label beneath the button to reduce confusion.

--

--