Page MenuHomePhabricator

Share reading lists concept
Closed, ResolvedPublic

Assigned To
Authored By
JTannerWMF
Aug 31 2022, 9:08 PM
Referenced Files
F35721741: reading-list-receiving-051.png
Nov 8 2022, 6:44 PM
F35603379: iOS.png
Oct 20 2022, 10:20 AM
F35603377: Android Wide.png
Oct 20 2022, 10:20 AM
F35603375: Android.png
Oct 20 2022, 10:20 AM
F35483852: T313269 - Share reading lists - list-export-05@2x.png
Sep 7 2022, 3:27 PM
F35484144: image.png
Sep 7 2022, 3:27 PM
F35483848: T313269 - Share reading lists - list-export-03@2x.png
Sep 7 2022, 3:27 PM
F35483971: T313269 - Share reading lists - list-export-02@2x (1).png
Sep 7 2022, 3:27 PM

Description

Background

The team is currently exploring the creation of a feature that allows users to export all reading lists and share singular reading lists with others. There are several ways to approach exporting, importing, and sharing reading lists. This task is to update the low-fi mockups we made in task T313740 with the flow of sharing the list via a link instead of a file.

Approaches to include

  • Someone clicking a link and going to a MediaWiki page to download
  • Concept for someone that does not have the app vs. that will have the app
  • Interface for someone sending vs. someone receiving
  • Exporting several lists vs. sharing one list

Things to consider

  • How might I understand the mockups if I don't speak or read English?
  • How might I understand the mockups in an RTL language?

1. User Stories

  • As a Wikipedia Android app user and student in Morocco, I want to export my reading lists so that I can use them at the Mohammed V University school library
  • As a Wikipedia Android app user in Ghana, I want to share my reading list with a family member in the US that has an iOS device, so they can read the articles I've saved about Accra ahead of their trip home in December.
  • As a Wikipedia Android app user organizer in South Asia, I want to share a reading list via Whatsapp after an event, so people that have attended know which articles need contributions

2. Target Quant Regions

Africa (Egypt, Algeria, Morocco, Kenya, DR Congo, Angola, and Ghana) and South Asia (India, Bangladesh, Pakistan, Sri Lanka, and Nepal)

3. Target Qualitative Audience

Usability testing and design research must be conducted with low vision and low bandwidth users. Usability testing and design research must be conducted in target regions and top 5 languages of each region with diversity in age, screen size, low tech and app experience, and with no more than 40% of male participants.

4. Concept (Wireframes ↗)

Deep Dive Android Reading Lists.jpg (600×960 px, 48 KB)
Deep Dive Android Reading Lists(1).jpg (600×960 px, 43 KB)

The user flow below shows how users share (a) reading list(s) via a messenger app (e.g. Signal). The new reading list functionality consists of Share and Export.

Design constraints:

  • Reading lists are an Android and iOS-only feature (for now)
  • We can’t rely on an external service or a landing page. List contents must be shared as URL parameters
