Page MenuHomePhabricator

Design automatic topic subscription first-run experience (DiscussionTools)
Closed, ResolvedPublic

Description

This task involves the work with creating mockups for the experience people will have immediately after having been automatically subscribed to a conversation for the first time.

The experience being designed in this ticket should:

  • Cause people to know when and how they will be made aware when someone responds in a conversations they've become subscribed to
  • Cause people to know where and how they can adjust if/when they are automatically subscribed to future conversations they participate in
  • Cause people to know they have the opportunity to customize the channel(s) (e.g. web, email) through which they are notified when someone responds in a conversations they're subscribed to

User stories

  • As someone who has just been automatically subscribed to a topic for the first time (read: posted a comment in an existing conversation or started a new one):
    • I want to know that I will be made aware when someone posts a new comment in the discussion I just participated in/started, so that I have an accurate expectation for how I will know if someone responds to me.
    • I want to know how (read: the channels) I will be made aware when someone posts a new comment in the discussion I just participated in/started, so that I can know where to look for updates about new activity in conversations I'm subscribed to
    • I want to how I can adjust the channel(s) (e.g. web, email) through which I am notified when someone responds in a conversations I've subscribed to, so that I can continue to ensure notifications are being delivered to me through the channels I check
    • I want to know where I can adjust whether I am automatically subscribed to the future discussions I start and/or participate so that I can continue to ensure the notifications I receive are valuable to me
    • I want to know where to look to know whether I am subscribed to a conversation or not, so that I can make sure the software is configured to behave in the way I expect.

Requirements

  • Experiences should be designed for mobile and desktop
  • The experience being designed as part of this ticket should not conflict with the existing You have subscribed! "popup" [i]
  • The first-run experiences being designed in this ticket should apply to the New Discussion Tool and the Reply Tool.
    • Note: we will consider the first-run experiences made for the remaining interfaces in T290779.
  • People who click the Visit preferences call to action within the pop-up should be taken to Special:Preferences#mw-prefsection-editing-discussion
  • The first-run "dialog" / UI component should appear visually related/close to the [ subscribe ] affordance IF the [ subscribe ] affordance and the comment you posted/discussion you started are both visible on the screen at the same time.

Mockups

User Flow link

User flow.png (1×3 px, 114 KB)

Mockups link

Automatic First Run Experience.png (3×8 px, 2 MB)

Illustration

Copy

Title: You have been subscribed
Body: You will receive a notification when someone posts a new comment in this discussion. You can adjust your notifications settings in preferences
Button: View Preferences

note: button links to topic subscription preferences

Open questions

  • Meta: should this be implemented within and limited to Discussiontools or should this be implemented more generically so all Echo notifications can benefit from it?
    • For now, this implementation will be limited to the DiscussionTools
  • When/if should we implement a "first-run" experience for the moment where people are manually subscribing to a topic for the first time? How – if at all – should that experience impact/relate to this one?
    • For now, we will *not* be making any adjustments to the Manual Topic Subscriptions first-run experience.
    • Reason: we are assuming that once fully deployed, the majority of people will first be subscribed to a topic automatically.
  • For people who have not yet associated an email account with their Wikipedia account, what should should happen if they indicate they would like to receive new comment notifications via email?
    • We will revisit this question in T288178.
  • For people who have an email account associated with their Wikipedia account, BUT who have not confirmed said email account, what should should happen if they indicate they would like to receive new comment notifications via email?
    • People who meet these criteria will see the experience that will be designed and implemented in T288178.

Done

  • All Open questions are answered
  • Mockups are posted that fulfill the ===Requirements and ===User stories

i.

Screen Shot 2021-06-28 at 12.03.03 PM.png (502×538 px, 35 KB)
Note that when this experience happens, the pop up will be replaced by this new popup.

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Here's draft mockup.

This design is built off the assumption that what people will see will not depend on the notification delivery channels they have enabled.
@ppelberg is going to file a new ticket for designing an experience that prompts people to enable email notification if they do not have it enabled.

@DLynch @matmarex - if you build off the designs here in the next two weeks, I will review and update with illustrations. The modal that should appear here is built off a component from the Growth team work.

Automatic Topic Subscriptions.png (3×6 px, 1000 KB)

@ppelberg is going to file a new ticket for designing an experience that prompts people to enable email notification if they do not have it enabled.

