Usability and Convenience are Key

UX/UI design is a cumulation of typography, graphic design, and user research to ensure optimized usability of interfaces. When creating interfaces, the goal is to make sure that they are easily recognizable and grant simple access to the core functions of the app. A major part of UI design is iconography, which helps simplify app functions into pictorial figures. Icons are a great way to clean up and limit overwhelming text, but also offer a practical, convenient way to organize information visually. When using icons, you want to make sure that you are using them appropriately to ensure that their meanings are conveyed efficiently. In this blog, we are going to discuss 5 tips for using icons in your apps to enhance your app’s usability. 

1. Use Icons that are Recognizable

Icons are a quick and easy way to convey information in condensed form. When using them, you want to make sure that the icons you use are recognizable in regards to their functions. Throughout the history of iconography, the standardization of icons and their meanings have helped make them easier to pick up and translate an idea. There are common icons that we use on a day to day basis, such as a home icon to indicate returning to a home screen, or a user icon to indicate a profile. We recognize these icons and their actions so easily because they have been set as the standard. When using icons, you don’t want to reinvent the wheel—as in, don’t try to design a completely new icon for something that already exists and is already recognizable. For example, a camera icon is commonly used to denote the function of opening up your camera. You wouldn’t want to use a different icon, like a magnifying glass, to denote taking a picture since that isn’t the function that people would recognize with that icon. By keeping to the standardization system of icons, you make it easier for people to pick up how to interact with your interface through using icons that they have seen and used in many other applications. Keeping the learning curve to a minimum will help make your interface more usable and desirable.

Example from Adweek

In the example above, Facebook redesigned its UI layout for a refresh. With the refresh, they made sure to keep the standard icons users were familiar with, such as the home icon to denote the home feed, the user icon to denote the user’s profile, the bell icon for notifications, and the thumbs up to denote a like. Despite the facelift they gave to the app, they made sure to keep the consistency of the icons in place to allow users to easily adapt to the new look and layout without having to learn a new system.

2. Use Labels Where Things Get Fuzzy

Sometimes even if the icon is recognizable, the function it denotes may be confusing or indirect to the icon. For example, in the Spotify app image below the main navigation has icons with their respective labels. The first two icons, the home and magnifying glass, are typically easy to recognize as home page and search functions. However the last icon, the horizontal bars with a diagonal bar, may not be as recognizable on its own. It represents a stack of books which denotes the function of accessing your library of songs. Sometimes the functions we are trying to convey are portrayed using icons that best reflect that function, so adding a small text label to specify the icon’s function will help make it easier to determine.Example from The Star

Other times, icons may serve multiple functions that may not be easily recognizable. An example would be the plus icon in the Instagram app. When you select this icon, it opens up a selection of multiple functions like uploading a new photo, taking a new photo, creating a reel, or adding to your story. Typically when you want to take a photo, this function would be denoted with a camera icon; however, in the Instagram example this is portrayed using a plus icon. The plus is used over the camera to convey that there are multiple functions beyond just taking a photo, so using a plus would help convey the multiplicity of the button’s purpose. Using a camera icon would restrict it to being interpreted to just taking a photo, when in reality there is so much more to it. In addition, using the plus is Instagram’s way of communicating that the picture or content that they are creating in the app is to be added to their feed. They aren’t taking a picture that would be saved on their phone, like in the case of using your native phone app. When taking a photo on Instagram, it is usually for the purpose of posting it to your profile in some type of way. If you have any concern that user’s may be confused by the icon you are using, in terms of its purpose, then adding a label will be a great way to make it easier to interpret.

Example from Tech Crunch

The image above shows the multifunctional purpose of the plus button found on Instagram’s home page.

3. Don't Reuse the Same Icons to Mean Different Things

As icons are best used when they are standardized, you want to make sure that you aren’t adding multiple meanings to the same icon. Each icon should serve a distinct single purpose. You don’t want to have, for example, a trash icon to mean both deleting an item in one instance and accessing your history in another. You want to make sure that when you use an icon to denote a specific function that it maintains that general meaning in all instances the icon is used. So if you create an interface and want to use the trash icon to indicate deleting something, then make sure that no matter where it is used that when a user selects a trash can it is to delete something. The meaning can expand to a broader sense, for example, if the trash icon represents deletion then you can have it mean deleting one item in an instance and deleting an account in another. As long as the general function of deletion is what the trash icon is conveying, then the spectrum it covers can be broader or narrower based on the need. To put it in perspective, in the Facebook app, the thumbs up icon is used to denote the function of liking something. What the like refers to changes, but the core function of liking remains consistent no matter what is being liked--be it an image, video, GIF, link, or text. Having a singular general meaning for an icon that can expand based on the need, will limit the amount of learning users have to do within your app to access certain functions.

4. Use Icons in Appropriate Places

Icons are very handy in conveying information with limited text. If you find that you are able to convey a certain message with a simple icon, rather than text, then an icon is the way to go. Limiting the amount of reading within an application, not only makes it easier to navigate but also easier to digest. If you were to create an interface with just text and no icons, users would be overwhelmed by the amount of reading they have to do—in addition, the text would clutter the interface, making it less desirable to use and in turn more visually taxing. On the contrary, you don’t want to completely eliminate all text from an interface and replace it with icons. Sometimes icons aren’t enough on their own to convey a certain function, whether it be because the icon has multiple functions or that the icon itself isn’t widely used and therefore still needs to be learned. Some of the best places to use icons are in menus and navigation bars, as these are places that are accessed the most frequently and need simple indicators of the varying functions the menus display. In places where quick action and functionality is needed, using icons is a great way to facilitate a usable and convenient experience. Example from DoorDash

In the Doordash example above, you can see the use of icons in the top filter menu. As part of Doordash’s attempt to convey the notion of quick and convenient access to food, they used iconographic interpretations of common food items users would want to explore on the site as a filter. Having this on the home page with accompanying labels allows for users to obtain a quick visual cue of what food they would want to search for, without having to interpret it themselves. The icons add a visual appeal that makes users want to interact with them, adding to the desirability of the interface.

5. Keep the Styling Consistent

One last tip when using icons in your interfaces is to keep the styling consistent. You want to make sure that if you decide to use an icon style that is rounded, that all icons are rounded. If you decide that the inactive state of an icon is an outline, and the active state is a solid filled in version of the icon, that you keep this constant with all icons. Keeping the styling of the icons consistent will help users better understand how these icons work, as well as how the user’s actions impact the visual appearance of the icon. If you change the styling in any way, users will naturally interpret this as conveying a meaning of some sort—even if it isn’t the case. Keeping everything standard will ensure that users are reading into the meanings of the icons the way you want them to, rather than through their own interpretation which could be flawed. Any inconsistencies in line weight, colors, shape, size could be interpreted as having meaning, so avoiding these inconsistencies keep flawed interpretation to a minimum and also makes learning the interface easier for users. In general, having a consistent style will also make your interface look more cohesive and well designed.

Example from Twitter

The picture above is the action bar under a tweet. In this example, Twitter has designated the grey text to indicate that the icon is in its inactive state. On hover, the icon and accompanying text changes to a color to designate it being interacted with. This system is found across all tweets on Twitter, regardless of the type of tweet. Keeping this consistency helps set a standard for users to understand how to interact with a tweet across the site and how their interaction with it impacts the icon.

The Bottom Line

Icons are a great tool in UI design that help convey varying types of information in a quick and simple way. When used correctly, icons are a great way to add visual appeal to your interface and also keep information and functions organized. Having a nice balance between text and iconography will enhance the usability of your app and create the optimal user experience you want for your users.