Friday, July 11, 2014

A new mobile menu icon

You have probably seen the old "hamburger icon" at least once. No, I'm not talking about an icon that literally looks like a hamburger. If you aren't sure what I'm talking about, here are some examples of the "hamburger icon".

In most cases, the icon is used as a button that allows users access to menu options. Some recent research however may be concluding that the hamburger may not be the best choice.

Maybe it's time for a NEW menu button.

What would a new menu button need?
  • Needs to leverage user existing know-how.
  • Needs to carry affordance for clicking. 
  • Needs to be dominant on screen so that it cannot be over-looked.
  • Needs to be customizable, yet recognizable.
  • Needs to stand apart from the drag handles that are so similar to the hamburger icon.

Path to the future
To best leverage users existing know-how, the new design can implement the 3 bar concept.

To relay the idea to the user that the item is click-able... Well, what better shape than a circle. After all, aren't the tips of our fingers circles instead of squares? In addition to creating an affordance for clicking, this icon resolves the issue of the icon being confused for a drag-handle.

A designer can increase or decrease the white space to raise or lower the items dominance on a screen. More white-space would result in a less dominant menu icon.

Because this new idea is so similar to the hamburger menu of the past, there is plenty of room for customization.

new menu icon 1.1new menu icon 1.2new menu icon 1.3new menu icon 1.4

An additional modification might be to explore ways to make the icon more accessible to screen readers as they will likely be moving to mobile if they have not already begun already.

new menu icon 2.1new menu icon 2.2new menu icon 2.3new menu icon 2.4

I encourage you to run with the idea. If you can perfect it, I'd love to see your implementation. Cheers!



Luke said...

I really like this concept for a menu icon. A little refinement... maybe some skeuomorphistic shadow effects on some of the ribs and BAMO!

eeklipzz said...

Thanks Luke. I agree that I'm NOT a graphic artist. I did however start this idea with simple sketches, then iterated a couple times in an effort to more closely meet needs and expectations of users. My hope is that you all are encouraged by this design.

I'd love to see customized versions and variations of this simple circle with two white lines layout. Different colors, sizes, adjustments, modifications. etc...

Ideally, we'd see a revolution in the mobile menu.

Post a Comment

Yes, please comment.