Obvious Design Always Wins

Tweet

If you’re like me, you are curious about how changing the interface of a mobile application or website may influence the engagement and the earnings of your product.

The idea for this article came to me after reading a tweet posted on the 11th of April by Luke Wroblewski.

His statement Obvious always wins and the image associated with it made me think about some real cases where a simple change may give unexpected results.

Let’s find out what obvious means in the field of mobile design, and look at some examples of obvious choices that affect users’ engagement in a good way. Then, we’ll also see how not so intuitive decisions can have the opposite effect.

Obvious always wins

What is obvious? And why do things seem obvious only after we see the solution?
When someone tells us the solution to a problem or a puzzle, we exclaim “Oh, it was so obvious!”.

Things appear obvious when easily discovered, seen, or understood. No surprises there. What could be more easily discovered, seen, or understood than facts and methods we have already learned? We consider obvious most of what we know, and we consider challenging what we don’t know. For example, many people get frustrated when teaching and if their students don’t understand immediately.

The problem is not with them. The truth is that, if it was really so obvious, they wouldn’t be having any trouble.

Obvious is not what you think

In mobile Design there are no intuitive interfaces. There are only interfaces that are familiar, and once familiar they become intuitive. This brings us to the conclusion that the concept of obvious is arbitrary and relative.

When you surf the Web or use mobile apps, they usually have, more or less, the same look. Sure they differ in layout, style and colors, but you expect to see common patterns. For example to find the main menu at the top of a screen, a search box in the top-right corner, a footer at the bottom, and so on. The layout is typically the result of conventions and trends of a given period. For example, I’m sure that you are able to distinguish something built recently and something older.

What you probably ignore is that most of the important conventions or trends we have in our field were born in North America or Western Europe, and may not reflect those of other parts of the world. This is why, if you study websites or apps developed in China and Japan, you’ll notice how different they appear from the ones we are accustomed to seeing. They often look like they hail from around 1998. If you want to learn more about the reasons underlying this behavior, you can read the article Why Japanese Web Design Is So… Different by David Gilbert.

Icons and symbols are no exception. They are examples of visual conventions we get used to that become the obvious way to indicate objects or activities. Every day we face lots of icons that, in the course of time, have become easy to associate with something specific.

“Obvious” icons

Steve Krug’s First Law of usability says:

A web page (or mobile application) should be self-evident, obvious, self-explanatory.

This means that users should be able to easily understand what something is and how to use it without putting any effort into thinking about it. If users cannot achieve this task, there is something wrong with your work.

“Where should I start? Can I click on that? Is that the menu?” are all questions you don’t want your users to ask themselves. If this is the case, you should think about redesigning your project and designing in a different and more intuitive way. People want to find what they’re looking for and leave within a matter of seconds. They spend far less time looking at what we design than we’d like to think: users don’t read, they scan (as you’re probably doing right now).

What you have to do is to try and reduce the memory load of users by presenting familiar icons, actions, and features. Use clarifying text or mouse-over tooltips to describe the functionality of icons which may be unfamiliar. Recognition rather than recall is the key.

Let’s take the notification system of a mobile application as an example. The icon that is typically used to inform the user of a new interaction is a bell. Twitter, Google+, and Trello are some of the applications that use this specific icon to indicate a new action. Retweets, +1s, comments and shares are all indicated through the bell icon. It has been used so much over the years that most people will have some difficulties in associating a different icon to this activity. One example of a company which has differentiated from the others is Facebook, who has always used a globe.

Twitter notification icon

Google+ notification icon

Trello notification icon

Facebook navigation menu

The same can be said for another well known icon often used to indicate messages received. Many use either a speech bubble, envelope or an inbox style icon.

Icons used are shown below:

Instagram Direct icon

The same icon is employed by Spotify:

Spotify messanger icon

I’m a frequent user of Instagram and Spotify and their interfaces have always been clear and easy to use for me. Nevertheless, the first time I saw the icon I felt a bit confused and didn’t get its meaning immediately.

Either for letting people know about new features or to ensure they understand the meanings of the icons introduced, Instagram shows tooltips on first use of an updated version. The same approach hasn’t been adopted by Spotify, which is a poor decision in my opinion.

Even for applications whose user base is large, the choice of a bad or unfamiliar icon may (and usually does) affect their engagement. This is why the companies behind these applications run lots of user tests. They need to confirm that a change improves the interface. If you work for or own a small company, investing a lot of money and/or time in these kinds of tests may not be possible. Because of this, you may be led into thinking that what big companies adopt for their services suits your users and adopt the same patterns. However, this isn’t always true.

Don’t just copy “patterns”

In the past few years, the three-bar icon, sometimes referred as the “hamburger icon”, has being widely adopted in many apps and websites. It has become a cross platform convention representing a menu (and in some cases, a list) and it has been employed by companies such as Disney, Starbucks, Facebook, and Google in the mobile versions of their websites and mobile applications. But a question that has become increasingly frequent is: “do users really understand what it means?”

Disney navigation menu

Starbucks navigation menu

Facebook navigation menu

Google_navigation_menu

Just because everyone is implementing it doesn’t mean that people understand it. The fact that Facebook, Google, and other IT giants have made this choice doesn’t necessarily equate to effectiveness. The icon has gained common usage (like the floppy disk “Save” icon, still present in many applications) but it’s unintuitive.

The dictionary defines a convention as a way in which something is usually done, especially within a particular area or activity. Therefore, we can say that the Hamburger icon is a convention but this doesn’t mean it works in every case. Positioning, experience, and widespread use can give users insight, but they do not ensure easy engagement and satisfaction.

This icon seems to be understood by regular users, but no one can tell if it is understood by everyone (as Sébastien Desbenoit explains in his article).

After several recent tests, an early conclusion is that people over 35 don’t seem to understand the Hamburger icon. Results seem to be influenced by demographic values and greater effectiveness is gained adding the word “menu” to the icon (as shown in this research).

The take-away lesson here is that a solution is never valid for all projects or for every situation. In this specific case, the Hamburger menu ended up not being the best answer for a mobile navigation menu. Remember to be focused on your target audience and their needs.

Conclusions

In this article we’ve seen how arbitrary and relative the concept of “obvious” is and how it can be influenced by factors such as sex, age, education and so on. We’ve seen that what big companies adopt for their services isn’t always best for your needs. Moreover, just because everyone is implementing a particular icon or navigation menu, it doesn’t mean that people will understand it. Often the wide adoption of a given convention is driven by a chain of copy and paste and not by a well-pondered justification.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments