Maximum number of options when selected via next and previous buttons?

Question

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.

[edit]

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.

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.

Answer 1

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.

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/

Answer 2

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. ;)

Answer 3

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.