Mobile App Navigation Options: A Hamburger Icon Alternative

20140512-143204.jpg

Last night I discovered that TIME Magazine had added an intro tour screen for the sole purpose of explaining how to use their hamburger icon.

20140512-184554.jpg

It took me back to a presentation I attended at ConvergeSE a few weeks ago, during which Mark Boulton said something like, “If your faucet design requires an instruction guide, you’ve done something wrong.”

Their faucet was a hamburger icon navigation menu and their users just weren’t getting it.

I doodled the sketch above and posted it on Twitter, and wound up having a great subsequent conversation around it with another designer.

He asked, “Do you have any suggestions for hamburger icon alternatives?”

I surely do! I’m a fan of the screen base icon bar. Toss in 3-4 icons and a “more” option, and you’ve got a clean easy to understand navigation structure.

You do need to make sure that your icons are either very clear to your users in meaning, or labeled for this method to work well.

The native iPhone Quora, Twitter, Pinterest and Facebook apps are all rocking this style at the moment.

Facebook

20140512-184834.jpg

Pinterest

20140512-184847.jpg

Twitter

20140512-184858.jpg

Quora

20140512-185028.jpg

As you can see, Facebook even managed to cleanly pulled off a modified hamburger, by converting their hamburger icon to a “more” option.

The next time you’re tempted to pop a hamburger icon in your app and call it a day, consider making a healthier more user friendly choice!

Advertisements

One thought on “Mobile App Navigation Options: A Hamburger Icon Alternative

Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Up ↑

%d bloggers like this: