The Obvious UI is Often the Best UI
Design clear interactions instead of clever ones, and users will follow
Voltaire said, “le sens commun est fort rare”—common sense is very rare. Perhaps to realize that a certain decision is common sense, one has to have enough life experience to know the right path to take , at which point certain choices become common sense and don’t require much analysis.
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 me in an interview about this idea. Increasing visibility boosts usage.
When the project management app Redbooth (formerly called Teambox) 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.
On the flip side, Wroblewski found that making it harder to find common features reduced user engagement. When the (former) 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.
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. In an email interview, Google Brand Manager Aubrie Lee said that users with muscular dystrophy and other mobility impairments cannot always reach the upper portion of the screen. “This is a game changer. For disabled people, technology isn’t just a convenience — it’s often the difference between confinement and independence. Having these bottom navigation buttons is going to make life so much easier for so many of us.”
“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.
To make designs easy to understand at first glance, consider these two suggestions:
Pair text with an icon
In the Google I/O talk Designing Great Apps for New Internet Users, Garen Checkley and Tracy Lindsay Chan of YouTube Go showed that the combination of icon and text is important for users to remember what an affordance does. The “receive” button has both text and an icon to make it clear what will happen when the user taps the button.
Combining text and icon also 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.
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.
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 recommends Rapid Iterative Testing and Evaluation (RITE) Testing. “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.
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.
