I'm designing a product that has customizable features. The user can customize a light color by pushing a forward (>) or back (<) button. This action will toggle through a set color palette that will loop back once they reach the end.

I'm setting it up so that holding either button (< or >) will jog more quickly through the color options, but assuming the user is unaware that holding the buttons will run through them quicker...

And regardless of how many colors a user can distinguish or even needs...

How many options (aka. button presses) is enough before the user gets frustrated by toggling through them all? Any experience or studies to support this?

It's safe to assume that toggling through 3 colors would not be annoying. However, toggling through 1,000 colors could be. I'm wondering if there's some "sweet spot" in between.


To clarify these are physical buttons on a physical product.

[edit 2]

I don't follow how seeing an example helps gauge user frustration, but there have been enough requests so here's a rudimentary mockup. The buttons change the color of the light below.

enter image description here

The example I used was color, but it may as well be something else (like sounds, projected symbols, etc.). The question still stands with how many options are too many before the user gets frustrated.

  • can you show us a mock of your efforts so far? What's the domain? How frequently would users do this task? The more context you provide will allow the community to understand where you're at. – Mike M Nov 5 '18 at 22:02
  • My efforts so far have been focused on how many colors to use in a pre-defined color palette. I've looked at the number of preset colors in MS Paint (48), Alienware AlienFX Editor (20), Mac Aspect MacPaint X (48), and Corsair iCue (11). This is when I realized that I should focus more on how many would be too frustrating for a user rather than how many are distinguishable. – Davbog Nov 5 '18 at 22:40
  • I cannot show the product, but it is a physical one and the buttons change the color of a small light. The user would do this for personalization only and would probably do it at most once every 3 months (change of season to coincide with seasonal fashion and nature's colors changing). – Davbog Nov 5 '18 at 22:41
  • It would help a lot if we can see a photo of the physical setup. – Nicolas Hung Nov 5 '18 at 23:23
  • I've added an example. – Davbog Nov 6 '18 at 17:30

The decision to use of a prev/next navigation to click through a range of colors is itself frustrating.

Imagine having to click 50 times just to get to color #50, and once I'm in #50, having to click back 25 times to navigate back to #25 because I liked how it looked. Regardless how many options there are, the navigation solution is itself inefficient. Not to mention the memory load it imposes on he user (remembering I liked the color in position #25).

A better approach would laying out all the colors side by side without hiding them. This allows the user to compare the colors side by side, see the full range and click on whichever seems promising no matter what position they are in.

If the color range is overwhelming, you could introduce prev/next loading of sets/themes of colors. For example: Solid vs Textured, Yellows, Whites, Greens, Light, Dark, color families, etc.

enter image description here

This article has many good suggestions and examples: https://www.smashingmagazine.com/2018/02/designing-a-perfect-responsive-configurator/

Lastly, I would avoid looping / infinite sliding altogether. Users are notoriously bad at recognizing the next option as the first one of the set. Carousels suffer from this problem: http://uxmovement.com/navigation/big-usability-mistakes-designers-make-on-carousels/

  • That's exactly where I was seeing the frustration. Clicking through 50 times to get to color #50 could very well be frustrating, hence I was trying to figure out what a good number is for options. I've updated the original question to clarify, this is a physical product which physical buttons and a light is changing color. While what you described is ideal and easy to implement in a software or digital screen, in physical UX it is not easily possible and would complicate the product further. – Davbog Nov 5 '18 at 22:34
  • Also, very insightful note about the looping part. I'm still trying to wrap my head around if that still applies here because the colors will be in a row and follow along a color wheel. Definitely food for thought. Thanks! – Davbog Nov 5 '18 at 22:34
  • This is how you pick the Accent color in the Windows settings, so if your users use a computer they might have seen it before and find it familiar. – Alex Nov 7 '18 at 13:27

A good thing to do in these cases is to "manage the expectations".

If you tell the users they are seeing "3 of 20 colours" it will feel better than scrolling many times without knowing how far they got.

It would help to know how many options will be in your case. The more accurate information we have from you, the more accurate answer we can give you. ;)

  • This is a brilliant suggestion! We are actually able to do this quite easily too. – Davbog Nov 5 '18 at 22:35

You're thinking in only one dimension. Have you considered going 2d? One for hue, one for brightness and/or saturation. That way you can have for example 8 settings on each, for a total of 64 combos, while only taking a maximum of 16 button presses - which with [+] and [-] buttons would only be 16 colors.

Alternatively you could have several palettes. For example a red-orange-yellow gradient, a bunch of blues in various combinations, a rainbow, etc. I'd make the first button cycle through palettes and the second button cycle individual colors.

As a bonus you could have the color palettes pulse/animate if the user only presses the first button, but when they press the second it stops on a color (could be the current, could be the first in the palette array) and then for each additional press go to the next in the array. Extra functionality (animation! Partytime wooo!), a few lines of code and no extra physical buttons.

But to answer your main question... somewhere between 5 and 10. According to Miller's law, people can keep track of between 5 and 9 things at once. But 10 is a very important number due to the decimal system. Personally I like 8, it's enough for variety, but won't strain the brain TOO much.

It's not an exact limit. And you don't have to use 8 for both dimensions. But I feel(though I can't substantiate this well) that it's probably better to have an equal amount of colors per palette. You could have 10+ gradients but only 5 colors per selection. Because people can more easily remember/notice palette differences than individual colors. For example if you include a grey, a rainbow and a neon palette alongside softer gradients like red-orange and lime-teal, they will be noticably different. But the color difference between lime, chartreuse, mint and cyan is not quite as outspoken.

As a sidenote; if it's a physical device, have you considered alternative inputs? A scrollwheel would allow for fast changes as well as precise tweaking. If you only wanna change the hue I think you could get away with going for 360 choices. Heck if you wanna get really fancy you could separate the light half from the black half, like a mechanical egg timer, and have absolutely no visible buttons.

  • I already have brightness implemented and saturation would be captured in this color wheel. - Although I like your idea of nesting, I think this would work better with a 3rd button. Having the user need to cycle through a group 8 times to reach back at the same color would most likely cause an annoyance to them. - Thanks for referencing previous research (Miller's law). I'll look into that. - We didn't want to create dedicated buttons for this fucntionality because it's something that will be set up once and hardly changed. The buttons are therefore multi-functional. - Thanks. – Davbog Feb 5 at 23:52

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.