What are some good alternatives for using a lot of icons in software?

Question

This is my first time posting here.

The company I work for uses A LOT of icons (100+) in every color to specify the meaning of a specific table row. See the image below for clarification:

I've been redesigning the UI because it was getting dated. One of the things I struggle with is what I should do with all these icons. They are very important to existing users, because they can see with just one quick glance what the meaning of the specific row or action is. However, I feel like for new users, it is quite a steep learning curve to learn the meaning of 100+ icons (but just how bad is that?). Also, if I chose to design new icons, I pretty much have to use all the colors again (I don't have anything against color, I just don't want to introduce every single color in the new UI). Just look at a fraction of our 'icon legend':

A clipboard in 20 different variations...

In the new UI, I focus on just implementing a few colors for simplicity and a minimalist design. So I am not sure if it is a good idea to design a new 100+ icon pack with every color of the rainbow as that might have a negative impact on the UI & UX. This is an image of the exact same screen in the new design:

I am looking for suggestions, alternatives and solutions to this specific UX proplem. Are there maybe well known companies that have a similar situation? I'd love to hear about them aswell.

Answer 1

I think there are three problems with your old icons.

1. An action seems to be represented by an image of a clipboard. Since most icons represent actions, the clipboard is superflous, only clutters the icon, and leaves little space for the actual information. You can simply remove the clipboard as long as the other (non-clipboard) icons are sufficiently distinct.

2. The background color is important and should be kept, but you don't need a separate set of icons for each color. Instead, create a set of semi-transparent icons and draw the icon on top of a colored background. This alone should reduce the number of icons tenfold. It doesn't change anything for the user, but for you it means much less icons to create.

3. It is usually nice to have checkmarks in green and crossmarks in red, but in your case color already has a different meaning. Having a second color on top is distracting. Either put the icons side-by-side or draw the checkmarks etc. in black or white.

Below are a few examples how it could be done. #1 is the original, in #2 all items are side-by-side and in #3 the state icons are combined into one so that you only have two columns. Finally, #4 has everything combined into a single icon again, but without the clipboard and without green/red for the checkmark and crossmark.

Regarding your question on how other companies do it, many of them have multiple icons side by side. Below is a screenshot from TortoiseGit, where each commit can have multiple actions. This is basically solution #2.

Answer 2

I really doubt that your actual users are able to distinguish 100+ icons especially because they are very similar. Don't ask your users, observe them to get a clear indication if they really are able to identify those icons.

It would be interesting how your users actually use the icons. Do they identify them by state, by type or whatever other attributes the icon is communicating.

As I understand each icon family communicates multiple attributes. If they would be separated the library would probably be much smaller. So what I would try to do is to show dose icons apart from each other. This way you would even be able to filter by those icons (state, type, etc.) If you do so you probably would not be forced to use color coding, but can use different shapes.

Answer 3

Do not forget that a fairly big percentage of the population is affected by colour-blindness (about 8% of males and 0.4% of females with Northern European ancestry), so, whatever solution you choose, your icons should not rely only on colour to convey information.

Contrast is also important.

You can find more information online, for example on Color accessibility: tools and resources to help you design inclusive products.

Good luck.

Answer 4

Welcome to UX StackExchange.

Your problem is very unique to me. I personally do not recommend having so many (100+ icons). The main purpose of using icons is to visually communicate the context of what an action/function/screen does. It is definitely going to be very difficult for a new user to understand the meaning of each of these icons.

However, if existing users are 'USED TO' these icons then below is what I would recommend:

1. Try creating the icons in few colors like the ones that you have designed in the left most panel
2. Try grouping actions visually. In reference to your 'ICON LEGEND', I believe the cancel, tick, represent negative/positive actions like cancel, delete, save, etc. You can color code such actions and combine those with icons. For e.g. Use a traffic signal model or Red, Amber and Green.
3. Use tooltip on hover to steadly educate the new users

Answer 5

A common approach in application toolbars is to allow the user to choose whether to show icons, words, or both. It seems to me that you can use this same approach in your application. The existing users can select icons to get the UI they're familiar with, while new users can select the text form. They can also select both as a way to learn the icons, and when they become comfortable they may switch to the icon-only format to save screen real estate.

Answer 6

Several others have already given excellent design solutions, so I will comment on UX instead

They are very important to existing users, because they can see with just one quick glance what the meaning of the specific row or action is. However, I feel like for new users, it is quite a steep learning curve to learn the meaning of 100+ icons (but just how bad is that?)

An important part of doing UX design is not to make assumptions. Do you know this, or did you assume it? It might be good to perform A/B Testing for both old and new groups of users to see exactly how important these icons are for the user to perform specific tasks. You can even do multivariate testing: with/without icons, with/without labels.

The company I work for uses A LOT of icons (100+) in every color to specify the meaning of a specific table row.

Are you able to contact the original people who designed this? Its good to hear their thought process; there might be some specific reason why they chose to have 100+ icons in the first place that you may not be privy to. If there was no particular reason, it can also be useful to know that.

Also, if I chose to design new icons, I pretty much have to use all the colors again (I don't have anything against color, I just don't want to introduce every single color in the new UI)

While this sounds like a lot of work on your end, maybe introducing every single color is what works best for the user? Only user testing can reveal this.

Answer 7

Judging from the part of the legend you showed, the icons seem to represent the permutations of only a few states (possibly 'Actie' is not even a state, and everything in view is 'Actie'?:

<Actie> - <SomeColor> - <Afger/Geannul/Planb>

This is ideal for a three-column solution, where

• the first column is 'Actie', and features a dot if so, no dot if otherwise
• the second column is the first letter of the colors, in the color itself
• the third column is a checkmark for Afgerond, a minimalist eye for Planbar, and an x for Geannuleert

But, joining into the chorus here: Do not change the UX if the U like their X !

Answer 8

From what I understand, the icons are helpful at a glance to quickly understand the category and state of something. Given users have said how valuable they are, I wouldn't remove completely.

I wonder if an approach of:

• Category = icon
• State = text label

May be more appropriate. Users can then also filter by main category and state. I would also have on-hover on an icon some text to describe what icon category it is.

Answer 9

In now way am I UX specialist, but one thing made me attempt to write an answer.

You said: "They are very important to existing users, because they can see with just one quick glance what the meaning of the specific row or action is."

I would say that you should never alienate existing users. Many would disagree :)

Looking at your screen and old icons, I think you should make new set of icons, resembling old ones - at least in color scheme and generic shape. You could create alternative text representation (2-4 letters in similar colors than corresponding icon! Likely you have to play with text background too) and allow user to switch between icons and text.

Multiple icons or long texts are unfortunately not quickly decipherable - eg TortoiseGit example, provided by Rainer P., looks totally unusable to me, at least in your context.