Page MenuHomePhabricator

Topic Subscriptions: Unsubscribe from Notifications from within dropdown
Open, Needs TriagePublic

Description

Problem

In the notification dropdown, there is currently no way for contributors to quickly unsubscribe from a topic that they are receiving notifications for.

Current notification treatment with possible placements highlighte

User Story

As a junior contributor
When I see a notification from a topic that i no longer want to be subscribed to
I will click this on icon
so that I can quickly unsubscribe from the conversation.

Mockups

Temporary design for subscribe/unsubscribe affordance

Done

  • Create mockups for each step people will take for unsubscribing to specific topics from within the "notification card" in Echo, on mobile and desktop
  • Implement what is described in the ===Mockups section above

Related Objects

Event Timeline

iamjessklein renamed this task from Topic Subscriptions: Mockup to Topic Subscriptions: Unsubscribe from Notifications from within dropdown.Apr 2 2021, 3:24 PM

@iamjessklein can you please fill in the task description's ===Done section?

@ppelberg - I added "Done" in the "Description" for your review.

For context, this is what it looks like to unsubscribe from that location on Flow:

In the Notification Dropdown, you click on the overflow menu:

and then when you click "Stop watching this topic" dropdown , the overflow (...) menu disappears and you receive a toast pop up:

The link in the Toast message takes you to the top of the page that you are Subscribing/Unsubscribing to.

@ppelberg - I added "Done" in the "Description" for your review.

Thank you, @iamjessklein. I've edited the ===Done section slightly. Provided the edits I made sound good to you, I think the task description is in a good place.

Considering that we currently don't have an opinion on T279312, and we don't have a dashboard of some sort for notifications, and aren't planning on bringing topic subscription into the Watchlist, I think we should default to using the same visual language as Flow (star and overflow menu) but change the copy to say "Unsubscribe from this topic." (Change all the verbs)

So it will be:

  1. overflow menu
  2. unsubscribe
  3. toast (no link) that plainly states "You've been unsubscribed from this topic" and disappears.

Considering this proposal, I don't believe that we will need to what's described in "Done" in order to communicate this to @Esanders :

Create mockups for each step people will take for unsubscribing to specific topics from within the "notification card" in Echo, on mobile and desktop

Update: After a handful of conversations, which resulted in the following tickets:

@ppelberg @Esanders and I came to the follow near term agreements:

  1. Watchlists and Echo notifications will be treated separately
  2. We will not be making changes to Echo

which limits us in what we can do with the design, in that we need something that includes the ellipsis (overflow) icon and a dropdown. Given those constraints I've come up with the design (this is a wireframe) below. Note that I have included a design with a "Report Abuse"as an item in the dropdown menu for the purpose of future conversation as I think it's bizarre to have a dropdown with one item in it, I think that we should consider the potential of making this overflow more robust.

and... here's what *I believe* that will look like in mobile (I followed the current mobile echo pattern):

in both scenarios, the contributor will click it and unsubscribe and then get the toast message.

@ppelberg @Esanders please +1 (or comment otherwise) after reading this so we can move this into implementation.

@iamjessklein: +1; everything you described in T279150#6981608 sounds good to me.


Meta
I've added a research question [i] to T279164's task description.

Reason: I wonder whether – what I perceive to be – the vagueness of the Unsubscribe copy will cause Junior Contributors to be uncertain about what will happen if they click the Unsubscribe affordance from within the Echo dropdown.


i. "Do Junior Contributors instinctively know how to stop receiving notifications from a particular conversation from within the Echo dropdown?"

ppelberg updated the task description. (Show Details)
ppelberg edited projects, added DiscussionTools; removed OWC2020.

Change 680331 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/DiscussionTools@master] WIP unsub button

https://gerrit.wikimedia.org/r/680331

Turns out we can't have "Unsubscribe" without an icon - every action in the echo tray needs to have an icon. I will provisionally use the star outline icon.

Turns out we can't have "Unsubscribe" without an icon - every action in the echo tray needs to have an icon. I will provisionally use the star outline icon.

Noted.

@iamjessklein, I'm assigning this task to you and moving the ticket to "Design review" to decide on an icon to be associated with the Unsubscribe action from within Echo.


Strawman idea: what about the stop icon?

Without the context of other icons (play, pause etc.), the stop icon doesn’t seem obvious for me. What about a ⛔ “no entry” sign? With less precedence I can imagine an X sign as well, or maybe an 🛑 octagonal STOP street sign.

Agree the stop sign doesn't read out of context.

Would be easier to begin with if we can use something existing: https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons&theme=wikimediaui&direction=ltr&platform=desktop

Long term we may need a subscribe/unsubscribe pair, e.g. for mobile

@Esanders - can you clarify what needing an icon means here? Does it mean that if we had an overflow menu with a dropdown, the dropdown list item would need an icon? Or does it mean in this scenario that the overflow icon is "the icon"?

the dropdown list item would need an icon

Yes - wherever the button goes (in the main set, or the overflow list) it needs to have an icon.

Test wiki created on Patch Demo by JKlein (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/6c5e33c9b8/w/

@Esanders - can we do just the overflow with the text or do we need it to look more like this:

Long term we may need a subscribe/unsubscribe pair, e.g. for mobile

As discussed during today's standup, we are going to do the following..

Next steps

  • First, for the purposes of the upcoming usability test (T281438), implement what @iamjessklein is showing in T279150#7046062
  • Then, decide whether subscribing/unsubscribing from within Echo is required to offer manual topic subscriptions as a Beta Feature at partner wikis (T274188)
  • If we decide subscribing/unsubscribing from within Echo is required, we'll prioritize work on designing and implementing dedicated subscribe/unsubscribe iconography (T281541)
  • If we decide subscribing/unsubscribing from within Echo is NOT required, we'll hide what was implemented in this task until we prioritize work on T281541

@matmarex the way that you've implemented it works as expected.

If we decide subscribing/unsubscribing from within Echo is required, we'll prioritize work on designing and implementing dedicated subscribe/unsubscribe iconography

As this is a fairly low visibility feature, I don't think the iconography has to be finalised for this to go out. This is not like deciding which icon to use on the talk page itself, so we can easily change it later.

If we decide subscribing/unsubscribing from within Echo is required, we'll prioritize work on designing and implementing dedicated subscribe/unsubscribe iconography

As this is a fairly low visibility feature, I don't think the iconography has to be finalised for this to go out. This is not like deciding which icon to use on the talk page itself, so we can easily change it later.

I agree with what Ed is proposing above: offer manual topic subscriptions as an opt-in beta feature equipped with the "unsubscribe from within Echo" functionality included.

In doing the above, we are saying:

  1. We are comfortable with the "🔔" icon symbolizing the "unsubscribe" action from within Echo while the feature is available as an opt-in beta feature.
  2. We are comfortable with the same "🔔" icon symbolizing: A) the "Unsubscribe" action in/on new comment notifications withi Echo and B) "Alerts" within a person's "user links"
  3. We are comfortable changing the "🔔" icon when we come back to thinking about the Subscribe / Unsubscribe affordance more broadly. This thinking and work will happen in T281541.

@iamjessklein I'm copying you on this comment to ensure you've had the opportunity to comment anything that concerns you about the above.