PROFESSIONALLY OPTIMIZED WEBSITES STARTING AT $295
Our team of SEO Web Design gurus are standing by to assist you achieve your online marketing goals.

+1-971-599-3330

REQUEST QUOTE
SEO Web Design, LLC aims to improve business by delivering effective solutions based on innovative technologies and professional designs. Discover the variety of services we offer and convince yourself on the basis of the latest works that we've done. We love building fresh, unique and usable websites optimized specifically for your niche.

Responsive Web Design

SEO / SEM / Social Media

Conversion Rate Optimization

Email Marketing

Online Presence Analysis

Web Hosting
Top
SEO Web Design, LLC / Web Design  / Hamburger ☰ Heaven

Hamburger ☰ Heaven

While exploring unicode symbols, I discovered that the three-bar icon people now see as the hamburger menu also exists in the symbol table as something called the “trigram for heaven” ☰.[1]

It’s one of eight signs in Taoist cosmology, called the Bagua or Pa Qua, and found in the I Ching. If you’ve seen an octagon-shaped piece of Chinese decor with several dashed lines, usually around a yin yang symbol, those are actually the trigrams in a bagua diagram, either in “Earlier Heaven” or the “Later Heaven” arrangement.

Bagua by Kenneth Gaerlan

Bagua by Kenneth Gaerlan

Besides ☰, which represents heaven 天, we have ☱ for lake/marsh 澤, ☲ for fire 火, ☳ for thunder 雷, ☴ for wind 風, ☵ for water 水, ☶ for mountain 山, and ☷ for ground 地.

The bagua diagram is used everywhere, from astronomy to anatomy, including feng shui. Each one also corresponds to other symbolic categories, e.g. the heaven trigram also means: the Creative, (natural) force, northwest, father, head, strong / persisting, creative, and horse.

Notes on implementation

So jumping back to design & development: the other trigrams and their concepts might just be interesting enough to spark some alternatives in your work, like how the “hamburger” metaphor has cooked up kebabs, doners, bento boxes, and meatballs:

Don’t ever say you don’t have choices on mobile. pic.twitter.com/Atu3Ogi58j[2]

— Luke Wroblewski (@lukew) April 23, 2015[3]

And other tasty treats like cookies and cakes:

Menu Icons 🍔 pic.twitter.com/4detdj98AC[4]

— Alex 🌚 (@alexmuench) January 30, 2019[5]

As a unicode symbol, it might not render in super old devices. A safer bet would be the similar-looking mathematical symbol[6] for “identical to” ≡.

Read more on accessibility issues here[7].

You can also flex with CSS shadows or gradients[8]. These days, an SVG image is usually the way to go.

Not so universal meaning

But all these have the standard reminder that icons alone, unlabeled, aren’t always[9] more understandable on their own, and other cultures can interpret them differently[10]. Here’s what happened to Amazon in India when it came to graphically representing search, or the idea of adding to a virtual cart:

To make its screen easier to understand, Amazon added icons for books or electronics or beauty products. When it figured out customers didn’t know the magnifying glass was a standard symbol for search—some were calling it the ping-pong paddle—it added pop-up descriptions and recommendations in Hindi.

Then there’s the “Add to Cart” button. “It is not just about the translation but about the mental model of dropping something into the cart,” said Zahid Khan, senior manager of customer experience at Amazon India. “There are lots of places in India where customers have never even seen a cart. We might have to change that into ‘bag.’”

Eric Bellman, Wall Street Journal[11]

And here’s what the Japanese government is changing for the tourist influx at the Tokyo 2020 Olympics:

Old and new icons of the onsen

Old and new icons of the onsen

The symbol could be misinterpreted by foreigners as the mark of a restaurant that serves hot food. To avoid confusion, three people have been added to the onsen symbol, to clarify the fact that the image is used to represent hot spring bathing.

Oona McGee, SoraNews24[12]

What’s in a nickname

If you jump back even further: 30 years ago the three-line icon was already around, but there was a different nickname for it: the “air vent” icon. And it worked well as a pun, because the UI consisted of windows:

Xerox software user interface with the air vent icon

Xerox software user interface with the air vent icon

“At Xerox we used to joke with our initial users that it was an ‘air vent to keep the window cool’,” says [Norm] Cox. “This usually got a chuckle, and made the symbol more memorable and friendly.”

BBC News[13]

So now we have at least 4 different sources for the metaphor:

  1. Hamburger 🍔
  2. Heaven ㆝
  3. Mathematical equality 🧮
  4. Air vent 💨

Imagine how much things in design and technology would be different if time or influence were tweaked just a bit. We could’ve been calling it the “heaven menu”.

References

  1. ^ hamburger menu (stellify.net)
  2. ^ pic.twitter.com/Atu3Ogi58j (t.co)
  3. ^ April 23, 2015 (twitter.com)
  4. ^ pic.twitter.com/4detdj98AC (t.co)
  5. ^ January 30, 2019 (twitter.com)
  6. ^ mathematical symbol (en.wikipedia.org)
  7. ^ accessibility issues here (www.htmhell.dev)
  8. ^ CSS shadows or gradients (css-tricks.com)
  9. ^ aren’t always (uxmyths.com)
  10. ^ differently (stellify.net)
  11. ^ Eric Bellman, Wall Street Journal (www.wsj.com)
  12. ^ Oona McGee, SoraNews24 (soranews24.com)
  13. ^ BBC News (www.bbc.com)

Powered by WPeMatico

[email protected]

CSS-Tricks.com offers daily articles about CSS, HTML, JavaScript, and all things related to web design and development.

No Comments

Sorry, the comment form is closed at this time.