In our online store we have a facet to filter the search results by color. The different values for this filter are displayed as a small tile according to the name of the value. The color of the tile is derived from the name of the color, f.ex. red => #FF0000. It currently looks like this:

enter image description here

Some items have weird values for the color attribute, f.ex. orange/grey or oak. We have a translation map where can add the color manually, but it might take some time until the new values are added to this map. Until this happens we don't know which color code to assign to this tile so we display a question mark:

enter image description here

User feedback has shown that the question mark is perceived as a bug rather than a missing color.

What could be a better way to display this, without confusing the user but also making it clear to our staff that there is a color missing?

Some options we have discussed:

  • A friendlier icon
  • The good old "image missing" icon some browsers use

EDIT: Another option:

  • For missing colors, display a text link instead of the color tile, below the color grid

enter image description here

  • If it is just a question mark how will they know what color it is? If they don't know what color it is why would they click it? If they aren't going to click it then why would you even display it? It appears to me the only options are to somehow display what the value is, not a generic icon, or otherwise simply remove it until all the colors are ready.
    – DasBeasto
    Mar 23 '16 at 19:39
  • Agree with DasBeasto - why would the user ever select 'items of an unknown color'. Perhaps you could enforce new-color-creation when an item with a new color is added to the store to prevent this situation.
    – Paul S
    Mar 23 '16 at 22:47

If you still want to display the placeholder colour when it is not selectable, you could display the colours in a different format, here are two quickly mocked-up variations.

enter image description here

By displaying the name of the colour and a sample, you can easily display to users all of the information you outlined above.

This design also may benefit people with seeing impairments like colour blindness (1 in 12 men & 1 in 200 women).


It appears that you have implemented this in such a way that makes the grid a very rigid structure and you have a problem that you might have otherwise not had. Essentially if you were not tied to the grid you wouldn't need a representation in the "null" spot, "No green items found."

For the most clarity, you should remove and reflow the colors that are actually available based on the inventory results page. You can look at amazon and ebay who do something similar. It would look something like this:

enter image description here

  • There may be a misunderstanding. The issue is not about the grid structure, and what to do when the number of items is not divisible by the number of rows. In the example above, there actually are green items, we just don't know which color code to display for green (think oak instead of green for this to make sense). Mar 23 '16 at 22:13

You shouldn't represent it

You want to do a faceted search and literally asking

What could be a better way to display this, without confusing the user but also making it clear to our staff that there is a color missing?

well, for starters, you shouldn't show users something not even your staff knows. Thus, you can show this in your backend for your staff, but you shouldn't show this in your front-end.

See, a faceted search is a way to narrow and filter a search process in order for users to get the most accurate result. So, how will users find something that doesn't exist? . You didn't assign a color hue (variable) to the list of available colors, so users can't find a nonexistent variable.

What to do?

In your backend, you can use what Illustrator uses, see image below:

enter image description here

This icon (the square with a red line) represents an undisclosed color, which is transparent until you define a color hue (which seems to be EXACTLY your case)

In your frontend, you shouldn't show anything. If you feel like you desperately need to include this in some way, you can throw results after a filter --> SHOW ALL condition. If you include colors in the list, you could simply use text, like "yellowish pinkatone" . But again, this is not a very professional way to do things, so you should really avoid to show things to your users until at least you know what are you going to show

  • 1
    The white square with a red line in Adobe software actually indicates "transparent" and not "undisclosed colour" - The same icon appears in colour swatches enabling the user to select "transparent" as a colour option - this is not a colour placeholder. Mar 24 '16 at 8:24
  • I aleeady said it'stransparent, thank you for saying it again. A transparent color doesn't exist by itself, so in a graphic edition program a transparent layer can be obtained by absence of color or by absence of opacity, and it will lose its transparncy once you define a color by any of the methods mentioned. So, in this case, it works as a metaphor, which is the closest he can do in a situation I already said I don't recommend and it's a last respurce solution only
    – Devin
    Mar 24 '16 at 15:05
  • Exactly - It represents an absence of colour and cannot, therefore, represent a colour that has not yet been defined: a colour of any description is not transparency - the metaphor does not work. He would be better served with a multicoloured swatch tile to indicate that there is a colour of some sort or a timer icon to show that the real swatch tile will be added later. Mar 24 '16 at 15:12

Like others have said, simplest/easiest/cheapest is to not display "undefineds" at all.

My recommendation, assuming the above isn't an option, and assuming users need immediate access to the filter: show color name with swatch.

This a more usable solution (more on this below), in addition to providing a graceful fallback in the event that swatches are undefined.

On usability: I've found visualization-only color/pattern filtering to require a surprising amount of reconciliation in e-commerce. When someone wants royal blue pants, but the filter color swatch for blue is more teal, what do they do? They keep hunting for the royal blue swatch. Additionally, they're difficult for color-challenged eyes.

If the user has a list of filters, and there's a swatch that looks like teal to them, but is labeled "blue," they're able to quickly answer the question of "is that blue?"

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.