Page MenuHomePhabricator

Build empty state of search experiment
Closed, ResolvedPublic5 Estimated Story PointsDesign

Assigned To
Authored By
ovasileva
Aug 16 2024, 12:47 PM
Referenced Files
F57504591: screenshot 10.mov.gif
Sep 13 2024, 4:06 AM
F57504576: screenshot 9.mov.gif
Sep 13 2024, 4:06 AM
F57504567: screenshot 8.mov.gif
Sep 13 2024, 4:06 AM
F57504566: screenshot 7.mov.gif
Sep 13 2024, 4:06 AM
F57504559: screenshot 6.mov.gif
Sep 13 2024, 4:06 AM
F57504556: screenshot 5.mov.gif
Sep 13 2024, 4:06 AM
F57479330: screenshot 10.mov.gif
Sep 7 2024, 11:41 PM
F57479327: screenshot 9.mov.gif
Sep 7 2024, 11:41 PM

Description

NOTE: Due to the experimental nature of this work, this ticket will contain both the selection of delivery mechanism and development. This is so that we can switch to a different mechanism quickly if we run into issues with the initial one we select.

Background

In T371294: [Spike 2 days] Identify delivery mechanism pt 2 we discussed delivery mechanisms for a UI experiment on search and narrowed these down to two options (with a potential third option). This ticket will contain the selection of the final delivery mechanism and the development of the experiment itself

User story

  • As a product team, we want to know whether adding recommendations into search will benefit users so that we know whether to invest our time into this idea
  • As a reader, I want the ability to test cool new features for Wikipedia, so that the site will work based on my needs and feedback

Requirement

Develop and implement an experiment to track search recommendations displayed to users via the Wikipedia Article Recommender Chrome extension. This experiment should present recommendations in the search box of English and Spanish Wikipedia before a user types a query, and all standard search functionality must remain unaffected.

The experiment designed should allow us to track the metrics defined and instrumented in T372780: Instrument empty state of search experiment
The experiment should allow us to collect the data above also for the related pages feature.

BDD

Feature: Search Recommendation Experiment

  Scenario: Show search recommendations before typing
    Given the user installs the Chrome extension on English or Spanish Wikipedia
    When the user clicks into the search box
    Then three search recommendations should appear if the query is blank

  Scenario: Hide search recommendations upon interaction
    Given the search box is active with recommendations displayed
    When the user starts typing a query or clicks outside the box
    Then the recommendations should disappear

  Scenario: Standard search behavior unaffected
    Given the user uses standard search functionality
    When typing a query or selecting a suggestion
    Then the search function should work as expected without interruption

Test Steps

Since this is an experimental feature, the scope of QA test should be to verify this functionality in a way that matches the expected userflow for this experiment.
This experiment has taken the form of a chrome extension: The Wikipedia Article Recommender. This experiment will be advertised to English and Spanish Wikipedia.

This extension presents users with search recommendations before they start typing in the search box in the header of Vector 2022.

Please verify the following:

  • The Chome extension can be installed via this link https://chromewebstore.google.com/detail/wikipedia-article-recomme/hocmncobpajkkegkmpmllabogiiplbke?authuser=0&hl=en
  • After installing the chrome extension, on English or Spanish Wikipedia (production), the following should happen:
    • When activating (clicking into) the search box in the header, the user is presented with 3 search recommendations before they start typing a search query.
    • The search recommendations only appear when the query is blank, and the search box is active.
    • Clicking off the search box or entering the query should hide the search recommendations
  • Standard search activity, i.e. typing a query, clicking the search button, or clicking a search suggestion, should not be affected by this extension.

Test Case 1: Verify Installation and Search Recommendations

  1. Install the Chrome extension from this link.
  2. Navigate to English or Spanish Wikipedia (production).
  3. Click into the search box in the header.
  4. AC1: Confirm that three search recommendations appear if the search box is blank.

Test Case 2: Verify Search Recommendations Disappear on Interaction

  1. Click off the search box or start typing a query.
  2. AC2: Confirm that the recommendations disappear.

Test Case 3: Verify Standard Search Functionality

  1. Type a query in the search box and press Enter or click a search suggestion.
  2. AC3: Confirm that the standard search behavior functions without any issues from the extension.

Design

image.png (2×2 px, 1 MB)

Acceptance criteria

  • Select one of the following delivery mechanisms after discussing with the team
      • Browser Extension**
    • Gadget

We selected to proceed with the browser extension during a review of options.

  • Build out browser extension according to design above
  • Recommendations list should use MoreLike API

Communication criteria - does this need an announcement or discussion?

  • Find a way to enroll participants

