1

I have this toggle button that toggles whether "trails" are on or not. Currently, I have one button that changes it's own text to toggle the state from "ON" to "OFF".

I've seen other posts that answer with the solution of having multiple buttons and having one button turn off the others when clicked on. This does not seem practical as I need to conserve as much space as possible. (It is a toolbar that is fixed on a webpage.)

How can I make this more practical? Or is it okay how it is?

enter image description here

2
  • What does reset do?
    – moot
    Jun 26 at 0:42
  • 1
    Have you considered changing the text of the toggle button to say "Trails are ON" / "Trails are OFF"? If your concern is possible ambiguity, this would resolve it without adding that many extra characters. The answers to this question might also interest you: ux.stackexchange.com/questions/1318/… Jun 26 at 5:25

1 Answer 1

3

Problems that I see with your approach are:

  1. The actions reset and clear trails are probably buttons. Whereas Trails: ON is a toggle. When these two different action elements looks the same, user will be confused because of the similarity of these elements. Therefore in my suggestion, you can see that I have used a different component for toggle action (toggle button - it is familiar too)
  2. The second button "Clear Trails" could be shorter. Therefore in my suggested option 1.1 and 1.2 you can see I changed it to "Clear". This is possible if you are able to make "Trails" as a header of the group as in Option 1.

Solution considerations:

  1. If you are able to change the ordering of the items, I suggest Trails with the toggle to be the first item of the group.
  2. Consider options 2 and 3 if you have constraints resticting you from going with Option 1.
  3. From @quack's comment above, you can also think about adding "Trails are ON" as in option 3.
  4. As one of your considerations is to save space, Option 1.2 might be better than 1.1, as it saves a bit more space by not having the white elevated card as background.

enter image description here

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.