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 ↗)
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 | 3. Shares a list | 4. Share sheet | 5. Sends message | 6. Receives message | 7. Taps link | 8. Import dialog | 9. Import successful | 10. Reads list |
- 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 | 2. MediaWiki page | 3. Google Play | or | 4. App Store | 5. Opens app | 6. Taps link |
- 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 | 2. Exports multiple (JSON) | or | 3. Exports one list (JSON) | 4. Direct export | 5. Views file (JSON) |
- 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: | ||
iOS: | ↑ | |
👉 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