We take a closer look at the hamburger icon and alternative navigation patterns. When it comes to controversial UI, the hamburger navigation pattern has had its fair share of criticism, dismissed as everything from ‘mystery meat’ to ‘the devil’.

1. 5 ALTERNATIVES TO THE HAMBURGER
MENU, MOBILE UI’S MOST
CONTROVERSIAL PATTERN

2. Download Justinmind for free at www.justinmind.com
• What is the ‘hamburger menu’ and why is it so controversial?
• Hamburger history as a UI element
• Good and bad UX impacts of hamburger navigation
• Alternative UI patterns for better navigation
• Expert tips for happy hamburgers
This Slide Show in bullet points

3. Download Justinmind for free at www.justinmind.com
• The hamburger menu is “a button in a graphical user interface carrying an
icon consisting of three parallel horizontal lines” (Wikipedia)
• First designed by Norm Cox as part of the user interface for the Xerox Star in
1981.
• Gained traction with the explosion of mobile device use over the past decade.
Background

4. Download Justinmind for free at www.justinmind.com
• Simple and elegant solution to over-cluttering, a simple way to minimize content
• Eliminates ‘decision fatigue’ and information overload
• Clean user interface
• Directional navigation = faster user experience
Positives

5. Download Justinmind for free at www.justinmind.com
• Problems when it comes to user engagement due to reduced visibility of functions
• Negative impact on satisfaction, speed perception and revenue
• Confusion for less savvy users
• Overcrowded top-bar, which leads to misclicks and user frustration
Negatives

6. Download Justinmind for free at www.justinmind.com
Alternative UI patterns

7. Download Justinmind for free at www.justinmind.com
The scrollable tab bar
Left: Facebook’s old hamburger button navigation. Right: The new tab bar style
Credits: TechCrunch

8. Download Justinmind for free at www.justinmind.com
The scrollable tab bar
• The most common features or functions are clearly displayed in a tabbed menu in the
lower section of the screen.
• The combination of the navigability of the tab with the tidiness of the hamburger
means that the common features are still visible, and less sought-after features can
be accessed by scrolling through the tab.
• Michael Scharnagl’s Priority+ navigation (show as many navigation items as will fit
horizontally, with a UI toggle to show the rest).
• It struggles with the same discoverability problems as the hamburger.

9. Download Justinmind for free at www.justinmind.com
3D Touch
• Trailed by Apple in 2015.
• It incorporates a new gesture into mobile interactions: pressure of touch. By pressing
harder or longer on your device’s screen, you’ll reveal the hidden navigation elements
that would once have been found behind the hamburger menu.

10. Download Justinmind for free at www.justinmind.com
Fly-out menus
USA Today Mobile App Facebook Mobile AppGoogle + Mobile App
Image credits: https://www.unleashed-technologies.com

11. Download Justinmind for free at www.justinmind.com
Fly-out menus
• Fly out menus have been around since the early days of web design
• Combination of a text-based top bar menu with sub-menus that fly out when users
hover over them
• With mobile apps, gestures like swipe or toggle are an option

12. Download Justinmind for free at www.justinmind.com
Menu carousel
• Features and functions slide in and out of view automatically.
• A great option for minimizing clicks.
• Risk: user boredom, exposure to uninteresting navigation options
“In Sportypal, the user can choose a new
workout using a continuous carousel, in
which all items are viewable. Here one item
is clearly in focus. Swiping the carousel, or
tapping on the arrows makes the carousel
move one step at the time. So the user has a
maximum of 2 steps to take to reach the item
he wants to.” (UNITiD)

13. Download Justinmind for free at www.justinmind.com
Floating hamburger
Image credits: www.Justinmind.com

14. Download Justinmind for free at www.justinmind.com
Floating hamburger
• Hamburger taken out of the overcrowded tab bar and made into a floating action
button
• Great for grabbing the user’s attention, saving screen space, and overcoming
reach difficulties in larger screened smartphones
• Downside: the menu contents are still hidden

15. Download Justinmind for free at www.justinmind.com
Ex. YouTube’s mobile app
And what if all else fails?
Change your UI architecture!

16. Justinmind Prototyping Tool
www.justinmind.com
DOWNLOAD NOW
DOWNLOAD JUSTINMIND TODAY TO STREAMLINE SOFTWARE DEVELOPMENT!
Get the Justinmind editor and start prototyping