Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.4k stars 1.98k forks source link

People: "Remove" text button action is unclear #32215

Closed sixhours closed 5 years ago

sixhours commented 5 years ago
Screen_Shot_2019-03-06_at_10 19 05_AM

Steps to reproduce:

What we see: We see a text button that reads as "Remove" with a trash icon. The text button is also semantic red. It's unclear what this button does; does it unsubscribe the user? Does it block them from viewing your site?

Conversation copied from the Trello ticket:

@obi2020 says:

@enrique_sanchez @alexislloyd Hmmm, I think Remove works here, but maybe needs a new color so it doesn't look so alarming. A better alternative might be "Unsubscribe" but is that word used elsewhere? If we don't referred to this as a subscription anywhere, then it's not the right choice.

The pop up modal that appears when you click Remove does fine to explain what's happening. If I edited for style it might be: "When you remove a follower they stop getting notification about your site. They can still re-follow you. "

As far as I know you can't block people here, else I'd say that should be messaged here.

What stands out to me as more confusing is the confirmation notice "Successfully updated @username" - is that referring to a username that was removed or the site name? I would change it to "@username has been removed"

@enriquesanchez says:

@obielledge Thank you Obi! I agree on the color, red is too alarming. I also think that "Unsubscribe" makes more sense here. To me, "remove" has a stronger feel and is not really conveying the right action. If this user were an editor on my site, then "remove" would make more sense.

@carolinemoore3 do you find any issue in using "unsubscribe" instead of "remove" here? and changing the color from red to the regular link color?

alaczek commented 5 years ago

I assume this one is related to #32229.

"Unsubscribe" does describe the action much better imo.

ranh commented 5 years ago

Just for general context, the difference between these two tabs appears to be that "Followers" shows wpcom customers following a site, and "Email Followers" shows people who follow by email address only. The Email Followers tab is not available at all on the iOS app. There's a separate issue about the Email Followers tab being unclear.


The "🗑 Remove" action is shown on both of these tabs, but this pattern isn't used elsewhere on wpcom as far as I can tell.

According to the examples for the button component, a more appropriate icon would be the X icon, not the trash icon. That might also alleviate some of the concerns mentioned above, regarding the action appearing appearing to be dangerous / alarming.

The ellipsis menu is a more common pattern for a remove action, for example in the postitem block. It might be appropriate here, but I'm not sure how well that works with a single action.

In the me/purchases screens we use a linked card that links to a detailed view, and that view includes a remove action. But there doesn't appear to be any need for that here, as there are no other details to show. Note that the remove action in Purchases also uses the trash icon, but in the regular primary color, not in red.


A better alternative might be "Unsubscribe" but is that word used elsewhere? If we don't referred to this as a subscription anywhere, then it's not the right choice

The terms "unsubscribe" is used elsewhere, but it looks like we deliberately switched to using "follower" at some point, probably related to launching the reader.

After pressing the button, the confirmation message uses "follower":

image

We use "subscribe" and "unsubscribe" in some of the emails themselves, for example in this confirmation email:

image

But we also use "follow" in others, for example this notification email:

image

Worth noting that both of these emails are referencing the same event. The first is the confirmation sent to the subscriber (or "email follower"), the second is the notification sent to the site owner.

We also have "unsubscribe" links at the bottom of emails that require it:

Don't want these emails? Unsubscribe.

Want less email? Unsubscribe or modify your Subscription Options.

Unsubscribe to no longer receive posts from Example Site. Change your email settings at Manage Subscriptions.

If you're logged in, you manage your subscriptions ("followed sites") through the reader, which doesn't use the term "subscribe" at all. If you're logged out, you can get to this screen, which uses both terms:

image

I found this old en.blog post that introduces the follow button and has some background on choosing the term "follow" over "subscribe", as well as changing "subscribe" to "follow" in other places (the gist was that "follow" tested better and we're not just emulating Twitter or Facebook.)

I also found a post from last year where we changed the "follow blog via email" widget to "subscribe"... p3fqKv-6pS-p2

Overall, while we do use "subscribe"-related terminology, throughout most of the experience we're talking about "follow".

All that said, I wouldn't use either on in this case though, because site owners can also be site followers, and it's not clear enough what the context for these actions is on these screens. If site owner A is looking at his follower list and hits "unfollow" on follower B, who would you expect to unfollow who? For example, from a site owner's point of view, this "unfollow" action can be just like the "follow" action we have inside of notifications.

In the context of managing a mailing list, I think "remove" makes more sense than "unfollow" or "unsubscribe", and I'm not sure the word "remove" itself is the cause of confusion here. If there is uncertainty about what "remove" means, it could indicate that this whole screen is not clear enough.

A more detailed label like "remove from list" might be clearer, but maybe also stretches this button too wide? It would be easier to fit a label like that in an ellipsis menu.

There are other things that can be done on this page to give context, like add copy to explain what each list is showing, or add copy to explain what it means to remove followers. That's not something I would necessarily recommend, though it would help address the concerns in the issue. A similar suggestion was made in the issue about the Email Followers screen being unclear.

What stands out to me as more confusing is the confirmation notice "Successfully updated @username" - is that referring to a username that was removed or the site name? I would change it to "@username has been removed"

I would also suggest reiterating the information from the confirmation message. Something like: "(follower) will no longer receive updates from your site. They can still visit your site, or follow it again."

sixhours commented 5 years ago

How about something like "Remove follower"? /cc @obi2020

I would also suggest reiterating the information from the confirmation message. Something like: "(follower) will no longer receive updates from your site. They can still visit your site, or follow it again."

Agreed, using this as the confirmation message would make the process much clearer.

sixhours commented 5 years ago

Thanks much for the excellent backstory and research on this one, @ranh :D

iamtakashi commented 5 years ago

I agree with the term "Remove" suits here. I'm not sure if we need to add "followers" there though. With the highlighted "followers" in the section nav, and the section header saying "followers", I think the context is quite clear as it's removing the follower.

I also agree with the red text button with the trash icon look so alarming. As it's been mentioned X icon feels better than the trash icon. How about using a compact button here?

Screen Shot 2019-04-30 at 21 21 41

I also agree with there are good opportunities in the confirmation message to clarify what this action means.