1

chossen valye should be op1 or op2

I'm working on the input style for a dropdown field, and I have two options for once a value has been selected. The default field state is shown at the top, which has the same border color as the empty state. The second option has a border the same color as the value. Which version communicates better?

  • Not sure I understand the question. Can you reformulate? – Ecaterina Moraru Jan 8 '18 at 14:13
  • I think this still qualifies as a UX question, because this is mostly an input state issue. – Wanda Jan 8 '18 at 16:05
  • It qualifies now that it's been edited from its original state. – dennislees Jan 8 '18 at 16:15
1

Consistency is at the center of good UI design

Unless there's a good reason to, the weight and color of the text and the thickness of the input border of a dropdown selector should be the same in all states.

In your case, graying out the text in the "no value" state risks the field being mistaken for one that is disabled, and increasing the thickness of the border could be distracting and increases the risk of technical issues with the layout of your form.

The age old aphorism applies here:

KISS (Keep it simple, stupid)

1

To me, option 1 is stronger, but your default empty state still suffers from its lack of contrast. It might be mistaken for a disabled state. I suggest making the text a bit darker.

Your second option gives the impression a bit too strongly that the input field is currently in focus. You should reserve border changes (color) to communicate errors and activity.

If you really want to make it obvious something has been selected, you can opt for a checkmark next or inside the input field. If you are worried that people will think it's pre-filled, you can make use of smart defaults.

states

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.