Page MenuHomePhabricator

Layout for Wikipedia Preview card
Open, MediumPublic

Description

Goal

Create a layout for the Wikipedia Preview card

Elements

The card will have the following elements:

  • Thumbnail image -> This will be the lead image of an article, when available
  • Text from the beginning section of an article
  • Wikipedia branding
  • Attribution and licensing for images

Proposed Design

Preview with thumbnailPreview without thumbnailExpanded preview

Zeplin ➡ https://app.zeplin.io/project/5edf645eef92dfb2dc2f8ce8/dashboard?seid=5edf660281b300b7fe9863fb (with thumbnail)
Zeplin ➡https://app.zeplin.io/project/5edf645eef92dfb2dc2f8ce8/dashboard?seid=5edf659a8fcb78b97c83c37a (without thumbnail)

Design Details

  • If an article summary has long text which can’t fit inside the preview card then show continue reading(CTA).
  • Tapping on continue reading will expand the preview to reveal the entire summary of an article along with the images present in the article. At max, it expands up to 80% of the screen height and if there is still more content is available to cover then stick preview header(thumbnail, Wikipedia wordmark, close icon) and enable vertical scroll. It ends with a CTA to read the entire article by visiting mobile Wikipedia.
  • If an article summary has short text then adjust the size of the preview card accordingly without keeping continue reading (CTA.) but still show images related to the article and "Read article on Wikipedia" CTA.
  • In the absence of thumbnail, use Wikipedia wordmark in place of thumbnail.

Note:

Event Timeline

AMuigai created this task.Apr 21 2020, 12:29 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 21 2020, 12:29 PM
AMuigai moved this task from Backlog to Next up on the Inuka-Team board.Apr 21 2020, 12:57 PM
AMuigai updated the task description. (Show Details)Apr 28 2020, 1:10 PM
AMuigai moved this task from Backlog to Needs Design on the Inuka-Team (Kanban) board.
SGautam_WMF added a project: Design.
SGautam_WMF added a subscriber: SGautam_WMF.
SGautam_WMF updated the task description. (Show Details)May 5 2020, 10:42 AM
SGautam_WMF updated the task description. (Show Details)
SGautam_WMF updated the task description. (Show Details)EditedMay 5 2020, 10:45 AM

I have updated different variations of Wikipedia previews along with CTA and branding. I will be updating it further where lead images are positioned differently.

AMuigai triaged this task as Medium priority.May 14 2020, 1:34 PM
SGautam_WMF updated the task description. (Show Details)May 26 2020, 5:19 AM
SGautam_WMF updated the task description. (Show Details)May 29 2020, 10:58 AM
SGautam_WMF updated the task description. (Show Details)May 29 2020, 11:08 AM
SGautam_WMF updated the task description. (Show Details)Jun 1 2020, 9:24 AM
SGautam_WMF updated the task description. (Show Details)Jun 1 2020, 10:38 AM
Demian added a subscriber: Demian.Jun 1 2020, 6:41 PM
SGautam_WMF updated the task description. (Show Details)Jun 2 2020, 3:12 PM
SGautam_WMF updated the task description. (Show Details)
SBisson added a subscriber: SBisson.Jun 2 2020, 3:21 PM

From the description

  • Attribution and licensing for images

Please add more details or extract it to another task.

A call to action to direct readers to read the full article on Wikipedia
[...]
If an article(with/without thumbnail) has other images then show them when users tap on continue reading.

What is the "continue reading" link doing, is it navigating to the article on Wikipedia or is it showing more images?

SGautam_WMF updated the task description. (Show Details)Jun 3 2020, 12:22 PM

@SBisson I have updated the task with some more information, hope that would clear understanding about "continue reading".

SBisson claimed this task.Jun 3 2020, 8:56 PM
SBisson moved this task from Ready for Dev to Dev on the Inuka-Team (Kanban) board.

It ends with a CTA to read the entire article by visiting mobile Wikipedia.

Should the article open in the Wikipedia app (iOS, Android, KaiOS(?)) if installed on device?

It ends with a CTA to read the entire article by visiting mobile Wikipedia.

Should the article open in the Wikipedia app (iOS, Android, KaiOS(?)) if installed on device?

I don't think that's within our control. iOS and Android apps try to handle Wikipedia URLs but that's configurable by the users. Deep-linking on KaiOS is not possible.

SGautam_WMF updated the task description. (Show Details)Tue, Jun 9, 10:51 AM

@SGautam_WMF what should happen to the thumbail when it is not square?

@SBisson we can resize them and align them on the center. I did try with George Clooney's article and this is how it looks like.

SBisson renamed this task from Layout for Wikipedia Preview card to Layout for Wikipedia Preview card ⭐.Tue, Jun 16, 9:13 PM
SBisson renamed this task from Layout for Wikipedia Preview card ⭐ to ⭐Layout for Wikipedia Preview card.
SBisson renamed this task from ⭐Layout for Wikipedia Preview card to Layout for Wikipedia Preview card.Mon, Jun 22, 1:11 PM
SBisson reassigned this task from SBisson to hueitan.

@hueitan initial work in on this branch: https://github.com/wikimedia/wikipedia-previews/tree/T250796-layout

Try to think of a way to keep this lightweight but have some sort of component encapsulation so that individual components remain small and unit-testable

The WikipediA logo in the header, is that an image or text?

Do we always use the same image/text, or it changes rely on the language given? for example in french it should be WikipédiA logo

Options :

  1. If it is a text that rely on the i18n language file, then it uses the logo as a text, which means we need a list of the logo text in all the language; OR
  2. If it is a image, then need a list of the logo image given different languages; OR
  3. is there any existing url for us to fetch the logo image?

@hueitan that's an image, I have a list of logo images available with me, I would try to find out if there is a URL for us to fetch it.

hueitan moved this task from Dev to Code Review on the Inuka-Team (Kanban) board.Mon, Jun 29, 12:06 PM
SBisson updated the task description. (Show Details)Tue, Jun 30, 2:59 PM
SBisson moved this task from Code Review to QA on the Inuka-Team (Kanban) board.

Attribution and Images - Please add more details or extract it to another task.

The ticket on image attribution is here T240007