Page MenuHomePhabricator
Create Task
Maniphest T320528

[S] Mobile: Show arrows next to search results for quick view discoverability.
Closed, ResolvedPublic
Actions

Assigned To
SimoneThisDot
Authored By
Sneha
Oct 11 2022, 3:47 PM
Tags
Referenced Files
F36688006: Screen Shot 2023-02-02 at 4.03.40 PM.png
Feb 3 2023, 12:08 AM
F35968230: arrow_expanding.gif
Jan 4 2023, 1:54 AM
F35605539: Special_Search (57).png
Oct 20 2022, 7:49 PM
F35563450: mobile special search.png
Oct 11 2022, 7:20 PM
Subscribers
Aklapper
Etonkovidova
SimoneThisDot
Sneha
vadim-kovalenko

Description

To make quick view discoverable on the mobile show the arrows next to each results. There will be no tutorial on mobile for quick view as the arrows are always present unlike on Desktop.

AC:

  • Show the arrows only on the wikis in which we will be showing quick view.
  • All logged out users in those wikis will see the arrows.
  • Do not show the arrows if the logged in user has turned off the search previews in preferences.
  • The placement, orientation and the size of the arrows as specified in specs in Figma.
  • Do not show arrow for the results that have no quick view information.

Special_Search (57).png (800×360 px, 60 KB)

There is a separate ticket T320527 for opening and closing the quick view.

Details

SubjectRepoBranchLines +/-
Show arrows next to search results for quick view discoverability.mediawiki/extensions/SearchVuemaster+21 -0
Customize query in gerrit

Related Objects

Event Timeline

Sneha created this task.Oct 11 2022, 3:47 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 11 2022, 3:47 PM
Sneha renamed this task from Mobile quick view: Show arrows next to search results for quick view discoverability. to Mobile: Show arrows next to search results for quick view discoverability..Oct 11 2022, 3:47 PM
CBogen moved this task from Incoming to Needs Design on the Structured-Data-Backlog (Current Work) board.Oct 11 2022, 4:25 PM
Sneha updated the task description. (Show Details)Oct 11 2022, 7:20 PM
Sneha updated the task description. (Show Details)
CBogen added a project: SDAW-Search-Improvements (Milestone 3: QuickView mobile).Oct 12 2022, 1:55 PM
CBogen moved this task from Needs Design to Ready for Estimation on the Structured-Data-Backlog (Current Work) board.
Sneha updated the task description. (Show Details)Oct 13 2022, 4:17 PM
Sneha mentioned this in T320743: [L] Mobile: Create a Quick View component.
SimoneThisDot subscribed.Oct 19 2022, 8:58 AM

@Sneha I have one question note to share.

Currently, the arrow is added after the Javascript is fully loaded. On a desktop, you do not notice this behaviour because you have to hover over a result to see the arrow, but on mobile, you will notice the arrows appearing after a second or two.

We have two possible solutions for this (to be added as the AC when we decided which one):

  • We just show the arrow when the JS is ready, even if this will happen after a second or two.
  • We show the arrow immediately (by actually showing it with plain CSS instead than attaching it to the JS. The problem with this is that users may see an arrow and click it before the JS is loaded. If this happens, nothing will show and the user will have to click again
MarkTraceur renamed this task from Mobile: Show arrows next to search results for quick view discoverability. to [S] Mobile: Show arrows next to search results for quick view discoverability..Oct 19 2022, 5:59 PM
MarkTraceur moved this task from Ready for Estimation to Ready for Development on the Structured-Data-Backlog (Current Work) board.
Sneha added a subscriber: vadim-kovalenko.EditedOct 19 2022, 8:31 PM

@vadim-kovalenko Found a cool animation on code-pen https://codepen.io/gibatronic/pen/gMVVvR Looks more elegant than rotating the arrow 180 degrees. I am going to add this one to T320527

Sneha updated the task description. (Show Details)Oct 20 2022, 7:49 PM
Sneha added a comment.Oct 20 2022, 10:09 PM

@SimoneThisDot From the two options you have it seems showing arrows only when its ready to be clicked (which is the first option) seems more user friendly. However, we need to see how long it takes for the arrows to load. I am wondering if it will show up as soon as the text appears or after the text has appeared? I think if it is after the text then the experience may feel a little jarring. If they both appear at the same time then it would be better. But definitely we don't want the scenario where the user has to click again.

vadim-kovalenko added a comment.Oct 21 2022, 7:29 AM

@Sneha , animation looks good. I've just looked at the OOUI demo page, and there are no animated examples that we have to use as a reference, so your suggestion is good to me.

SimoneThisDot claimed this task.Oct 25 2022, 11:59 AM
SimoneThisDot moved this task from Ready for Development to Doing on the Structured-Data-Backlog (Current Work) board.
gerritbot added a comment.Oct 25 2022, 2:33 PM

Change 849107 had a related patch set uploaded (by Simone Cuomo; author: Simone Cuomo):

[mediawiki/extensions/SearchVue@master] Show arrows next to search results for quick view discoverability.

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

gerritbot added a project: Patch-For-Review.Oct 25 2022, 2:33 PM
SimoneThisDot moved this task from Doing to Code Review on the Structured-Data-Backlog (Current Work) board.Oct 25 2022, 2:35 PM
matthiasmullie moved this task from Code Review to Needs QA on the Structured-Data-Backlog (Current Work) board.Oct 27 2022, 12:47 PM
matthiasmullie moved this task from Needs QA to Code Review on the Structured-Data-Backlog (Current Work) board.
matthiasmullie moved this task from Code Review to Needs QA on the Structured-Data-Backlog (Current Work) board.Oct 28 2022, 10:29 AM
gerritbot added a comment.Oct 28 2022, 10:30 AM

Change 849107 merged by jenkins-bot:

[mediawiki/extensions/SearchVue@master] Show arrows next to search results for quick view discoverability.

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

SimoneThisDot mentioned this in rESVUb81b518947a0: Show arrows next to search results for quick view discoverability..Oct 28 2022, 10:31 AM
ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.8; 2022-10-31).Oct 28 2022, 11:00 AM
Maintenance_bot removed a project: Patch-For-Review.Oct 28 2022, 11:30 AM
Sneha mentioned this in T321944: [L] Mobile: Loading indicator for search preview.Nov 1 2022, 9:42 PM
Etonkovidova moved this task from Needs QA to Verify on Production on the Structured-Data-Backlog (Current Work) board.EditedJan 4 2023, 1:54 AM
Etonkovidova subscribed.

Checked on betalabs - marked the specs as done in the description and moved to Verify on Production. The gif below shows the animation for the arrows:

arrow_expanding.gif (548×346 px, 617 KB)

Filed T326189: [QA task] mobile QuickView edge cases to verify the edge cases listed there in production.

Etonkovidova updated the task description. (Show Details)Jan 4 2023, 2:05 AM
Etonkovidova mentioned this in T326189: [QA task] mobile QuickView edge cases.Jan 4 2023, 2:22 AM
Etonkovidova updated the task description. (Show Details)Feb 2 2023, 10:19 PM
Etonkovidova closed this task as Resolved.Feb 3 2023, 12:07 AM
Etonkovidova updated the task description. (Show Details)

An example of where is no search preview and no arrow is present

  • Do not show arrow for the results that have no quick view information.

ru: ?search=Бд

Screen Shot 2023-02-02 at 4.03.40 PM.png (1×774 px, 210 KB)

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