Page MenuHomePhabricator
Create Task
Maniphest T238611

Newcomer tasks: topic filter button
Closed, ResolvedPublic
Actions

Assigned To
MMiller_WMF
Authored By
MMiller_WMF
Nov 19 2019, 1:58 AM
Tags
Referenced Files
F31552841: image.png
Feb 6 2020, 11:35 PM
F31552839: image.png
Feb 6 2020, 11:35 PM
F31552836: image.png
Feb 6 2020, 11:35 PM
F31511454: topic_matching_button_2020-01-13.gif
Jan 14 2020, 12:51 AM
F31507907: Screen Shot 2020-01-10 at 2.45.29 PM.png
Jan 10 2020, 10:51 PM
F31507883: Screen Shot 2020-01-10 at 1.08.53 PM.png
Jan 10 2020, 10:51 PM
F31507885: Screen Shot 2020-01-10 at 2.10.04 PM.png
Jan 10 2020, 10:51 PM
F31507909: Screen Shot 2020-01-10 at 2.14.03 PM.png
Jan 10 2020, 10:51 PM
View All 13 Files
Subscribers
Aklapper
• Catrope
Etonkovidova
JTannerWMF
kostajh
• marcella
MMiller_WMF
View All 11 Subscribers

Description

In T236841, we implemented a button to open the "difficulty filter" so that newcomers can change what types of tasks they receive. In this task, we will add a button to open the "topic filter", which allows newcomers to alter their topics of interest.

The specifications below are shown in this mockup and this mockup.

Specifically:

  • The button should be adjoined to the difficulty filter button on the lefthand side.
  • On mobile, it should not be a button, but rather should be a menu bar with a "down" arrow (see T238460 for more information).
  • It has a "funnel" icon.
  • When the user has no topics selected and has never had any topics selected (i.e. they decline to select topics in the intro overlay)...
    • ...the button should read "Select interests".
    • ...the button should be styled with progressive blue text and icon.
    • ...the button should have a pulsing blue dot.
  • When the user has no topics selected and has had topics selected in the past (i.e. they had topics but subsequently removed them)...
    • ...the button should read "Select interests".
    • ...the button should be styled with normal black text and icon.
    • ...the button should not have a pulsing blue dot.
  • When the user has up to 2 topics selected...
    • ...the button should be styled with normal black text and icon.
    • ...the button should state the names of the topics the user has selected until it runs out of space, and should have an ellipses., e.g. "Food and drink, Scien..." The order of topics can just be the order as displayed in the selection experience.
  • When the user has 3 or more topics selected...
    • ...the button should be styled with normal black text and icon.
    • ...the button should state the number of topics the user has selected like this: "3 topics", "7 topics", etc.

Details

SubjectRepoBranchLines +/-
SuggestedEdits: Center blue dot on desktopmediawiki/extensions/GrowthExperimentsmaster+1 -1
Suggested Edits: Perform state updates even when presets is not an arraymediawiki/extensions/GrowthExperimentsmaster+5 -8
Suggested Edits: Don't attempt to update state without presetsmediawiki/extensions/GrowthExperimentsmaster+5 -0
Suggested edits: Unset blue dot and progressive flag before page reloadmediawiki/extensions/GrowthExperimentsmaster+4 -1
Suggested Edits: Fix button label from done statemediawiki/extensions/GrowthExperimentsmaster+15 -5
Suggested Edits: Don't show blue dot if topics have been setmediawiki/extensions/GrowthExperimentsmaster+18 -2
Suggested Edits: Set topic names or count in buttonmediawiki/extensions/GrowthExperimentsmaster+40 -11
Suggested Edits: Add pulsing blue dot if user never set topicsmediawiki/extensions/GrowthExperimentsmaster+50 -7
Suggested Edits: Only interact with topic filter button if definedmediawiki/extensions/GrowthExperimentsmaster+1 -1
Suggested Edits: Add topic filter buttonmediawiki/extensions/GrowthExperimentsmaster+83 -26
Customize query in gerrit

