(This article was published as an April Fools Day hoax and does not contain real design recommendations.)

In recent years, the hamburger menu has become a popular user-interface element for mobile devices: an icon with 3 horizontal stripes is shown on the screen as the only visible component to represent a much larger main menu. When designed correctly, this icon is supposed to be a resemblance icon that looks like a navigation menu and that, when pressed, expands into a list of the main navigation categories. While nobody (not even McDonald’s) uses the hamburger icon literally to represent food, some mobile sites do use the icon incorrectly, causing usability problems.

Screenshot of mobile site with a metaphorical hamburger menu in the upper left
Example of a hamburger menu appears in the upper left of this screenshot from Pizza Hut's mobile site. The menu is shown as an icon consisting of 3 short, horizontal stripes.

 

Screenshot from McDonald's mobile site which has a photo of a real, edible, hamburger as a navigation item
McDonald's mobile site correctly uses the company logo (the golden arches) — which screams "hamburger" to most people — as the link to the homepage. This site doesn't have a hamburger menu, but the picture of an actual hamburger is used to represent a link to that food group.

Unfortunately, the hamburger menu has horrible usability for desktop use. Out of sight is out of mind, and the lack of persistent global navigation is a disaster on the desktop.

Our user research with mobile devices has also identified many usability issues with specific hamburger designs even when used on phones, including inconsistencies, risk of activating the wrong part of the screen, and problematic representation of multilevel information architectures. Some of these issues can be overcome by closer attention to user-experience guidelines, but here I propose to eliminate them completely by moving to a different menu metaphor.

Are Pie Menus More Appetizing?

A possible alternative to hamburger menus is, coincidentally, another food item: the pie menu, in which the choices are presented as slices of a pie placed around an activation point. Research by Professor Ben Shneiderman and colleagues at the University of Maryland in 1988 found that users were 14% faster with pie menus than with traditional menus.

While the research might seem to suggest that we should reach for pies rather than hamburgers when composing a menu, there are two problems.

First, it’s well-known among cutting-edge web designers that one should not rely on any research that’s older than last week. Things change too fast, particularly in mobile devices. When the American Ballet Theater staged a revival of The Sleeping Beauty last month with costumes based on a production from the 1920s, they had to redesign the actual costumes because today’s dancers are taller and leaner than dancers were in the 1920s. Along similar lines, maybe Fitts’s Law has stopped working, now that most users are taller and larger than they used to be. If so, I argue that this change in human physical traits will practically neutralize whatever theoretical advantage pie menus may have from a shorter average distance between the activation point and a menu option.

While fundamental facts about human psychology should never limit design innovation, there’s a second, and more serious argument against adopting pie menus. In today’s globalized economy, most companies conduct substantial business in other countries than their own and thus need to consider international users in the design of their sites and applications.

It is well known that nothing is as American as apple pie, whereas nothing is as French as tarte tatin, which is an upside-down apple pie. (Or, to honor dessert neutrality, we could equally well say that an apple pie is an upside-down tarte tatin.) Even the most cursory perusal of a cookbook provides ample evidence that pie menus are simply too prejudiced to be considered i18n appropriate. (For those not in the know, "i18n" stands for “internationalization.”)

Failed Candidate: The Sushi-Belt Menu

Asia is the world leader in economic growth, and business considerations therefore make us turn to Asian menu metaphors for our next candidate to replace the hamburger menu. Japanese restaurants have long offered superior menu usability by using life-sized models of each dish to support a point-and-order interaction style that doesn’t require foreign diners to be able to read a printed menu full of Kanji and Katakana. Additionally, instead of written descriptions, images are always far more telling than words. Around the world, high-tech sushi restaurants have done the mother country one better by presenting diners with real sushi (as opposed to plastic models of sushi) that pass by each customer on a conveyor belt: you simply take the plates you want to eat and eliminate the extra ordering step (thus reducing interaction cost).

A sushi-belt menu has the major usability benefit of supporting lazy users who don’t have to do anything except sit and watch as the various commands and navigation options are presented, one at a time. When something passes by that you want, then you click, but otherwise no action is needed.

Countless studies have shown that web users are lazy and that we need to minimize their workload.

On the other hand, we have much usability evidence for the dangers in homepage carousels on websites, and the conveyor-belt menu is really an extreme case of a carousel that only moves one way.

Furthermore, we have conducted extensive field research on real restaurant diners for an exercise in the course on User Research Methods: From Strategy to Requirements to Design. Field-study data conclusively shows that people tend to overeat and buy more when an endless stream of delicious morsels is coming their way with no effort required to see more. Sites that rely on advertising probably appreciate users who consume too many page views. But in general, information-foraging theory says that users consume web pages in the same way in which wild animals hunt for food in the jungle, and seeing too many low-interest pages will eventually make users abandon those sites.

Pizza Menus for a Better Slice

After considering — and rejecting — so many menu designs, things may seem bleak. But don’t despair. Today, I am pleased to announce that our latest research confirms that the pizza menu provides superior user experience and thus can be used to overcome the usability problems imposed on users by the hamburger menu.

Before anybody complains that the pizza menu would also suffer internationalization problems, let me point out that pizzas are served all over the world — members of Nielsen Norman Group had particularly delicious pizza in Hong Kong during one of our recent conferences. Also, innovations like the Hawaiian pizza (dominated by pineapple) would never have been served in a traditional Neapolitan pizzeria, but are bestsellers at California Pizza Kitchen. Pizza is international these days.

The pizza menu offers ultimate customization: the user employs the phone’s speech-recognition features to metaphorically “call in the order” and state his or her 7 (±2) favorite commands. (Or, if voice command is not convenient, like on the desktop, you can type in the first few letters of the command. On the phone, you could even take a picture of an object that may represent your command — how’s that for instantaneous, user-tailored icon creation!) The app then builds a customized menu with these “toppings.” After this easy step, the user now has ultrafast access to all these frequently used commands by simply pressing a pizza-shaped icon in the upper-right corner of the screen.

Any less-frequently accessed commands are still available by placing another call to the customization software to order a replacement pizza menu that is temporarily displayed as a second, smaller pizza-shaped icon until it’s “eaten” by the user by virtue of being used.

Since we have previously noted the usability problems with Quicklinks menus, it’s important to point out the essential user-experience difference between Quicklinks and pizza menus: Quicklinks are not visualized as a circular icon with cheesy coloring. Quicklinks thus lack the indispensable ability to correctly establish users’ expectations before they activate the menu. Since users expect Quicklinks to be quick rather than cheesy, it’s no wonder we often uncover usability problems when testing these menus.

The pizza menu, on the other hand, has all the ingredients for UX success. Not least a catchy name. Give it a taste in your next mobile design — and it might even scale to work for desktop designs as well if you consider a 16-inch model as opposed to a pizza-for-one.

Happy April Fools' Day: I hope I fooled you — until at least halfway through the article.

Reference

J. Callahan, D. Hopkins, M. Weiser, and B. Shneiderman (1988): “An empirical comparison of pie vs. linear menus,” Proceedings ACM CHI’88 Conference, pp. 95–100.

Other April Fools Articles