The ticket that captures what Jess described above is T288178.

Change 714438 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/extensions/DiscussionTools@master] [WIP] First-run experience popup for automatic topic subscriptions

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

You can try the first version here: https://patchdemo.wmflabs.org/wikis/4b915f2804/wiki/Talk:Main_Page (note that you must be logged in to see topic subscriptions)

image.png (2×3 px, 322 KB)

For ease of testing, the popup appears every time you get auto-subscribed. In the final version it will only appear once.


Thoughts and questions:

  • What to do when the [unsubscribe] button is off-screen (because the section is very long)? Right now the popup just kind of floats there in top-right corner, attached to nothing (and the little arrow detaches in an ugly way).
  • The copy needs to be different depending on whether the user has email notifications enabled.
  • I assumed the icon in the design was a placeholder, and I put in a bell icon instead (like we use for notifications), did you have a different one in mind?
  • How/When should the popup be hidden? Currently it's hidden when you click anywhere outside of it, or on the close button. I'm wondering whether it's too easy to accidentally close it, especially given that it is shown only once. On the other hand, we probably don't want it to stay visible forever and cover the content until the user leaves the page.

First-run experience design approaches
@iamjessklein: I've reviewed and added comments to the designs you have in Figma. [i]

Please let me know if you think anything I've written could benefit from more clarity.


i. https://www.figma.com/file/NreUF7q404NYuoMOPJGeWl/OWC-x--Work-in-Progress?node-id=2076%3A24581

During today's team meeting, we arrived at the following question which @iamjessklein will explore in the next design iteration:

  • In cases where the [ subscribe ] affordance is not visible to someone who just posted a comment or started a new discussion [i], how can the current design approach be adapted so that: 1) people become aware that they have automatically been subscribed to the conversation they just started or participated in and 2) the dialog/popup/etc. that makes them aware of "1)" is presented in such a way that people associate the information contained within it with the [ subscribe ] affordance?

CaseScreenshotLink
i. Example: a long conversation, where the section heading is not visible after you've published a comment in the conversation
Screen Shot 2021-09-08 at 2.05.58 PM.png (1×1 px, 612 KB)
Wikipedia:Village_pump_(technical)#dtenable_testing

Just want to clearly document the issue that we are focusing on right now. I created this flow chart (below) to show the tension that we are facing in this moment because we want to communicate two things simultaneously to contributors:

  1. Acknowledging that they have successfully "edited" the page and
  2. Informing them that they are automatic subscribed to topic subscriptions and direct them to where they can go to make changes to that (preferences)

Flow.png (1×3 px, 93 KB)

The tension is where the blue/green boxes on the chart appear.

The solution that we are working towards is "variant b":

Iteration on Variant B.png (3×7 px, 1010 KB)

We will be choosing from the following OOUI components:

OOUI options.png (1×1 px, 87 KB)

My next steps:

  1. iterating on variant B with ooui components for look and feel
  2. consider the ux for pages when the subscribe button isn't geographically close to the reply/new topic
ppelberg renamed this task from Design automatic topic subscription first-run experience to Design automatic topic subscription first-run experience (DiscussionTools).Sep 10 2021, 11:22 PM
ppelberg updated the task description. (Show Details)

After doing a bunch of iteration, I believe that our best path forward is to use a modified version of the pop-up used by the Growth team. Compared to the simple dialog in OOUI, this would not feel as disruptive. The copy and imagery in these mockups are not final. The noticeable difference in the approach here is that I have moved away from anchoring the dialog to the "unsubscribe" button. My thinking here is that the primary message that we are trying to communicate here is:

  1. you have been auto-subscribed
  2. you can change that subscription in your preferences

I think that the anchor is adding unnecessary complexity to the communication in this moment by bringing in a third component (the button). This solution would eliminate the need to create different treatments for longer threads or mobile.

Second Iteration on Variant B.png (3×9 px, 2 MB)

Update: 14-Sep
I'm documenting the next steps that surfaced in the conversation @iamjessklein and I had offline earlier today:

  • 1. @iamjessklein is going to iterate on the designs she shared in T262103#7352110 by including an image within the currently-named Automatic Subscriptions dialog that leads people to know where on the page to look to know they're subscribed to a converation.
  • 2. @iamjessklein is going to take a first pass at drafting the copy that will be included within the dialog. For now, this copy will be shown within the mockups themselves.

