UX icons can cause confusion
Adobe Training Classes from the authors of the best-selling book Adobe Creative Cloud for Dummies
We'll provide you personalized
training options right away.
Published on May 25, 2015
Commonly used UX icons can cause confusion among users or apps and visitors to websites. An example of this is the nearly ubiquitous hamburger icon found in the upper corner of many responsive websites and mobile apps. 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, Photoshop expert, educator and author based in Boston. She 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 delivers UX training and UX consulting for large Fortune 100 companies, small start-ups, and independent software vendors. 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 Windows UX Design, having worked closely with the Windows team to create educational material and deliver UX workshops to key partners globally on behalf of Microsoft. Jennifer works with a wide range of prototyping tools including Fireworks, Photoshop, Illustrator, Blend for Visual Studio, and Balsamiq.