Reader Feed: a "Subscribed" button unsubscribes me without warning

[jsnajdr]

Steps to reproduce:

1. Go to a Reader feed for a blog: /read/feeds/:feed_id
2. If you're subscribed to the blog, you'll see a "✔ Subscribed" label (button-shaped) in the header:
   
3. Click on that label/button. The label doesn't say that you'll be unsubscribed, does it?
4. You're unsubscribed immediately. The header UI becomes:
   

I didn't expect that because the UI never told me that clicking the button means "Unsubscribe". There's also no affordance that would tell me that it behaves like a toggle button.

How to do it better? On Twitter/X, the "Following" button changes to "Unfollow" (in red) on mouse hover:

Screen.Recording.2025-01-25.at.10.05.54.mov

On Facebook, clicking on the ":+1: Liked" button opens a "Follow settings" modal that is basically the same thing as our "Manage subscription" page (/read/subscriptions/:sub_id). There I can unlike/unfollow the page.

One more thing: when I click "+ Subscribe" again, Reader immediately shows me this modal:

I found this very confusing: after subscribing, I'd expect to see a very visible confirmation that "you just successfully subscribed to veselin.blog" and only as a footnote there should be "Suggested Sites". But this modal is all about "Suggested Sites" and there is nothing about the subscription I just created. Except the very vague and indirect "While you're at it..."

[Robertght]

Replicated the above and I can confirm the modal bit is also confusing so I raised that here:

#96854

cc @davemart-in in case we need to merge or group these somehow

[davemart-in]

@Robertght let's keep them separate. Looks like @mehmoodak picked up that other issue. I'm adding this issue to unassigned on our main team board to be picked up.

Let's change this label to be "Unsubscribe" instead of "Subscribed":

And we should probably change the icon from a circle with a check to lineSolid.

[Addison-Stavlo]

#99943 should resolve

[Addison-Stavlo]

And we should probably change the icon from a circle with a check to lineSolid.

I missed this part initially. There are quite a few instances of the follow button throughout the reader so I want to clarify which we want to change / if we want to change all icons on those that the 'unsubscribe' copy.

Items that currently use "Unsubscribe" copy with another icon:

Post card ellipsis dropdown:

Discover v2 card:

Notifications management ellipsis menu:

Items being updated from "Subscribed" to "Unsibscribe" in linked PR:

Feed stream header:

Full post author compact bio:

The sites sidebar on /search, just shows the follow button toggle by icon only:

My questions are:

• Do we want these all updated to use the lineSolid icon?
• Do we really want to update all of these to say "Unsubscribe" instead of "Subscribed" ?

In many of these places the goal is individual content discovery and adding subscriptions. While we make it possible to unsubscribe from the toggle, should we be prompting the user to do so with that specific label everywhere it exists? I think that label definitely makes sense in some places, but in others we are sort of replacing a positive message (you are already signed up!) to more of a negative CTA (do you really want to be subscribed here? undo that signup, click me).

Im not sure where we would want which, but it seems like have - Unsubscribe in all of the above places could feel pretty poor.

Thoughts on which we should/shouldn't update this way? Which places should stay as “✔ Subscribed”, or do we want to replace it everywhere?

[Addison-Stavlo]

Back to the original post, @jsnajdr I am curious about your thoughts when running into this originally:

If you’re subscribed to the blog, you’ll see a “✔ Subscribed” label (button-shaped) in the header:
Click on that label/button.

After seeing the button noting that you were subscribed, what drew you to click it? What did you expect to happen here?

Was it a case of mis-interpereting it as not being subscribed and wanting to subscribe? Or something else?

[davemart-in]

Do we want these all updated to use the lineSolid icon?

No. Let's just keep the check in a circle.

Do we really want to update all of these to say "Unsubscribe" instead of "Subscribed" ?

Based on the examples you shared, it looks like it's just this one example of the button in the header which is highlighted in this issue. Let's go ahead and change it to be "Unsubscribe" after you're subscribed.

[Addison-Stavlo]

That makes sense to me, thanks @davemart-in !

[Addison-Stavlo]

shipped in #99943