...in line with the above I've made updates to the task description's ===Requirements and ===User Stories sections.

I've incorporated illustrations into the mockups (the copy is not final in these mockups).

Third Iteration on Variant B.png (3×8 px, 2 MB)

Additionally, on a separate figma frame I made three attempts at the copy for this:

Copy Explorations.png (599×1 px, 175 KB)

@ppelberg Please leave feedback on the figma files as comments.

@ppelberg Please leave feedback on the figma files as comments.

As @iamjessklein and I talked about offline, I've commented the changes I think we should consider making to the designs + copy in the Figma files and in the footer of this comment [i][ii].

Next steps

  • 1. @iamjessklein to decide which – if any – of the changes I referenced above she will act on before handing the designs off to Editing Engineers to implement
  • 2. Once "1." is done, @iamjessklein will post the update mockups (copy included) to the task description's ===Mockups and ===Copy sections.

Note: implicit in the changes below is Jess and I coming to agree to reduce the scope of what this pop-up experience will strive to make people aware of: i) they are going to receive notifications when people post new comments, ii) where they can expect to learn if/when someone posts a new comment, and iii) what they can do to adjust the settings that control these notifications in preference.


What is being changedDescription of changeNotes about the change(s)
i. Pop-up appearance and behaviorA) center the pop-up on-screen, above the comment / new discussion someone would have just posted, regardless of whether the [ subscribe ] affordance is visible to them or not, B) change the illustration that appears within the pop-up to that of the "tray" icon with a blue notification within it so that people know where and what to look for to find out if/when they received a notification about this discussion.
ii. Pop-up copyTitle: You have been subscribed, Body: You will receive a notification when someone posts a new comment in this discussion. You can adjust your notifications settings in preferences., Call to action: Visit preferencesThe copy here is an iteration on the copy Bartosz proposed in T262103#7303561.

I've incorporated the proposed copy and done a handful of explorations.

Illustration Explorations@2x.png (705×1 px, 171 KB)

Here's what it could look like in context with my preferred illustration

Iteration IV@2x.png (3×8 px, 2 MB)

@ppelberg please confirm if this is also your preference or if one of the others work better in your opinion (or none).

@ppelberg please confirm if this is also your preference or if one of the others work better in your opinion (or none).

Of the three approaches you are proposing [i], I prefer "B." because it most closely resembles the tray icon I assume people will see. [ii]

...@iamjessklein, the above leads me to wonder: what contributed to you suggesting the orange'ish dot shown in "A." and "C." ?


i. Sketch proposals:

Illustration Explorations@2x.png (705×1 px, 171 KB)

ii. I worry the orange dot might cause people to become confused considering, as I understand it, the tray icon will never appear to people as it's being depicted in this sketch. Until this point, I've thought the tray icon is only ever "decorated" with a blue badge:
Screen Shot 2021-10-01 at 10.52.01 AM.png (132×126 px, 2 KB)

Next steps

  • @iamjessklein is going to create an iteration of "C." that removes the orange dot. Once done, she is going to add the final mockups and copy to their respective sections within the task description and move this ticket to Ready to be worked on for the Editing Engineering to pickup.

Here is the updated design:

final.png (316×512 px, 39 KB)

I've updated the description with mockups.

ppelberg removed iamjessklein as the assignee of this task.EditedOct 13 2021, 12:28 AM

Next steps

  • @iamjessklein is going to create an iteration of "C." that removes the orange dot. Once done, she is going to add the final mockups and copy to their respective sections within the task description and move this ticket to Ready to be worked on for the Editing Engineering to pickup.

With the update @iamjessklein posted in T262103#7410264, I think engineering should have all that they need to refine the initial implementation by incorporating the design changes now specified in the task description's ===Mockups and ===Copy sections.

Second version, based on the new designs: https://patchdemo.wmflabs.org/wikis/ce0ce4c75c/wiki/Talk:Main_Page (note that you must be logged in to see topic subscriptions)

