3

I have a situation where user can switch between two modes of working with an application. enter image description here

To show which mode the application is currently in, I would like to use two buttons. One with a disabled state with 'Using' label and a checkmark, and one action button.

What approach is best to switch between modes? Is this approach compliant with UX best practices?

Improve this question

4 Answers 4

Reset to default
2

A disabled state with a tick makes the situation harder to be understood. Tick gives a positive feedback to the user while disabled button gives the negative one. You need to show the active state more highlighted while other/others get the normal styling.

In addition, if some action is running and can not be reversed by pressing it (like radio buttons) You may think about changing style from the button to text only. It gives the impression to the user that unselecting all isn't possible.

Improve this answer
1

The disabled looking state with a tick feels all wrong. Using inactive styling for something active is weird.

You want to style this in the same way as the 'Use automatic queue' button and have the tick beside it. [I take it nothing will happen if you click the active state again? It just stays active?]

So all that would happen is when you clicked the other button, the tick would move across to signify the active state. You could also use further styling such as colour to highlight the difference.

Edit: your answer could be even simpler. I take it these states are mutually exclusive ie they can be only one or the other? In which case a simple checkbox state would do for one of the options (the other option doesn't even have to be rendered now!) enter image description here

If not using scanner using automatic queue. This approach saves screen space too

Improve this answer
2
  • 1
    If they are mutually exclusive, i suppose radio buttons are better choice to show which is selected and indicate mutual exclusivity.
    – Vinay
    Commented Dec 6, 2017 at 11:06
  • in my model there is no option for the other. The only option is Use scanner. If not using scanner then you must logically by using queue. You cannot deselect radios
    – colmcq
    Commented Dec 6, 2017 at 11:12
1

The way a selection is made in your current solution is fine, however the feedback is confusing. You should apply positive feedback to the selected option; highlights, size increase, etc, but keep the other option in the same state as it was before the selection. This informs the user that changing their selection is still possible, which I assume is intended in your application.

Improve this answer
1
  • Hi there, just a tip. This is the best and simplest answer here, but it likely won't do well because it doesn't have a visual component. Using the built-in mockup tool, or your own software, to show what you're talking about rather than just describe it, will get your answers more attention. I've often seen weak answers get upvoted more than others for no apparent reason than they had a nice mockup or other visual.
    – dennislees
    Commented Jan 5, 2018 at 15:54
0

Most of the answers so far will work to improve the interaction as you've designed it, but I'd recommend at least considering setting the automatic queue as the default and letting users choose to scan manually if and when they want. Then, give them the chance to switch back to the default from whatever screen or module where they use the manual scanner.

This way, the system's automation is primary—I assume this automation is one of the benefits of the system anyway—and the manual work is reserved for cases where the users can't rely on automation.

Improve this answer

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.