What’s the Problem?
An article from Nielsen Norman Group on hamburger icons that enumerated the problems in using hamburger menus and other potentially obscure (or hidden) forms of navigation. These include:
- users are less likely to use navigation when it is collapsed or otherwise hidden (like hamburger menus)
- user experience tends to be less satisfactory, especially if it appears on desktop browsers
- such hidden navigation impacts the accessibility of content that does not otherwise have an in-page link
I have previously recounted my own experience using the Quickbooks Online application, which debuted in 2014. This was an instance of a desktop application using hamburger menus as a matter of course.
I believe responsive design is a different issue. In many responsive designs, the hamburger menu only appears when the browser window reaches a certain size where the top-level navigation menus would become cumbersome. This varies based on the custom code developed, but certainly by the time you get to a mobile phone, the collapsed nature of the hamburger menu makes sense. It is also becoming so common on mobile devices that users know to click on the collapsed hamburger menus (much more so than when in a desktop interface).
What’s the Solution?
Norman Group recommends maintaining the difference between desktop and mobile. On a desktop application or browser window, provide the full set of navigation options along the top (as on our website). If you have relatively few navigation options, these can be displayed even on a mobile device.
On mobile devices, hamburger menus can be used as they are more common on mobile devices.
Provide in-page links to content that may be inadvertently missed if users don’t click on the hamburger menu. This helps ensure that your users will find your content.