Page MenuHomePhabricator

Create low fi mocks to get input from users
Closed, ResolvedPublic

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 create low-fi mockups exploring the possibilities so that we can get input from our users and include the pros and cons of each approach.

Approaches to include

  • Custom format that allows users to click and easily import without a preview of the list
  • File that allows a preview of the list but would require users to open the app and import it
  • 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 file format for this has to be defined yet (e.g. .wikilist)

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. Lists must be files that are shared with other apps.
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)
2. Shares multiple
T313269 - Share reading lists - list-sharing-02@2x (1).png (1×896 px, 139 KB)
or3. Shares one list
T313269 - Share reading lists - list-sharing-03@2x.png (1×896 px, 90 KB)
4. Share sheet
T313269 - Share reading lists - list-sharing-04@2x.png (1×896 px, 125 KB)
5. Sends message
T313269 - Share reading lists - list-sharing-05@2x.png (1×896 px, 120 KB)
6. Receives message
T313269 - Share reading lists - list-sharing-06@2x.png (1×896 px, 101 KB)
7. Taps attachment
T313269 - Share reading lists - list-sharing-07@2x.png (1×896 px, 102 KB)
8. Import dialog
T313269 - Share reading lists - list-sharing-08@2x.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)
  • 1. Lists home + 2. Shares multiple:
    • Multiple lists can be shared, e.g. via overflow menu
  • 3. Shares one 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, a link (see 4.2.) and an attachment (.wikilist). It needs to be localized per language.
    • Keep in mind that the current copy: (Check out my reading list with the Wikipedia Android or iOS app: mediawiki.org/WikipediaApps) 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 attachment:
    • Is service dependent
    • Attachments open 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
