A common design pattern that is being used extensively on mobile apps has been the use of icons to illustrate specific functions. By now, there are specific icons that almost everyone is familiar with. An icon of a trash can represents deleting something or a printer represents the print function. But what happens when icons are used that users are unfamiliar with? I’ve been using the Gmail app on my iPad and it helps illustrate a great example. There were quite a few icons that I was completely unfamiliar with, and as a result, I had never used them.
I had no idea what this icon did:
Or what these icons did:
This scenario is actually quite common. When the Microsoft team sought out improve the menu bar for Outlook 98, they found out it had poor usability and users weren’t using the icons.
Initially, they thought it had to do with the icons itself: “Different fixes were tried: new icons, rearrangement of the icons, positioning icons under the menus from which the commands came from.”
However, the solution was actually quite simple: “In the end, one change caused a total turnaround: labeling the important toolbar buttons. Almost immediately, the toolbars were a big hit and everyone at all skill levels starting using them.”
Here's what Outlook 2003 looked like with labels:
That's a huge improvement in terms of usability and context.
Let's revisit the Gmail iPad app, but this time add labels to the icons:
Just like in Outlook 2003, labels greatly enhance usability, making it clear to the user what each one does.
But what about the opposite? Do icons enhance usability or add value? Let's take a look and see what the Gmail iPad app would look like without icons and only labels.
Which one do you think is better or more effective? I'll let you decide...