When you have a list with 3 or more buttons, its essencially easy to show the system status to the user, but for the first time i faced this two-button status feedback, and i don't know how to proceed. enter image description here

How do i indicate that the button previously clicked is active? without confusing the user.

EDIT: To clarify the question, i will explain the use case of these "tabs" as Marné said below. These are buttons that will change the page content when one is active/clicked, but even when one is clicked the other still enabled to be used, it is more like a "switch" interation. But because a lot of content changes, I considered important to show the user which one is currently being used.


I'm a little unsure whether you are intending to use these buttons as buttons, or as tabs (for navigation).

If you are using them as buttons, indicating that "one is active" implies that the other is disabled. The key is to make the active button look clickable/tappable and the opposite for the disabled button. In your example, both buttons look active. To make the disabled button look less clickable/tappable, especially in comparison to the active button, try setting its opacity to look washed out, yet still legible. You might also want to consider adding a tooltip (on hover) or dialog (on click/tap) explaining to the user why the button is disabled.

If you are using them as tabs, they aren't exactly buttons. Tabs (or segmented controllers on iOS) aid navigation as they stay static, with only their state changing - which I assume is the "status feedback" you are referring to? If this is your use case it opens up a lot of non-button visual attributes that can be applied to solve your issue.

Not the answer you're looking for? Browse other questions tagged or ask your own question.