Mobile app version of vmapp.org
Login or Join
Murray664

: Where to place text labels in custom color picker I created a color picker for a website, and I am having one problem regarding the layout of some text. Above the color picker, there will

@Murray664

Posted in: #Critique #InterfaceDesign #Typography #WebsiteDesign

I created a color picker for a website, and I am having one problem regarding the layout of some text.

Above the color picker, there will be a "New Color", and "Original Color". I'm having a hard time finding a location to place the text. (I don't think it's clear without the text.)



The orange is the new color, and the green is the old color.
Also, is it clear that at the new color, you can change the hex textFeild?

Update

I tried inserting the text bellow the hex color. It didn't come out good. I also tried putting it on top, which didn't come out good either.

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Murray664

1 Comments

Sorted by latest first Latest Oldest Best

 

@Berryessa866

You don't need text labels.

In your example images it's not clear what the two color bars are, but in context it should be perfectly clear. Assuming that choosing a new color in the picker will update the 'new color' bar, that will make it clear what the that color is, and the user is either aware of the color they already have selected, which makes it clear what the 'original color' bar is, or they will infer that once the 'new color' updates.

You commented that Adobe have a previous/new color indicator in their color pickers, so take those as an example—they don't have any text labelling the colors and It's clear (to me at least) what they are.

If you do have text labels...

If you do add text labels, I wouldn't use "current color". "Current" is a bit ambiguous, it could be taken as either the previous color (currently selected outside the picker) or the new color (currently selected in the picker). Use something like "previous" and "new", or "old" and "new".

The labels need to be a lot less prominent than the values too. Make them smaller than the hex values and possibly a lighter weight. A quick example:



Re: Text input

As is (with a slight background color and no border), the text input isn't obvious, but it is implied. It's not "in your face" obvious, but it will be clear to users who are familiar with color pickers and who want to input a HEX value. If they aren't familiar with color pickers and don't understand the HEX value it probably doesn't matter (that's assuming your users are familiar with color pickers and HEX color values).

With regards to your two examples (from comments), the full border is very obvious, but probably too obvious—you don't want it to be more prominent than the main color picker functions. The bottom border is much better and may be better. I don't think you need it, but that depends how much prominence you want to give the input.

Another option, if you want to make the input really obvious is to use an icon with the input:



The curser icon makes it fairly obvious, you could make it more so with something like a pencil "edit" icon. Again, I don't think you need it at all, but it depends on your use-case.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme