Page MenuHomePhabricator

Account creation: add toggle to enable AND selection of interest topics
Closed, ResolvedPublic

Assigned To
Authored By
RHo
Feb 15 2022, 8:51 PM
Referenced Files
F35030351: image.png
Mar 30 2022, 5:00 PM
F35030328: image.png
Mar 30 2022, 4:41 PM
F35030309: image.png
Mar 30 2022, 4:23 PM
F35030303: image.png
Mar 30 2022, 4:19 PM
F35028451: Screenshot 2022-03-29 at 14.07.35.png
Mar 29 2022, 12:12 PM
F35028436: Screenshot 2022-03-29 at 13.43.10.png
Mar 29 2022, 12:12 PM
F35022605: image.png
Mar 24 2022, 7:48 PM
F35022609: image.png
Mar 24 2022, 7:48 PM

Description

This task is broken out of T301028 as a stretch goal to enable more refined topic filter results for GLAM events.

Proposed design: Add logic to toggle to AND existing groups
This is a middle ground version of B that could be done along with A.

  • Add a toggle to switch the logic from ANY matching topic (OR logic) to ALL matching topics (AND logic)
  • Default is set to match ANY topics
  • The selected state also changes if it is AND logic (adds a "+" between each topic in the filter)

image.png (3×3 px, 662 KB)

Instrumentation

  • TBD. We probably do want this to show up in analytics somehow, perhaps in the newcomer task impression logging.

DEADLINE: this has to be deployed on production and tested by March 28th.

Related Objects

Event Timeline

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

Aside from the UI changes, we would have to:

  • update the handling of the user preference where we store the user's selected topics (currently as a simple list)
  • update the task search API which again takes a list of topic names
  • likewise, update the SearchSuggester and TaskSetFilters
  • update SearchStrategy and SearchQuery which take Topic objects
  • update the various bits involved in logging topic scores (Topic, HomepageHooks, GrowthTasksApi.js etc). Or maybe just discard topic score logging, we never used it.

It's a fair amount of footwork; for the object-oriented bits we could probably introduce an IntersectionTopic class, for the API we can just use a new parameter. SearchSuggester seems the least straightforward. Maybe it should take a TaskSetFilters or similar object instead of the two arrays.

Do we intend to enable the “switch logic ANY/ALL” feature for all GE users now or in the future? Or we only want to show this option to users participating in campaigns? @RHo @MMiller_WMF

Do we intend to enable the “switch logic ANY/ALL” feature for all GE users now or in the future? Or we only want to show this option to users participating in campaigns? @RHo @MMiller_WMF

Hi @Sgs for now it is a stretch goal for the campaigns, but that may change in future.

Change 767503 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Newcomer tasks: change TaskSuggester::suggest() signature to take a TaskSetFilters object

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

Change 767504 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] [WIP] Newcomer tasks: add topic match mode parameter for filtering

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

Change 769024 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] [WIP] Suggested edits: add topic match mode widget selector

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

Change 767503 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Newcomer tasks: change TaskSuggester::suggest() signature to take a TaskSetFilters object

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

Change 767504 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Newcomer tasks: add topic match mode parameter for filtering

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

MMiller_WMF renamed this task from GLAM event: Add toggle to enable AND selection of interest topics to Account creation: add toggle to enable AND selection of interest topics.Mar 15 2022, 12:10 AM
MShilova_WMF set Due Date to Apr 1 2022, 4:00 AM.

@MShilova_WMF We might want to set a deadline for March 28, because we want all code to ride the train (well, there is trainsperiment week) to be in production before April 1.

MShilova_WMF changed Due Date from Apr 1 2022, 4:00 AM to Mar 28 2022, 4:00 AM.

One thing I came across and it's not clear to me is if we want to enable the "AND selector" in the on-boarding dialog. On one side it would make the experience consistent with what users will find in the filters dialog in the homepage. On the other side it might slow down the on-boarding experience by adding some more entropy to the interface. What should we do in this situation? @RHo

One thing I came across and it's not clear to me is if we want to enable the "AND selector" in the on-boarding dialog. On one side it would make the experience consistent with what users will find in the filters dialog in the homepage. On the other side it might slow down the on-boarding experience by adding some more entropy to the interface. What should we do in this situation? @RHo

Hi @Sgs, thanks for raising that point about onboarding. For the purposes of having this initially for the GLAM events, I think we can leave it off since the event participants should be pre-onboarded after sign-up and not see the onboarding. @Etonkovidova please confirm if this is the case?

Hi @Sgs, thanks for raising that point about onboarding. For the purposes of having this initially for the GLAM events, I think we can leave it off since the event participants should be pre-onboarded after sign-up and not see the onboarding. @Etonkovidova please confirm if this is the case?

