Page MenuHomePhabricator

Topic Subscriptions: Unsubscribe from Notifications from within dropdown
Closed, ResolvedPublic

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
Screen Shot 2021-04-02 at 11.07.16 AM.png (192×500 px, 23 KB)

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
Screen Shot 2021-04-29 at 11.27.43 AM.png (417×560 px, 39 KB)

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:

Screen Shot 2021-04-05 at 12.16.05 PM.png (467×615 px, 83 KB)

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

Screen Shot 2021-04-05 at 12.16.13 PM.png (223×340 px, 22 KB)

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.

Screen Shot 2021-04-07 at 3.25.16 PM.png (426×560 px, 38 KB)

Screen Shot 2021-04-07 at 3.21.13 PM.png (389×552 px, 39 KB)

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

Screen Shot 2021-04-07 at 3.56.40 PM.png (735×419 px, 50 KB)

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

Screen Shot 2021-04-07 at 3.25.16 PM.png (426×560 px, 38 KB)

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.

ppelberg moved this task from Doing to Design Review on the Editing-team (Kanban Board) board.

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:

Screen Shot 2021-04-29 at 11.27.43 AM.png (417×560 px, 39 KB)

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.

Change 680331 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Notification unsubcribe button

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

The implementation also includes the email and no-JS workflows, which were not covered in the mockups above. They look like this:

Email

Depending on the "Email format" preference in Special:PreferencesNotifications:

HTML
image.png (505×1 px, 39 KB)
Plain text
image.png (537×2 px, 102 KB)

No-JavaScript Special:Notifications

image.png (1×1 px, 196 KB)

Unsubscribing interface

The "Unsubscribe" links in both of the above point to the following interface:

localhost_3080_w_index.php_title=Talk_Scratch&action=dtunsubscribe&commentname=h-Matma_Rex-2020-07-15T22:43:00.000Z.png (1×1 px, 171 KB)
localhost_3080_w_index.php_title=Talk_Scratch&action=dtunsubscribe (2).png (1×1 px, 172 KB)

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

https://patchdemo.wmflabs.org/wikis/a82dc63bdd/w/

nice not so humble brag @matmarex

One thing that feels slightly off is that when I unsubscribe from the dropdown, I have to refresh the page for the contextual [unsubscribe] to change back to subscribe. Is that unavoidable?

I had a quick look, and it doesn't seem to be easy to fix that. Our interface and the notifications interface are not aware of each other, and our interface has no way to react to anything happening in the notifications interface. It is definitely possible to make that happen, but we'd need to make some changes to Echo, I'd prefer to handle this in a separate task.

Test wiki on Patch demo by JKlein (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/a82dc63bdd/w/

Test wiki on Patch demo by JKlein (WMF) using patch(es) linked to this task was deleted:

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