🅰️/🅱️ Testing
1. Taps link
T313269 - Share reading lists - list-sharing-07@2x.png (1×896 px, 102 KB)
🅰️ 2. Intermediate 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)
🅱️ 4. App Store
T313269 - Share reading lists - list-sharing-07-03@2x.png (1×896 px, 323 KB)
5. Taps attachment
T313269 - Share reading lists - list-sharing-07@2x.png (1×896 px, 102 KB)
  • 1. Taps link: User taps link in the message
  • 🅰️/🅱️ Testing: We are going to perform to find out which of the variants performs better (analytics performance criteria yet to be defined by @SNowick_WMF @JTannerWMF)
    • Variant 🅰️
      • Uses an intermediate web page (e.g. mediawiki.org/wiki/Wikimedia_Apps)
      • The site’s exact content is still left to be defined
    • Variant 🅱️
      • Links directly to Google Play/App Store listing (we do our best for device detection, per @Dmantena’s suggestion in T313740#8138291)
  • 5. Taps attachment:
    • For both variants A and B:
      • After installing the app, the user needs to navigate back to the service, where the original message (with the attachment) has been received, and tap the attachment
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
T313269 - Share reading lists - list-export-02@2x (1).png (1×896 px, 143 KB)
or3. Exports one list
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
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, e.g. via overflow menu
  • 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 CSV 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

Event Timeline

scblr subscribed.

Added more details @JTannerWMF to the task’s description, assigned you, and moved it to “Ready for PM signoff”. Thanks for reviewing it.

Thanks for this great breakdown of options and helpful wireframes, @scblr! I can definitely see pluses and minuses for both file format approaches, but do think that the overall flow looks good!

The generic (.csv) example is interesting because I imagine that it might be helpful for sharing a list with folks who don't/can't use either of the apps -- I'm a bit curious if we want a 'download list' option that exports to a .csv file as a share menu option even if we go with a custom file type (maybe this is too much of an ask though) but I could potentially see some utility to exporting structure files of articles URLs.

I have a slight preference for the custom file type due to the differences between how common the notion of 'files' are on iOS and Android. I'm a bit worried that iOS users will have a harder time understanding and working through the downloading and accessing of a generic file on their device. While the 'files' app does help with this (and more research would be necessary, perhaps some testing too!) accessing files is much less common for apps on iOS than on Android.

So excited to see this coming together! Some notes below:

🅱️ VARIANT B: Generic file format (e.g. .csv)

Out of curiosity, what's the intent behind CSV over say, JSON? Is it just here for illustrative purposes as a possible generic file format, or are you all exploring CSV as a potential data format to use? On the iOS side, regardless of what file extension we choose, it's preferable if the actual underlying data in the file is JSON.

🅰️ VARIANT A: Wikipedia file format (e.g. .wikipedia)

I haven't yet researched it on the iOS side, but I have a higher degree of confidence that a custom file extension (e.g. .wikilist) will be more straightforward to associate with our mobile client apps than a generic extension (e.g. .csv).

Contains a link to MediaWiki, in case the recipient does not have the app installed (see chapter 2. App not installed)

Apologies as this gently breaks the no external services/landing pages condition, but I'd recommend that instead of directing the user to the mediawiki.org/WikipediaApps page (https://phab.wmfusercontent.org/file/data/ge6xnu5uwdicgxs7e3vf/PHID-FILE-crjjjrbrpqbs7kajh6jl/image.png) first, we direct them to an intermediate page that automatically and silently a) does its best to detect if their device is Android or iOS based b) directs them to the device specific App Store based on that if possible or c) directs them to that originally proposed MediaWiki page if not possible. Much less friction to get them to exactly what they want (the app on their platform) this way.

Definitely agree with @Dmantena about JSON instead of CSV, as well as a custom file extension (.wikilist) over a generic extension.

The question of what kind of landing page to use is a tricky one. Having a static page expressly for this purpose would be extremely irregular (i.e. "everything must be a wiki page"), and would be a tough sell.
However, do we know whether it's possible to get the user-agent from within a wiki page itself? If so, we might be able to create a template that displays different links conditionally based on user-agent.

This is exciting stuff, thanks for this writeup @scblr !

As a Wikipedia Android app user and student in Morocco, I want to export my reading lists, so that I can use it at the Mohammed V University school library

@Dbrant @Dmantena I think for the user story of someone that wants to export their reading lists, but not necessarily share it to another Android/iOS device, .csv or something similar is preferable to .json. If the user wanted to export a list of 1000 articles to use on a library computer - I feel like .csv would allow them to quickly visualize the articles & manipulate the list further. Then again, they could also probably find a way to import .json into a spreadsheet if they're motivated enough.

Agreed that the custom file extension would be a smoother flow for the users sharing with other Android/iOS devices, and I can see how .json would be easier for us engineers to import. I'm not familiar yet with how to share and traverse .csv files on iOS. So tacking onto @cmadeo 's thoughts, perhaps we should treat this as two different (but similar) features - one for sharing/importing with other Android/iOS devices, and another just for exporting.

One other piece of feedback - I could see the average user getting a bit confused on which tappable area does what (MediaWiki link vs file) in the text message. I know this says copy is TBD, but I just wanted to point out that we should pay close attention to how we word that shared text to prevent confusion.

I think for the user story of someone that wants to export their reading lists, but not necessarily share it to another Android/iOS device, .csv or something similar is preferable to .json. If the user wanted to export a list of 1000 articles to use on a library computer - I feel like .csv would allow them to quickly visualize the articles & manipulate the list further. Then again, they could also probably find a way to import .json into a spreadsheet if they're motivated enough.

Definitely agree with @Tsevener on preferring .csv for a 'data download' for use outside of the apps.

It is true that csv is more human-readable than json (although not too much), it comes at the cost of not being nearly as extensible.
A fully structured format like json would let us support further use cases like:

  • Exporting more than one list at a time (in a single file)
  • Backing-up the user's entire collection of reading lists
  • Storing additional metadata, as well as future data, while remaining compatible across different versions of the app.

@scblr Thank you for putting this together!
The wireframe designs look good to me!
+1 to Variant A being more straightforward for iOS users to avoid downloading files separately.
+1 to @Tsevener comment to

treat this as two different (but similar) features - one for sharing/importing with other Android/iOS devices, and another just for exporting.

FYI, it's looking like iOS won't be able to pass through a simple App Store url parameter and detect that upon the first app launch, so keep that mind as you flesh out the Android experience. We likely won't be able to know the state when someone downloaded the app from some shared text but hasn't tapped the .wikipedia file yet.

Hi @scblr
Per discussion on today's apps stand up:
Maybe we can use the advantage of showing a preview from the MediaWiki page URL, which can create more attractive preview content for the users to open the link to download the apps.
We can first contain the MediaWiki page URL so that the messaging app will try to capture the URL preview instead of the .wikipedia extension.

Another thought:
We can include JavaScript in the wiki page to capture the user agent and introduce the corresponding app store URL for the user. Or another extreme method: create a MediaWiki extension for the wiki page.

Moving this back to RObin's column for him to adjust some flows

I adjusted the flows + moving this to “Needs analytics”.

This is blocked on T316048. When we know what the flow will be we can proceed with analytics review or make adjustments to the wireframes