Rollback plan

  • n/a

This task was created by Version 1.2.0 of the Web team task template using phabulous

QA Results - Prod

ACStatusDetails
1T372638#10143134
2T372638#10143134
3T372638#10143134 (Please see ❓ before resolving )

Event Timeline

@JScherer-WMF - I'm including the mock from T371231: [Design] Create design for empty state of search experiment. We can iterate on the design as we build out through the week

ovasileva updated the task description. (Show Details)

Language-wise, we can begin with English and will move to more languages afterwards based on experiment results/difficulty

ovasileva set the point value for this task to 5.Aug 19 2024, 6:26 PM

Jan is working on licensing and crediting issue relating to setup. Haven't actually started on the script yet. Still confidence we can do this by end of sprint.

Should have testing link in the next 24 hours. As soon as we have a testing link to this, feel free to move this to "needs design" and assign me for next sprint @Jdrewniak. That will unblock T373717.

@Jdrewniak. I noticed that the extension store has a picture of the search interface with recommendations as its main screenshot. Can you change that to be just a Wikipedia logo?

Edtadros subscribed.

Test Result - Beta

Status: ❌ FAIL
Environment: Prod
OS: macOS
Browser: Chrome
Device: MS MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Verify Installation and Search Recommendations

  1. Install the Chrome extension from this link.
  2. Navigate to English or Spanish Wikipedia (production).
  3. Click into the search box in the header.
  4. AC1: Confirm that three search recommendations appear if the search box is blank.

screenshot 4.mov.gif (932×1 px, 856 KB)

Test Case 2: Verify Search Recommendations Disappear on Interaction

  1. Click off the search box or start typing a query.
  2. AC2: Confirm that the recommendations disappear.

screenshot 5.mov.gif (932×1 px, 1 MB)

Test Case 3: Verify Standard Search Functionality

  1. Type a query in the search box and press Enter or click a search suggestion.

2.❌ AC3: Confirm that the standard search behavior functions without any issues from the extension.

❌When clicking a search result after entering in text in the search field, the search recommendations briefly appear.

screenshot 8.mov.gif (932×1 px, 1 MB)

❌When clicking 'Enter' after entering in text in the search field, the search recommendations briefly appear.

screenshot 9.mov.gif (932×1 px, 1 MB)

✅ Clicking the 'Search' button after entering in text in the search field does not flash the search recommendations as expected.

screenshot 10.mov.gif (932×1 px, 1 MB)

Edward found some bugs in the instrumentation, so we're uploading a merge request to fix that.

Test Result - Prod

Status: ✅ PASS (but with questions)
Environment: Prod
OS: macOS
Browser: Chrome
Device: MS MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Verify Installation and Search Recommendations

  1. Install the Chrome extension from this link.
  2. Navigate to English or Spanish Wikipedia (production).
  3. Click into the search box in the header.
  4. AC1: Confirm that three search recommendations appear if the search box is blank.

screenshot 5.mov.gif (910×1 px, 532 KB)

Test Case 2: Verify Search Recommendations Disappear on Interaction

  1. Click off the search box or start typing a query.
  2. AC2: Confirm that the recommendations disappear.

screenshot 6.mov.gif (910×1 px, 789 KB)

Test Case 3: Verify Standard Search Functionality

  1. Type a query in the search box and press Enter or click a search suggestion.

2.✅ AC3: Confirm that the standard search behavior functions without any issues from the extension.

screenshot 7.mov.gif (910×1 px, 1 MB)

screenshot 8.mov.gif (910×1 px, 1 MB)

screenshot 9.mov.gif (910×1 px, 1005 KB)

NOTE: @Jdlrobson/@Jdrewniak before resolving please take a look at these two issues ⬇ :
  1. The search functionality works as expected and the temporary flash of the recommender is no longer there. This is an odd edge case that you may want to look into If you type a query in the search box, and either press Enter, click Search, or select a search suggestion, then click back on the browser, clear the search field, click out and back into it, there are no recommended articles.
    screenshot 10.mov.gif (910×1 px, 1 MB)
  2. If you look at any of the screen grabs you'll notice that when you type a search query into the edit field, it expands to the left and the 🔍 icon gets bigger.
Edtadros updated the task description. (Show Details)

❓ The search functionality works as expected and the temporary flash of the recommender is no longer there. This is an odd edge case that you may want to look into If you type a query in the search box, and either press Enter, click Search, or select a search suggestion, then click back on the browser, clear the search field, click out and back into it, there are no recommended articles.

@Edtadros thanks for flagging that. @Jdlrobson I think that given this is experimental code going out to a very limited audience, we can tolerate some level of bugs with this functionality.