Maniphest T320743

[L] Mobile: Create a Quick View component
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Sneha
	Oct 13 2022, 4:18 PM

Description

Quick view panel allows users to drill down into a specific search results. Surfacing key information for each of the results in the quick view allows users to find and discover relevant content within the article or go directly to the desired section. The quick view serves multiple purpose 1) Find relevant information 2) Discover related content

User story  for Relevance
When I am looking at the results on the Special:Search page …
… I want to be able to see key information,
… so that I can evaluate the relevance of various search results and find the information I was seeking..

User story  for Discovery
When I am scanning the results on the Special:Search page …
… I want to be able to discover relevant information,
… so that I do not overlook information that might otherwise be left undiscovered.

Quick view on mobile
Quick view panel on mobile will keep the user on the same page while they are navigating through their search results. Quick view component on mobile will have similar content as on the Desktop quick view panel, but in a mobile friendly format.

Notes on design

The height of the quick view panel will be fixed as shown in Figma.
Each key information (listed below) has its own card.
The cards scroll horizontally. No snapping i.e. it is a continuous smooth scroll and no looping i.e. when at the last card the user will have to swipe back to go to the first card.
Spacing between cards as specified in Figma.
All cards have subtle colour border with 2px radius.
The cards should appear in the following order: Image, Wiki Data description, Sections in the article, images from commons.
Do not show the card if there is no information available for that card.
If no information is available for any of the cards do not provide access to quick view i.e. no arrow will be shown for that result.

Missed AC added on Dec 15

Ensure that the quick view position (i.e. spacing above and below the quick view) matches the spec in Figma.

Key information in the quick view panel:
Article image - T320646
Wikidata description of the article - T320647
Table of content/Sections within articles - T320763
Related images from Commons - T321001

Other quick view panel tickets:
Showing arrows to open quick view - T320528
Opening and closing interaction for quick view - T320527

Details

Subject	Repo	Branch	Lines +/-
Improve Search Preview Spacing on mobile	mediawiki/extensions/SearchVue	master	+11 -1
Mobile: Create a Quick View component	mediawiki/extensions/SearchVue	master	+9 -2
Mobile: Create a Quick View component	mediawiki/extensions/SearchVue	master	+8 -0

Customize query in gerrit

Related Objects

Mentioned In: rESVU7db2b22cff32: Improve Search Preview Spacing on mobile
rESVUd09b23aaaba6: Mobile: Create a Quick View component
T320646: [M] Mobile: Show article lead image in the quick view.
rESVU8f84bea3e974: Mobile: Create a Quick View component
Mentioned Here: T321001: [L] Mobile: Show Commons widget in the quick view panel
T320763: [M] Mobile: Show table of contents in the quick view panel
T320527: [S] Mobile: Enable users to open and close quick view on special:search results page
T320528: [S] Mobile: Show arrows next to search results for quick view discoverability.
T320646: [M] Mobile: Show article lead image in the quick view.
T320647: [M] Mobile: Show wiki data description of the article in quick view

Event Timeline

Sneha created this task.Oct 13 2022, 4:18 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 13 2022, 4:18 PM

Sneha updated the task description. (Show Details)Oct 13 2022, 4:20 PM

Sneha updated the task description. (Show Details)

CBogen added a project: SDAW-Search-Improvements (Milestone 3: QuickView mobile).Oct 13 2022, 4:22 PM

CBogen moved this task from Needs Design to Ready for Estimation on the Structured-Data-Backlog (Current Work) board.Oct 14 2022, 2:08 PM

Sneha updated the task description. (Show Details)Oct 14 2022, 9:02 PM

MarkTraceur renamed this task from Mobile: Create a Quick View component to [L] Mobile: Create a Quick View component.Oct 19 2022, 5:47 PM

MarkTraceur moved this task from Ready for Estimation to Ready for Development on the Structured-Data-Backlog (Current Work) board.Oct 19 2022, 6:00 PM

