‘hamburger’ button usability

There’s a UI element that seems to have really caught on, which I’m skeptical of.

A button in a navbar that looks like three horizontal lines, sometimes called the ‘hamburger’ button.  (thanks @dbs).

It often  opens a sidebar of additional options and was possibly first used to open a sidebar,  so is sometimes also referred to simply as ‘side navigation’ pattern.

As used prominently on Bloomberg.com:

bloomberg-expando

Or the new (and generally awesome) redesign of nytimes.com:

nytimes-navbar

Or the facebook mobile app (but, as far as I can tell, not the facebook website)

facebook-mobile

However, bootstrap uses this same icon  for something other than sliding out a sidebar of options. It’s still in the navbar — on small screens only and typically on the right side rather than left side as in previous examples — and it still makes some additional options appear, but by default not really in a sidebar style. Make your browser window narrow on getbootstrap.com to see and play with:

bootstrap-small-screen-expando

Whether used for a sidebar pullout or not, I am a bit skeptical of the usability here. Do users really know what this means, do they click on it?

Of course, users might come to recognize the ‘hamburger’ as more and more sites use it — certainly expert users like most of my readers are already quite familiar with it, but I suspect that many less sophisticated users haven’t caught on yet.

I haven’t been able to find any actual user-testing of the usability of these devices — I wonder why Nielsen hasn’t tackled it yet. But there are some other surveys of use and personal musings on it (made hard to find by lack of consensus term for the ‘hamburger’), here’s one good one from smashingmagazine, with some variations too, from over a year ago.

It may or may not be a problem for achieving recognition that the ‘hamburger’ is sometimes on the left and sometimes on the right. (Or that apparently Android has standardized on three-dots-with-swipe instead of three horizontal lines?)

Today I noticed the nytimes.com was providing popup hints on first page load (until a cookie says you’ve seen it), suggesting that nytimes has some reasons to believe users don’t notice the link or know what to do with it on their fairly new page design:

nytimes-prompt

A popup prompt like that seems at best a workaround to unclear UX, not a good solution. (I am also amused by “O.K.” rather than the more usual “OK” — following the nytimes style book, I’d guess?)

If you are scrolled all the way up on nytimes.com, the navbar changes in several ways, one of which is including a label on the ‘hamburger’ button:

nytimes-navbar-scrolledup

I wonder why they thought they didn’t have room for labelling it “Sections” ordinarily, but did when you are scrolled all the way up?

It might make sense to always include the label — if the screen is wide enough.

Of course, on narrow screens down to the several hundred pixels you get on a smartphone, you’ve got to do some things to compress your navbars as much as possible, which is perhaps the origin of the hamburger, and why bootstrap uses it.

I am particularly not fond of the bootstrap pattern, as far as what happens after you click on it, the weird expansion of  buttons in the navbar, rather than an actual sliding out sidebar. This is a different issue than “will the users know to click on the button”, I think what happens when you click on the button is just aesthetically displeasing — in some bootstrap-using apps, where the designers haven’t done enough to make sure it’s clean, I think it can be so aesthetically displeasing that it reaches the point of confusing, although I’m not finding a good example.

I’m not sure what the alternatives are. In some cases, there may be very application-specific solutions that can serve as alternatives to the hamburger — maybe you don’t need so many options accessible from the navbar at all, or can use completely different devices to get them?

Otherwise, I’d say try to always label your ‘hamburger’ if possible nytimes style — it seems that even the smallest screen should have room for a one-word label, no? But if you need to remove it tiny screens, it seems safer and clearer to still include it on larger screens, for designs where the ‘hamburger’ is present even on larger screens.

And as far as what happens when you click it, I much prefer an actual sidebar slide-out to bootstrap’s navbar-expand-slidedown, but you don’t get a sidebar-slide-out for free with bootstrap; it may be tricky to implement reliably in CSS/JS at all?  Anyone know of any good open source reusable implementations of actual sidebar slideout?

About these ads
This entry was posted in General. Bookmark the permalink.

One Response to ‘hamburger’ button usability

  1. FWIW, the hamburger button is also the icon used on the far right-hand side of Google Chrome to “customize and control Google Chrome.” Maybe this too will help increase user’s familiarity with the icon.

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