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?
- Researchers from Cooper | Catalyst Group found that 52.4% of older users understand the hamburger menu. Though lack of "tech savviness" may be the reason behind this low number, this is a significantly low percentage.
- Web publishing company Exis performed an A/B test of 240,000 mobile visitors that showed a 20% increase of clicks with a labeled hamburger menu.
- Mobile optimization provider Moovweb found that labeling the menu "increases engagement more than 50%" in a study of 300,000 mobile site users.
First, a couple of caveats:
- 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.
- Website images are used for illustrative purposes only. All copyrights, trademarks, etc. of the listed website images are properties of their respective companies.
- 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. 1-800-Flowers.com 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.
Petco
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.
Walgreens
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.
Tested
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.
Costco
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.
NCR
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.
GNC
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.
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