Interfaces with stacked bar sliders are hard to use. Every option looks the same, and there’s no emphasis on the high-priority ones. As a result, users have to scan the entire list to adjust a specific option they want. How would you solve this issue?
My idea was to turn a few of the bar sliders into ring sliders. Now, you can emphasize the top options with a visual hierarchy. The ring slider options will always stand out when users view the sliders. They display larger input values that are easy to see at a glance.
The only issue I see is that it might require extra manual dexterity to maneuver the ring slider in a circle. However, you could make the input a text field that users can type in as an alternative way to change values. What are your thoughts on the use of ring sliders?
This discussion seems academic at best and solely based on visual design. You cannot judge the merit of one approach vs. the other without additional context.
Is this for a purely touch based UI? Mobile? Tablet? What is the quality of touch response of the hardware? You cannot assume everyone is using a $1000+ smartphone with high quality multi-touch capacitive display.
What size are these UI controls relative to user's finger?
Will this UI also be used in a traditional context with mouse and keyboard?
All those things will influence which approach makes sense more-so than just the visual appearance.
This seems like a very awkward solution for the user to have to navigate when there are probably other easier visual cues you could use to help differentiate those three items while still providing the ease of use of the slider. For one thing, for the ring slider, the user is moving the slider in the opposite direction to increase the value than they do in the items below. Second, as a user, while I might be familiar with turning knobs in the real world, the dexterity I have to have to turn this correctly is unknown to me. Do I have to be right on the line and follow it exactly to increase the value? The horizontal slider mimics a slider in the real world (think a light dimmer). As a user, I'm familiar with how to interact with that. The reverse direction and round orientation of the ring slider will add a lot of cognitive load to users who have never encountered anything like it before. When I want to turn up the fan on my car, I have multiple fingers that I can use to touch the knob so it's easy. I can't remember a time when I've ever tried to turn the knob with just one finger. It might be more workable on a touch device but it seems like it would be similar to trying to turn the fan knob on my car with just one finger which seems very odd.
Even something as simple as vertical space between the top three items and the remaining 5 items could differentiate it enough. Alternatively, you could use color or even contrast to help create the visual hierarchy. Personally, if you were doing this in a real app, I would suggest that Saturation be included as a high-priority list item. I'm much more likely to reach for that than I am a hue adjustment for something like image manipulation.
I'm curious if the ring slider could respond to UP and RIGHT as increase and LEFT and DOWN as decrease. You could also consider just making the first three sliders vertical to mix it up.
To be honest personally I feel that with the ring slider it feels a bit «wrong» or counter intuitive when you start dragging from right to left. The reason for this is that I think I associate going left to right as «growing» and going the other way as shrinking. Maybe it would work in isolation though with the other normal sliders not present, therefore not giving this feeling. Just my two scents!
I agree that the ring sliders would be more difficult to adjust for the user. I suppose it could be coded so that just moving the cursor left or right would adjust the level, but this wouldn't immediately be obvious to the user.
Second, the mental model of "more bright or less bright" or "contrast" doesn't seem to be circular to me. Actually, a vertical slider might be more in-tune with the mental model. "Hue" might make sense as a circle because of the concept of the color wheel.
But the proximity of Brightness, Contrast and Hue doesn't make sense to me either. Brightness and contrast might go together but Hue doesn't seem to belong in that group.
So I might decide to just stay with the horizontal sliders and subtly divide them with a very light gray dividing line between Contrast and Saturation, switch the order of Sharpness and gamma and place another divider between gamma and sharpness.
TL;DR: don't use a ring slider. Look at the use case and follow the usability principles.
Longer version: This kind of group of sliders is helpful for very specific use cases. The only one that comes to my mind and is broadly used is in graphical and photo editing apps like Lightroom or Photoshop. And for that use case, you have here only half of each slider - by default, they begin at 0 value in the middle, and you remove or add, e.g., contrast to both sides.
The usability of the sliders on both mobile and desktop is excellent. I've spent many years over tens of thousands of photos with them, so I can tell a thing or two about them. You typically grab the slider and quickly slide back and forth to see the result immediately, only then to settle on an approximate value. Then, you can use arrows or enter exact values to fine-tune.
So try to avoid reinventing the wheel, focus on real users' use cases, and follow usability patterns.
could you set the ring sliders to respond to a left or right arrow key ( <-- OR --> ) as meaning "move 1 unit clockwise or anti-clockwise", THEN you set another short cut (eg: ( CTRL + <-- ) and ( CTRL + --> ) ) as meaning move 5 or 10 units clockwise or anti-clockwise (just so people can move it faster) ... AND THEN for mouse control, set it to respond to a mouse scroll wheel ... wouldnt that work? Now you could move in bulk with the mouse scroll wheel, and if you really wanted to find tune, switch to the keyboard shortcuts, or just use them from the start with big nudges followed by small nudges
One potential drawback of the ring slider from your example: When using it with my right hand on my mobile phone, my thumb would cover the actual value, when moving somewhere between 75 % and 100 %.
I'm enjoying the thoughtful comments on this post. There are some excellent things to consider. To add my point of view, I feel that one of the first considerations should be determining if the selection needs to be precise. If users must select a precise value, the option to enter an exact value should be included. Adding a stepper to adjust the value up and down could provide additional control.
The second consideration would be context and how much focus the user can dedicate to the interface. This will be different for a mobile app versus a car infotainment system.
Not only do the wheels make it easier to see the values at a glance, but they also make them easier to compare visually. And you're spot on about the visual hierarchy emphasizing those options.
I'm looking forward to reading more about this pattern!
Just get rid of the slider all together. They're hard to use, especially if you're trying to get accurate numbers. I do like the idea of the visuals for the bars moving to the set amount and every chance I am able to input a number instead of use the slider or animation I will always input over slide.
If there is a need to visually differentiate importance, this looks like an easy way to shake up the monotony. Deliberately emphasize "looks" as it's a hypothesis to test.
Remains to be tested if that leads to added fatigue, added mental resources, increasing frustation events?
Especially for mobile interfaces, 3 ring sliders next to each other could be difficult to handle.
The input scheme would be interesting to test:
- scroll x axis for adding/subtracting?
- scroll y-axis?
- be curve-faithful?
- Tapping for increase?
- Holding?
It's worth some tests as it could lead to boosted perceived ease of use. Could also not.
Creative solution to solve an understandable problem.
As many already have mentioned, concerns are on the way the ring sliders work: can be unintuitive, they work differently than the other sliders (visually more difficult to compare too).
Personally, I would emphasize visual hierarchy by using making the top controls thicker/bolder.
For example instead of being a line with a scrubber, they can be a taller area (similarly to iOS brightness/volume controls, but then plotted horizontally).
Besides personally preferences and affordability for users (which we can speculate on, but should be tested), I still feel your solution achieves the original intent effectively!
We have to consider the scenario on where this will be displayed. If it’s mobile, probably the experience will not be that hard considering how we’re use to the interaction of the mobile devices. On the other hand desktop will require a mouse or a touchpad (laptop) and the experience could be limited.
I find ring sliders are hard to use. Yes they look cool, but I find them really awkward. Putting a text field in as an alternative input kind of negates the benefits of a slider in the first place.
They're uni-directional and the behaviour of the knob is predictable. With ring sliders, does the knob only move when the mouse follows the 2d track? Or does it move based solely on the motion in the x-axis? I've seen both.
I liike the visual differentiation. To address dexterity issues, you could make the center text editable on click so users could simply enter a value. You could also make the whole slider clickable and have it increment by a percentage until it reached 100%.
This discussion seems academic at best and solely based on visual design. You cannot judge the merit of one approach vs. the other without additional context.
Is this for a purely touch based UI? Mobile? Tablet? What is the quality of touch response of the hardware? You cannot assume everyone is using a $1000+ smartphone with high quality multi-touch capacitive display.
What size are these UI controls relative to user's finger?
Will this UI also be used in a traditional context with mouse and keyboard?
All those things will influence which approach makes sense more-so than just the visual appearance.
So, you're saying ... it depends?
This seems like a very awkward solution for the user to have to navigate when there are probably other easier visual cues you could use to help differentiate those three items while still providing the ease of use of the slider. For one thing, for the ring slider, the user is moving the slider in the opposite direction to increase the value than they do in the items below. Second, as a user, while I might be familiar with turning knobs in the real world, the dexterity I have to have to turn this correctly is unknown to me. Do I have to be right on the line and follow it exactly to increase the value? The horizontal slider mimics a slider in the real world (think a light dimmer). As a user, I'm familiar with how to interact with that. The reverse direction and round orientation of the ring slider will add a lot of cognitive load to users who have never encountered anything like it before. When I want to turn up the fan on my car, I have multiple fingers that I can use to touch the knob so it's easy. I can't remember a time when I've ever tried to turn the knob with just one finger. It might be more workable on a touch device but it seems like it would be similar to trying to turn the fan knob on my car with just one finger which seems very odd.
Even something as simple as vertical space between the top three items and the remaining 5 items could differentiate it enough. Alternatively, you could use color or even contrast to help create the visual hierarchy. Personally, if you were doing this in a real app, I would suggest that Saturation be included as a high-priority list item. I'm much more likely to reach for that than I am a hue adjustment for something like image manipulation.
I'm curious if the ring slider could respond to UP and RIGHT as increase and LEFT and DOWN as decrease. You could also consider just making the first three sliders vertical to mix it up.
To be honest personally I feel that with the ring slider it feels a bit «wrong» or counter intuitive when you start dragging from right to left. The reason for this is that I think I associate going left to right as «growing» and going the other way as shrinking. Maybe it would work in isolation though with the other normal sliders not present, therefore not giving this feeling. Just my two scents!
I agree that the ring sliders would be more difficult to adjust for the user. I suppose it could be coded so that just moving the cursor left or right would adjust the level, but this wouldn't immediately be obvious to the user.
Second, the mental model of "more bright or less bright" or "contrast" doesn't seem to be circular to me. Actually, a vertical slider might be more in-tune with the mental model. "Hue" might make sense as a circle because of the concept of the color wheel.
But the proximity of Brightness, Contrast and Hue doesn't make sense to me either. Brightness and contrast might go together but Hue doesn't seem to belong in that group.
So I might decide to just stay with the horizontal sliders and subtly divide them with a very light gray dividing line between Contrast and Saturation, switch the order of Sharpness and gamma and place another divider between gamma and sharpness.
TL;DR: don't use a ring slider. Look at the use case and follow the usability principles.
Longer version: This kind of group of sliders is helpful for very specific use cases. The only one that comes to my mind and is broadly used is in graphical and photo editing apps like Lightroom or Photoshop. And for that use case, you have here only half of each slider - by default, they begin at 0 value in the middle, and you remove or add, e.g., contrast to both sides.
The usability of the sliders on both mobile and desktop is excellent. I've spent many years over tens of thousands of photos with them, so I can tell a thing or two about them. You typically grab the slider and quickly slide back and forth to see the result immediately, only then to settle on an approximate value. Then, you can use arrows or enter exact values to fine-tune.
So try to avoid reinventing the wheel, focus on real users' use cases, and follow usability patterns.
could you set the ring sliders to respond to a left or right arrow key ( <-- OR --> ) as meaning "move 1 unit clockwise or anti-clockwise", THEN you set another short cut (eg: ( CTRL + <-- ) and ( CTRL + --> ) ) as meaning move 5 or 10 units clockwise or anti-clockwise (just so people can move it faster) ... AND THEN for mouse control, set it to respond to a mouse scroll wheel ... wouldnt that work? Now you could move in bulk with the mouse scroll wheel, and if you really wanted to find tune, switch to the keyboard shortcuts, or just use them from the start with big nudges followed by small nudges
One potential drawback of the ring slider from your example: When using it with my right hand on my mobile phone, my thumb would cover the actual value, when moving somewhere between 75 % and 100 %.
I'm enjoying the thoughtful comments on this post. There are some excellent things to consider. To add my point of view, I feel that one of the first considerations should be determining if the selection needs to be precise. If users must select a precise value, the option to enter an exact value should be included. Adding a stepper to adjust the value up and down could provide additional control.
The second consideration would be context and how much focus the user can dedicate to the interface. This will be different for a mobile app versus a car infotainment system.
Not only do the wheels make it easier to see the values at a glance, but they also make them easier to compare visually. And you're spot on about the visual hierarchy emphasizing those options.
I'm looking forward to reading more about this pattern!
Just get rid of the slider all together. They're hard to use, especially if you're trying to get accurate numbers. I do like the idea of the visuals for the bars moving to the set amount and every chance I am able to input a number instead of use the slider or animation I will always input over slide.
If there is a need to visually differentiate importance, this looks like an easy way to shake up the monotony. Deliberately emphasize "looks" as it's a hypothesis to test.
Remains to be tested if that leads to added fatigue, added mental resources, increasing frustation events?
Especially for mobile interfaces, 3 ring sliders next to each other could be difficult to handle.
The input scheme would be interesting to test:
- scroll x axis for adding/subtracting?
- scroll y-axis?
- be curve-faithful?
- Tapping for increase?
- Holding?
It's worth some tests as it could lead to boosted perceived ease of use. Could also not.
Creative solution to solve an understandable problem.
As many already have mentioned, concerns are on the way the ring sliders work: can be unintuitive, they work differently than the other sliders (visually more difficult to compare too).
Personally, I would emphasize visual hierarchy by using making the top controls thicker/bolder.
For example instead of being a line with a scrubber, they can be a taller area (similarly to iOS brightness/volume controls, but then plotted horizontally).
Besides personally preferences and affordability for users (which we can speculate on, but should be tested), I still feel your solution achieves the original intent effectively!
Why not down-up sliders?
We have to consider the scenario on where this will be displayed. If it’s mobile, probably the experience will not be that hard considering how we’re use to the interaction of the mobile devices. On the other hand desktop will require a mouse or a touchpad (laptop) and the experience could be limited.
That way you can literally see which one is the highest priority.
Or you can make them vertical sliders so you can literally see which one is the most high priority like, a graph
I find ring sliders are hard to use. Yes they look cool, but I find them really awkward. Putting a text field in as an alternative input kind of negates the benefits of a slider in the first place.
Are there benefits to sliders?
They're uni-directional and the behaviour of the knob is predictable. With ring sliders, does the knob only move when the mouse follows the 2d track? Or does it move based solely on the motion in the x-axis? I've seen both.
I liike the visual differentiation. To address dexterity issues, you could make the center text editable on click so users could simply enter a value. You could also make the whole slider clickable and have it increment by a percentage until it reached 100%.