Page MenuHomePhabricator

[S] Update the position and copy in the desktop tutorial for search previews
Closed, ResolvedPublic

Description

This ticket is a follow up ticket to T311669

The following improvements needs to be made to the tutorial:

  • Change the position of the tutorial so the dot points to the text instead of empty space. Shift the position closer to first line and toward the left.
  • Change the word "see" to "view" in the copy.

Event Timeline

CBogen renamed this task from Update the position and copy in the desktop tutorial for search previews to [S] Update the position and copy in the desktop tutorial for search previews.Nov 2 2022, 4:58 PM

Change the position of the tutorial so the dot points to the text instead of empty space. Shift the position closer to first line and toward the left.

@Sneha , could you update figma wireframe so I can take a look at the new popup position more precisely?

Change 852933 had a related patch set uploaded (by Vadim Kovalenko; author: Vadim Kovalenko):

[mediawiki/extensions/SearchVue@master] Update the position and copy in the desktop tutorial for search previews

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

Change 852933 merged by jenkins-bot:

[mediawiki/extensions/SearchVue@master] Update the position and copy in the desktop tutorial for search previews

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

@vadim-kovalenko looks like this has been merged, should it be moved to the "Needs QA" column?

Etonkovidova subscribed.

@Sneha - no issues were found; movign for your quick review. If there is no follow-ups, you may move it to Verify in Production column.

Checked in enwiki betalabs.

The position of the blue dot varies depending on whether some additional text is present (above the search results)

figma mockup - desktopenwiki betalabs
Screen Shot 2022-11-10 at 9.11.12 AM.png (1×1 px, 667 KB)
Screen Shot 2022-11-10 at 9.07.16 AM.png (1×1 px, 475 KB)
Screen Shot 2022-11-10 at 9.30.58 AM.png (1×2 px, 293 KB)
Screen Shot 2022-11-10 at 9.35.29 AM.png (1×2 px, 321 KB)

Thanks Elena for the screenshots. It looks like the pop up is not pointing to the right area in all cases. It should be pointing to the snippet and in some cases it is pointing in empty space. This can be a usability issue as users will not understand where to tap and what we are referring to.

@vadim is the position fixed or dynamic? How can we make it point to the snippet in all cases?

@Sneha , sorry for missing your message. I've reproduced this bug. It seems that I didn't take into consideration elements that might appear on top of search results. I fixed it in the patch related to the mobile view of the tutorial popup here - https://gerrit.wikimedia.org/r/c/mediawiki/extensions/SearchVue/+/859564. I replaced HTML markup of this popup into the first element from search results.

is the position fixed or dynamic? How can we make it point to the snippet in all cases?

Yes, top position is dynamic. It calculates the height of the first search result.

Caveats:

  1. There was a side-effect with non-centered popup for 360px mobile view. I fixed this with CSS media rules
  2. Popup won't render if no search result is found at all. If the user performs another search request and results will be available, the popup will render.

cc: @SimoneThisDot

Thanks Vadim for including those edge cases.

Checked on betalabs - the issue is fixed. The position of the guided tour is shifted toward the first line and to the left (according to the spec) and stays no matter if the additional text above the search results is present or not.

Screen Shot 2022-12-05 at 12.09.11 PM.png (1×2 px, 326 KB)
a user cannot create an article (additional text is added above the search results)
Screen Shot 2022-12-05 at 6.18.18 PM.png (1×1 px, 357 KB)
a user can create an article
Screen Shot 2022-12-05 at 6.16.46 PM.png (1×1 px, 459 KB)

@Sneha - I moved it to Verify on Production column. If you want to check, you may enter Special:Preferences/reset in the search field on https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page to trigger the tutorial for existing test user.
If everything looks ok to you, leave the ticket in Verify on Production column, so I can check after deployment.

Thanks for the screenshots @Etonkovidova. I think we need to adjust the position a bit because with the current position if the user clicks above the pointer (assuming that users may try clicking where the pointer is or slightly above it) nothing will happen as it may be outside the hit zone. The position should be slightly lower so that users have some room to click above it. Here is Figma reference.

I just realized the ticket did not have Figma link for you to check. The link was part of the original ticket but not this one.

Change 865204 had a related patch set uploaded (by Vadim Kovalenko; author: Vadim Kovalenko):

[mediawiki/extensions/SearchVue@master] Update the position and copy in the desktop tutorial for search previews

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

@Sneha , @Etonkovidova I've updated the position calculation for a tutorial popup in the follow-up patch above.

Thanks @vadim-kovalenko

@Etonkovidova could you share a screenshot we can probably close this one then.

@Sneha the patch is still on review, do not close the task for now.

Yeah I won't. It is Elena's territory to move them to production or close. I just wanted to review the screenshot. :)

@vadim-kovalenko @Etonkovidova should we move this ticket back to the Code Review column while it's still in review?

Change 865204 merged by jenkins-bot:

[mediawiki/extensions/SearchVue@master] Update the position and copy in the desktop tutorial for search previews

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

Thanks @vadim-kovalenko

@Etonkovidova could you share a screenshot we can probably close this one then.

@Sneha - for your review:

old screenshot from the previos commentthe most recent screenshot (Dec22/2022)
Screen Shot 2022-12-05 at 6.18.18 PM.png (1×1 px, 357 KB)
Screen Shot 2022-12-22 at 2.56.06 PM.png (1×1 px, 361 KB)
- a slightly different position
Screen Shot 2022-12-22 at 3.07.19 PM.png (1×2 px, 531 KB)

Note: the previos Special:Search/reset doesn't trigger the tutorial anymore. I used the following snippet in the Console:
new mw.Api().saveOption('searchpreview-tutorial-enabled', 1).done( function() { window.location.reload() } );

Checked pilots wikis - idwiki, ptwiki, and ruwiki - looks good.

Screen Shot 2023-01-06 at 6.44.48 PM.png (596×1 px, 187 KB)
Screen Shot 2023-01-06 at 6.41.32 PM.png (647×1 px, 235 KB)