Related Class
Mobile menu hamburger icons cause confusion
- Published on
Commonly used mobile menu hamburger icons can cause confusion among users or apps and visitors to websites. The nearly ubiquitous hamburger icon found in the upper corner of many responsive websites and mobile apps is often the source of confusion. The three horizontal lines are stacked like a hamburger, and UX designers use the icon to signify the availability of a drop-down menu with additional functionality or options.
UX designers like the hamburger icon because they can signify additional functionality and capabilities. But just because it’s being added to many sites and apps doesn’t mean that users fully understand its purpose. A recent BBC magazine story discusses the results of a study conducted by a web developer in New Zealand which revealed that many users simply don’t understand that the icon represents a menu. A study of the UX of these icons revealed that “the icon is not as clear to some users as developers and designers think it is” said James Foster who conducted the study in comments to the BBC.
There are a number of ways UX designers can increase the functionality of a menu within a mobile app or responsive website when viewed on mobile devices. The study found that placing the hamburger icon inside a box increased its use by 22%. Surprisingly, adding the word menu under the icon only increased its usage by 7%. Simply replacing the icon with the word menu increases usage over the icon alone by 20%, which still isn’t as much as placing the icon on its own, with no text, inside a box so that it looks more like a button.
The American Graphics Institute uses the hamburger icon, and many sites and apps for which we have provided UX consulting or UX design services also use the icon as well. You can learn more about the use of icons and organizing interfaces as part of the UX design classes at AGI. But this icon isn’t anything new. Its usage dates back to early UX on some of the first graphical user interfaces of computers. Norm Cox is credited with designing this icon back in the early 1980s while designing interfaces for Xerox.
Today, even when users discover the icon, they aren’t always certain what they will discover. UX designers use the hamburger icon inconsistently. In some cases, it is used like a quick cleaning job around a home, apartment, or flat, with everything quickly thrown into a closet or under a bed. Some UX designers will place all left over items inside the menu, which is not an ideal approach.
Even when placing things in a mobile menu, UX designers should give thought as to whether it is the most appropriate item for the functionality, and even if the functionality belongs within an app or website altogether. Simply because an item is being hidden within a menu doesn’t mean that it belongs in the app, and the inclusion of functionality within a menu should be given as much thought as inclusion anywhere else on the app or website screen. If the functionality doesn’t add to the user experience and if it’s not needed, reconsider whether it must be included.
About the author
Jennifer Smith is a user experience designer, educator and author based in Boston. She has worked in the field of user experience design for more than 15 years.She has designed websites, ecommerce sites, apps, and embedded systems. Jennifer designs solutions for mobile, desktop, and iOT devices.
Jennifer delivers UX training and UX consulting for large Fortune 100 companies, small start-ups, and independent software vendors.She has served as a Designer in Residence at Microsoft, assisting third-party app developers to improve their design solutions and create successful user experiences. She has been hired by Adobe and Microsoft to deliver training workshops to their staff, and has traveled to Asia, Europe, India, the Middle East, and across the U.S. to deliver courses and assist on UX design projects. She has extensive knowledge of modern UX Design, and worked closely with major tech companies to create educational material and deliver UX workshops to key partners globally. Jennifer works with a wide range of prototyping tools including XD, Sketch, Balsamiq, Fireworks, Photoshop, Illustrator, and Blend for Visual Studio. She also works extensively in the fields of presentation design and visual design.
Jennifer is also an expert on Photoshop, digital image editing, and photo manipulation. Having written 10 books on Photoshop, and having consulted and provided training to major media companies and businesses around the globe.
Jennifer is the author of more than 20 books on design tools and processes, including Adobe Creative Cloud for Dummies, Adobe Creative Cloud Digital Classroom, and Photoshop Digital Classroom. She has been awarded a Microsoft MVP three times for her work with user experience design in creating apps for touch, desktop, and mobile devices. Jennifer holds the CPUX-F certification from the User Experience Qualification Board and assists others in attaining this designation in leading a UX certification course at American Graphics Institute. She is a candidate for a Master’s degree in Human Factors in Information Design.