0

Is there an objective criteria for buttons in a GUI on how to reflect the current state of a button and indicate what happens if you click it? For example an On/Off button where green indicates on and red off. If the button currently shows green does that mean that it is on or that if you click it the you will turn it on? I can think of buttons that are set up either way.

2 Answers 2

1

The classic example for this behavior is the humble play/pause button: When the video is paused, do you show the Play symbol (to indicate that you can press the button to initiate playback), or the Pause symbol (to indicate you're currently paused)? This specific issue has been discussed in this question: Separation of play and pause buttons for playing media

In the play/pause case, you always want to show the action in the button; if I want to play a video, my eyes will be on a lookout for triangles, not parallel lines.

Another example is this mode switcher in blender:

a dropdown with various modes

Here, the dropdown text always shows the current state, but since it's a dropdown, the affordance to switch between modes is there. (NB: Having a dropdown for modes probably should be a last resort for your app, only utilized in the face of near-overwhelming complexity)

We could split this dropdown into two components by the way, a field showing the mode and a button with the action "change mode".

A third examples are checkboxes and toggles. Their primary purpose is to communicate state, so even though they are interactable just like buttons, they should only ever show state (maybe with a tiny bit of anticipation on hover).


The criterion for when to use which is context. In some cases the state of the app is obvious (playing vs not playing), so the button doesn't need to communicate the state, it's only saving space by combining opposite actions. In others, it needs to only communicate state, and in others still, it needs to do both.

If the context ever is ambiguous, you're generally better off separating state indicator from action.

As a final aside, you may want to avoid coloring buttons as red=bad green=good, as it is ineffective for some color blind users and tends to look fairly noisy. Using primary/secondary or color=enabled grey=disabled patterns generally works better across the board.

-1

Buttons can have enabled and disabled states:

button

In the image above, the second "special" button is usually your secondary button. It's less emphasised than the primary button and used for less important but useful actions (e.g. a cancel button in a modal)

2
  • I apologize for not being clear. In the case I am thinking of, there is no disabled state for the button and has 2 states: red or green Jul 17, 2023 at 0:41
  • @AlLelopath then it's best you share it above, it will make it easier for us to know what the issue is exactly. The only use I can think of for a red/green button is (for red) showing that this is a dangerous action or that it will cancel something. Or (for green) that you are accepting something. But it's best you share the buttons, preferably with labels. Jul 17, 2023 at 4:46

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.