4.1. Share lists
4.1.1. The receiver has the app installed
1. Lists home
T313269 - Share reading lists - list-sharing-01@2x.png (1×896 px, 136 KB)
3. Shares a list
T313269 - Share reading lists - list-sharing-03@2x.png (1×896 px, 90 KB)
4. Share sheet
Share reading lists T313269 + T316822 - list-sharing-04@2x (1).png (1×896 px, 122 KB)
5. Sends message
Share reading lists T313269 + T316822 - list-sharing-05@2x (1).png (1×896 px, 112 KB)
6. Receives message
Share reading lists T313269 + T316822 - list-sharing-06@2x (1).png (1×896 px, 102 KB)
7. Taps link
Share reading lists T313269 + T316822 - list-sharing-07@2x.png (1×896 px, 94 KB)
8. Import dialog
Share reading lists T313269 + T316822 - list-sharing-08@2x (2).png (1×896 px, 132 KB)
9. Import successful
T313269 - Share reading lists - list-sharing-09@2x.png (1×896 px, 123 KB)
10. Reads list
T313269 - Share reading lists - list-sharing-10@2x.png (1×896 px, 88 KB)
  • 3. Shares a list: One list can be shared, e.g. with the Share icon in the app bar or by long pressing reading list in 1. Lists home
  • 4. Share sheet: Is device dependent
  • 5. Send message:
    • Is service dependent
    • Message contains text and a link (see 4.2.).
    • Keep in mind that the current copy: (Check out my reading list with the Wikipedia Android or iOS app: https://w.wiki/dj08730) is a placeholder and needs to be fine-tuned to be effective and work in multiple languages.
  • 6. Receives message: is device dependent (notification)
  • 7. Taps link: Opens directly in the Wikipedia app
  • 8. Import dialog: From here on, we have complete control over how it's displayed
4.1.2. The receiver does not have the app installed
1. Taps link
Share reading lists T313269 + T316822 - list-sharing-07@2x.png (1×896 px, 94 KB)
2. MediaWiki page
T313269 - Share reading lists - list-sharing-07-01@2x.png (1×896 px, 189 KB)
3. Google Play
T313269 - Share reading lists - list-sharing-07-02@2x.png (1×896 px, 160 KB)
or4. App Store
T313269 - Share reading lists - list-sharing-07-03@2x.png (1×896 px, 323 KB)
5. Opens app
reading-list-receiving-051.png (1×720 px, 144 KB)
6. Taps link
Share reading lists T313269 + T316822 - list-sharing-07@2x.png (1×896 px, 94 KB)
  • 1. Taps link: User taps link in the message
  • 2. MediaWiki page:
    • Uses a web page (e.g. the https://w.wiki/dj08730 short link leads to https://www.mediawiki.org/wiki/Wikimedia_Apps/ReadingListSharing)
    • The MediaWiki page’s exact content and formatting needs to be defined, yet
  • 5. Opens app:
    • We can detect if users come from a reading list import as the data is shared asynchronously from the Google Play Store
    • Once the data mentioned above is received, we will show a dialog that informs users how to open the received reading list.
    • Again: we don’t know the origin of where the reading list has been shared, so the only thing we can do is inform users about tapping the link in the original message. The Learn more (secondary CTA) points to an instructions section on the MediaWiki page (described in 2.)
  • 6. Taps link: After installing the app, the user needs to navigate back to the service, where the original message (with the link) has been received, and tap the link again
4.2. Export lists
1. Lists home
T313269 - Share reading lists - list-export-01@2x (1).png (1×896 px, 136 KB)
2. Exports multiple (JSON)
T313269 - Share reading lists - list-export-02@2x (1).png (1×896 px, 143 KB)
or3. Exports one list (JSON)
T313269 - Share reading lists - list-export-03@2x.png (1×896 px, 96 KB)
4. Direct export
image.png (1×896 px, 86 KB)
5. Views file (JSON)
T313269 - Share reading lists - list-export-05@2x.png (1×896 px, 74 KB)
  • 1. Lists home + 2. Exports multiple:
    • Multiple lists can be exported (and deleted)
  • 3. Export one list: One list can be exported, e.g. with the Export option in the overflow menu or by long pressing a reading list in 1. Lists home
  • 4. Direct export:
    • Once the export has been triggered in step 3, a system notification is displayed (similar to reading lists sync), and JSON files are stored directly on the device (without a share sheet)
    • In addition and very likely: a system notification is triggered that the file’s been stored

5. Design for landing page when someone shares a list:

Android:
Android.png (1×720 px, 110 KB)
Android Wide.png (1×1 px, 119 KB)
iOS:
iOS.png (1×720 px, 228 KB)

👉 View designs on Figma

  • Detect via user agent if the Android or iOS prompt is shown
  • If no user agent can be detected, both banners are shown
  • Constraint: We can’t show a preview of the list due to moderation/misuse reasons

Copy:

Title:
Shared reading list

Description:

This list has been created by a user on this site for sharing with somebody (probably you). This list has not been
moderated. And its contents do not reflect the editors of the site. 

Install the Wikipedia app
Tap the original link again to view the reading list

Call to action:
Get

Event Timeline

Updated the wireframes and descriptions per our discussion @JTannerWMF and moved to the 'Needs analytics' column.

scblr renamed this task from Produce updated wireframes based on sharing link instead of file to Share reading lists concept.Oct 20 2022, 10:20 AM
scblr updated the task description. (Show Details)
scblr added subscribers: OTichonova, cmadeo, Dbrant.

@cmadeo @OTichonova @JTannerWMF @Dbrant

Please review this newly added part of the task’s description. Thanks

5. Design for landing page when someone shares a list:

Android:
Android.png (1×720 px, 110 KB)
Android Wide.png (1×1 px, 119 KB)
iOS:
iOS.png (1×720 px, 228 KB)
  • Detect via user agent if the Android or iOS prompt is shown
  • If no user agent can be detected, both banners are shown
  • Constraint: We can’t show a preview of the list due to moderation/misuse reasons

Copy:

Title:
Shared reading list

Description:

This list has been created by a user on this site for sharing with somebody (probably you). This list has not been
moderated. And its contents do not reflect the editors of the site. 

Install the Wikipedia app
Tap the original link again to view the reading list

Call to action:
Get

scblr updated the task description. (Show Details)

The language of this needs to be updated to say install the latest version of the app otherwise it looks good

A couple of technical notes about the format of the URL that gets shared:

The URL looks like this: https://[lang].wikipedia.org/wiki/Special:ReadingLists?limport=[payload]

The limport parameter is a base64-encoded json object that looks like this:
eyJuYW1lIjoiRm9vIiwiZGVzY3JpcHRpb24iOiJCYXIiLCJsaXN0Ijp7ImVuIjpbNTk4NzQsMzE4ODMsMjQ4NjgsMTQzODFdLCJydSI6WzU5ODc0LDMxODgzLDI0ODY4LDE0MzgxXX19

..and when decoded, looks like this:

{
  "name":"Foo",
  "description":"Bar",
  "list":{
    "en":[59874,31883,24868,14381],
    "ru":[59874,31883,24868,14381]
  }
}
  • Note that the name and description fields are optional, and will not be sent in the initial iteration of this feature. They will need to be populated by the user upon receipt of the list, or populated with defaults.
  • Note that the contents of the list consist of pageIds (not page titles) to conserve space, and are grouped by the language code of the wiki on which the pageIds exist.

Here's an example import landing page, available on the beta cluster.