Use Iconography and Labels

Now let's focus on making it easier for your users to find and use those valuable features!

A picture is worth a thousand words. Yet there are times when what exactly those thousand words are isn't clear.

The Problem

Icons are a great way to use less screen real estate to communicate with the user. However, you must be sure that the meaning of each icon is clear to your users.

What do each of these icons mean?

You can mouse over for a tooltip. If you're on a mobile device, we've got a real problem...

Context would be helpful in the case of align justified, but not the other two.

The Solution

When the meaning of an icon is unclear, or you're uncertain what icon to use, then use a short label instead or in addition.

Also, consider the icon's context. In the first example, the "justified" icon would have made perfect sense in context.

Take Action Now

1. Use the standard iconography for your platform. If your platform doesn't have a standard, like web, pick one and stick with it. There are great WebFont-based icon sets, such as FontAwesome and Material Design Icons, available for free.

2. When you're uncertain if the icon you've picked is clear, then add a short label.

3. Not every action must have an icon. In those cases where you have no idea what icon to pick, just use a label by itself.

Congratulations

You've made it easier for your users to find the action they need. That is to say, you've improved discoverability.

Discoverability - the degree of ease with which the user can find the needed function in a user interface.