1

The Situation:

  • The user can drag the slider handle to change the opacity of a 3D object (teeth).
  • The minimum value is 0, and the maximum is 100.
  • The user can also turn the switch off, and it will set the opacity slider value to 0 and will effectively disable the object's visibility.

The question is;

  • What should happen when the user changes the slider value from 0 to 1, or any other value that is greater than 0?
  • Should the switch turn back on automatically?
  • How should the switch react to changing the slider value?
  • What are the best practices here?

Below you can see the image of the controls.

enter image description here

Improve this question
4
  • 1
    Why even have the toggle if the user can simply turn the slider all the way down to 0 for the same effect? It just makes it more confusing. Your problem is very similar to this ux.stackexchange.com/questions/24360/…
    – Luciano
    Commented Sep 26, 2022 at 9:43
  • @Luciano Sliders have accessibility issues, so it's good to have an alternative (albeit this one is just a binary on/off).
    – JonW ♦
    Commented Sep 26, 2022 at 9:49
  • Turning the slider all the way down to 0 is quite tedious. You need to double check that you set it to 0 and not 1
    – ellis
    Commented Sep 27, 2022 at 5:46
  • @ellis, given that your control doesn't reflect any input values, how is your user going to be able to double check the 'off' state in the first place? If you can afford to trade in some granularity, perhaps you could consider using a stepped slider with a value indicator. This will provide clearer feedback, allow for snapping to an 'off' state, and avoid the ambiguous controls altogether.
    – Ro Achterberg
    Commented Sep 27, 2022 at 10:22

3 Answers 3

Reset to default
0

In my opinion it is a question of user stories/use cases:

  • Do all users understand that putting the slider to 0 hides it? get rid of the toggle entirely
  • Is there any conceivable workflow in which the user wants to set the opacity while the object is hidden (I can imagine doing this in complex 3D software, not so much in a fun little applet)? If yes, have them just not influence each other. If not, disable the slider when the toggle is off
  • Is there a scenario where a user wants to go from "hidden and opacity 0" to "unhidden an opacity X"? go with your idea of activating the toggle when the slider moves

One thing I wouldn't do without extensive user-testing is disabling the toggle when the slider is moved to 0 - that might feel like accidentally triggering a "destructive" action (hiding) even though the only intention was adapting the opacity.

In a general sense, I can recommend drawing a little state machine diagram to keep track of all the complexity, like described here. Otherwise you might end up with really weird unintended interactions you missed, happens easily enough.

Improve this answer
1
  • 1
    Thanks! The third item in the list makes the most sense to me. And I agree with your point about disabling the toggle when the slider is moved to 0. I didn't really think about it before.
    – ellis
    Commented Sep 27, 2022 at 6:00
1

Assuming you account for accessibility issues that sliders have, there are two possible scenario's and it depends on the user needs which one is the best.

Option 1. Disable the slider when the switch is turned off.

Leave the position of the slider intact. This way the user can experiment with the value on or off.

Don't allow the slider to go to 0. This is the same as changing the setting to off, and there is already a control for on/off namely the switch.

Option 2. Remove the switch and allow the slider to go from 0 to 100.

Both options avoid ambiguity and complexity in the implementation (that's exactly the reason for your question right?).

If the communication of on/off is important go for option 1, if the communication of the value (none to 100) is more important go for option 2, as said, it depends on the user needs.

Improve this answer
1
  • 1
    Thank you for your answer! I like the first option more since the user can just turn the switch off to disable opacity. They don't need to manually drag the handle and make sure they set it to 0% instead of 1%.
    – ellis
    Commented Sep 27, 2022 at 5:59
0

I am no expert in this subject but isn't the best practice to simply allow the user at all times to interact with both controls and let them work independently of each other?

The only thing that would possibly disable is to disable the opacity slider when turning the switch off.

Improve this answer
1
  • If you want them to be completely independent of each-other that gives the toggle no meaning, because it could be set to 'off' while the slider is set to 40%. Is that what the user would expect?
    – JonW ♦
    Commented Sep 26, 2022 at 9:10

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.