I agree it is fine behavior to leave it off for now. Not sure what you mean by pre-onboarded here, could you clarify? My understanding is that GLAM campaign account created users will still get the "start editing" step in their homepage on the desktop experience (see screenshot). The only differences with regular accounts is that the image recommendation variant is enforced and that campaign specific topics are shown.

Screenshot 2022-03-16 at 14.26.28.png (1×1 px, 491 KB)

Hi @Sgs, thanks for raising that point about onboarding. For the purposes of having this initially for the GLAM events, I think we can leave it off since the event participants should be pre-onboarded after sign-up and not see the onboarding. @Etonkovidova please confirm if this is the case?

I agree it is fine behavior to leave it off for now. Not sure what you mean by pre-onboarded here, could you clarify? My understanding is that GLAM campaign account created users will still get the "start editing" step in their homepage on the desktop experience (see screenshot). The only differences with regular accounts is that the image recommendation variant is enforced and that campaign specific topics are shown.

Screenshot 2022-03-16 at 14.26.28.png (1×1 px, 491 KB)

Ahhh by "pre-onboarded" I meant my (incorrect) impression was that the GLAM events folks would not get the onboarding step. In that case I do think it could be worth adding here, since people might not realise this ability to toggle the selection between ANY/ALL exists if it is only in the filters. However, it is fine to leave off if this adds development work that could delay this being ready in time for the last events.

Change 769024 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] GLAM events: add topic match mode widget selector

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

Change 772031 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[schemas/event/secondary@master] Homepage module: add events for topic toggle match mode button

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

Change 772036 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Newcomer tasks: log events for topic match mode toggle button

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

The changes are now ready for review. The ANY/ALL toggle button will automatically appear for users creating their accounts through growth-glam-2022 campaigns. Prior campaign users will also get it. In case we want to test this in production without creating an extra account there's a "special" campaign name (test-topics-AND) that will enable it. It can be set running the following snippet in the browser Javascript console:

new mw.Api().saveOption('growthexperiments-campaign', 'test-topics-AND');

The match mode selector should appear after reloading the page.

For the analytics logging we've added:

  • se-topicfilter-toggle-impression in the start editing dialog and the topics filter dialog when topics matching is enabled.
  • se-topicfilter-toggle-and and se-topicfilter-toggle-or events for tracking user toggle selections.

See comment below with updated analytics implementation details.

Sgs changed the task status from Open to In Progress.Mar 21 2022, 8:45 AM
Sgs moved this task from In Progress to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.

I think the current status quo is we log the impressions of the topic selection in the start editing dialog with the event se-cta-click:

- se-cta-click: User starts the suggested edits
onboarding/activation process (by clicking on the StartEditing
module button in variant A, or the welcome notice button or info
icon in variant C).

And after the on-boarding we log impressions of showing the topic filter dialog with the event se-topicfilter-open and then topic selection actions with se-topicfilter-select-all and every topic toggling triggers a se-fetch-tasks event.

For the new interface we have added:

  • se-topicmatchmode-impression in the start editing dialog and the topics filter dialog when topics matching is enabled.
  • se-topicmatchmode-and and se-topicmatchmode-or events for tracking user changes in the mode selection.
  • se-fetch-tasks and all events above will contain topicsMatchMode=AND or topicsMatchMode=OR inside its action_data

@nettrom_WMF could you confirm this setup suits our analytics well or if you prefer other event organization or naming?

Change 772031 merged by jenkins-bot:

[schemas/event/secondary@master] Homepage module: add events for topic toggle match mode button

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

Change 772870 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[operations/mediawiki-config@master] beta, testwiki: enable testing of topics match mode for GLAM events

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

Change 772870 merged by jenkins-bot:

[operations/mediawiki-config@master] beta, testwiki: enable testing of topics match mode for GLAM events

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

Mentioned in SAL (#wikimedia-operations) [2022-03-22T20:29:47Z] <urbanecm@deploy1002> Synchronized wmf-config/InitialiseSettings.php: ce18d4eeb255349e27163d5e5472fbe21c320322: testwiki: enable testing of topics match mode for GLAM events (T301825) (duration: 01m 06s)

For the new interface we have added:

  • se-topicmatchmode-impression in the start editing dialog and the topics filter dialog when topics matching is enabled.
  • se-topicmatchmode-and and se-topicmatchmode-or events for tracking user changes in the mode selection.
  • se-fetch-tasks and all events above will contain topicsMatchMode=AND or topicsMatchMode=OR inside its action_data

@nettrom_WMF could you confirm this setup suits our analytics well or if you prefer other event organization or naming?

From what I can tell, we'll be looking at usage of this feature and for that we have sufficient instrumentation to understand that. It's also good that we have this logged in se-fetch-tasks events, as one place we might want to look would be at lack of tasks for certain combinations of topics. We haven't done a lot of analysis of topics, apart from when the feature was first added in Newcomer Tasks v1.1, so I'm basing this a bit on that and a bit on what we'll generally be interested in.

In summary: looks good to me!

Change 772036 abandoned by Sergio Gimeno:

[mediawiki/extensions/GrowthExperiments@master] GLAM events: add topic match mode widget selector

Reason:

Abandon in favour of squashed version https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/+/769024

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

Change 769024 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] GLAM events: add topic match mode widget selector

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

