in Apps

Design a delicious “hamburger” button app layout


Facebook’s hamburger button layout is probably the most well known across platforms. In this post, we look at how to make a good one. Image from: thehamburgerbutton.com

An increasingly common trend in apps on all platforms is to create a clean landing page that reveals the purpose of the app, and neatly tuck away all the other functionality of the app off screen. The Windows design patterns beautifully support this through the Hub and Pivot controls, however, as with most patterns, these are meant as guides. And we’ve seen some of the best apps stray from the norm, in order to optimize their experience around their content, or build a design pattern that works across platform.

The “hamburger” app layout

hamburger-sketch

Whether you like it or not, the “hamburger” app layout, is a staple for mobile apps across iOS, Android, Windows Phone and the web. You’ve definitely seen it before, those unassuming three bars in the header, usually a navigation menu with search off to the left, and a list of some sort off to the right. I’m sure it has a lot of different names, from “off-screen menus”, to “slide” or “panorama” but for this post, we’ll just call it “hamburger.” We can debate whether it’s right for your app, but it’s out there, so let’s talk about it.

Six juicy reasons why it’s successful

  1. It’s offers a clean landing page
  2. Secondary navigation and tasks are off screen
  3. You know there’s more off screen, because of the hamburger button
  4. It feels slick to swipe over to reveal more content
  5. If you don’t know how to swipe over, you can just click the button
  6. It doesn’t rely on any one platform’s design aesthetic, pattern or controls

Some implementations aren’t very tasty

Like the layout’s food-counterpart, not all implementations in the category are created equally. I do not purport to be any kind of expert on the hamburger layout specifically, but I am an expert on touch interactions and app layouts, and I’ve seen enough of these with developers I’ve worked with to know that some are better than others.

Since it isn’t a platform-specific design pattern or control, we’re more likely to see the inconsistency: everything from design usage, to performance and interactivity. Like most touch interactions, it’s hard to know how to do it right, but it’s easy to tell if it’s wrong; whether it’s a stutter animation, or something that’s hard to use.

Ingredients for a good layout

Like the scorecard that we used in designing custom touch interactions, we can make a scorecard for the hamburger too:

  1. A hamburger button in the header, to tell you there’s something off screen. Tapping the button shows it.
  2. The main content area is still visible when you’re viewing the off screen menus. Tapping on the main content area, or the hamburger button brings you back to the main content.
  3. You can swipe over to the off screen content, to bring it in without tapping the button.
  4. You can drag between panels with buttery smooth, stick to your finger, direct manipulation goodness, that feels like you’re sliding on melted American cheese.

Does the touch stuff matter? There’s a button…

Yes, the touch stuff matters. If you chose to use this pattern in lieu of simply a button that navigates to a menu page, or show a popup, you’re carrying the load of user expectation with you. Because the content is off screen to the left, I should be able to drag over to it.

The pattern isn’t good because it looks good, it’s because our puny human brains are good at understanding spatial relationships. Like other spatial metaphors (see the desktop) you can build a mental map for how the app is laid out, even if you can’t see it all the time. The touch screen affords a way to navigate this spatial canvas. We’ve learned from interacting with tons of scrollable canvases that you can pull things from off screen by dragging them in; from panning around in the web browser, to flipping through photos, to scrolling lists.

Without a good direct manipulation swipe interaction, the hamburger layout is broken and incomplete. Even though it’s not required to use, with the button, in my opionin, it’s the whole reason for using

Building it

Easier said than done right? In the next post we’ll walk through one example of building a hamburger layout for Windows and Windows Phone, all in HTML, JavaScript and CSS.

Update: See the next post on building delicious hamburger button layouts.

Have you used or built a particularly good, or bad hamburger layout? I’d love to hear about it in the comments!


Image from Kingkong21 on Flickr

Write a Comment

Comment