DEV Community

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

Collapse
 
nickytonline profile image
Nick Taylor • Edited

In my experience, the button should convey the action. Although the button says Following, that does not indicate what it should do. If we take a page from Twitter's UX, hovering over the button when it says Following, changes the text to Unfollow, the intended action. So I think it's OK to show the current state potentially, but in the end before it's pressed, it should convey the actual action about to happen.

Demo of Twitter Unfollow button

Update... Just adding this comment here as I forgot to mention mobile

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.

Collapse
 
turnerj profile image
James Turner

What is interesting is that with Twitter, even as something as non-destructive as unfollowing someone, they prompt to confirm so even if you didn't understand the meaning of the button, you've got a second chance with a more complete description.

Collapse
 
maxart2501 profile image
Massimo Artizzu

That's no surprise, as Twitter focuses on maximizing engagement from its users.
They really don't want you to unfollow anyone. 🙈
They now even prompt you what the handles you follow like and follow themselves... Quite annoying. 🙄

Collapse
 
akajb84 profile image
Neesha Desai

The unfollow on Twitter can be pretty destructive, in that if you unfollow somewhat who is private, you have to request permission to follow again (so it's very clear to that person that you unfollowed). I'm a fan of any action that can be difficult to redo easily (or may have unintended consequences) getting a two step confirmation.

Thread Thread
 
nickytonline profile image
Nick Taylor

Well, at least they prompt you before you unfollow.

Collapse
 
leoat12 profile image
Leonardo Teteo • Edited

I thought exactly the same example about Twitter. I think it is always good to convey the action. When I see a "Following" button I somewhat feel that I spend a split of second to understand that it is a button and it may be used to unfollow someone. On Twitter if you hover over it you have no doubt about it. However, this is not true for the app which makes me think what we can do to convey the action and state at the same time on mobile apps.

Collapse
 
moopet profile image
Ben Sinclair

Here's an example of the worst possible combination of things, courtesy of Quora:

Screenshot of the follow and notification icons from Quora

It says "Follow", but that's not an action, because the tiny tick indicates I'm already following. I have no idea what happens if I click on "All notifs" and don't want to try.

Collapse
 
edo248 profile image
Eduard Babayan

This. Confuses me every time.

Collapse
 
karataev profile image
Eugene Karataev

What about touch devices? They don't have hover effects.

Collapse
 
awwsmm profile image
Andrew (he/him)

This is a huge part of mobile UI that I think a lot of people overlook if they're more focused on desktop. I think you should always design as though hover is not an option, only using it to add extra clarity, but not relying on it to convey the meaning of a button, etc.

Collapse
 
nickytonline profile image
Nick Taylor

I answered it here.

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.