I’ve been on a crusade to abolish hamburger menus, also known as basement menus.They were introduced or perhaps popularized by the early Facebook app. Like an epidemic, it spread. It’s currently used in many native apps, especially on Android and it’s also used as the default solution on many responsive web frameworks.
Why is This bad User Interface Design?
Great UI provides hints about what it’s going to do before you do it. It feels intuitive. Any symbol that is too abstract is confusing because it has zero “Information Scent”. The idea of Information Scent is that it gives you a clue as to what you should expect. If you expect something to happen, it feeds your intuition. If a user is looking for a feature like Favorites or Groups, they will scan the screen and tap the thing that most closely resembles what they want.
People don’t end up tapping on the hamburger menu because it doesn’t convey any specific meaning. Even if you teach a user about the mechanics, they will often forget about it when looking for the next feature. “I didn’t think to look there.”
Somehow responsive web design started to mean that all primary navigation became collapsed into a hamburger menu.
This was perhaps okay, in the early days of the mobile web. A few years ago the mobile web was getting a tiny fraction of traffic, but that is no longer the case. I’ll give acknowledgment to ESPN and Boston.com who exposed a few hotdog links, but as a whole the primary navigation is hidden.
The Start of a Solution.
The start of a solution is the Information Scent. I proposed a solution to the BootStrap open source project.
There’s a lot of research to suggest that a three-line hamburger menu is a poor for usability and discoverability of main website navigation. This issue is to propose an alternate design.
Menu 1 | Menu 2 | Menu 3 | Menu 4 | Menu 5
Menu 1 | Menu 2 | Menu 3 | More…
The initial response seemed very positive, a commenter proposed a CSS based solution that was very clever. I’ve been playing using it as a starting point and think that responsive menus that scale, scroll, and provide overflow a great direction.
CODEPEN EMBED: https://codepen.io/graiz/embed/NNOVoX/?height=266&theme-id=light&default-tab=css,result&embed-version=2#html-box
A couple key points:
● The menu above will resize its font to be screen appropriate using a media query.
● The “more” menu appears on smaller screens and allows you to expand the menu vertically.
● On small screens, the top menu should also scroll horizontally. This partially works, but would need some fixes to work well across more mobile browsers.
● Future adaptations would include support for sub-menu items. These would be drop-down when using a mouse, and drill-down when on small devices that don’t support hover.
Do you have a project in mind? We’d love to work with you. If you’d like an opportunity to work on projects with us, check out our Careers page. We’re hiring!