UX: Symbols and Icons in Palo Alto
What are small every day symbols and icons communicating to us, as UX designers, and as pedestrians or customers? How can such a tiny detail, tell us so much? And how is this detail read across different languages, or with different mental models?
Today I take a photo blog and sketching journey through symbols and icons of downtown Palo Alto to explore these questions. Come on, let’s go!
Alright! first I see this plaque encrusted into the cement, nearby what is a gutter or a storm drain. You can see my shiny shoes standing on top of the drain. The plaque says, “* NO DUMPING * FLOWS TO SF CREEK” and has a picture of a fish in motion, as well as two stars. I got very excited to see my first symbol/icon, so I have highlighted it here in bright pink and blue.
The fish is a part of a longer story that if we dump trash or toxic waste into this drain that is meant only for rain water, it will not go to a water treatment facility, but it will flow into the creek which has wildlife inside of it. The star icons seem only to be serving as a divider for the phrases, (such as the water here on the symbols to the left).
Now it’s important to note the difference between symbols and icons. Because this one walks a particularly grey line between the two definitions. While we have here a tangible object or “icon” of a fish, if you can’t read English, then the meaning of fish = don’t pour toxic chemicals down this drain… might be a bit of a stretch. So this fish is symbolizing a larger concept. Which definition so do you think the fish is…?
- A symbol represents products or ideas, whereas icon represents only items that are visible.
- Icons are restricted to graphical representation of objects and one can easily understand what they stand for. On the other hand, one has to learn what a symbol stands for, as it is not similar to what it stands for.
- Both symbols and icons represent other things, but icon is a pictorial representation of the product it stands for, whereas a symbol does not resemble what it stands for.
— from differencebetween
Personally I’m going to go with “symbol” for the whole plaque, based on the “does not resemble what it stands for” definition. There are a couple jumps in logic, that is different than seeing a fish plaque to symbolize that I am 1 mile away from the Fish Market in Tokyo, for example.
From now on I will use “symbols” and “icons” in an interchanging way for sake of “Symbols 1, 2, 3, 4, 5, 6, 7, 8, 9, 10” congruity of my photos in this Medium post — but please be aware of the differences. :)
Symbols #2 and #3: Icons about the internet!
Our second exciting stop on this journey is a tiny, tiny, tiny icon of an iPhone to indicate “download on the App Store”, and a smallish icon of a computer mouse with a cord (typical of PC’s nowadays, but indicates, “navigate to this URL”). It got me thinking how icons may be perceived by different generations or advocates of different device brands.
The icon at the bus stop is recognizable as a computer mouse with a cord, even though you probably wouldn’t log onto a computer with a wired cord to check bus times there — it may have been selected for understandability across several generations. Like how the phone icon on the same sign is a pay-phone or a home phone, and not a mobile phone.
Is this because the sign is for an older generation, or perhaps for transcend class for those who use pay-phones and public computers? Or is it the equivalent of the “floppy disk” icon to represent save. (Although kids don’t know what the floppy disk is anymore, they know the symbol means save!) Ways to find out this information may be to watch what kind of people are using the bus stop, or to ask people there what they think the icon is or what it means.
For the iPhone symbol on the box that connects to a beacon device, it is very, very tiny. I could still easily tell that it’s for the Apple App Store and that it’s asking me to download an app. As this is a quite recognizable icon, at least to me, a person with good eyesight and who owns an iPhone. It took me a while to figure out however the app was called “Downtown”, as I thought Downtown was a location indicator. So we want to be careful with words that have multiple meanings. The app is to be able to order food or drinks from wherever you are sitting in a cafe, but the app had an error in downloading, and it looked like the company has since pivoted to a different name and service.
Alright, so next I found a symbol that is like the bus on the bus stop sign above, but with a completely different meaning due to it’s placement and it’s text. Let’s take a look:
This icon shows a car, and it warns of approaching vehicles existing or entering a driveway, from the right and the left, of the picture shown. It is actually well placed. I’m usually staring at my phone at that point on the sidewalk, and the yellow color gets my attention to the blind driveway on the right. The front of the car here with circle headlights would be what someone sees, as a car is coming out of or headed into a blind driveway towards them. This is a strong sign and and good placement.
I thought the picture of the car started to look a tiny bit like a cartoon hippo as I was re-drawing it. I hope that no real hippos were offended in the making of this joke!
When I made my way to the cafe, I needed to use the bathroom. This icon of a lock was in a black color and in an “open” position, (if you’ve ever seen a padlock, the U shaped part can swing out to the side when it’s open). This icon symbolizes that the bathroom is unlocked and (hopefully) “vacant” as the word states.
The cafe workers were leery of me taking pictures of the bathroom, and rightfully so, so I didn’t get a shot of the change this sign makes when it’s occupied. It is a nifty change because the lock icon shifts to a red color instead of black, and it appears in a locked position (with the U shape closed onto the square padlock).
I drew it, and while drawing, I also thought maybe the shape looks a little bit like a shopping bag. So I joked that while waiting for the bathroom, you can do some more shopping in the cafe.
Next, I was inside of the bathroom and found this hand-washing icon:
The icon shows hands together with bubbles above the hands, like one would see while they are looking down and washing their hands. It is located inside of the bathroom, above the soap dispenser.
You’ll see in my notes that I start to write “something about this…” and I jotted down connotations that something about it is eerie. The hands look like they are wearing gloves because they have an ending and because they are so straight and large with the fingers touching. Maybe gloves symbolize a “worker”, but why would someone wash their hands with gloves on? This makes me think of scary things like American Psycho with a serial killer, Ronald McDonald the clown, or maybe the bad guy in Sonic the Hedgehog (Knuckles) who all have gloves or glove-like hands. The nicest connotation that I could imagine for this picture was “awkwardly holding hands with your crush, in a field of fireflies.”
Better icons that I found online include either have fingernails, have the hands arched, or do not have the line that “disconnects” the hands.
Symbols #7, #8, #9, #10: Hand-painted icons!
It seems that I wasn’t the only one drawing icons in this city. Someone in Palo Alto hand-painted these icons onto a traffic control electrical box. The text reads, “wind power”, “efficient shower”, “ride share”, and “we care”. On the other side there are 4 more eco-friendly icons to symbolize reducing our negative environmental impact. This is a great idea to use easy to see icons to spread a message.
Next in our UX Academy lessons, we learned how to create vector images, because they are easily resize-able. The topic was on food and drinks.
9 Vector Icons that Symbolize Food and Drinks
Since my in-laws are Chinese-American, and I think of them often, my work took on flavors of their preferred cuisines! There is a fortune cookie, hot tea, an Impossible Burger, boba tea, Adzuki bean non-dairy ice cream, ramen noodles, steamed buns with sweet black sesame paste inside, lotus root slices, and a coconut. Here are my icons, created in Illustrator:
Need icon inspiration? Check out www.nounproject.com with free icons that you can either use, or look at to reference. Or like I did, you can find the object in real life or in an image search, and practice reducing it down to it’s main parts. Drawing without looking at a photo can sometimes help with this as well, because our minds tend to reduce objects to simple shapes in our attempts to recall and draw them. In the current age of flat icons, even beginners may be able to become great illustrators!
I’m Kasey Wang, a student at UX Academy by Designlab in the Fuller Cohort. Please ❤ this article to support, and connect with me on LinkedIn.