EDIT: Please log in as "Patch Demo" to test (or give administrator rights to the account you're logged in as). There's a bug in this version that breaks posting if a CAPTCHA would be shown, and the demo wikis show all non-administrators CAPTCHAs. It will be fixed in the next version.

image.png (2×3 px, 398 KB)
image.png (2×3 px, 384 KB)

As before, for ease of testing, the popup appears every time you get auto-subscribed. In the final version it will only appear once.

Thoughts and questions:

  • I've copied most of the styling from the (lamentably named) Popups extension, rather than trying to get it pixel-perfect like the mockups, since I assume your design was based on that
  • (I also copied some pretty fade-in and fade-out transitions from there)
  • Currently the popup is only hidden when you click the button to close it. Should it disappear by itself, or when clicking elsewhere on the page?

The drop shadows in the Popups extension is non-standard. I would prefer we used normal drop shadows:

image.png (317×1 px, 59 KB)

As seen in VE and desktop notifications:

image.png (399×348 px, 37 KB)
image.png (122×275 px, 6 KB)

Re: alignment, the popup should either be centred in the content area, or right aligned in the content area (to be close to the [ subscribe ] button).

Currently I think it is centred to the page, which looks odd (slightly to the left of centre of the content area).

Should it disappear by itself, or when clicking elsewhere on the page?

I think there should be primary button to dismiss the popup (cf "Okay, got it" in VE education popup). Failing that one should be able to dismiss it by clicking elsewhere on the page.

Having the next expected step by the user be to click an 'x' to close the window seems wrong.

image.png (48×159 px, 2 KB)

I think this button label should be either "Preferences" or "Edit preferences". "Visit" seems unnecessary, or suggests they are read-only.

Thanks for feedback @Esanders

  • drop shadow - I chose that component because it was the only component that I could find that has both an image and text besides eachother with a button underneath. If this is non-standard then of course, I'd default to the standard shadow.
  • alignment - It should be centered aligned to content, it's a bit off center at the moment and therefore looks disorienting.

Screen Shot 2021-10-29 at 11.37.36 AM.png (615×1 px, 299 KB)

  • disappearance - again, I was trying to align with the standard component here, if that is not standard, then yes, an okay i got it button would work well here instead of the x.
  • button label let's change to Edit preferences
  • responsiveness As the browser width decreases the mobile design variant of the design behaves in an unexpected way. As the width decreases and decreases the pop up moves to the top of the browser and gets cut off. I'm tempted to recommend here that we don't use the mobile version until we have a mobile design. example:

Screen Shot 2021-10-29 at 11.37.55 AM.png (559×771 px, 209 KB)

Screen Shot 2021-10-29 at 11.52.52 AM.png (677×498 px, 203 KB)

Update: I've modified the OOUI dialog (instead of the Growth dialog) so that it now will have the OOUI themed borders (cc @Esanders). I also adjusted the button position and copy, see:

Screen Shot 2021-11-01 at 10.54.05 AM.png (392×555 px, 136 KB)

Next steps

  • 1. @iamjessklein to post updated mockups to the task description's ===Mockups section
  • 2. @iamjessklein to move to the Ready to be worked on column for engineers to pick up

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

https://patchdemo.wmflabs.org/wikis/2f3d9efbec/w/

Updated everything per the comments above (and also fixed the CAPTCHA bug).

Third version: https://patchdemo.wmflabs.org/wikis/2f3d9efbec/wiki/Talk:Main_Page (note that you must be logged in to see topic subscriptions)

As before, for ease of testing, the popup appears every time you get auto-subscribed. In the final version it will only appear once.

Just one thing I want to address:

  • responsiveness As the browser width decreases the mobile design variant of the design behaves in an unexpected way. As the width decreases and decreases the pop up moves to the top of the browser and gets cut off. I'm tempted to recommend here that we don't use the mobile version until we have a mobile design. example:

Fixed – this occurred because when you resized the browser's width, the height of the content changed as well (because of paragraph wrapping), but the position of the popup was not updated to match. It will be updated now.

I've kept the mobile design implementation because of that, but I'm happy to remove it for now if you actually want it removed (rather than only want it removed if it didn't work).

I believe this has been code reviewed so I am moving it over to QA, please correct me if I'm wrong.

(No, we still need to click the buttons, sorry)

Change 714438 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] First-run experience popup for automatic topic subscriptions

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

Ryasmeen added a subscriber: Ryasmeen.

This has been reviewed as part of T284836, there is one design change that has been suggested by QA which is being tracked here: T295946. So, we can close this one.

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

https://patchdemo.wmflabs.org/wikis/4b915f2804/w/

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

https://patchdemo.wmflabs.org/wikis/2f3d9efbec/w/

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

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