Sneha updated the task description. (Show Details)Oct 20 2022, 9:23 PM

SimoneThisDot claimed this task.Nov 16 2022, 11:15 AM

SimoneThisDot moved this task from Ready for Development to Doing on the Structured-Data-Backlog (Current Work) board.

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

[mediawiki/extensions/SearchVue@master] Mobile: Create a Quick View component

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

gerritbot added a project: Patch-For-Review.Nov 18 2022, 1:06 PM

SimoneThisDot moved this task from Doing to Code Review on the Structured-Data-Backlog (Current Work) board.Nov 21 2022, 11:31 AM

Change 858580 merged by jenkins-bot:

[mediawiki/extensions/SearchVue@master] Mobile: Create a Quick View component

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

SimoneThisDot mentioned this in rESVU8f84bea3e974: Mobile: Create a Quick View component.Nov 22 2022, 2:22 PM

Maintenance_bot removed a project: Patch-For-Review.Nov 22 2022, 2:30 PM

ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.12; 2022-11-28).Nov 22 2022, 3:01 PM

SimoneThisDot moved this task from Code Review to Needs QA on the Structured-Data-Backlog (Current Work) board.Nov 28 2022, 12:33 PM

Sneha updated the task description. (Show Details)Dec 15 2022, 9:15 PM

@Etonkovidova I just added the AC that was not written out here but was only reflected in Figma regarding the spacing above and below quick view. Just making a note here so you can move to doing before or after you QA as you see fit.

Sneha mentioned this in T320646: [M] Mobile: Show article lead image in the quick view..Dec 15 2022, 9:28 PM

@SimoneThisDot - Couple of things to check
(1) @sneha's comment on T320646 - remove "Go to full article" link from mobile Preview card
(2) the current implementation doesn't provide more space between the results - more space will provide a visual tie of an open QuickView with a corresponding article for which the QuickView was open :

figma mockup	betalabs

SimoneThisDot moved this task from Needs QA to Doing on the Structured-Data-Backlog (Current Work) board.Dec 16 2022, 8:09 AM

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

[mediawiki/extensions/SearchVue@master] Mobile: Create a Quick View component

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

gerritbot added a project: Patch-For-Review.Dec 19 2022, 11:32 AM

@Etonkovidova the issues you've mentioned are currently in review here - https://gerrit.wikimedia.org/r/c/mediawiki/extensions/SearchVue/+/868504

@vadim-kovalenko should I move this to the code review column?

@CBogen I don't think so... It Seems that Simone is working on other ACs of this task (he is the assignee), and I just helped him to deal with minor issues.

Hei Vadim, all AC are done, just the points raised by Elena are still outstanding.

For your information, I had a chant with Sneha to clarify and the following are expected:

When no search preview is visible (all closed), the space between results should be untouched (so it should be 16px as it currently is)
When a search preview is open, the space should be:
- 12 px above the search preview
- 20 px below the search preview.
- space between the other search results should still be 16px

cc: @Sneha @vadim-kovalenko

Change 868504 merged by jenkins-bot:

[mediawiki/extensions/SearchVue@master] Mobile: Create a Quick View component

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

vadim-kovalenko moved this task from Doing to Design QA on the Structured-Data-Backlog (Current Work) board.Dec 20 2022, 1:04 PM

vadim-kovalenko mentioned this in rESVUd09b23aaaba6: Mobile: Create a Quick View component.Dec 20 2022, 1:05 PM

Maintenance_bot removed a project: Patch-For-Review.Dec 20 2022, 1:30 PM

ReleaseTaggerBot edited projects, added MW-1.40-notes (1.40.0-wmf.17; 2023-01-02); removed MW-1.40-notes (1.40.0-wmf.12; 2022-11-28).Dec 20 2022, 2:01 PM

