An emerging design trend hides a website’s navigation when viewing the desktop version. The menu is activated by clicking on an icon which design insiders call the “hamburger”.
The hamburger is useful for mobile sites where the screen real estate is small since it hides the navigation until the visitor taps it. However, using it on desktop versions presents usability challenges. This is an example of “just because you can, doesn’t mean you should”.
Usability guiding principles
Washington State University sites use a hamburger icon on our mobile site versions but when viewing on the desktop, it’s a different story. The full navigation (which we call the “spine”) is available at all times. The spine orients site visitors as to where they are and increases their confidence in navigating to where they want to go. Hiding the navigation for desktops, laptops, and tablets fails to support one of the 10 universal usability heuristics:
Recognition rather than recall
People are better at recognizing what they have previously experienced rather than recalling things from memory. Retaining a visible navigation fulfills the state of recognition. Hiding it demands recall. Visible navigation as supplied in the spine, gives users an idea of what is offered by merely glancing.
Screen size limits communication effectiveness
To understand why hidden navigation in a desktop environment is counter-productive, it is helpful to understand the limitations of mobile interfaces as useful communication channels. The limitations are:
- User memory – People have to remember their original task, information about what the site offers, information about what is on the page, and how to interact with the user interface.
- Device portability – The fact a device is portable means people will use it anywhere. There is a bigger chance they will be interrupted, further taxing their memory.
- Screen size – The mobile screen is smaller and users have to keep more information in their working memory. Even if the content exists on the page, it may not be visible in front of their eyes.
There are enough problems inherent with a mobile interface and user engagement, that it makes little sense to employ mobile design conventions on a desktop interface. If the hamburger menu with hidden navigation is used on all pages, users have to pull down the menu just to figure out where they are within the navigation. If they want to move on, they have to pull the menu down again to discover the options of where they can go. If a user has this navigation experience page after page, it conveys the impression that it is going to be work to use the site.
The first click matters
The diminished experience of mobile navigation lessens the chance of getting the first click right. A series of studies for government agencies show that getting the first click correct for a task led to a success rate of 87%. If the first click wasn’t correct, the success rate plummeted to 46%.
Users perceive the WSU site as one site. As such, they expect to have the same experience moving around the different university unit sites. During a usability study for Admissions it was observed:
Students do not see the WSU site as a group of individual sites. This is our internal perspective. It was probably the most startling behavior observed during the test. Many of the participants restarted each new task at the WSU home page regardless of what site they ended on in the previous task. Our audience sees all WSU sites as one big site, and sometimes they become disoriented …
(2009 usability study report)
As keepers of WSU sites, we want to achieve our site goals. For this to happen, we have to accommodate our visitors’ goals and give them solutions that address their needs easily and efficiently. We serve all of our needs by eliminating roadblocks which require people to learn a new navigation system when they land on another department’s site. Users quickly abandon sites which make it difficult to accomplish their tasks. In the end, it translates into lost opportunities.