DEV Community

Discussion on: Should a button communicate the current state, the intended behavior, or both?

Collapse
 
nestedsoftware profile image
Nested Software • Edited

I would say that I am on team "action". I think a button should indicate what will happen if you click it. For the "Following" button, you could rename it "Unfollow".

I think the hover behaviour @nickytonline mentioned is okay for desktop, but that wouldn't really work for a touch interface. I'd suggest the default should be "Follow" and "Unfollow". Then you could optionally add the fancier "Following" with "Unfollow" when hovering over the button for desktop devices.

One tricky case I've run across though is a toggle for muting. On my iPhone, it shows a speaker with a slash through it when the sound is not muted, and a normal speaker when the sound is muted. That's consistent with what I've said above, but it's actually very confusing to me in practice. It seems to make more intuitive sense to me that the speaker with the slash indicates that the sound is currently off.

Collapse
 
nickytonline profile image
Nick Taylor • Edited

Good point about touch/mobile with hover. I should have took a bit more time before answering. 🙃

Looks like Twitter on mobile just shows Following and when you click it, you get the same prompt as desktop prompting you to make sure you really want to unfollow. I agree having just unfollow text would have made sense here like you suggest.