Toolbar icons without labels are incredibly common in the mobile interfaces of today—and understandably so—the limited screen size¹ of mobile devices means that the simplification and focus of interface controls is of the utmost importance. Because of this, the icon metaphors we as designers employ must be clear enough to intuitively represent possible actions without the immediate aid of descriptive text.² In the case of iOS, Android, webOS, and Windows Phone 7, toolbar icons are further limited in scope by their existence as pictograms composed primarily of positive and negative space. Designing legible glyphs requires stepping outside the confines of a 3200% Photoshop document and considering how each icon relates to its neighbors and the context of the set as a whole.

The single best way to judge the effectiveness of a toolbar icon is to put it, in the context of your interface, in front of someone who has never seen it before and ask them to determine its purpose. Instances of users proclaiming that they “don’t know what all these icons do” are more common than one might think, and what makes perfect sense to you isn’t necessarily intuitive for users. In the case of icon sets representing contextually sensitive actions, though, looking for metaphor redundancy can aid a designer greatly in improving a set of toolbar icons during the design process. To illustrate the negative impact of metaphor redundancy, let’s take a comparative look at the message view in the iOS and webOS mail applications.

There are global behavioral differences between iOS and webOS that influence the directness of the comparison above (specifically, the use of action sheets to collapse multiple, related actions into one toolbar icon in iOS), but let’s compare each set of toolbar icons and look for confusing and redundant metaphors.

Arrows are used to indicate the movement of the current message in both sets, but in the iOS toolbar, the usage of arrows is varied and the end point to which the arrow is moving the message is represented.³ In the webOS toolbar, the representation of the current message as an envelope is redundant. The toolbar is already rooted in the context of the view it belongs to—that of a single message—making the additional representation of the message within each icon unnecessary. If it’s clear to users what actionable items toolbar icons pertain to, it’s better to make each icon more descriptive of the action itself than the object on which the action is performed. iOS reinforces this nicely by way of the current message being sucked into the delete/archive icon when tapped.

When designing toolbar icons, make informed but opinionated decisions. If you’re combining multiple actions into one toolbar icon, illustrate the most common action in a way that loosely represents the enclosed actions. The iOS “reply” icon has little to do with printing aside from the abstract notion of taking the current message and moving it elsewhere, but forwarding or replying to a message are far more common actions than printing a message, and the arrow represents both nicely.

Lastly, don’t feel compelled to reinvent the wheel when designing icons to represent common or standard system actions. Deviating from familiarity for the sake of individuality alone does not make for intuitive interfaces. If you can represent an action using a standard system icon, there’s absolutely nothing wrong with doing so. Your users probably won’t directly thank you, but you can rest easy knowing you’ve crafted something intuitive and will likely receive a few less support emails because of it.

¹ Don’t email me about your 5” Android “phone.”

² One should always design icons to be readable without the aid of descriptive text, regardless of whether they are simple pictograms or more elaborate illustrations.

³ Because I have archiving enabled on this Google Apps account, the delete icon appears as an archival drawer. Depending on how one’s account is configured and if archiving is available, this icon can also appear as a more traditional trash can representing “delete.”