Page MenuHomePhabricator

Newcomer tasks: topic filter button
Open, Needs TriagePublic

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

Related Gerrit Patches:
mediawiki/extensions/GrowthExperiments : masterSuggested Edits: Perform state updates even when presets is not an array
mediawiki/extensions/GrowthExperiments : masterSuggested Edits: Don't attempt to update state without presets
mediawiki/extensions/GrowthExperiments : masterSuggested edits: Unset blue dot and progressive flag before page reload
mediawiki/extensions/GrowthExperiments : masterSuggested Edits: Fix button label from done state
mediawiki/extensions/GrowthExperiments : masterSuggested Edits: Don't show blue dot if topics have been set
mediawiki/extensions/GrowthExperiments : masterSuggested Edits: Set topic names or count in button
mediawiki/extensions/GrowthExperiments : masterSuggested Edits: Add pulsing blue dot if user never set topics
mediawiki/extensions/GrowthExperiments : masterSuggested Edits: Only interact with topic filter button if defined
mediawiki/extensions/GrowthExperiments : masterSuggested Edits: Add topic filter button

Event Timeline

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

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

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

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

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

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

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:

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?

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

@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

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 (Current Sprint) board.

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

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

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

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

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

(1)

When the user has no topics selected ...

desktopmobile

(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

(3)

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

desktopmobile

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):

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

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

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

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

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

This comment was removed by MMiller_WMF.

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.

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

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

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

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

kostajh moved this task from Ready for Development to QA on the Growth-Team (Current Sprint) 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

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

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

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))

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


However, at the moment it appears that there are two separate buttons with 0px space between them:

A couple more points below:

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?