Page MenuHomePhabricator

Story image suggestion
Closed, ResolvedPublic

Assigned To
Authored By
AMuigai
Nov 30 2021, 1:15 PM
Referenced Files
F35052773: image.png
Apr 15 2022, 12:26 PM
F35052801: image.png
Apr 15 2022, 12:26 PM
F35052794: image.png
Apr 15 2022, 12:26 PM
F35052786: image.png
Apr 15 2022, 12:26 PM
F35052767: image.png
Apr 15 2022, 12:26 PM
F35052776: image.png
Apr 15 2022, 12:26 PM
F35052796: image.png
Apr 15 2022, 12:26 PM
F34992892: image.png
Mar 9 2022, 12:43 PM

Description

User story:

As a user, when I search for images, I want to see multiple images to choose from that are high quality so that the story I create looks good.

Request:

In image search results on the Wikistories builder, images should be listed based on the priority below:

  1. Show images contained in the related article (the article the builder was started from)
  2. Images from Commons
Design details
Images loaded for article.png (780×360 px, 400 KB)
  • Search input is pre-filled with article title.
  • Show images available in an article and results from commons for article title.

Search bar active.png (780×360 px, 268 KB)
Search string modified.png (780×360 px, 148 KB)
Remove search string.png (780×360 px, 22 KB)
  • Tap on search bar will bring it to an active state along with device keyboard.
  • When a user writes a different search string, check if the search string has a Wikipedia article, then show images from the article followed by results from commons.
  • Show an empty state when a user gets rid of search string to type fresh.

  • Perform lazy loading when a user scrolls down to see more images.
  • Prioritize showing high-resolution images.

Details

Related Changes in Gerrit:

Event Timeline

  • What is happening with the current search toolbar at the bottom of the screen with the "Commons" and "Wikipedia" buttons?
  • What resolution would you consider "high resolution"? AFAIK, the images we get are pretty good, we just select small versions of them. Commons is capable of serving thumb of almost any size, selecting the right size for the current device is something that would definitely be part of the real product but that was not considered for the prototype.
  • What is happening with the current search toolbar at the bottom of the screen with the "Commons" and "Wikipedia" buttons?

We are going to remove this. From an article(figma prototype) users will land on search screen.

  • What resolution would you consider "high resolution"? AFAIK, the images we get are pretty good, we just select small versions of them. Commons is capable of serving thumb of almost any size, selecting the right size for the current device is something that would definitely be part of the real product but that was not considered for the prototype.

Do we have any middle ground to choose from?

  • What is happening with the current search toolbar at the bottom of the screen with the "Commons" and "Wikipedia" buttons?

We are going to remove this. From an article(figma prototype) users will land on search screen.

  • What resolution would you consider "high resolution"? AFAIK, the images we get are pretty good, we just select small versions of them. Commons is capable of serving thumb of almost any size, selecting the right size for the current device is something that would definitely be part of the real product but that was not considered for the prototype.

Do we have any middle ground to choose from?
We are going to take care of this part in a separate ticket(https://phabricator.wikimedia.org/T297130), this was decided in a team meeting.

AMuigai renamed this task from Image search experience in wikistories prototype to Image search experience in Wikistories.Jan 13 2022, 1:27 PM
SBisson moved this task from Dev to Backlog on the Inuka-Team (Kanban) board.
SBisson added a subscriber: eamedina.

Will rework this task for the product

SBisson renamed this task from Image search experience in Wikistories to Search for images for a story.Feb 2 2022, 8:37 PM
SBisson updated the task description. (Show Details)
SBisson raised the priority of this task from Medium to High.Feb 10 2022, 7:15 PM

@SBisson let me know your thoughts on following flows. I am thinking of proposing these. Also, please have a look at question related to showing more than 15 images as a search results.

Scenario 1 # If an editor keeps the search topic the same as the article, do the following.

search topic and article is same.png (780×360 px, 419 KB)
  • Search images in commons.
  • Limit search results to 15 images.
  • Show high-resolution images first.
  • Allow selection of a maximum of 10 images.
  • Show a warning message when users try to select more than 10 images.
  • Use full-text search when a user inputs their topic of choice.

Scenario 2 # If an editor changes the search topic, do the following.

search topic and article is different.png (780×360 px, 359 KB)
  • If the search topic matches a Wikipedia article, show images from that article followed by images from commons.
  • Limit search results to 15 images.
  • Show high-resolution images first.
  • Allow selection of a maximum of 10 images.
  • Show a warning message when users try to select more than 10 images.
  • Use full-text search when a user inputs their topic of choice.

Can we show more than 15 images without compromising the performance? Lazy loading comes to my mind.

SGautam_WMF renamed this task from Search for images for a story to Story image suggestion.Feb 21 2022, 5:10 PM
SGautam_WMF updated the task description. (Show Details)
eamedina moved this task from Definition to Ready for Dev on the Inuka-Team (Kanban) board.
eamedina moved this task from Ready for Dev to Dev on the Inuka-Team (Kanban) board.

Change 766807 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/Wikistories@master] Story image suggestion

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

@SGautam_WMF just an fyi: I added a simple "No results" label consistent with design for the case when no images are found for user input. At least to start with, happy to update later if needed

image.png (1×804 px, 40 KB)
image.png (956×814 px, 37 KB)

Change 766807 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] Story image suggestion

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

Testing:

  1. No text entered shows no results and high definition images are returned for a variety of search strings.
image.png (464×620 px, 44 KB)
image.png (1×618 px, 1 MB)
image.png (1×626 px, 1 MB)
image.png (1×608 px, 1 MB)
  1. Regarding "full-text search", does this mean it only matches with images that have the complete text string used as search? An example below:

image.png (1×618 px, 757 KB)

  1. Requirement: Allow selection of a maximum of 10 images.

Result: User can select more than 10 images and proceed to create a Wikistory.

image.png (1×638 px, 1016 KB)
image.png (1×614 px, 1 MB)

Testing:

  1. Regarding "full-text search", does this mean it only matches with images that have the complete text string used as search? An example below:

"full-text search" doesn't really make sense in the context of the image search API. I don't know what this was about but please ignore.

  1. Requirement: Allow selection of a maximum of 10 images.

The 10-page limit should be in T296494: Be able to create story with up to 10 pages

Thanks, Stephane.

I will move this ticket to Design review.