The so-called “hamburger menu” or menu icon is a UI pattern which is often abused or overused. It consists of three horizontal lines (usually).

Studies on Usability Edit (“Menu” with a border outperforms hamburger icon in a border)


Arguments against use Edit

From an Apple engineer:

In general, 1:

In general, 2:

An example of how they go wrong:


Similarly to Carousels, this pattern hides things…

However, unlike Carousels, this icon is explicitly a place for menu items (sometimes navigation, sometimes actions) that were omitted from the main screen, so motivated users can often find/use them.

Just don't count on it. Don't forget that a hamburger menu is hiding options and adding clicks.

One problem with the hamburger icon is *users have little way to know what is behind it.* For example, in 2014, Wikia launched a redesign making liberal use of the hamburger icon. One use is to show more editing options in the rich-text editor. However, the same icon is seen at the very top of the page, by the Wikia logo; unlike the other hamburger menu, this one does not need clicked and activates on hover, and it shows a bunch of featured wikis (it's a mini directory of wikis on Wikia). I would have expected this icon to require a click, and to feature traditional top-level site navigation choices, such as “Wikis,” “About,” “Help,” etc.

If users assume your hamburger has one purpose and are incorrect, will they ever find the feature they were looking for?

What if they don’t understand its function at all? (Insert joke about hamburger icons being “mystery meat”.)

Fun fact: Xerox Parc’s original GUI had a hamburger menu.

It is telling that this design element never made it to Mac OS or Windows (commercial GUIs explicitly derived from XEROX’s work).

(More history

Designs Who Cannot Admit They Were Wrong Edit

“We just need to educate our users!”