13

I am working on a project which is using Google Material UI. I have a set of production statuses that need to be displayed - they are selectable from a list but I am not sure what that list should look like. Each status has it's own associated colour and would ideally be displayed in the list.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Are there ever any instances of coloured dropdown lists in Google Material? I have had a look and can't find any, nor does the Material site mention any dropdown that doesn't use a white background. As far as I can tell my options are:

  1. Use the coloured list as pictured and set the hover states at 60% bg opacity

mockup

download bmml source

  1. Use a coloured dropdown box with white options, as per Google Material

mockup

download bmml source

  1. Use a coloured list as in option 1, but use the bg grey on hover

mockup

download bmml source

All thoughts welcome and encouraged please!

  • 11
    This looks more like a graphic design question than a UX question but did you think of using the standard white background drop down but adding a coloured bullet at the start of the test for each option? It would certainly be less painful to look at! – Andrew Martin Nov 24 '16 at 13:36
  • 4
    Every row with a totally different colour = very bad idea, confusing and not-good looking. – forsberg Nov 24 '16 at 15:04
  • 2
    What is the purpose of the colours? – SteveD Nov 24 '16 at 15:31
  • Drop the background colors entirely and use a standard list. Incorporate the colors as swatches, exactly like you would an icon (generally to the left of the item's name). Follow all standard UI guidelines for list boxes with icons. – Cody Gray Nov 26 '16 at 8:50
12

Short answer: Use your second option, where each field has a neutral white color as the color is not classifing elements in the list.

enter image description here


Color should be used to give distinction with other elements from its context or to differentiate elements.

Think of the way links have color and not the surrounding text. For example (image source):

enter image description here

In the image above, an accent color is used to highlight a feature (distinct the column from the others). Difference in color (or opacity in this case) within the elements in the same column is used to indicate higher or lower values.

Now in your example colors are not giving any meaningful value nor distinction in comparison to the others. ("in comparison with the others" or "in it's context" is the point of what I mean)

Comparing a no-color list with a list full of colors, a colored list doesn't give any benefits in terms of differentiation between the elements. If all elements have a different color, better use the same color for all of them (or lack of color = white/grey/black).

If there would be two (for example) kinds of elements using color to differentiate could make sense:

ghibli

In the example above color is giving extra information which is relevant for the user to choose. Blue are masculine names and pink are femenine names.

The color of the inputs should change when they are viewed (not in the edit mode, but in the view mode). And in that situation the color difference makes sense as the colored elements are distincted over normal (non-colored) elements.

Where there is color, hovering over an element should not be made using another color but rather lowering the opacity of the element.

Also consider colorblind users.


Edit:

I'll elaborate what I mean by differentiation and distinction, in case someone is interested.

This is just one color (for body text color use grey):

enter image description here

Using several colors (let's consider black and grey different colors for this example), we can differentiate elements:

enter image description here

Color can be used to give disctinction and purpose to an element:

enter image description here

To reinforce both properties (and benefit the color blind user and legibility) we can give extra styling:

enter image description here

  • Thank you for this- it has helped a lot. I have decided to use colour as an indicator on the side of each option but go with the material white options. – J4G Nov 24 '16 at 16:09
  • I'm glad it could help :) – Alvaro Nov 24 '16 at 18:42
20

Given your requirement:

Each status has it's own associated colour and would ideally be displayed in the list

Then we're not discussing if there should be a color or not, question is how to harmoniously display that color in a way compatible with Google Material Design?

Coloring the entire item is problematic:

  • It's not aesthetically pleasant.
  • It's problematic because of contrast with text.
  • It's problematic for colorblind users.
  • Hovering and focus will add more confusing color combinations.

Fortunately the problem has already been solved for color pickers. If you do not need any text it may as simple as this:

If you need some text you may try a traditional approach (example adapted from Grid samples in material.google.com):

Or, using round icon as we're used to see for avatars in GMail:

Note that layout may become much more complex and include long text (example again from Google):

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.