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!


Resources:

4 comments:

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.

Anonymous said...

Yeah, I'm all for TEXT instead of random, meaningless icons... heck, get rid of the icon and just put...... wait for it....

MENU

arg....

e eklipzz said...

I agree anonymous that it would be just fine for me if it was just text. The purpose of an icon is simply for rapid memory reference. Some may argue that the word "Menu" is in-and-of-itself a symbol that enables quick memory reference. Some others however would argue that the individual letters in the word menu are symbols that the brain must take time to comprehend.

Ultimately what would be best is if the menu icon is one that communicates what it is, then also allows for quick memory reference with minimal cognitive load.

Post a Comment

Yes, please comment.