Icons are not a phenomenon created by web development. They are around us every day. From the label on your morning coffee that tells you the cup is safe to recycle to the sign on your way to work that warns you to watch for pedestrians, icons shape how we understand and interact with the world.
Some icons are better than others, and the good and bad practices of the physical world follow icons onto our phones and computers. As a UX / UI developer, designing the best possible user experience is essential, but how can you create clear icons?
Why Clear Icons Matter
Before we discuss what makes icons clear, why do icons matter? As the entrepreneur and designer Nathan Barry states, Icons serve the same psychological purpose as paragraph breaks: they visually break up the content, making it less intimidating. They are a way to make navigation and content information easy to understand.
Clear icons allow users to interact, navigate and enjoy your application or website regardless of their spoken language, age, or ability. They hold a lot of power but also come with many anti-patterns that limit how effective they are for users. Let us discuss some best practices to ensure a usable app and engaged and empowered users.
Use Universal Icons
Refrain from reinventing the wheel, or get clever when selecting your icons. Everyone understands that an icon of a house will lead them back to the homepage of a website or app. Changing the meaning of these icons will confuse and frustrate users who have specific expectations for the icon's behavior.
When you use universal icons for their accepted purpose, you will increase speed and ease of use for users of your website. Webpages often suffer from information overload, so allowing deep worn mental connections between universal icons and their interactions outcome is an excellent design decision.
Always Use Labels or Tooltips
While universal icons are fantastic, there are few universal icons. Even something like a text bubble can have multiple universal meanings. At the end of an article or blog post, the text bubble indicates a user can comment on the content. However, when located in the bottom corners of a sales landing page, it signals to start a conversation with a sales rep or a chatbot.
Until you have wide acceptance for your icons' functions, and then even after that, you need to have accompanying text with all of your icons. This text can come in two different forms. The first is the text positioned by the icon. This is for the side and top navigation bars. The text should be placed to the right or below the icon.
Use tooltips if you are working with a smaller screen or have limited space. Tooltips are a tool that allows you to display text over or around an item when you hover over it. This is an excellent tool for communicating what an icon does without cluttering the UI with extra text.
Use Uniform Icon Sets
Just like custom colors for each page of your website can make the experience confusing and unpleasant, having custom styles for each icon can also make for a bad UX experience. Some attributes that can change include icon weight, corner roundness, color, and fill.
Icon weight refers to how thick of a stroke your icons are. Your design will look uneven if some icons have a line thickness of 2px and some have a thickness of 7px. Make sure that all of your icons have a uniform stroke. Color is another attribute that needs to be consistent. Do not have icons with different colors unless you are trying to communicate the app and icon state.
The last two items are also very obvious to users. Ensure that you have either round or sharp corners on your icons and that they are filled in or outlined. While these may seem like simple attributes, having a range of attribute collections for icons is confusing for users.
Uniform Alignment and Scale
Create a better user experience by allowing their eyes to flow naturally across your app. This is especially important for icon sections as they contain many information and options communicated to users within a navigation bar. You can ensure natural flow by using uniform alignment with items like grids.
Also, ensure the scale is consistent. Having to determine if a slightly larger icon has more importance is not something a user should have to consider. Keep icons a uniform size and in a structured layout.
Use Mobile and Desktop Icons
Detailed icons can confuse users just as much as they inform users. While designers like to show how many details they can add to images and items, icons should have only as much detail as is necessary to understand their function. When you are using icons, less is more.
This is especially true when designing for mobile vs. desktop applications. Mobile icons have the chance to be much smaller due to smaller screens, so it is important to have less detailed icons that will not lose their meaning as they scale down.
Do not use Icons as Images
Icons are often SVG files, which are smaller and lighter in weight than JPEG or PNG files. It is tempting to take advantage of these smaller files to act as images in your app or website. Do not do this. Icons should always represent and trigger an action. Having interactive and non-interactive icons on your website will confuse users and make the experience much less enjoyable.
Learn Even More About Icon Use and UX / UI Development
Building great user experiences extends well beyond properly implementing icons in your designs. UX / UI bootcamps are great resources to learn all the theories behind great user design and the practical tools to build experiences today. Check out this UX/UI design bootcamp if you are interested in jump-starting a UX / UI development career!