From what I can tell, we'll be looking at usage of this feature and for that we have sufficient instrumentation to understand that. It's also good that we have this logged in se-fetch-tasks events, as one place we might want to look would be at lack of tasks for certain combinations of topics. We haven't done a lot of analysis of topics, apart from when the feature was first added in Newcomer Tasks v1.1, so I'm basing this a bit on that and a bit on what we'll generally be interested in.

In summary: looks good to me!

Thanks for checking @nettrom_WMF. We can improve logging for topics and filters if we decide to analyze these deeper in the future.

For @RHo review - if there are no follow-up, please move to Test in Production|Watching column.
(1) The functionality is in place - checked on cswiki betalabs with ge.utils.enableCampaign(). The filters combinations that show the tasks for AND with *the *Add image** tasks: e.g., Africa+Asia, Asia+Europe. GLAM Argentina +Asia.

(2)
Desktop:

- "Choose "Match ALL"..." never fits on one line
Screen Shot 2022-03-24 at 9.41.27 AM.png (1×1 px, 489 KB)
Screen Shot 2022-03-24 at 10.46.34 AM.png (1×1 px, 162 KB)

Mobile

- The mockup has italic for "Choose "Match ALL..."
Screen Shot 2022-03-24 at 10.48.49 AM.png (1×732 px, 179 KB)
Screen Shot 2022-03-24 at 10.48.21 AM.png (1×746 px, 131 KB)
- "GLAM Argentina" never fits enough to display "+" (except on a tablet)
Screen Shot 2022-03-24 at 10.55.57 AM.png (1×814 px, 131 KB)

Thanks @Etonkovidova! I have replied to your notes below. @Sgs, I also have added a couple of minor visual design tweaks that wonder if can be done as part of this task? However, if there is a hard deadline for the campaign then I'm happy to move this to Test in Production and file a separate follow up task instead.

For @RHo review - if there are no follow-up, please move to Test in Production|Watching column.
(1) The functionality is in place - checked on cswiki betalabs with ge.utils.enableCampaign(). The filters combinations that show the tasks for AND with *the *Add image tasks: e.g., Africa+Asia, Asia+Europe. GLAM Argentina +Asia.
(2)
Desktop:**

- "Choose "Match ALL"..." never fits on one line
Screen Shot 2022-03-24 at 9.41.27 AM.png (1×1 px, 489 KB)
Screen Shot 2022-03-24 at 10.46.34 AM.png (1×1 px, 162 KB)

Ah yes, this is true. I did also try to google translate how this might look in Spanish and it overflows even more:

image.png (900×1 px, 182 KB)

@Sgs - Can the desktop label "Choose 'MATCH ALL..." be reduced in font-size to use the smaller text size 12.6px / 0.9em for secondary text that is used in other parts of the Suggested edits module?
image.png (538×1 px, 122 KB)
so that there are *less* multiple lines?
Another question is whether the entire line of text can shift below the Match ANY | Match ALL toggle button group (like how it is on mobile) if it is less than 60% of the width of the container?

Mobile

- The mockup has italic for "Choose "Match ALL..."
Screen Shot 2022-03-24 at 10.48.49 AM.png (1×732 px, 179 KB)
Screen Shot 2022-03-24 at 10.48.21 AM.png (1×746 px, 131 KB)
- "GLAM Argentina" never fits enough to display "+" (except on a tablet)
Screen Shot 2022-03-24 at 10.55.57 AM.png (1×814 px, 131 KB)

Sorry, that is a mocko, the implementation without italics on both mobile and desktop is fine. Also fine with the "+" not being shown if the label is too long.
However, @Sgs I have the same request to reduce the size of the "Choose 'MATCH ALL..." text to be font-size 0.9em / 14.4px if that is possible?

image.png (1×736 px, 151 KB)

Change 774412 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Newcomer tasks: add spanish translations for topic match mode feature

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

Change 774413 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Newcomer tasks: wrap description text in a new line * Make description text appear in a new line when the button group labels leave less than a 60% fo space to the text container * Adapt font-sizes per design requirements

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

Change 774412 abandoned by Sergio Gimeno:

[mediawiki/extensions/GrowthExperiments@master] Newcomer tasks: add spanish translations for topic match mode feature

Reason:

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

