When we talk about common sense with product design,  what we now see as strikingly obvious may not have been so apparent to designers when they first started . For a long time, designers have endeavored to make products as easy to use and navigate as possible. However, in order to highlight their products’ features, it has taken time for designers to understand users’ needs and challenges and iterate.

Bottom navigation bar = increased usage

Google Product Director Luke Wroblewski espoused the design principle “obvious always wins,” and pushed designers to recognize that  clear interactions outperform clever ones .

After analyzing the user engagement statistics of apps that switched from semi-hidden navigation within hamburger menus to more visible bottom navigation bars, and apps that switched from more exposed to semi-hidden navigation, Wroblewski saw a trend. “Navigation is the manifestation of what is possible in an app and when people can’t see what’s possible, they likely won’t know what they can/should do in that app,” he told in an interview about this idea. Increasing visibility boosts usage.

When the project management app Redbooth switched from a hamburger menu to a bottom navigation bar, session time increased 70 percent, and daily active users increased by 65 percent nearly overnight. Functionality that had been previously hidden in the hamburger menu was now front and center for Redbooth users to find.

Before: The Redbooth (Teambox) app previously used a hamburger menu.
After: The app switched to a bottom navigation menu and saw a 65 percent increase in daily active users and a 70 percent increase in session time.

On the flip side, Wroblewski found that making it harder to find common features reduced user engagement. When the Polar app simplified their navigation design from a segmented control menu to a toggle menu to make the design seem “cleaner,” user engagement dropped because the primary functions were no longer continually exposed to users.

Before: Segmented control menu showed three tabs at the top.
After: Daily engagement decreased when Polar added a toggle menu with the “Top” label

Bottom navigation bars and accessibility

Making design more obvious might sometimes have a side benefit of also making the design more accessible. Ergonomically, it’s easier for users with big phones or tablets to touch the bottom navigation bar using one finger than it is to hold the phone with one hand and use the other to tap on the hamburger menu in the top left. Bottom navigation is also critical for accessibility reasons.

“Obvious” icons are not always “universal” icons

Obvious design isn’t only about location of components, but also how easy it is for a user to understand the actions and options in a UI. For example,  not all users will immediately understand icons and symbols .

The $ symbol means dollars or money in the US, Canada and some other countries, but is not the symbol for currency worldwide.

Someone who grew up using computers with floppy disks will most likely automatically know what a floppy disk is and recognize that a floppy disk icon means “save.” However, for those who began to use computers in the 21st century and who never saw a floppy disk, the floppy disk save icon may look like a mobile phone SIM card with a rectangular and circular hole and a missing corner. Those users may not understand the meaning of the floppy disk save icon.

The upload, delete, voicemail, speaker, save, and credit card icons are common, yet may confuse users if they are not paired with a text label.

To make designs easy to understand at first glance, consider these two suggestions:

Pair text with an icon

Combining text and icon makes your product more accessible. It’s easier for people scanning a page to understand what a button means when the button has text and an icon.

When Google Translate combined text and icon for the features below the main translation box, the use of the handwriting feature increased by 25 percent. Some users thought the features below the main box were new even though they had existed for years.  Without the text labels, users didn’t understand the value of the features, and therefore didn’t use the features .

Before: Google Translate only showed icons.
After: Google Translate added text for the icons and usage of the handwriting feature increased 25%

Use just text, add hint text, and add labels with icons

The “upload” icons may make sense to someone who is used to uploading content to a cloud memory service. However, for some users, there may be no concept of “up” or “down” movement when it comes to adding their photographs from their computer to their cloud photo storage.

To make it clear to Google Photos desktop web edition users how to search through photos and upload new photos, the Google Photos team replaced the upload icon with an “upload” text button and added search hints in the search box. Similar to YouTube Go’s and Translate’s pairing of text with icon, the Google Photos team added the labels “album,” “assistant,” and “photos” below the icons.

Icons with text labels added to them, icons replaced by text labels, and added search hints improved the usability of Google Photos

Copying other UIs does not guarantee obvious design

However, making something obvious doesn’t mean assuming that because another app has a certain look, that it is the best choice for your product. It may seem easy to copy what other apps do—especially popular apps—and assume that it’s a good design. You don’t know how much, if any, research is behind the company’s choice to use a certain design pattern or component.

To find the obvious, get close to the problem

Without waiting for years of usage data or hiring a researcher, how does a designer know what is obvious or even common sense to a user? “The closer you are to the pain, the more you care about solving it,” Wroblewski says. If you are making a product to solve a problem you have, then you are likely to know the product’s core features and how they solve your problem.

If you are not your target user, then you have to observe users, learn, and iterate. This does not require huge research and travel budgets or even having large amounts of usage data. It involves talking to potential and existing users and finding out what problems they have or imagining yourself as a user.

Wroblewski says: “Every week, we take whatever we worked on, we put it in front of human beings and watch them try to use it. You’re always going back to immersing yourself with the customer or the potential customer.  When a designer says, ‘I sat with this person and I saw he couldn’t do what he wanted because our design failed him,’ that’s very visceral and very real ,” he says.

Conclusion

Spend time with users often and regularly and your designs will become more relevant, appropriate, and “obvious.” It’s not until you understand the problem space that you can clearly appreciate what is “obvious” or even “common sense” and create designs that are easy to use.

The Obvious UI is Often the Best UI

PS. Clear practically always beats clever. If you’re hesitating about a message or an element, choose something that seems even a little bit too obvious, and even then you could probably be even more explicit.