Interesting UI Concept: Navicon Transformicons

The transformicons design concept — which I’ll talk about in just a bit — adds to the navicon by smoothly transitioning it to another icon after it’s clicked.

Navicon Examples

Here’s the navicon on YouTube (mobile version):

YouTube navicon example

Here’s the navicon on Squarespace:

Squarespace navicon example

And for good measure, here’s another navicon example on AWARD:

AWARD navicon example

Problem

The problem I see in the examples above is this: After clicking the navicon the first time, the icon remains the same, even when the resultant event will be different the next time you click it.

Think of a light switch. It’s one button that commands two distinct events:

  1. Turn the light bulb on
  2. Turn the light bulb off

The condition is the same with navicons. The icon can issue two events too:

  1. Show the menu
  2. Hide the menu

Solution: Transformicons

An alternative UI design approach would be to substitute the navicon with another icon to give users an appropriate visual hint for each unique event.

You can see this design concept in a demo called Navicon Transformicons by Bennett Feely.

The navicon transformicons demo uses SCSS and jQuery, but you should be able to replicate the concept with your own preferred method:

See Navicon Transformicons on CodePen

This is great because:

  • It gives the user a visual hint that the resultant event will be different next time the icon is clicked (show the menu or hide the menu)
  • It’s semantic — one icon symbolizes one event
  • The animated transition helps draw attention to the changed state of the navicon

Here’s how it could look in one of the examples I used above:

If you want to keep the navicon without transitioning it into another icon, even a slight modification to the icon’s appearance — like changing its color or giving it a different background — would work.

What do you think?

Further Reading

  • Andy Clarke’s discussion of our need for a standard navigation icon. He states in the post: "Unless our navigation’s arranged in a grid (and so we should use a grid icon), I’m putting my weight behind three lines because I think it’s most recognisable as navigation to the average person."
  • The navicon term, as far as I know, originated from one of Jeremy Keith’s blog posts
  • Read about the Navigation Drawer design pattern on Android Developers

  • David

    I’ve always heard it called “Hamburger Nav” (since the lines resemble a top bun, a burger, and a bottom bun).

    As to the point of this excellent post, though – what about turning the navicon 90 degrees? And I don’t think I like the “+” transformation; it makes me think there will be MORE navigation options if I click it.

  • “Hamburger Nav” – haha, nice!

    Interesting idea RE: turning the navicon 90 degrees!

    I agree with you RE: “+” transformation. It wouldn’t be a good option since the plus sign will generally represent “more” or “expand” in the context of a navigation menu. I think the creator of transformicons just placed it with the demo as an additional proof-of-concept.

  • Great article, the concept makes all the sense.

    May I ask you a question? HOw did you do the icon animations? Is everything handcoded CSS3, did you use some graphics tool…?

  • Conner Ward

    Windows phone already does this.

  • Pavel Dvorak

    That’s really interesting, especially the last example, where the three lines combine into one or the example, where the lines combine into the cross. As a user-friendler in our design team I love this idea 🙂

  • Hi Ignacio. I didn’t create these, Bennett Feely did. I linked to the web page where you can find the source of the transformicons above. Here is the link again: http://codepen.io/bennettfeely/pen/twbyA

    It uses JS, and Sass (an extension of CSS). Though I’m not 100% sure, I think these were all hand-coded with no graphics tool.

  • The navicon is really a great idea and I saw it is used in many websites for creating a more user friendly design!