Will Grant is a British UI/UX expert and a digital product designer. He is a web technology entrepreneur with over 25 years' experience, leading teams (and products) at the intersection of technology and usability. After his Computer Science degree, Will trained with Jakob Nielsen and Bruce Tognazzini at the Nielsen Norman Group – the world leaders in usable design. Since then, Will has overseen the user experience and interaction design of several large-scale web sites and apps, reaching over a billion users in the process. Will is a "design purist" and obsessed with building beautiful, compelling, and familiar products that customers intuitively know how to use. Read more about Will Grant
Navigation
Navigation is important in UX design because it allows users to move through an interface and interact with content. Good navigation should be easy to use and understand, and it should help users find the information they need quickly and easily. Navigation can be created using various elements, such as menus, breadcrumbs, and buttons.
Don’t Hide Items Away in a “Hamburger” Menu
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:
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...
Make Your Links Look like Links
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
When adding...
Split Menu Items Down Into Subsections, so Users Don’t Have to Remember Large Lists
Humans are better at some things than others. We’re really good, for example, at drawing a pretty picture of a flower, but we’re not so good at instantly recalling the precise genus of that flower and its scientific name. Computers are better at that kind of thing.
The rule of thumb for the number of items that a person can reasonably remember and juggle in a list is “seven, plus or minus two.” (Stipulated in George A. Miller’s The Magical Number Seven, Plus or Minus Two, first published in 1956 in Psychological Review.) This research has been around since the 1950s and has sadly been misunderstood and misinterpreted over the years.
The rule doesn’t mean that people can’t remember more than 7 or so items; it refers to the limit of short-term memory processing. An expert in a complex computer system will regularly be able to juggle many...
Categorize Settings in an Accessible Way
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...
The rest of the chapter is locked
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Will Grant is a British UI/UX expert and a digital product designer. He is a web technology entrepreneur with over 25 years' experience, leading teams (and products) at the intersection of technology and usability. After his Computer Science degree, Will trained with Jakob Nielsen and Bruce Tognazzini at the Nielsen Norman Group – the world leaders in usable design. Since then, Will has overseen the user experience and interaction design of several large-scale web sites and apps, reaching over a billion users in the process. Will is a "design purist" and obsessed with building beautiful, compelling, and familiar products that customers intuitively know how to use. Read more about Will Grant