Friday, May 13, 2016

10 Websites That Label Their Hamburgers (Menus)

It's a given - your mobile website or app needs the ability for visitors to navigate through all of its features.  Based on the latest design trends, you are highly likely to use the three line "hamburger" menu. Not only does this icon use little space, but since so many other mobile properties use this icon, everyone will instantly know that pressing it should bring up a menu, right?

Many user experience professionals recommend labeling the three lines with the word "MENU" or "SHOP" or "CATEGORIES" or something else to explicitly state what pressing the icon performs. Does labeling the icon matter?

Perhaps you or your chief designer / project stakeholder is not convinced, especially because it may seem that every mobile website and app uses only these three lines. As a counter-argument, ten mobile websites that label this once-called "air vent" icon are presented below.

First, a couple of caveats:
  1. This is just a list of 10 websites I have found that happen to use labeled menus. This is not to say I could only find 10 websites, nor is this to say that a site listing is any endorsement of the website’s complete design, products or services offered, etc. 
  2. Website images are used for illustrative purposes only. All copyrights, trademarks, etc. of the listed website images are properties of their respective companies.
  3. Website snapshots were taken on 2016-05-09 with an iPhone 6S+ and subject to change. Some websites may later decide to not label their menus….
Whether they are being sent for a special holiday, to recognize an achievement, or for a birthday, flowers are gifts acceptable on many occasions. labels three lines with the word "Menu", also adding a magnifying glass to the icon. Pressing this shows a slide-in menu with account-related options on top and a search box. 


The American Pet Products Association predicts that Americans will spend over 62 billion dollars on their pets this year. Pet supply website Petco labels their three lines with the word "SHOP", offering a slide-in menu with account-related options on top. The menu does not offer a search box, but the search box is already on the main page underneath the company logo and navigation icons.

Smashing Magazine

This web design and developer website has gone through various iterations over the years, and they discuss some of their forays into mobile navigation design. The hamburger icon is ditched altogether with only an orange "MENU" button along with an orange magnifying glass search button.

NBC Sports

Watching sports is an extremely popular pastime, whether the game is auto racing, baseball, basketball, (American or world) football, golf, hockey, tennis, or one of many other games. NBC Sports offers a labeled hamburger menu to access their categories; pressing the button slides a menu and offers a search bar. However, search results were mixed so you might be better off navigating to find your favorite team's information.


The largest pharmacy chain in the USA, Walgreens offers navigation icons for one's shopping cart plus a labeled menu, displaying a search bar underneath. Pressing the menu button animates the webpage away to the right, showing a left-side menu with account information, products, and other options including a store locator.


Those sad about the ending of the Discovery Channel TV show Mythbusters can find some of Jamie Hyneman and Adam Savage's newer writings and videos on website Tested. The website offers their take of the animated menu with labeled "MENU" text, offering a slide-in menu from the left when pressed. The top of the website offers links to sign up or log in, and a search box.


The largest membership-based warehouse club operation in the United States, Costco provides labeled navigation icons to store locations, account information, and the shopping cart, a hamburger menu labeled with the word "Shop", and a search bar. Pressing the "Shop" button shows a category of departments displayed underneath the navigation area. 


The company behind the first mechanical cash register, NCR's website forgoes the hamburger icon with just a "MENU" button to guide website visitors to their financial, retail, hospitality, travel, and other offerings. Pressing the button brings in categories and company information underneath the logo. Search is available, but one must scroll to the bottom of the menu to access it.


Health and nutrition provider GNC does not label their store locator or shopping cart icons, but they do label their hamburger menu with the word "MENU" and offer a search bar underneath their top navigation and promotion crawler. Pressing the menu button brings in a slide-in menu from the right and darkens the rest of the display, forcing readers to concentrate only on the menu items.

Sinclair Broadcast Group (various TV stations)

The Sinclair Broadcast Group, according to their about page, owns 168 television stations. Although every single station's website was not visited for this article, I did note that many of the websites including WZTV (Nashville), KOMO (Seattle), and KABB (San Antonio) have labeled hamburger menus. Pressing the button opens a menu and search box.

What is interesting is that their corporate site does not have a labeled hamburger menu.

Navigation of some type is vital for most every mobile website or application, and the reduced amount of space limits the types of menu systems one can implement. While the three line "hamburger" menu is a very popular method of navigation, numerous studies have shown that labeled icons are more usable, and that older individuals (and many younger ones too) may find the three lines confusing. In case labeled menus are considered not important, not "artsy" enough, or a waste of valuable space, these ten examples illustrate just a few of the many mobile websites where the designers or developers felt otherwise.

As with anything UI related, testing against your target audience is strongly encouraged to help determine if labeled menus can increase user engagement.

Like this article? Follow me on Twitter @malekontheweb

No comments:

Post a Comment