Have you ever used an app or website where the navigation process was a nightmare? You may have clicked on an icon or link anticipating one action only to get a different kind of result. It’s not only frustrating and confusing, but makes you second-guess every action you take from that point onward. Trust has been lost.

Recently, I used an application that presented records in a list view. Using a pop-up menu, the developer had given users the ability to edit or delete each of these records. However, there was a problem with this process: The presence of the pop-up menu was indicated with a hamburger icon.

In 2020, use of the hamburger menu is fairly well-defined: It launches a navigation menu of some kind, frequently for layouts where a hover or click will reveal a dropdown or card window. And while this is similar to how it was used on the application I viewed, they aren’t the same. I had clicked the icon anticipating a global navigation menu and instead received a localized pop-up menu. If this icon’s use was still ubiquitous, it may have worked in this setting. But because users are so familiar with the hamburger, they’ve grown to have a very specific set of expectations of what it should do. It was a poor UI decision.

If you’re uncertain which icon to use, I recommend starting with a basic image search. This step will quickly tell you if there’s an established norm for the function you’re including. For the application I mentioned above, a better solution to indicate that additional tools are available would be a gear symbol or an ellipses (either horizontal or vertical) as they are user-anticipated icons indicating further options are available (a quick search confirms this). FileMaker has their set of icons that come pre-loaded, but there’s also the option to input additional ones. You can design your own or use a repository such as Font Awesome.

It’s worth noting that for third-party integrations — social media, app stores, etc. — it’s important to use the official set provided by those third parties. They’ve worked hard to build their brand recognition with their user-base for specific purposes. While you may create a stylistically unique hamburger icon, that doesn’t always work well for other brands (and potentially would be in violation of their terms and conditions as well).
As a developer, one of the top priorities (if not the top priority) of your interface is for clear, effective communication with the end-user. Icon design is a significant part of this. When you’re indicating an established function — download, refresh, save, etc. — don’t reinvent the wheel. And when you need to signify a less well-known or custom tool, be intentional about your decisions. Your users will thank you!

PK Information is a FileMaker-certified development agency serving the Tampa Bay and Knoxville regions. We believe that great software can change everything. Would an interface refresh help users better navigate your application? Contact us today!

SUBSCRIBE

Sign up with your email address to receive future posts like this directly to your inbox.