Recently, our whole family visited a new park. And as someone who loves design and constantly notices details, my eyes immediately landed on a water station. But the way the designer “explained” it with an icon threw me off for a few minutes.
What I saw… An elongated silhouette, stretched proportions, horizontal stripes, and a rounded top. First thought — a missile (yes, the conflict back home left its marks in my mind). Second — something technological, maybe some kind of container. Then — a gas cylinder. “Are they really filling gas cylinders here? Right in the park? Why?”
Take a look at the photo yourself — what does it remind you of? Drop your thoughts in the comments.
This “bottle” was too stretched, without the typical neck that you usually use to fill water. And probably that’s why the drop in the icon turned into a flame in my perception.
In Portugal, where I live now, gas cylinders are still widely used — they get delivered home, refilled, and used for cooking. And even though their shape isn’t the same, the association with gas hit me instantly.
Fire, cylinder, danger, domestic gas — my brain went through familiar scenarios in a split second. That’s exactly how user thinking works: not by the designer’s “logic,” but by associative patterns from real life.
What was supposed to be water turned into gas.
This was intended to be a straightforward, unambiguous visual metaphor. I checked with my wife — she hesitated for a second too, didn’t answer right away. So this wasn’t just a personal misread; it was a communication fail.
How it happens: ambiguous visual metaphor
1. Different levels of understanding
- Personal experience: users see the symbol through their own lens.
- Cultural context: the same image can be understood differently in different countries or regions.
- Age and habits: digital natives and pre-smartphone generations interpret metaphors differently, and what seems obvious to one may not be obvious to the other.
2. Similar shapes = confusion
If an object’s shape reminds you of something else (a drop looks like a flame, an elongated bottle looks like a cylinder), the brain makes a fast but wrong conclusion.
3. Associations vs. functionality
A symbol can be beautifully drawn but fail its direct function if viewers have the wrong associations.
4. Abstract vs. concrete
The more abstract a symbol is, the higher the chance people will interpret it differently.
5. Local habits and environment
Symbols may be “universal,” but only within a specific context.
6. Psychological effect
Ambiguous metaphors slow users down, create doubt, and cause frustration. In UX, this leads to errors, loss of trust, and lower conversion.
A problem every designer knows
Even familiar icons can work differently in different apps:
- 🔴 Red circle — record video or live stream; in other contexts, notification or active process.
- 🔔 Bell — notifications, calls, or events.
- 💬 Chat bubble — messages, comments, discussions.
- ❤️ Heart — like, favorite, or add to a playlist.
- 🎙️ Microphone — turn on the mic, voice comment, or public speech.
Why do we need icons?
Icons are visual words. They save time, reduce cognitive load, and help people act faster. But if the visual language confuses, UX breaks immediately: users guess instead of acting.
How to avoid mistakes
- Study existing solutions and use familiar, clear images.
- Test metaphors with real users who are new to the project.
- Consider cultural context and local habits.
- Use direct and simple metaphors whenever possible.
- Maintain a consistent visual language.
- Check associations — are there any “false friends”?
Further reading
If you want to dive deeper into visual metaphors and UX:
Books:
- Don’t Make Me Think — Steve Krug
- The Design of Everyday Things — Don Norman
- Universal Principles of Design — William Lidwell
- Information Dashboard Design — Stephen Few
- Visual Language for Designers — Connie Malamed
Articles and resources:
- Nielsen Norman Group — studies on visual metaphors and icons
- UX Collective on Medium — case studies and practical articles
- Smashing Magazine — interfaces, semantics, patterns
- A List Apart — psychology and interface design
Topics to explore:
- Visual metaphor in UX
- Iconography and cognitive load
- Cross-cultural icon design
- Semiotics in interface design
- Misinterpretation of symbols in digital products
Conclusion
An icon is not just a picture. It can be an important word in the language through which your product “talks” to people. If that language is ambiguous, users go in the wrong direction.
Remember: semantics in design is just as important as aesthetics.
