0

Is it bad practice to use different input methods (separate buttons vs a drop-down menu) to visually indicate which mode an application is currently in? If so, why?

Some background:

We have an application with two buttons: "on" and "off". Depending on a variety of conditions the application will be in one of two modes: "A" or "B". When in mode "A" clicking either button will send the corresponding command to a physical device. In mode "B" clicking either button will just update a value in a database. The UI has a text label saying which mode it is currently in and an icon appears next to the label when in mode "A" to further indicate that clicking a button will operate a physical device.

We have received some requests to make the distinction between the modes more obvious. One of the suggestions is to display the two buttons when in mode "A" and a drop-down menu with the two options when in mode "B". To me, this doesn't seem like an appropriate way to visually differentiate the modes, but I'm having trouble articulating why.

My argument would be that the use of particular UI component should be based on the type of data being presented and the amount of space you have to present it. It should not be chosen just because it is visually distinct from a different component.

1

It seems to me like the problem is related to confusion to available actions depending on the interface mode. How about we address that directly.

Instead of using a button or drop down menu to implicitly imply its action, how about simply indicating the action directly on the buttons themselves? e.g. "Activate on Device" "Deactivate on Device" or "Update Database" depending on the mode.

And to address the question. Different input methods should be chosen to support various input types. A button indicates a possible single action, if you have very few items and they are all likely actions the user may choose, then use buttons. If you have a larger group of possible actions, but a user is likely to choose one over another, a drop down, or a split button makes the most sense. To use a different input method for a "learnt" association between 2 modes in your system is quite a workaround solution.

0

It seems to me that changing the function of your interface at the click of a button would make for a confusing experience. The user has built a mental model of how it works, and expects the app to act a certain way, so it should consistently act that way. At least if you are operating on the "Principle of Least Astonishment": http://www.uxmatters.com/mt/archives/2010/07/achieving-and-balancing-consistency-in-user-interface-design.php

But there are other visual cues you could give to differentiate one mode from another. Perhaps the text color could change depending on which mode you're in, or the background color could shade slightly. Perhaps the button itself could be a different color, or change its shape slightly, depending on the mode.

Keep the interface the same, and just change a few cosmetic things to start to get people's mental model in line with "Red Button A does this, but blue Button B does this." Even a subtle change between modes could be useful.

0

I agree that changing the input method for this does more harm than good. It's both inconsistent and confusing and will probably send at least some users thinking about the why. They will never guess it :).

You can provide a strong visual distinction between the two modes, like a different background color for that area, and an icon for both modes, not just for one. When there's no icon, there's nothing to suggest that there is also a second mode that does have an icon. It's just perceived as "the only mode". For example, your computer probably has an indication of the network being connected or disconnected, which is very different from just displaying a "connected" icon and hiding it when disconnected.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

And more generally speaking, a dropdown with only two values is very rarely a good solution.

0

The scenario says the two MODES. These modes must be indicated visually, by a color coding. Subtle changes can be missed. Here in this case, there is significant change. The UI is communicating with a physical device and in other its not. Just updating.

A distinct cue of two modes with color. That will be a strong visual indication. 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.