4

I have a color and brightness picker:

enter image description here

It has been designed for touch interaction; you can scroll it horizontally. Now here's the thing: How do I design a good indicator for the currently selected color?


I tried some things, but I don't think they do too well.

first attempt

second attempt


I'd like it to be...

  • simple and clean;
  • the selection should be obvious;
  • nice looking

The selector doesn't move at all, it's just the inner part of the selector that moves when you scroll through the colors.


Thanks in advance for your advice.

0

1 Answer 1

6

Try using a modified version of the first one, perhaps like so:

Modified Slider 1

What this essentially is is the first one, but with a box above to give an elegant preview of what you are currently pointing at. It will be above the user's fingers, and therefore out of their way.

The reason I chose the first slider is because it has a bar, which is definitely the best way to give an idea of what is being selected, thus making it the most intuitive, and the most elegant.

Some other suggestions I can make is to possibly have the box under the value slider, because of it's position in relation to the color slider will make it crammed to have it over. Although, it is always in your best interest to keep UI consistant, so if you are adding any more than 2 sliders of this type (you have H and V, you can possibly add S) than I highly reccomend you to keep the boxes above the bar at all times (or under, based on where you decide to keep it for the first box).

In response to your requirement

The selector doesn't move at all, it's just the inner part of the selector that moves when you scroll through the colors.

That is reasonable, but for your current problem, I think it is not a good idea to have the box separate, as it can confuse the user.

3
  • Would you show the box above the selection marker at all times or just while the user is interacting with it? Commented May 17, 2015 at 16:26
  • 1
    Just while the user is interacting with it, it is the expected functionality.
    – DripDrop
    Commented May 17, 2015 at 16:38
  • No problem! Hope it works well for you :)
    – DripDrop
    Commented May 17, 2015 at 16:44

Your Answer

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

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