Improving the hamburger button
Using CSS Transforms
Three Horizontal Lines
The majority of responsive websites that use an icon to represent a hidden menu opt for the three horizontal stripes — these include some high-profile websites like Starbucks.
Myth: Icons enhance usability
Many researchers have shown that icons are hard to memorise and are often highly inefficient.
The Microsoft Outlook toolbar is a good example: the former icon-only toolbar had poor usability and changing the icons and their positioning didn’t help much. What did help was the introduction of text labels next to the icons. It immediately fixed the usability issues and people started to use the toolbar.
In another study, the team of UIE observed that people remember a button’s position instead of the graphic interpretation of the function.
Source: Myth #13: Icons enhance usability
Menu eats Hamburger, but…
A recent study from Exis web concluded that the word “Menu” works much better than the hamburger icon.
But, I still see a valuable future for the hamburger icon. Since the navigation that is revealed when pressing the “Menu” button is added using Javascript there is no way to “Undo” it by pressing the “Back” button or swiping the screen from left to right.
Using a little bit of CSS Transform magic the three lines are transformed into an “X” shape. Adding a visual clue that pressing the button again will remove the navigation from the screen.
The above example is implemented in the Belgian Police Internet Platform, an open-source platform specifically built for the internet websites of the Belgian Police.
One more thing…
Just a few days ago I came across a Hamburger button transition in Swift. I guess it is just a matter of time before we’ll see these transitions across more native and web apps.