Change 774413 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Newcomer tasks: wrap description text in a new line

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

Change 774405 had a related patch set uploaded (by Kosta Harlan; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@wmf/1.39.0-wmf.4] GLAM events: add topic match mode widget selector

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

Change 774405 abandoned by Kosta Harlan:

[mediawiki/extensions/GrowthExperiments@wmf/1.39.0-wmf.4] GLAM events: add topic match mode widget selector

Reason:

too complicated to backport; going to let this ride the train

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

Change 774879 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Newcomer tasks: always align button and text to the right

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

This can now be tested in testwiki by enabling the GLAM campaign for the logged in user with ge.utils.enableCampaign() or by creating a new account through the GLAM campaign URL.

@RHo in case you do a second round of review, you will find another style issue in the mobile version. There's a fix but might not get in time for the first version. I'll check with Kosta see if it is worth backporting.

Mobile bugFixed
Screenshot 2022-03-29 at 13.43.10.png (1×874 px, 236 KB)
Screenshot 2022-03-29 at 14.07.35.png (2×900 px, 315 KB)

Change 774879 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Newcomer tasks: always align button and text to the right

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

This can now be tested in testwiki by enabling the GLAM campaign for the logged in user with ge.utils.enableCampaign() or by creating a new account through the GLAM campaign URL.

@RHo in case you do a second round of review, you will find another style issue in the mobile version. There's a fix but might not get in time for the first version. I'll check with Kosta see if it is worth backporting.

Mobile bugFixed
Screenshot 2022-03-29 at 13.43.10.png (1×874 px, 236 KB)
Screenshot 2022-03-29 at 14.07.35.png (2×900 px, 315 KB)

Awesome, thanks for making the changes so briskly @Sgs!

Some suggestions after speaking to our content writer:

  • Short term:
    • Simplify the introduction text. Remove the explanation under the "Choose some topics..." header
    • Refer to the the topics as "topics". At the moment the modal title is "Select interests" and inside we refer to the tags as topics/interest topics.
    • Make it clearer what the user is doing and what "we" the system is doing. The instructions should be for the user as they should "choose topics", which is why simplifying it would be to remove the part about what "we" will do.
  • Long term: Reduce competition and confusion about what the user needs to do vs what it optional by using a dropdown instead of the button toggle - see example below:

image.png (578×2 px, 152 KB)

Concerning wording, what about:

Matches at least one of the selected topics
Matches all selected topics

It would fit better in a dropdown, and it would be easier for translators and people less comfortable with English as the sentences are much more descriptive.

Change 775371 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@wmf/1.39.0-wmf.5] Newcomer tasks: always align button and text to the right

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

Some suggestions after speaking to our content writer:

  • Short term:
    • Simplify the introduction text. Remove the explanation under the "Choose some topics..." header
    • Refer to the the topics as "topics". At the moment the modal title is "Select interests" and inside we refer to the tags as topics/interest topics.
    • Make it clearer what the user is doing and what "we" the system is doing. The instructions should be for the user as they should "choose topics", which is why simplifying it would be to remove the part about what "we" will do.
  • Long term: Reduce competition and confusion about what the user needs to do vs what it optional by using a dropdown instead of the button toggle - see example below:

image.png (578×2 px, 152 KB)

To clarify, these suggestions have been moved to a new task T305097: Newcomer tasks: Copy and UI improvements the AND selection of interest topics for future improvements (including @Trizek-WMF 's suggested text for the dropdown above), this task can go into Test in Production.

Change 775784 had a related patch set uploaded (by Sergio Gimeno; author: MewOphaswongse):

[mediawiki/extensions/GrowthExperiments@wmf/1.39.0-wmf.5] Post-edit dialog: check for presence of preferences.topicFilters

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

Change 775784 abandoned by Sergio Gimeno:

[mediawiki/extensions/GrowthExperiments@wmf/1.39.0-wmf.5] Post-edit dialog: check for presence of preferences.topicFilters

Reason:

no need for squashed change

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

Change 775371 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@wmf/1.39.0-wmf.5] Newcomer tasks: always align button and text to the right

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

Mentioned in SAL (#wikimedia-operations) [2022-03-31T20:56:43Z] <thcipriani@deploy1002> Synchronized php-1.39.0-wmf.5/extensions/GrowthExperiments/modules/ext.growthExperiments.Homepage.SuggestedEdits/MatchModeSelectWidget.less: Backport: [[gerrit:775371|Newcomer tasks: always align button and text to the right (T301825)]] (duration: 00m 50s)

Moving to resolved since it has already been used in one GLAM event. The follow-up work in T305097: Newcomer tasks: Copy and UI improvements the AND selection of interest topics is labeled as "Newcomer tasks" because it will apply to both GLAM and regular created accounts.