23

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:

old design

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':

enter image description here

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:

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.

14
  • 8
    Give them rollover text labels.
    – PhillipW
    Oct 27, 2021 at 10:46
  • 5
    @PhillipW Give what rollover labels? The items, so the user has to roll over every plausible one to find the right type? Or (hopefully) the many icons so new users can learn them easily?
    – Chris H
    Oct 27, 2021 at 15:44
  • 8
    The icons......
    – PhillipW
    Oct 27, 2021 at 16:48
  • 6
    @PhillipW so that what they used to be able to grok in 0.1s by looking at the icon pattern they'd learned, then now have to wait 10x+ longer for a tooltip to appear, after they've hamfistedly managed to finally position the pointer over said icon? It'll be a hit, I'm sure
    – Caius Jard
    Oct 28, 2021 at 11:51
  • 7
    I see these questions, from time to time, where there is some existing user base that uses facility X, and some new-to-the-problem dev who's looking at it and saying "but it's so complicated! what about the new users?!" - well; yeah - what about them? You're a new dev, and conceptually also a new user, so certain there is a problem that you're looking for a way to rip up everything that currently is and provide a new solution.. How do you come to be so certain that there actually is a problem ? Just because you think there is (because there is for you), does it mean that it actually exists?
    – Caius Jard
    Oct 28, 2021 at 11:56

9 Answers 9

49

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.

Icon examples

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.

How TortoiseGit does it

8
  • 20
    I think side-by-side icons are the way to go here - colour should not be used alone to convey information because as many as 1 in 20 users will have some form of colour-blindness; and fitting multiple elements into an icon is going to make the details hard to distinguish.
    – IMSoP
    Oct 27, 2021 at 17:28
  • 2
    For another example of this approach, even the OP uses it already: for the icons in the column on the right hand side, under the cogwheel. It has combinations of the "A" icon with the lock icon.
    – Bergi
    Oct 27, 2021 at 19:16
  • 2
    "but without the clipboard" - notice there are also non-clipboard icons, like the € sign, the pin, and the "add user" icon. What to do about these, just keep them?
    – Bergi
    Oct 27, 2021 at 19:19
  • 4
    @Bergi - Yes, just keep those icons. Maybe it makes sense to keep non-clipboard icons monochrome and clipboard icons in the respective color. This idea of course hinges on the assumption that OP has mostly clipboard icons and only a few others. I also like side-by-side icons better, but I wanted to offer something that fits into the same limited space as the old icons.
    – Rainer P.
    Oct 27, 2021 at 19:35
  • What it clearly shows is that it's not really accurate to say that there are hundreds of icons to learn: there are just a few items and colors to learn, and then there are combinations (but you don't need to learn them; if you know what red means, clock means, and checkmark means, you will probably understand any combination of them).
    – Frax
    Oct 28, 2021 at 13:20
7

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.

2
  • 11
    People reading mandarin can distinguish thousands of symbols. If there is some system in these iconds (which is maybe ovious to the domain expert / user), distinguishing 100+ icons is no worse than beeing able to read 100+ words.
    – epa095
    Oct 28, 2021 at 9:49
  • 4
    It seems like there are really just a few base icons (clipboard in the example) combined with colors and a few other icons that may be stacked on top; doesn't seem to me like it's too hard to learn - especially given that you need to understand the stuff they represent anyway.
    – Frax
    Oct 28, 2021 at 13:23
5

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.

2

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
1
  • 1
    It looks like color codes already provide info and the main source of variations.
    – Džuris
    Oct 27, 2021 at 22:30
1

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.

1

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.

1

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 !

0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.