As designers, simplicity is a goal we strive for with everything we design. We want our designs to be usable and intuitive but that can often be mistaken for clean or minimal visual designs.
This simplicity can be misleading and it could be harming the usability of your designs.
I’ve picked out a number of examples of false simplicity and what to do to actually make them simple and usable.
During my experience of working on large sites with millions of users, I’ve found the hamburger menu is not exactly to everyone’s taste.
It was initially seen as a necessary step to fit many items onto smaller screens but then something terrible happened. Designers started using them on desktop views, even when there are only a handful of menu items that could comfortably all fit on screen.
Presumably this is so the website can adopt a cleaner, more minimal view. Sure, it can look a bit nicer but it comes at the expense of usability. The old saying, “out of sight, out of mind” applies perfectly.
Here’s an example I found after literally spending less than 1 minute on a well known “inspiration” gallery website:
They have a grand total of just 5 links in their menu. There’s no reason to hide them, except if you’re a weirdo and want prioritise minimalism over everything, so much that you don’t even want to include the name of your company on the design. WTF?!
“We create homes with soul”. The same certainly can’t be said about your website. Zzz…
Even if there were too many items to display, there are better ways than hiding it all behind a hamburger menu.
If you want fewer people to use your navigation, then by all means, stuff it behind a menu button, even on desktop. Fewer people will bother going into the menu and use the navigation than if it was exposed for all to see.
But what happens when you can’t show everything?
As a news site, The Guardian covers a wide range of categories. With that, comes an extensive number of navigation items.
On mobile and desktop, The Guardian shows what most likely is the most commonly viewed sections first. Following that is a “more” button on desktop and our old friend, the hamburger menu on mobile.
A similar approach is taken by the BBC. The sport menu uses the same technique, until you go down to mobile widths, where a hamburger menu appears.
The sport category page uses a horizontally scrollable list of items beside the “more” (All Sport) navigation button to fit as many menu in as possible no matter what width the screen is.
I see this as the best of both worlds. Like The Guardian, they’re guaranteed to have at least the first few items visible no matter the screen width, and then more are accessible with a simple swipe or by using the All Sport button.
Nielsen Norman Group performed a study on menus that were hidden, visible or a combination of both (like The Guardian and BBC) to test usability. Here’s what they found:
Discoverability is cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases.
- On desktop, people used the hidden menus in only 27% of the cases, while they used visible or combo navigation almost twice as much: in 48% and 50% of the cases, respectively.
- On mobile people used the hidden navigation in 57% of the cases, and the combo navigation in 86% of the cases — 1.5 times more.
Even hiding a search field behind a button will reduce usage.
On multiple sites I’ve worked on, we discovered conversion rates when using search was significantly higher than those poor souls who choose to aimlessly click/tap around to find what they’re looking for.
I’m kidding of course. Browsing is fine. However, if it looks like people are benefiting from using search but it’s hidden, bring it out into the open. Give the people what they want!
You might think there isn’t much difference between the two. They’ll still have to click something before they can actually search. One click on the search icon, one click in the search field. It’s the same, right?
A search field is much more prominent than a magnifying glass icon. You’re effectively communicating to the user they should use search. Look, we've made it big so you can see it, please use it. It’s an open invitation for how you want them to navigate.
Smashing Magazine reported an 80% increase in searches when they exposed the search field rather than showing a magnifying glass icon which reveals it on click/tap.
So we’ve switched from hiding a search under the “Menu” button towards displaying search box all the time. The outcome? The searches have increased by 80%.— Smashing Magazine (@smashingmag) June 1, 2020
Don’t hide important navigation/search behind an icon if you’d like to drive more traffic towards it. pic.twitter.com/kyLkKlB3ta
A site I worked on gained 2.5 times more searches when we did the same thing as Smashing Magazine. An other site I worked on also gained a significant higher usage when implementing the same design.
Icons without Labels
UserTesting conducted a study into icons with and without labels:
In our study, we found that for icons with labels, users were able to correctly predict what would happen when they tapped the icon 88% of the time.
For icons without labels, this number dropped to 60%.
And for unlabeled icons that are unique to the app, users correctly predicted what would happen when they tapped the icon only 34% of the time.
If there’s any doubt about what an icon does or where it will lead to, add a clear label. It really is as simple as that.
A design team I worked on were tasked with designing a comparison tool and it needed to be part of the main navigation. It also needed an icon to match its neighbours. Problem is, there just isn’t a great commonly understood icon for comparison. The only way we could to make it clear was to include a label. We even kept the label on mobile despite the limited space. It’s that important.
Here’s an example from YouTube’s iPad app where some of its icons could benefit from labels:
- Wifi icon with a screen(?): Unsure what it does.
- Video icon: probably for creating your own video.
- Magnifying glass: obviously search but it isn’t prominent enough.
There’s plenty of room for each icon to have a label. There’s no excuse. Here Google, I’ve done some free work for you.
The funny thing about the weird wifi screen icon is that I’ve used it multiple times before, and I still forgot what it did. It’s actually for sharing your screen to another device, such as an Apple TV or Google Chromecast.
Apple have a universal symbol for AirPlay. I know what that means because I’ve used it many many times. It’s instantly recognisable now. Google’s icon is only used in the YouTube app, so I just don’t have the same familiarity with it at all. Remember back to UserTesting’s study that only about 34% of users will know what it means.
As we discovered earlier, search usage is almost guaranteed to be increased by making it more prominent and exposing it instead of hiding it behind an icon, hence why I’ve recommended showing the search bar, but there’s a better way and Google already do it elsewhere.
Here’s YouTube.com, with a big search bar. The search is the most prominent element at the top, which is what you would expect when you’ve got an almost endless world of videos you can watch. The iPad app really needs to do the same.
If a select dropdown element only has a handful of options, consider displaying them all at once using radio buttons. Not only will it require fewer actions to make a selection but users will be able to see all options at once, allowing them to make a faster decision.
Look at this dropdown that only has a single item hidden away when there’s an embarrassing amount of room available. It drives me crazy.
Studies about carousel usage shows they barely have any usage beyond the first slide. Even then, the total engagement with the carousel element, even including the first item, tends to be very low too. As low as 1% of total visits, with only one site in the study going above 3%.
Thankfully, I’m seeing far fewer homepage carousels as I browse the web these days, so the message seems to finally be getting through. It took a while but hooray!
iPadOS Files App
I’ve recently started using iPadOS for writing and I noticed something annoying about the files app. It defaults to a grid view of icons, as you can see below:
That’s not really a problem in itself but what do you do if you want to change it to a list view? Can you even do it? Without any prior knowledge there isn’t an obvious way of doing so but it can be done.
If you guessed you have to scroll down to reveal the options but only while the view is already at the top of the page, you’re a genius and we may need to send you off for scientific testing for the benefit of everyone using digital interfaces. Please get in touch (and don’t worry, I’m sure they won’t do too much damage poking around your brain).
Or you may have accidentally come across this in iPadOS 13 like I have.
The key here is you have to be at the top of the page before you can scroll to reveal them. There isn’t a way to reveal the options while you’re further down the list of files.
I only discovered the options accidentally, otherwise I would’ve had to search the internet just to see if they exist.
macOS shows these options by default without the need to do anything. Did Apple prefer a cleaner look on iPadOS at the expense of usability? Or were they sticking too closely to making the iPad as simple as possible that they crossed the false simplicity line?
It’s baffling why this isn’t displayed by default in iPadOS, or at least incorporated in a way that doesn’t require accidentally stumbling upon it or having to search to see if it even exists.
Good news! This is no longer an issue in iPadOS 14 as there’s now a button at the top of the screen and it's always available.
Form Field Labels
Hiding form labels and only using placeholder text may make for a cleaner looking form but it also creates usability issues, as Baymard found: issues with hiding labels in forms:
we observed that when users had to correct errors in forms with the field labels inside the field, they ended up deleting the entire input just to be able to read the label once again – after which they’d have to re-enter the same information once again with just a couple of characters changed
This is more problematic with longer forms, as you’re unlikely to forget what each form field is when there are only 1 or 2 text inputs.
A smart solution is to use a “floating label” where a label appears as you focus on a text input, retaining the compactness of the form and also keeping context for the user filling it out.
While studying Dyson’s app to show how I would fix its biggest UX problem, I noticed a smaller issue in the behaviour of the timer function’s UI. The numbers only appear when you start moving the slider.
There's just no reason to hide the numbers around the dial at all. What are they gaining except a slightly more minimal design? If it was visible at all times, I would be able to see all the available options and I would know exactly where I would need to move the slider before interacting with it. It’s just pointless minimalism.
Be careful of oversimplifying. A minimal visual design does not necessarily mean it'll be easier to use.