Better UI indications for Color type column selections in Form view

Making/removing/changing selections on a Color type column in a Form view looks terrible.

Here is what I see:

Initially, with no selection:
image

After selecting a Color, notice the thin black outline on white, indicating the selection, very hard to see:
image

If I had selected black instead, it’s practically invisible:
image

Then imagine I want to deselect, so that nothing is selected. Going from having white selected, to de-selecting white, I first get this:
image
It looks exactly the same as selected!! This is because even though it actually isn’t selected, the “cursor” is still in the field.
I have to additionally click outside of the field for it to look like this:
image

*It probably matters that all of the above screenshots are from using an app in Firefox.

Then allow me to provide some from Chrome


Initially, with no selection:
image

After selecting a Color, notice the thin black outline on white, indicating the selection, very hard to see:

  • a bit easier to see on Chrome

image

If I had selected black instead, it’s practically invisible:
image

Then imagine I want to deselect, so that nothing is selected. Going from having white selected, to de-selecting white, I first get this:
image

It looks exactly the same as selected!! This is because even though it actually isn’t selected, the “cursor” is still in the field.
I have to additionally click outside of the field for it to look like this:
image


Here’s the whole thing together

  • @Marc_Dillon you are absolutely right on this one, the color field is… dated.

(Not to mention the fact that I had to actually type in these color values one by one to get the display you see in the screen shots)

  • I could see an evolution of this being a Hex color picker or something

:+1:

5 Likes

Hey look at this!

image
image