UX Smack-Down: Bottom Navigation Fail

Image Credit: The Fight City.

History (how did we get here?)

Once upon a time, there was the simple Navigation Drawer with a Hamburger icon.

Life was simple.

Image Credit: Pinkesh Darji via LogRocket

Then, for some fairly compelling reasons (e.g. fewer clicks, easier thumb reach with ever larger devices), Navigation Drawers were gradually replaced by navigation components which were persistently pinned to the bottom of a screen, ala “Bottom Navigation”.

Mapping of the ‘thumb zones’. Image credit: Smashing Magazine.

As Navigation Drawers are an “off stage” element (they are hidden unless summoned by the user), they are afforded more screen realestate when they become visible. This increased realestate means that developers typically don’t think twice about including textual labels for each navigation item.

Conversely, Bottom Navigations are persistent across all screens of an application, which means they must use minimal screen realestate.

Facebook’s Bottom Navigation. Image Credit: Smashing Magazine.

Presumably, it is for this reason – that some developers have decided to throw caution to the wind, and drop textual labels from their navigations altogether… often at their peril.

Sometimes textual labels CAN safely be ignored.

One of the golden rules of Bottom Navigation’s is – do NOT drop textual labels unless it is 100% certain that all users will know what the icon means.

Instagram

A good example of this is Instagram, which has 5x icons in their Bottom Navigation. The intent of each icon is immediately clear:

Image Credit: Instagram.

i.e. left to right, we implicitly understand the meaning of each icon:

1. Go Home
2. Search for stuff
3. Add something new
4. Something about Videos
5. My Profile

Apple iOS Camera

Curiously, Apple has sidestepped the typical icons for ‘Edit’ in the Bottom Navigation of their iOS Photo’s application (e.g. a pen), and instead opted to employ a mix of sans-label icons and plain text:

Apple’s iOS use of mixed icons and text. Image Credit: Apple.

It’s better to be safe, than sorry

Unfortunately, there are all too many examples of people forgetting this simple rule, and failing to include textual labels despite the use of icons that are ambiguous at best.

HipCamp

While on the ‘Search’ tab, a map icon is displayed on a floating button at the bottom of the screen. You may correctly assume this map icon indicates an interactive map view.

However, the same map icon (albeit with a different fill) used in the Bottom Navigation has a completely different purpose.

When I clicked the Map icon in the Bottom Navigation, this was not what I was expecting.

Image Credit: HipCamp.

Camps Australia Wide

In this example, the Bottom Navigation for Camps Australia Wide confusingly uses an circle “Add” icon for what might be considered “More”, or “Menu”.

Image Credit: Camps Australia Wide.

Conclusion

Hopefully the conclusion is clear 😉.

• Text typically trumps Icons.
• Icons should typically be used to support text, not replace it.
• If you’re not sure, use text.

Got other ideas? Let me know!