The heart of tech

This article was published on November 7, 2013


    How to make your navigation bar more exciting with transformative icons

    How to make your navigation bar more exciting with transformative icons
    Jacob Gube
    Story by

    Jacob Gube

    Jacob Gube is the Founder/Chief Editor of Six Revisions, a popular web development and design site and the Deputy Editor of Design Instruct, Jacob Gube is the Founder/Chief Editor of Six Revisions, a popular web development and design site and the Deputy Editor of Design Instruct, a web magazine for designers.

    This post was originally published on Design Instruct.


    By now, you’ve probably seen the navicon — an icon with three stacked lines representing a navigation drawer menu that can be shown or hidden.

    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):

    navicon_transformicon_01youtubemobile

    Here’s the navicon on Squarespace:

    navicon_transformicon_02squarespace

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

    navicon_transformicon_03award

    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

    navicon_transformicon_04lightswitch

    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 byBennett Feely.

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

    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:

    navicon_transformicon_05mockup

    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?