Related Objects
Search...

Event Timeline

MMiller_WMF created this task.Nov 19 2019, 1:58 AM
MMiller_WMF moved this task from Inbox to Upcoming Work on the Growth-Team board.
RHo updated the task description. (Show Details)Nov 19 2019, 12:24 PM
MMiller_WMF updated the task description. (Show Details)Nov 19 2019, 5:35 PM
MMiller_WMF updated the task description. (Show Details)Nov 19 2019, 5:42 PM
MMiller_WMF edited projects, added Growth-Team (Sprint 0 (Growth Team)); removed Growth-Team.Dec 9 2019, 5:24 AM
MMiller_WMF moved this task from Incoming to Ready for Development on the Growth-Team (Sprint 0 (Growth Team)) board.
kostajh claimed this task.Jan 7 2020, 12:40 PM
kostajh moved this task from Ready for Development to In Progress on the Growth-Team (Sprint 0 (Growth Team)) board.
gerritbot added a comment.Jan 7 2020, 2:05 PM

Change 562516 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Add topic filter button

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

gerritbot added a project: Patch-For-Review.Jan 7 2020, 2:05 PM
gerritbot added a comment.Jan 9 2020, 1:45 AM

Change 562516 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Add topic filter button

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

ReleaseTaggerBot added a project: MW-1.35-notes (1.35.0-wmf.15; 2020-01-14).Jan 9 2020, 2:00 AM
Maintenance_bot removed a project: Patch-For-Review.Jan 9 2020, 2:10 AM
gerritbot added a comment.Jan 9 2020, 11:58 AM

Change 563164 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Only interact with topic filter button if defined

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

gerritbot added a project: Patch-For-Review.Jan 9 2020, 11:58 AM
kostajh added a comment.Jan 9 2020, 2:45 PM

@MMiller_WMF about the blue pulsing dot, here's what the mockups show:

image.png (616×2 px, 172 KB)

The placement of the blue dot differs between desktop and mobile. On mobile, it's centered and at the bottom of the button. On desktop, it's about 10% in from the right, and then up slightly from the bottom.

Looking at other usages of pulsing blue dot, for example Cite:

image.png (560×754 px, 44 KB)

There, on desktop, the dot is centered horizontally and at the bottom of the button.

Should we do centered horizontally and at the bottom for both desktop and mobile for the "Select interests" button? Or should we go with the off-a-bit-from-the-right-and-bottom that's in the mockup for desktop?

gerritbot added a comment.Jan 9 2020, 3:02 PM

Change 563187 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Add pulsing blue dot if user never set topics

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

MMiller_WMF added a comment.Jan 9 2020, 4:59 PM

@kostajh -- thanks for noticing these details! I think we should implement as shown in the mockups, because Rita is deliberate about these sorts of things. I think the difference in convention may because the desktop one is a "button" and the mobile and VE ones are like "menu bar items".

kostajh updated the task description. (Show Details)Jan 9 2020, 8:55 PM
kostajh updated the task description. (Show Details)Jan 9 2020, 9:09 PM
gerritbot added a comment.Jan 9 2020, 9:41 PM

Change 563282 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Set topic names or count in button

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

kostajh updated the task description. (Show Details)Jan 9 2020, 9:41 PM
kostajh moved this task from In Progress to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.
gerritbot added a comment.Jan 9 2020, 10:31 PM

Change 563164 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Only interact with topic filter button if defined

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

• Catrope moved this task from Code Review to QA on the Growth-Team (Sprint 0 (Growth Team)) board.Jan 10 2020, 12:30 AM

The button doesn't do anything yet when clicked, but I'm going to implement that as part of T238612

gerritbot added a comment.Jan 10 2020, 12:42 AM

Change 563187 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Add pulsing blue dot if user never set topics

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

