2

I have a page with a list of products. Each product can be customized in color and width. The width chooser is a select, but some products only have one option, so it is pre-selected.

What is the best way to go about this? Is it appropriate to visually mark the select dropdown as disabled and erase the arrow that indicates that it is a select, or will this confuse the user? Or, would it be better it be better to mark the arrow with transparency or another color, to make the user aware that there is the option of select, but for their particular case, it's not active?

These are the two cases I've thought of:

First case: one disabled with the arrow and a transparency

First case: one disabled with the arrow and a transparency

Second case: the two selects one without the arrow Second case: the two selects one without the arrow

Improve this question

3 Answers 3

Reset to default
3

A disabled dropdown indicates that there are options in the dropdown but can't be selected because the feature is not active. But in this case there are no extra options, and the field applies so the disabled might create confusion.

As there are no extra options, for the user to select from, don't use a dropdown for that field, instead leave it as text. Also, in your second case the border gives the impression that the text can be modified with some interaction, like in a text input.

enter image description here

Improve this answer
1
  • +1 agreed fully. The second option OP gives certainly just looks like a text box and I'd be confused why I can't click in an type. IMO disabled look works but the best option would be this, no dropdown at all.
    – DasBeasto
    Jan 3, 2017 at 19:59
2

I agree with the answer of Alvaro. It fits with the pricple of "Context over Consistency". In the blog "usabilitypost" you can read:

Traditional user interface (UI) principles dictate that you should keep your UI elements consistent. If you’ve used this navigation here, use the same format in the other places. This allows people to become familiar with your UI and thus, logic dictates, make it easier to use. But keeping things consistent may not be the best way to go in many cases.

Source: http://usabilitypost.com/2008/08/04/context-over-consistency/ You can also find some nice examples for "context over consistency" in this blogpost.

In essence, to a certain degree neglecting consistency is ok when it helps to simplify the interaction for the user.

Improve this answer
1
  • Thanks! That was exactly what I thought! Can you please edit your answer more in detail suggesting a visual elaboration to provide the consistency? Thank you!!!
    – Simona Adriani
    Feb 17, 2017 at 13:29
2

I agree with @Anna sugession, but still if you wanna go with Consistency as I know that for some cases it's hard to manage different controls especially when there are predefined layout's, you can just set disabled background to that select control. (Also make use of same color as arrow so it automatically get's hide)

enter image description here

Improve this answer
1
  • I don't undestand if your answer means to give the disabled select a grey background (same gray as the arrow, so to hide it), and leave the other white with grey border and arrow. Am I right? Just to confirm. If so, are you sure this provides consistency? Thanks a lot any way!
    – Simona Adriani
    Feb 17, 2017 at 13:26

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.