Page MenuHomePhabricator

[M] Mobile quick view - Show the expanded search result snippet
Closed, ResolvedPublic

Description

This ticket is a subtask and related to expanding snippets on desktop T316397

While the snippet on Desktop is being expanded in the search preview, on mobile expansion happens with the snippet itself which makes the user interaction requirements slightly different. On Desktop we are looking to expand the snippet such that it may include the contents of snippets both before and after in the expanded version. While on the mobile, to avoid too much movement of content on screen (which can be disorienting for the user) we are only focusing on including the contents after the snippet in expanded version.

Prototype
See the prototype here. Tap on the first result to see how expansion interaction works.

Two approaches are outlined in the desktop ticket T316397 and we would follow the same approach on mobile minus expanding in both directions.

Acceptance Criteria

  • When the user taps on the snippet expand the snippet and open the preview at the same time.
  • Expand snippet only in one direction i.e. after the available snippet. Unlike desktop which expands on both sides, on mobile it should expand only after the snippet to avoid lot of movement of content on screen.
  • Expand to roughly 3 more lines after the snippet (not two sentences). (The exact length of expansion to be discussed when we start building)
  • Closing the preview will also hide the expanded snippet

Link to Figma

Event Timeline

CBogen renamed this task from Mobile quick view - Show the expanded search result snippet to [M] Mobile quick view - Show the expanded search result snippet.Jan 25 2023, 5:21 PM

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

[mediawiki/extensions/SearchVue@master] Mobile quick view - Show the expanded search result snippet

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

Change 908531 merged by jenkins-bot:

[mediawiki/extensions/SearchVue@master] Mobile quick view - Show the expanded search result snippet

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

@SimoneThisDot - I checked in betalabs, all looks good except for the first spec ( Figma mockup shows the smooth transition):

  • When the user taps on the snippet expand the snippet and open the preview at the same time.

The current implementation looks as the following

  • a user clicks on the quick view arrow
  • the quick view appears
  • only then the snippet would expand (see the gif below or enwiki betalabs &quickView=Cat
    transition_uncollapse.gif (685×408 px, 142 KB)

Checked on ptwiki wmf.9 (Android and iOS) - the above comment, i.e. a snippet opens only after the quick view appears, is still happening. The transition is smooth enough. All other specs are fine. Moving for @Sneha's review If there are no follow-ups, you may close the task.

The gif below is a search on pt.m.wikipedia.org &search=galaxy:

two_step_opening.gif (812×420 px, 211 KB)

Looks good to me for the most part. @SimoneThisDot the arrow fixed position works well. Also like @Etonkovidova mentioned the snippet opens a second or two after the quick view appears. Is it because it is still loading the info? The current lag creates abruptness in the experience and would be nice if it happened instantly. Is it possible to load the snippet before anything else to speed it up?

@Sneha unfortunately this is not possible with the current way of fetching information...

The snippets are expanded from the cirrusSearch information and that is a request when the user clicks on a search result... So this means that sometimes we may show the search preview and some information even before the snippets are expanded (as you and Elena have probably noticed).

The only possible solution for this would either be pre-fetching or delaying the opening of the preview (that is what we are trying to avoid in the first place).

I am happy to change things around if required, but I need agreement from the rest of the team as different loading also mean different load on the servers

@SimoneThisDot Could we show skeleton for the lines in expanded snippet? I have to try it out on my side to see how it looks but throwing it out as an idea.
I agree delaying the opening of preview is not a good idea. I wonder if pre-fetching is high cost/effort or low.

As part of Mobile quick view - Show the expanded search result snippet, me and Sneha discussed possible solutions that would allow us to reduce the "layout shift" on mobile.

After some investigation, we decided to investigate if it was feasible to "pre-fetch" some of the results to avoid the shifting on mobile for MOST users, and then implement a loading skeleton for the others..
I have checked the report provided by Connie and it shows that currently, only mobile only 12% of people use search preview. This data does not seem to be high enough to justify prefetching data (that is extra load and bandwidth for the user).

I am going to now work on a POC to create a loading skeleton on the snippet to reduce the layout shift, but if this is unsuccessful we would have to remove the expanded snippets on mobile.

Thanks @SimoneThisDot for summarizing. Let me know when you want me to review POC.

@Sneha Shall we move this back to the backlog or close this and create a new one?

I think we should close this as majority of this task is done. I will create a new ticket as you suggested to capture the remaining acceptance criteria and connect it with the new ticket I wrote yesterday about turning it off. @SimoneThisDot

Cparle subscribed.

Ok closing