UX Term of the Day: "Hamburger" (#4 Hot UX Trend for 2013...)

*Ahem*...

'Hamburger' meet World. World meet 'Hamburger'...


A hamburger button or control is basically 3x horizontal lines of equal length that review a side navigation panel. The going 'theory' is that it's called Hamburger because the top and bottom lines are the 'buns' and the middle line is the 'meat' or burger patty.

Visually its identical to the menu button beside address bar on Chrome Browser (for those 52% of viewers who use Chrome to view my blog!).

Don't believe it's a new trend? Gizmodo has as #4 new UX trend for 2013. See here.

This newest little UX pattern is on the latest LinkedIn and Facebook app released just earlier this year. Jessica Lessin from 'WALL STREET JOURNAL' even did a feature article on "Hamburger Button" in March (2013) with a short video demonstration of the control on the WSJ app:

What’s a ‘Hamburger’ Button? A Guide to App Features

*IF* you are planning on using a Hamburger in your app, I have a few suggestions because this control is implemented so many different ways:

• When it's used just as a menu control in a top nav bar, it often acts like 'Butcon' (Button Icon) which you 'Tap'.
• When using as a sliding menu, it is a 'Tap-and-Drag' control. 
• However I also like the 'Bezel Swipe' gesture to also open *and* hide a menu control. (This last one is used quite often on BB10 and Win8 Surface to activate standard device menus.)

Therefore you would need at least these 3x ways:

1. 'Tapable'  Menu butcon with visual feedback for depressed state
2. 'Tap and Drag' control, so user can "drag" open the menu
3. 'Bezel Swipe' gesture from the left side of screen (along *all* of the left-hand-side).

Well, there you have it. 

If the trend stays the same, we're likely to see this control on just about everything, just like we saw the explosion for "Pull-to-Refresh". (Interestingly, for those of you who didn't see it, I think Twitter and Loren Britcher got it patented... but agreed to "only use his patent defensively"...)

Baring any radical changed, you should start to see the Hamburger on at least one Mobile SAP app that I have pushed for on at least two different platforms. SAP isn't a radical IxD shop, so when we're adopting it, it's "definitely" gone mainstream! ;)

Hope that helps...

Wayne Pau.


p.s. Er...so that Hamburger control, it just three lines right? Well.. make you don't get it mixed up with the following somewhat 'similar' controls:

1. Motorola Hardware Menu Button

2. MS Word Bullet Butcon
3. Android Holo Composition Icon
4. Android Context Action Bar Overflow (top right on Android devices)

To be honest there are a of other very similar ones too, I could have easily expanded the list. It just goes to show you, it's all in the 'subtle' details, right?

p.p.s.Still don't believe me? Well here are two screen shots from the recent Facebook and Flickr apps.

(Facebook @ Android)

(Flickr @ Android)