Few UI patterns can be as controversial as the hamburger menu. Over the past five years, it’s become the de facto way of offering a menu on small displays, typically as a website scales into mobile or tablet width using responsive design:
Figure 29.1: The dreaded hamburger
Research shows (from Hamburger Menus and Hidden Navigation Hurt UX Metrics, https://www.nngroup.com/articles/hamburger-menus/) that hamburger menus:
Simply put, the hamburger menu hides items away from users and makes them less discoverable. Additionally, because the menu is hidden, users can’t gain a sense of “where they are” in the product.
It’s worth noting that since the research linked above was undertaken, users have been exposed to the hamburger...
Links, or hyperlinks, are the basis of the web and were one of the key advances when Sir Tim Berners-Lee invented HTML in 1989. In the original browsers, clickable links were blue, italic, and underlined. They looked gaudy and out of place, but that was the point: it was a brand-new concept and users needed a way of telling a link apart from the rest of the text on the page.
Fast-forward to the present day and the practice of styling links has largely been abandoned in favor of only highlighting them when they’re hovered over or, worse, adding no visual affordances to them whatsoever.
The style-on-hover approach is less than ideal: users on touchscreen devices have no hover state. Meanwhile, users with a mouse end up “hunting” for links by hovering over parts of text bit by bit, hoping to find a link, or just never finding them at all.
Figure 30.1: A gov.uk page with clear links and nice controls
There’s no need to include every possible menu option in your menu when you can hide advanced settings away. Group settings together, but separate out the more obscure into their own section of “power user” settings, which should also be grouped into sections if there are a lot of them (don’t just throw all the advanced items in at random).
The assumptions you make about which features are advanced should be backed up by user research; techniques like card sorting or tree testing with real users can expose the right set of advanced settings.
Not only does hiding advanced settings have the effect of reducing the number of items for a user to mentally juggle (refer to #31, Split Menu Items Down into Subsections, so Users Don’t Have to Remember Large Lists), it also makes the app appear less daunting, by hiding complex settings from most users.
By picking good defaults (refer to #96, Pick Good...
Your site’s navigation is at the top of the view, but the user has scrolled right down the view—no doubt captivated by the wonderful, engaging content you’ve provided—so how do they return to the top of the page?
Most mobile browsers have a shortcut where tapping the top bar of the app will scroll the page up. There’s no need to provide a “back to top” link that floats down the page: it’s a waste of space.
A great solution is to repeat main menu items in the footer of the page or, at the very least, add some shortcuts to popular parts of the site. Including a “mini breadcrumb” (a shrunk-down version of the typical breadcrumb control) is more useful than a “back to top” link, as the user can hop back up a level to find the next item.
Figure 33.1: Apple.com features a “mini breadcrumb” in the footer to great effect...
© 2022 Packt Publishing Limited All Rights Reserved