gerritbot added a comment.Jan 10 2020, 12:42 AM

Change 563282 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Set topic names or count in button

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

Maintenance_bot removed a project: Patch-For-Review.Jan 10 2020, 1:10 AM
Etonkovidova moved this task from QA to Design Review on the Growth-Team (Sprint 0 (Growth Team)) board.Jan 10 2020, 10:51 PM

The actual functionality of the button will be checked in T238612: Newcomer tasks: topic filters

(1)

When the user has no topics selected ...

desktopmobile
Screen Shot 2020-01-10 at 1.08.53 PM.png (603×432 px, 63 KB)
Screen Shot 2020-01-10 at 2.10.04 PM.png (592×436 px, 55 KB)

(2)

When the user has up to 2 topics selected...

Note - on mobile there is no indication that two topics have been selected because of the space shortage.

desktopmobile
Screen Shot 2020-01-10 at 2.37.36 PM.png (579×418 px, 52 KB)
Screen Shot 2020-01-10 at 2.37.09 PM.png (588×429 px, 60 KB)

(3)

When the user has 3 or more topics selected...

desktopmobile
Screen Shot 2020-01-10 at 2.05.09 PM.png (518×422 px, 47 KB)
Screen Shot 2020-01-10 at 2.45.29 PM.png (580×423 px, 53 KB)

Note: On desktop (mobile seems to be fine), the topic names and filter names are aligned at the top not vertically. This is in production too - wmf.14 - should it be fixed? Mockup shows a vertical alignment.
The screenshot is from production (desktop):

Screen Shot 2020-01-10 at 2.14.03 PM.png (261×450 px, 24 KB)

gerritbot added a comment.Jan 13 2020, 12:49 PM

Change 563997 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Don't show blue dot if topics have been set

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

gerritbot added a project: Patch-For-Review.Jan 13 2020, 12:49 PM
gerritbot added a comment.Jan 13 2020, 1:38 PM

Change 564007 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Fix button label from done state

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

gerritbot added a comment.Jan 13 2020, 10:14 PM

Change 563997 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Don't show blue dot if topics have been set

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

gerritbot added a comment.Jan 13 2020, 10:50 PM

Change 564007 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Fix button label from done state

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

Maintenance_bot removed a project: Patch-For-Review.Jan 13 2020, 11:11 PM
MMiller_WMF added a comment.Jan 14 2020, 12:37 AM
This comment was removed by MMiller_WMF.
MMiller_WMF moved this task from Design Review to Ready for Development on the Growth-Team (Sprint 0 (Growth Team)) board.Jan 14 2020, 12:51 AM

The only issue I see beyond @Etonkovidova's review is that the following. I'm putting this back in Ready for Development to be fixed.

I don't choose any topics in the topic overlay while initiating the module, the button shows up correctly, but doesn't open the dialog. But if I did choose topics in the intro overlay, the button does open the dialog. Sometimes, in this situation, I am also unable to open the difficulty filter. See gif below.

topic_matching_button_2020-01-13.gif (818×1 px, 2 MB)

gerritbot added a comment.Jan 14 2020, 9:11 AM

Change 564554 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Don't attempt to update state without presets

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

gerritbot added a project: Patch-For-Review.Jan 14 2020, 9:11 AM
gerritbot added a comment.Jan 14 2020, 9:27 AM

Change 564560 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Suggested edits: Unset blue dot and progressive flag before page reload

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

gerritbot added a comment.Jan 14 2020, 9:53 AM

Change 564554 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Don't attempt to update state without presets

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

gerritbot added a comment.Jan 14 2020, 9:53 AM

Change 564560 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested edits: Unset blue dot and progressive flag before page reload

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

Maintenance_bot removed a project: Patch-For-Review.Jan 14 2020, 10:10 AM
kostajh mentioned this in T242744: Newcomer tasks: adjust alignment of button labels.Jan 14 2020, 12:48 PM
kostajh moved this task from Ready for Development to QA on the Growth-Team (Sprint 0 (Growth Team)) board.

