4

Today I noticed one really annoying thing in a new layout from a designer.

In the new design, all dropdowns had much darker background than other text inputs.

For one, the contrast was quite poor, but what annoyed me the most, was that the difference of the background colour between dropdowns and text inputs in the same form made the dropdowns disappear and did not look like inputs at all.

Edit: The dropdowns have equal importance with all other inputs on the form.

So should all the form inputs (text inputs and dropdowns) have same (or atleast similar) background colour?

My brain says yes, but I don't want to go shouting to the designer before I'm sure it's not only me.

3 Answers 3

1

Well you already highlighted one issue that the contrast was poor and hence readability and accessibility is a concern.To quote the WCAG guidelines

Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

Now coming to the background color, there are designs where the dropdown color differs from the rest of the form color but the difference is not significant. I have noticed these in generally cases where it is important for the dropdown value to be populated for the processing to take place as shown below

enter image description here

enter image description here

That said there is no design reason why a dropdown color should have a different background color unless the designer for some reason wants it to look different from the rest of the form. Here are some examples of forms whose background colors are the same as the form itself.

enter image description here

enter image description here

enter image description here

If its not mandatory to draw attention to the dropdowns or they are not required you could use some of the above examples to show how they can be part of the design.

1
  • Yeah the dropdowns are "same level" inputs as the text inputs, so no need to draw extra attention to them or draw attention off them, they are equal in importance.
    – Samuel M
    Mar 6, 2014 at 19:49
1

You could argue for consistency.

ux-consistency In general software should be internally consistent with itself, and externally consistent with similar interfaces to leverage the user's existing knowledge. [Source: Nielsen]

So if you can point to many interfaces with consistent bg colours in both text input and dropdowns, then you can argue that other users will expect this as well.

Of course, the best way to be sure that this is really a problem is by running usability testing sessions with your target users and watching how they respond. Do they skip over the dropdowns in favour of filling in text on their first pass over the form?

1
  • This might be the answer I was looking for, without knowing that this is it. Consistency. Dropdowns can be identified as dropdowns because they have the triangle pointing down in the right side of the input. If they also have totally different background color from other inputs, they're either getting more or less attention, than other inputs. So they're not consistent with other elements with equal importance.
    – Samuel M
    Mar 12, 2014 at 20:35
0

The form elements should indicate to the user what kind of form element it is, and therefore what kind of interaction they should expect.

So there is certainly an argument for them to not be 'exactly the same'. As for whether they should be darker or lighter, or have shadows and highlights, or different colors, etc these are all detailed visual design decisions that would be based on the larger design solution for this particular project.

2
  • Yes, the dropdowns indicate being dropdowns with the down pointing arrow in the right end, and to me that is enough, since they're equal in importance. The background color difference only grinds my gears, because they look like they don't belong on the form. Not sure if I'm just used to have all form inputs to have the same feel in them...
    – Samuel M
    Mar 6, 2014 at 20:09
  • Well, there's no hard and fast rule here. It really does come down to visual design aesthetic decisions.
    – DA01
    Mar 6, 2014 at 21:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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