App designers are always trying to stay on-trend. The problem is that sometimes these trends tend to take design backwards from a usability perspective.
The last horrible design trend (2013)
A few years back when Apple decided to change iOS icons from filled in to outlined (in iOS 7), many believed this to be a step in the wrong direction, as outlined icons increase cognitive load.
The image and quote below are from Aubrey Johnson's analysis of the change:
Take a look at the example above. The red lines indicate areas where cognitive load is occurring. Your brain traces the shapes on the first row an average of twice as much. Your eye scans the outside shape and then scans the inner line to determine if there is value in the “hollow” section.
Forcing users to spend more time to decipher an icon is never a good thing, and unfortunately, many designers have followed this trend "because Apple did it", which is a horrible justification.
The latest horrible design trend
Now we are seeing a litany of applications with vertically-stacked navigation with no text labels. While the origins of the trend may be hard to pinpoint, one early example of this might be in Twitter's iPad app.
Image courtesy of Mashable
In this particular case, I'd give them a pass because Twitter's icons are highly recognizable and used across the web and apps. (Home, search, notifications and profile are widely understood.)
The problem comes when icons are non-standard. When your icons are not instantly recognizable visual representations of actions, the user has to spend extra time deducing what they mean. The title of Steve Krug's book, Don't Make Me Think is the mantra of good design, and this trend does literally the opposite.
Examples
In all of the examples above, these companies use very non-standard icons - ones not easily understood by a large audience. But by far, the award for worst of them all goes to Baremetrics (sorry guys, you know I love you!). Let's take a closer look:
While Baremetrics freshly-released icons are the most beautifully-designed of them all, I have zero clue what any of them mean (and I've been a paying Baremetrics user for a long time, meaning I'm very familiar with their app).
With the idea of icons being a visual representation of a word, let's see if I can guess what they're for without clicking on them:
- Dashboard?
- ??
- Maybe something relating to filtering... something?
- ??
- Customers?
- Charts?
- Is this not the Campaign Monitor logo? Did Baremetrics buy Campaign Monitor?
- I'd guess something related to churned users or lost revenue? Couldn't tell you why, though.
Now let's see what they're actually for:
- Control Center
- Dashboards
- Trial Insights
- Forecasting
- Customers
- Benchmarks
- Recover
- Cancellations[sic]
Great, I got 1.5 of them right.
The simplest way for Baremetrics to solve this usability problem would simply be to add a breakpoint that would display text labels next to the icons when there is enough screen real estate - essentially reduce the navigation to icons, only at a non-standard screen size where the user likely already knows what they mean and is signing in from some non-standard device or window size.
I'm a strong advocate of sidebar navigation, because screens are wider and not taller - so more content can fit the screen vertically, but icons without words make people have to think more, not less.
Stacked navigation done right
If you're considering using sidebar nav, I'd strongly recommend keeping the text labels. Stripe's navigation is a perfect example of how to do it right:
Some of Stripe's icons make even less sense than Baremetrics' (Connect doesn't really have a strong visual representation, and Stripe's choice for the Billing section is just odd), but it doesn't matter because the text labels say what they do. Here, the icons are easy on the eyes and break up the page from looking too text-heavy.
Conclusion
If you're a designer, please consider usability over following the latest design trends or just creating the perfect 400x300 Dribbble shot. While you may be hailed by the design community for visual beauty, our ultimate job is to stay out of the user's way as much as possible. Good design is design you don't have to think about.
I'll leave you with a final thought from Danny Halarewich's post about cognitive load on Smashing Magazine:
The best user experience is the one the user doesn’t notice. It appears smooth and simple on the surface, but hundreds of crucial design decisions have been made to guide, entertain and prevent trouble. If the user experience design does what it’s supposed to do, the user won’t notice any of the work that went into it. The less users have to think about the interface or design, the more they can focus on accomplishing their goal on your website. Your job as a designer is to give them a straight path to their goal by clearing out the obstacles beforehand.