I'm moving this into QA.

Note - on mobile there is no indication that two topics have been selected because of the space shortage.

Since this is language dependent and there's not any further specification on what to do, I'm leaving this as is. But @MMiller_WMF if you prefer the mobile rules to be different (e.g. always show N topics once the number of topics is greater than one rather than 2) please comment & update this task description.

Note: On desktop (mobile seems to be fine), the topic names and filter names are aligned at the top not vertically. This is in production too - wmf.14 - should it be fixed? Mockup shows a vertical alignment.

For that, I've created T242744: Newcomer tasks: adjust alignment of button labels

Etonkovidova moved this task from QA to Design Review on the Growth-Team (Sprint 0 (Growth Team)) board.Jan 14 2020, 9:38 PM

Re-checked in regards of recent patches - ready for Design Review.

MMiller_WMF added a comment.Jan 14 2020, 10:39 PM

This passes my substitute design review, and I'll leave it in this column for @RHo.

ReleaseTaggerBot edited projects, added MW-1.35-notes (1.35.0-wmf.16; 2020-01-21); removed MW-1.35-notes (1.35.0-wmf.15; 2020-01-14).Jan 15 2020, 12:00 PM
RHo moved this task from Design Review to Ready for Development on the Growth-Team (Sprint 0 (Growth Team)) board.Feb 6 2020, 11:35 PM

Sorry this took so long for review but I did pick up a couple of minor things.
Mobile

  • Both icons in the filter bar are larger than expected.
  • Also the filter icon should be #54595d or its closest rgba opacity approximation (but is currently rgba(0,0,0,.87))

image.png (1×664 px, 343 KB)

Desktop
The two filter buttons should only have a 1px wide border between them like the ButtonGroupWidget component in OOUI

image.png (140×568 px, 10 KB)

However, at the moment it appears that there are two separate buttons with 0px space between them:
image.png (272×820 px, 16 KB)

A couple more points below:

In T238611#5801664, @kostajh wrote:

Note - on mobile there is no indication that two topics have been selected because of the space shortage.

Since this is language dependent and there's not any further specification on what to do, I'm leaving this as is. But @MMiller_WMF if you prefer the mobile rules to be different (e.g. always show N topics once the number of topics is greater than one rather than 2) please comment & update this task description.

– @MMiller_WMF Not a high priority but maybe it makes things simpler to have the same behaviour on both mobile and desktop to show N topics once the number of topics is greater than two.

Note: On desktop (mobile seems to be fine), the topic names and filter names are aligned at the top not vertically. This is in production too - wmf.14 - should it be fixed? Mockup shows a vertical alignment.

For that, I've created T242744: Newcomer tasks: adjust alignment of button labels

– Looks like this is no longer an issue... shall I close the task?

kostajh removed kostajh as the assignee of this task.Jun 12 2020, 10:16 AM

@RHo sure, please close T242744 if there's nothing to do there.

MMiller_WMF closed this task as Resolved.Jun 16 2020, 9:44 PM
MMiller_WMF claimed this task.
kostajh mentioned this in T265262: [BUG][Regression] Newcomer tasks: Blue pulsing dot on the tasks topics filters is no longer centered as expected.Oct 13 2020, 10:41 AM
gerritbot added a comment.Oct 13 2020, 10:43 AM

Change 633708 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] SuggestedEdits: Center blue dot on desktop

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

gerritbot added a project: Patch-For-Review.Oct 13 2020, 10:43 AM
gerritbot added a comment.Oct 13 2020, 2:01 PM

Change 633708 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] SuggestedEdits: Center blue dot on desktop

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

ReleaseTaggerBot added a project: MW-1.36-notes (1.36.0-wmf.14; 2020-10-20).Oct 13 2020, 3:00 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits