Adobe Creative Cloud

June 2, 2016 /UX/UI Design /

XD Essentials: Icons as Part of a Great User Experience

Icons are an essential part of many user interfaces as a visual expression of an object, action, or idea. When done correctly, they can communicate the core idea and intent of a product or action. But when done wrong, they can confuse your users, lead them down the wrong path, and ruin their experience with your product.

An icons’ first job is to guide your users to where they need to go and in this article we’ll see what it takes to make that possible.

The Benefits of Using Icons in User Interface

Icons bring a lot of nice things to user interfaces. They:

  • Save screen real estate. Icons can be compact enough to allow the display more controls in a relatively small space.

    The Adobe Photoshop toolbar contains commonly used actions. Image credit: Adobe

    The Adobe Photoshop toolbar contains commonly used actions. Image credit: Adobe

  • Enhance the aesthetic appeal. When icons are used properly they make the UI more graphically pleasing and bring personality to the user experience. Every app needs a beautiful, memorable app icon that attracts people in the app store and stands out on a home screen.

    image00

    Home screen for Apple iOS. Image credit: Apple

  • Good for internationalization. The use of icons in the UI is an excellent metaphor if they represent objects with a strong physical analog. There is no need to translate such icons for international users, because its message is understandable to everyone.

    image04

    Mail app icon in iOS uses an envelope. Image credit: Apple

And, last but not least, most apps and sites use icons. It’s a design pattern which is familiar to users.

Despite these advantages, icons can cause usability problems when app designers hide functionality behind icons that are hard to recognize.

Types of Icons

As mentioned before, icons are a visual representation of an object, action, or idea. If that object, action, or idea is not immediately clear to users, the icon is reduced to visual noise that can prevent users from completing a task.

There are three types of icons ⎼ universal, conflicting, and unique. Let’s focus on these types and their impact on the user experience.

Universal Icons

There are a few icons that enjoy mostly universal recognition from users. The icons for home, print, and the shopping cart are such instances.

image01

YouTube app has two universal icons: House icon for a home view and magnifying glass for a search. Image credit: Google

There is only one problem with this group— “universal” icons are rare. Outside of examples above, most icons continue to be ambiguous to users due to their association with different meanings across various interfaces.

Icons With Conflicting Meaning

The trouble comes when you’re implementing commonly-used pictogram that have contradictory meanings. The heart and the star are an excellent example of this problem. Not only does the functionality associated to these icons vary from app to app, but these two icons compete with each other.

image05

Image credit: usertesting

As a result, these icons and their exact meanings are hard to interpret precisely. Even in the context of the app itself, these symbols can be really confusing when the user is expecting one outcome and gets a different one. And this hinders the ability for users to understand and rely on these icons when they are  encountered in future experiences.

Unique Icons

Icons are especially bad for anything abstract since they generally do not have strong visual representation. How can you describe a unique action, such as sending a direct message, with a single pictogram? Would you guess, for example, that you can send direct messages behind this icon in Instagram?

As an Instagram user, you’ve definitely seen it before, but have you ever used it? Image credit: Instagram

As an Instagram user, you’ve definitely seen it before, but have you ever used it? Image credit: Instagram

An icon might make complete sense once you know what it’s supposed to represent, but it can take some time for first-time users to figure things out. And another problem for this group: users tend to avoid interface elements they cannot understand. It’s in human nature to distrust the unknown.

Labels and Usability

Icons can save space over text, but at the price of recognition. It’s a serious misconception to assume that users are either familiar with your abstract pictograms or they’re willing to spend extra time discovering what each of them does.

Bottom tab bar icons might confuse first-time Android users. Image credit: Google

Bottom tab bar icons might confuse first-time Android users. Image credit: Google

In reality, users are often intimidated by unfamiliar interfaces. What users really want is a clear idea of what will happen before they take an action in an unfamiliar app. That’s why your icons need to set clear expectations for users before they click or tap on them.

In order to beat the ambiguity that most icons face, a text label must be present alongside an icon to clarify its meaning in a particular context. And even if you’re using a universal icon, it’s often safer to include a proper label.

Icons that are labeled are much more likely to be used. Image credit: Google

Icons that are labeled are much more likely to be used. Image credit: Google

Conclusion

The most important characteristic of a good user interface is  clarity. A clear interface is simply a better interface. In the context of user interface design, icons must first and foremost communicate meaning. They should help your users do what they need to do without requiring additional effort.

If you decide to include icons in your interface, do research first and choose icons that are easy to recognize and memorize. Keep a few things in mind when you make the selection:

  • Don’t use an icon if its meaning isn’t absolutely clear to a user. Try to avoid unique icons and icons with conflicting meaning. When in doubt, skip the icon. Reside to simple copy. If you want to keep the visual benefits of icons, combine the icon with copy.
  • In most cases, icons aren’t the place to be creative. If you design new icons, keep them simple and schematic. Reduce the amount of graphic details by focusing on the basic characteristics of the object rather than creating a highly realistic image.
  • “A picture is worth a thousand words” doesn’t work for icons. Labels significantly increase the usability of icons and you should always try to include a visible text label whenever it would help the user.

Last but not least, if you use icons always have them usability tested. Watching a real first-time user interact with your interface will help you determine whether your icons are clear enough.

Don’t make your users think. Make clarity in your app a priority!

UX/UI Design

Design. Prototype. Share. All in Adobe XD.

Go from idea to prototype faster with Adobe Experience Design (Preview) CC, the first all-in-one tool for creating and sharing website and mobile app designs. Test drive the XD preview and tell us what you think.

DOWNLOAD