@SimoneThisDot
Following up on the comment above.
I tested it on the mobile beta link and the 12px space above search preview still feels like a lot. Somehow it feels less in the mocks than it does in the build. Are we able to reduce it to 8px so that it looks more connected to the results above.

Sneha moved this task from Design QA to Doing on the Structured-Data-Backlog (Current Work) board.Jan 13 2023, 2:16 PM

Please find below a couple of examples, so that we can choose the future spacing (it is currently wrong in Beta, it was a regression as it was normally set before):

CURRENT BETA - 16px top / 16px bottom

AS REQUESTED BY THE TICKET - 12 px top / 20 px bottom

REDUCED - 8px top / 12 px bottom

cc: @Sneha let me know if any of the proposed is good for you and if you want me to send more images with different combinations

@SimoneThisDot thanks for these screenshots as they seem to look different than when I try in Figma. Is it because of pixel to em conversion?

Based on above I think the 8px top looks good. However, the bottom we can keep 20px (as proposed in the ticket). Was there a specific reason why you proposed 12 px bottom in the third sreenshot?

Not really, I just proposed different sizes for you to have a wider range of options.

I will make the change for:

8px top
20px bottom

All done for you.. Worth mentioning that we need to test both 2 scenario. One on wikis with Thumbnails and one without as they create different HTML structures. Even if the thumbnail is NOT shown on mobile, the structure is still being modified.

Screenshot "without" thumbnail:

Screenshot "with" thumbnail:

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

[mediawiki/extensions/SearchVue@master] Improve Search Preview Spacing on mobile

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

gerritbot added a project: Patch-For-Review.Jan 17 2023, 11:45 AM

SimoneThisDot moved this task from Doing to Code Review on the Structured-Data-Backlog (Current Work) board.Jan 17 2023, 11:45 AM

Change 880936 merged by jenkins-bot:

[mediawiki/extensions/SearchVue@master] Improve Search Preview Spacing on mobile

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

SimoneThisDot mentioned this in rESVU7db2b22cff32: Improve Search Preview Spacing on mobile.Jan 19 2023, 11:32 AM

ReleaseTaggerBot edited projects, added MW-1.40-notes (1.40.0-wmf.20; 2023-01-23); removed MW-1.40-notes (1.40.0-wmf.17; 2023-01-02).Jan 19 2023, 12:00 PM

Maintenance_bot removed a project: Patch-For-Review.Jan 19 2023, 12:30 PM

matthiasmullie moved this task from Code Review to Needs QA on the Structured-Data-Backlog (Current Work) board.Jan 20 2023, 7:56 AM

Etonkovidova updated the task description. (Show Details)Jan 26 2023, 10:38 PM

Etonkovidova moved this task from Needs QA to Verify on Production on the Structured-Data-Backlog (Current Work) board.Jan 26 2023, 10:48 PM

In T320743#8530710, @SimoneThisDot wrote:

All done for you.. Worth mentioning that we need to test both 2 scenario. One on wikis with Thumbnails and one without as they create different HTML structures. Even if the thumbnail is NOT shown on mobile, the structure is still being modified.

Screenshot "without" thumbnail:

Screenshot "with" thumbnail:

Thx, @SimoneThisDot! Checked in wmf.21 - all fixes are in place.

	F35869609: Screen Shot 2022-12-15 at 6.17.20 PM.png
	Dec 16 2022, 2:23 AM

	F35869605: Screen Shot 2022-12-15 at 5.47.56 PM.png
	Dec 16 2022, 2:23 AM

	F36270680: image.png
	Jan 17 2023, 11:42 AM

	F36270650: image.png
	Jan 17 2023, 11:42 AM

	F36245323: image.png
	Jan 16 2023, 11:40 AM

	F36245300: image.png
	Jan 16 2023, 11:40 AM

[L] Mobile: Create a Quick View componentClosed, ResolvedPublicActions

Description

Details

Related Objects

Event Timeline

[L] Mobile: Create a Quick View component
Closed, ResolvedPublic
Actions