1

I am using some toggle buttons. I already have the enabled/disabled normal button, the enabled/disabled 'special' button (the users know what it means), but I want also an unclickable toggle button.

The design is already a bit confusing because all these buttons can be next to each other. I want it to be very clear that the button is unclickable, but without drawing to much attention to it (it has the least information).

This is a simplified version of what I have: A simplified version of the buttons already existing

Any thoughts on this?

Ps. Here is roughly how it is used:

Countries

  • You should visually separate 'button' and 'toggle button' more than you currently are. Consider changing the toggle to a checkbox. A single UI element should convey a single action and right now your toggle buttons aren't distinct enough from regular buttons. – William Anderson Jul 3 '17 at 19:44
  • What is the distinction between unclickable button and disabled button? EDIT: Nevermind, in this scenario you're referring to "toggled off" as disabled – DasBeasto Jul 3 '17 at 19:50
  • Its' a toggle button, so disabled means 'not active', unclickable means 'you can not change the state'. – Bram Jul 3 '17 at 19:52
  • 1
    @Bram those aren't 'toggle buttons' those look like tags / tokens (ux.stackexchange.com/questions/46695/tag-like-ui-element). Regardless, I think checkboxes or a solution like what I linked would be better in the context you've given. – William Anderson Jul 3 '17 at 19:58
  • 1
    I am missing some context here. What does your user want to achieve? – Dimitra Miha Jul 4 '17 at 8:39
2

If you don't need it, don't show it.

It really doesn't make much sense to have a control that can't be used. The essence of control is... to control something. Providing a control with an affordance of no control won't help your users, only confuse them (it already confuses you, and you know the app better than you users!).

In short, the best solution for this specific problem is to simply avoid displaying a control that has no use.

Other than that, may I suggest that instead of buttons you simply use checkboxes? A ticked input box will convey a message way faster than any color convention, bar none. And your interface will look a lot cleaner without all those buttons and colors, not to mention they won't collide or steal focus to other controls in your interface

  • It has a use: it shows that the user checked this button in a previous state, but that it isn't relevant in this moment. Not showing it would confuse the user more, because then his/her selection would dissapear. The colours have a very high visual use in the context, so that's crucial to keep. – Bram Jul 3 '17 at 20:09
  • Bram, controls are not meant to be used for these purposes. Controls are meant for control. If you need to show the user something happened on a previous state, you can use any kind of element for this purpose, such as plain inline messages, labels, alerts, warning, etc. In short: Almost anything but controls. – Devin Jul 3 '17 at 20:12
  • That's a very good suggestion, I'll think about it. It's kind of my question though, I want to let them see a previous choise without letting them modify it (but maybe in the next state they can). That's why I want an unclickable button ;). – Bram Jul 3 '17 at 20:14
  • @Bram, But what is the point of letting them know what they previously filtered by? Including it in the list gives the impression that it is in fact being filtered by. Is the use case that. I set a filter of 9 Countries, and then when I added a second filter 4 of those countries no longer have relevant data for the current view? I think you need to spell out your use cases more to get relevant feedback, because right now I don't know how you are using this, and it is confusing. – Chris Janssen Aug 2 '17 at 21:18

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.