June 2, 2016 10:00 am

Using iconography to enhance UX design

iconography_hero

Iconography is a visual language used to represent features, functionality, or content. Icons are meant to be simple, visual elements that are recognized and understood immediately.

In a previous post, we explored communication through visual cues. We also dove a little deeper into specific visual cues, such as affordances and calls to action (CTAs). Whereas visual cues provide clues about how the user should use an app, icons go a bit further and actually communicate ideas using metaphorical associations: an image of an envelope says “mail,” an image of a house communicates “home,” a diagonally oriented pencil indicates “edit,” and so on.

1_iconography

In many cases, there are already standard icons for the devices and OS your app is targeting. For example, the icon used to represent a calendar and calculator on a Windows 10 device can be seen in Figure 1 below.

2_calendarcalculator

Figure 1. Windows 10 device calendar icon (left) and calculator icon (right).

Users of a particular platform are typically already accustomed to and understand these standard icons. So as a general rule, unless you have a specific reason for doing otherwise, you’ll want to defer to these standard icon sets whenever possible to save time and ensure easier user interaction.

When to use custom iconography

Standard icon sets only go so far, however. In addition to OS or device-specific icons, your app may also need its own set of icons to represent app-specific functionality that the standard sets cannot accommodate without creating ambiguity for the user (e.g. recipe search, movie bookmark, image download).

This goes beyond the user simply not knowing what to do. If the user is likely to hesitate or expend any energy in order to figure out an icon in your app, then you will probably want to use a custom icon.

Tip: Use the text test to determine if your icon is ambiguous. If your icon needs a title or description in order to convey it’s meaning, consider a different icon or using no icon at all.

If you do need to create and use custom icons for some of your app features, you will want to ensure that all of the custom icons have these two features in common with your other, standard icons:

  • shared thematic style
  • consistent design elements

All of the icons in your app should look as if they were meant to be part of a set or family, even if some of them are customized. Besides being more aesthetically pleasing, consistency in iconography removes ambiguity and helps users distinguish an icon with which they can interact from a graphic or background image with which they cannot (Figure 2).

Figure 2. Having a similar visual trait (size in this case) distinguishes the set of icons below the image from the icon used as a section header. Users intuitively recognize these icons as interactive objects.

Figure 2. Having a similar visual trait (size in this case) distinguishes the set of icons below the image from the icon used as a section header. Users intuitively recognize these icons as interactive objects.

Likewise, consistency ensures that each icon has equal weight, drawing your users’ eyes equally. Take a look at Figure 3 below. Both the left and right images may look similar, but notice how the icon style on the left has both filled and unfilled shapes. This inconsistency pulls the eye of the user disproportionately to the filled icons—video, mail, and photo. In contrast, check out the icon set on the right. Those icons are consistent in both their thematic style and design elements. Each one engages the eye equally.

4_example

Figure 3. Although these two images may look similar, the inconsistent use of fill on the left draws the eye to the icons with filled shapes (video, mail, and photo). A consistent visual language, however, such as that that on the right, allows the user to become familiar with the visual cues you want them to find.

Where to find icons

Like fonts, icons are available for download. Icon sets are designed by professional artists and made available for you to use in your app. You may choose icons sets that are free (like vectoricons.org and freeiconsdownload.com) or icons that can be purchased (such as those on popular sites like istockphoto.com, shutterstock.com, and iconshock.com).

Either way, be sure that your use of them falls within the license guidelines and that you properly attribute them according to the requirements provided on the download site.

Wrapping up

Iconography may be the aspect of app design that comes closest to actual poetry because it depends on visual metaphors only to communicate meaning. Some associations are direct, such as using a stylized picture of a camera to represent a taking a photo with a webcam. Some are less so, such as using a shopping bag to represent the Windows Store in Windows 10. What makes iconography fascinating is that once users get used to these associations, they become automatic and effortless in a way that glancing over groups of letters can never be.

For additional resources on this topic, please consult …

Don’t forget to check out our other posts in this series!

Updated August 1, 2016 5:09 pm

Join the conversation

  1. You know what would be awesome? An open source icon library with all the Windows 10 style icons for use in web projects.

  2. thenounproject.com is an excellent source of icons, both wireframe and not. You can use them for free with credit, pay a couple of dollars for unlimited use on an icon basis or buy a subscription for unlimited use of all icons. Some of the icons are also licensed under public domain

  3. Interesting article, giving me the impression the Windows teams take this seriously. It still leaves me wondering, however, as to how a counter-clockwise arrow – the hallmark icon of “turning back time” or “rewinding” is used in Windows 10 for the “Update & security” category in Control Panel. “Update & security” need something that indicates forward or upward motion. Perhaps two right-facing or stacked chevrons.

  4. Additionally to those websites, in Windows 10 we have “Segoe MDL2 Assets” font with a lot of icons, and because they are characters, you can easily resize them and change their color.

  5. This is the worst UI design that it can be because this type of (metro) iconography relies a lot on some principles such as closure and what not which is f. tiring for eyes and brain. How about you guys bring real Vista / Windows 7 icons and not this non sense?

  6. Yes yes yes. Consistency applied to graphics is a word that I rarely heard among windows developments. I hope further investment in UI universal patterns would let MS bring a sense, usability and consistency throughout their tools for anniversary update.

    I’ve seen some shell actions showing better iconography. I hope the use of type and margins get similar a revision.

    Windows just need better touch feedback, and asynchronous Loading controls. Sometimes you don’t know what you hit or what is happening under the curtain.

    Thanks for making that effort and bringing things a little closer together and rid windows of most of their horrendous win 32 UI.

  7. I am using Metro Studio from Synfusion. Its the best choose for me to design icon set for my apss also. Its download for free.