One of the biggest things I’m learning in my journey to UX is that it truly becomes impossible to see your designs objectively. Consistent feedback has been key, but more than anything, working with users directly has been unexpectedly course-changing.

Working with users has made it clear to me that virtually nothing is as clear in your designs as you think it might be

That’s why it is absolutely crucial you see exactly how a user might understand your design decisions — that includes the ubiquitous icon.

Icons are one of the many things in design that we may overlook as a small detail. An afterthought. Just for aesthetics. But after conducting the few tests that I have with users,

it’s clear that an icon can determine a satisfying or frustrating experience. An icon can go unnoticed and give the user exactly what they expect (like a symbol of a home representing a homepage or dashboard), or can be irritating when users expect a totally different result (like a share button looking like a reply button)

Exhibit A and B:

Left: Spotify’s clear “home” button | Right: Slack’s not-so-clear “share” that I always think is a reply button

Icons are arbitrary, but as designers our role is to find that common understanding depicted visually.

Whether you’re browsing an e-commerce site for a new fall ‘fit, rushing through an airport to make it to your gate on time, or navigating a hospital trying to find out where to go in an emergency, icons are crucial, and could literally be life or death!

So, as I am aware that I’m prone to getting too narrow eyed in my own designs, I’m doing a bit of an ethnographic study of icons IRL. To turn away from the digital world for a while, I’ll be using my errand-running day as a way to notice the icons all around me and consider:

1. Is this icon clear and helpful?
2. What do I think this icon means?
3. What is this icon’s impact?

On this scavenger hunt, I hope to find creative ways that designers have tried to approach the problem of universal meaning, both clever and not-so-clever uses of icons, and some inspiration for my own approach to choosing and designing icons.

Icon #1: Recycle-able.. maybe?

Left: Back of my moisturizer bottle and chipped nailpolish | Right: apparently, “The Green Dot symbol”

Where did I find it:

The back of the label of one of my moisturizers. One of the first things I did to start my day was get ready, and so I noticed the icons on my cosmetic products. I first saw it on one of my moisturizers, then checked my nail polish bottles, foundation tube, toner, etc. All my cosmetic products seemed to have this symbol on the back of the labels.

What do I think it means?

My first guess was that it meant “this item is recyclable”, but then again, I thought, the recycle symbol is a triangle with 3 arrows, not a circle of 2 arrows. My partner took a guess as well and says that he thinks it meant “can be returned”.

Upon further research, I discovered this is the “Green Dot” symbol, which means “the company making the product pays a recovery and recycling organization to oversee ecologically responsible management of their packaging waste”

(Refer to this listicle: https://www.mentalfloss.com/article/65638/heres-what-10-symbols-cosmetics-labels-mean)

Is this icon clear and helpful:

Honestly, I’m not sure how helpful this icon is since I didn’t know what it meant initially. I think this icon is an example of something that was clear to the designers, but perhaps wasn’t tested with users. If users are very environmentally conscious, then they might look out for this symbol to see how responsible a corporation is.

What is it’s impact:

Although the icon clearly wasn’t universally understood, I think the impact is allowing users to know that the products they are purchasing are from responsible corporations.

Icon #2: Strange S and an arrow

Left: spray-painted s/arrow symbol | Right: My digital rendition of the symbol

Where did I find it:

On my way to the subway station, I stumbled upon this spray-painted symbol on the paved road. Although it wasn’t your typical idea of an icon, it was a visual representation to give information, so for all intents and purposes, it’s an icon.

What do I think it means?

The symbol is an S with an upward arrow drawn through it. All I could infer from the icon is that it meant it was the placement for something being constructed. It could possibly be an “s” for “stop”, indicating the end of an area.

Is this icon clear and helpful:

Although I still don’t know what it means, I imagine that it is helpful for the road construction workers who need to refer to it. I am guessing that it is an easy way of indicating the placement of something structural, which is part of a whole.

What is it’s impact:

It probably contributes to a workflow between road construction workers who need to know the parts of the entire blueprint. It’s simple, and seems to be a signifier that’s universal among the people who need to understand it.

Icon #3: POP card

Left: Proof of Payment icon at subway station ft. my partner and I photographing it | Right: My “pop” icon

Where did I find it:

At the TTC subway station platform, I noticed the icon at the top of a poster with a hand holding a card reading “pop”

What do I think it means?

Before reading the text below it I assumed it had something to do with payment, because the card looked like a credit card or transit pass. It wasn’t until after reading the text below it that I understood that “pop” stood for “proof of payment”.

Is this icon clear and helpful:

I think that it’s really only a helpful symbol when used in conjunction with the text below it — which perhaps makes it rather unhelpful. The text below explains that it’s a reminder that users need to provide a proof of payment if asked by a transit officer while transiting.

What is it’s impact:

It’s impact is to create a universal symbol that reminds users that they need to pay and prove that they have paid for their fares.

Because it’s not something that is prevalent enough, as a stand-alone icon, it’s ineffective. Perhaps if it really was at every station, and visible several times throughout my journey on the train then I would find it a good reminder. I suppose that’s how any universal icon becomes universal — the proliferation of its use.

Icon #4: Don’t sit here, please

Left: TTC Seat Restricted notice (removed from seat)| Right: Vectorized version of icon

Where did I find it:

While on the train, I observed the seats throughout the car with the paper sign of this symbol of a person sitting down, and a circle with a line through it.

What do I think it means?

It didn’t take too much analyzing on my part to understand that this icon was telling me that the seats with the signs were not to be used. The clear red “no” circle and a person sitting down were definitely universally understood.

Is this icon clear and helpful:

I believe this icon is helpful in bringing awareness to an otherwise invisible health crisis (the pandemic). It’s a great visual cue of where we should sit and also a reminder of how we should behave.

What is it’s impact:

Its impact is warning users that they should not sit in particular seats with the symbol on it. It does more than just tell us that a seat is restricted, but also brings us into the reality that we are in the midst of a pandemic and should remember this while sharing a public space.

Icon #5: Location, near me, check in?

Left: Check in icon on medical lab’s banner | Right: My vectorized location icon with a checkmark in it

ICON #6

Where did I find it:

While waiting for my appointment I also noticed a large banner with a few symbols on it, including this teardrop shaped symbol with a checkmark in the middle.

What do I think it means?

Upon first glance without reading the text indicating what it means, I would have maybe first assumed that it meant “location”, as that is its typical usage in my experience. However because of the text below it, I know it is telling me “check in”.

Is this icon clear and helpful:

Considering that I would not have understood what the symbol meant without text to explain it to me, I would say that it’s neither clear nor helpful. It is included on the banner mostly to add imagery.

What is it’s impact:

The icon draws attention to the actions that the banner is asking patients to take. Although it isn’t clear by itself what it is or what it means, it does indicate that it’s the first of a series of steps, because it is placed beside two other icons representing different parts of a whole. In this case, the impact is not its meaning so much as it is its role in hierarchy.

This little scavenger hunt definitely reminded me just how 1. prevalent icons are, and 2. how terribly arbitrary they are. It served as a good reminder that as designers, we pretty much can never assume how a user will interpret our icon choices or designs. User testing is the only way to know for sure (plus a healthy margin of error) that a symbol is universal.

Even just asking a non-designer on your team to tell us what a symbol means to them can give us a whole lot of insight. Until then, observe all the icons around you and notice how icons are effectively or ineffectively a visual and shared language.