Hi @scblr

The multiple lists export/import is ready for design review :-)

Few things I need your help with:

• Verbiage for the Notification and the toast during single list export and multiple lists export
• Verbiage for when export has failed.
• Verbiage for toast after successful import
• Exporting lists
  • I have made provisions to export multiple lists, or single list on its own
  • Exported list(s) file will be name reading_lists_%s.json where %s is the timestamp. Naming them like this, allows us to keep multiple copies of different configurations.
  • Exported lists file gets stored under Downloads, in a folder named Wikipedia. Should we put the file directly under Downloads, to avoid any branding issues?
• Importing:
  • When some of the lists already exist, I check to see if the existing list with the same name, has all the articles as the imported list, and only update them with new articles, if any. For ex: If Lists A, B and C are imported and the user's lists already contains A, I only add new articles to it, and only create new lists B and C .
  • When all lists already exist, what is the verbiage to show?

APK: https://github.com/wikimedia/apps-android-wikipedia/pull/3620/checks

Hi @Sharvaniharan – here’s a first look at this from a design perspective. I’ll address your questions from T319345#8320947 a bit later in a separate comment. Thanks for the hard work on this!

1) Add Edit option to overflow menu:

2) Add empty checkboxes next to all reading list items when choosing 'Edit` (see 1)) or long-pressing and item and tapping Select:

3) Use file download icon here:

4) Add Delete (trash icon), Share (share icon) and `Select/Deselect all' (icon is used in Notifications) to the app bar in the 'Edit' state:

5) When an item is Selected, as in the image below – change label to Deselect

6) Make sure to align header and selected/deselected design with notifications:

• Remove selected label from app bar
• Use color_group_3

7) Selecting lists work unreliably – sometimes multiple taps/attempts are needed in order to make the interface respond. Check out this screen recording.

8) List thumbnails do not update in overview (even though there are articles in the list)

Closing the app completely and restarting it fixed it, please investigate.

@Sharvaniharan here you go

In T319345#8320947, @Sharvaniharan wrote:

Hi @scblr

The multiple lists export/import is ready for design review :-)

Few things I need your help with:

• Verbiage for the Notification and the toast during single list export and multiple lists export

• Single: Reading list exported
• Multiple: Reading lists exported
• Action: VIEW

• Verbiage for when export has failed.

• Single: Reading list export failed
• Multiple: Reading lists export failed

Q: What’s a possible reason for the export to fail? We might have to create an FAQ page with some infos.

• Verbiage for toast after successful import

• Single: Reading list imported
• Multiple: Reading lists imported
• Action: VIEW

• Exporting lists
  • I have made provisions to export multiple lists, or single list on its own

👍👍👍

• Exported list(s) file will be name reading_lists_%s.json where %s is the timestamp. Naming them like this, allows us to keep multiple copies of different configurations.

👍👍👍

• Exported lists file gets stored under Downloads, in a folder named Wikipedia. Should we put the file directly under Downloads, to avoid any branding issues?

Yes to this question, I think it’s better if it’s directly in the downloads folder and more expected behavior (like a web browser download).

• Importing:
  • When some of the lists already exist, I check to see if the existing list with the same name, has all the articles as the imported list, and only update them with new articles, if any.

This is great!

For ex: If Lists A, B and C are imported and the user's lists already contains A, I only add new articles to it, and only create new lists B and C .

Will/should it also remove the articles that are not in the newly imported list?

• When all lists already exist, what is the verbiage to show?

Dialog: A list named %listName` with the same articles already exists. Do you want to replace it with the one you’re importing?``
Primary actions: Replace
Secondary action: Keep both (name it`Copy of``
Teritary action: Cancel

Hi @scblr
I have made the changes. A few minor things to think:

5) When an item is Selected, as in the image below – change label to Deselect

Wondering if this should be Deselect or Unselect - Felt unselect suggests cancelling our previous action but will go with your gut feeling :-)

I need text for the message part of the notification as well. Thank you.

3. About having the view action in the toast, I feel like it doesn't bring much to the table:

• While exporting multiple lists, view will have to take them to the list-of-lists screen, which is what the user will be on
• While we export a single list, we are also, already in the list view.

Please let me know if the button is still needed.

8. List thumbnails do not update in overview (even though there are articles in the list)

I understand why this is happening, but finding the best way to fix this still.

For ex: If Lists A, B and C are imported and the user's lists already contains A, I only add new articles to it, and only create new lists B and C .

Will/should it also remove the articles that are not in the newly imported list?

I feel the user will not expect this while importing a list. If anything we can leave the list untouched, or show them a dialog suggesting that we found a same name list, and we will only add more articles to it if they click yes on the dialog. I havent made this change yet, but may be we can have a quick call to discuss this?

• When all lists already exist, what is the verbiage to show?

Dialog: A list named %listName` with the same articles already exists. Do you want to replace it with the one you’re importing?``
Primary actions: Replace
Secondary action: Keep both (name it`Copy of``
Teritary action: Cancel

Let us discuss this as well, as it is related to above, also not sure about naming it Copy of, as it might not be..

The delete lists and export lists are both now available in the same apk. I have updated the link here on T320999 as well.

1) Hide 0 when nothing is selected as it can lead to confusion. Show the number once a list is selected.

2) The main action is export. Move the Check/Uncheck all items icon to the leftmost

3)

When an item is Selected, as in the image below – change the label to Deselect

Wondering if this should be Deselect or Unselect - Felt unselect suggests cancelling our previous action but will go with your gut feeling :-)

Great input – let’s go with unselect 👍

4) About the view action:

3. About having the view action in the toast, I feel like it doesn't bring much to the table:

• While exporting multiple lists, view will have to take them to the list-of-lists screen, which is what the user will be on
• While we export a single list, we are also, already in the list view.

Please let me know if the button is still needed.

View in the snackbar should take users to the place where the list has been exported (Files → Downloads). Similar to the action when tapping the notification. I’m wondering – is there a way to detect if Do not disturb is enabled on the device?

• If DND is on: Show the snackbar
• If DND is off: Don’t show the snackbar

That way we’d reduce the redundancy of communication when exporting lists. We could use the exact same messaging for both.

5)

I need text for the message part of the notification as well. Thank you.

Title: Reading list(s) exported
Description: %number Reading list(s) have been exported as 'reading_lists export.ison' to your downloads folder.

Please make sure to use lowercase letters for the word “exported” (currently, it reads “Exported”). That is also the case in the current Snackbar copy.

6) Tapping select after a long press should select a list:

Video explanation:

https://www.dropbox.com/s/f40l2id4k7sydry/screen-20221103-114111.mp4?dl=0

7) Re: importing → how about keeping it very simple?

• If the list exists, show this dialog:

Dialog: A list named %listName` already exists. Do you want to replace it?``
Primary actions: Replace
Secondary action: Keep both lists (name it %listName %dateTime)
Tertiary action: Skip

• When importing multiple lists that exist, we should show the dialog for every list item – with an Apply to all option
• If the list does not exist, create it.

The thing I fear with the approach you suggested (add items but not remove items when the list exists) is that a list could contain unwanted/outdated articles. A straightforward question (Replace? Keep both? Cancel). But yeah, we can also hop on a call to discuss.

8) Question when exporting multiple lists: will there only be 1 json file that can contain multiple lists? So 1 json file can contain 1 list or multiple lists, right? We should discuss the filename as well, I suggest the following:

• If 1 list is exported, use the list name as the filename, e.g. %listName (Wikipedia reading list)
• If multiple lists are exported, use: Wikipedia reading lists (%listName1 and more)

9) Thumbnail updates:

List thumbnails do not update in overview (even though there are articles in the list)
I understand why this is happening, but finding the best way to fix this still.

Ok – thanks for investigating!

Hi @scblr

I fixed the above issues. Few things that need your attention:

2) The main action is export. Move the Check/Uncheck all items icon to the leftmost

I see that you have designed it differently in figma, and I like the figma update better than this solution, so let us discuss.

4) About the view action:
View in the snackbar should take users to the place where the list has been exported (Files → Downloads). Similar to the action when tapping the notification. I’m wondering – is there a way to detect if Do not disturb is enabled on the device?

• If DND is on: Show the snackbar
• If DND is off: Don’t show the snackbar

I have made this toast update with action button, but felt that trying to detect their dnd would be too much of a lift to show a feedback toast, hope that is ok.

7) Re: importing → how about keeping it very simple?

• If the list exists, show this dialog:

Dialog: A list named %listName` already exists. Do you want to replace it?``
Primary actions: Replace
Secondary action: Keep both lists (name it %listName %dateTime)
Tertiary action: Skip

• When importing multiple lists that exist, we should show the dialog for every list item – with an Apply to all option
• If the list does not exist, create it.

I have updated this change, but need some design as to how to show the Apply to all option

Lastly, I saw the changes on Figma, but they look a bit different from what we have discussed here, so will wait till the figma designs are final and complete, and I will start work on that as soon as you confirm.

Hi @scblr
I have made the changes according. to the new figma designs.

I feel showing a dialog for choice of resolving conflict for every conflicting list is not optimal.
Alert Dialog in android is an asynchronous widget. So, while looping, I will have to put in code which goes against the design principles of a dialog, in order to make it synchronous and wait for their choice. so, for now, I have updated the build to show it only once, before starting the imports, when there are conflicting lists, and remember that choice. I also tried to change the message text to reflect that. Please take a look and let me know if it is ok.

Also, currently when we sync reading lists or importing during shared reading lists, if we find a list with the same name, we just merge the contents - as I had built it initially. So I was also wondering if we should keep it consistent and leave it that way?
let me know your thoughts and we can make a final change. Thank you for the discussion and back and forth about it 😅

Best,
Sharvani

I’m moving this to blocked and waiting as we’re going to build the “Share” feature first and possibly learn things that’ll affect “Export”.

@Sharvaniharan, this looks good! Something to clarify before moving to the next column:

a) Tapping VIEW after exporting leads to Downloads on my device:

b) Tapping Import list in the overflow menu leads to the main folder on my device:

And the main folder view in b) is somehow living in the Wikipedia app:

• There’s no way to get back to the Wikipedia app from this view (except for tapping a file).
• We also don’t provide any instructions on what to do here. E.g. What type of file can be imported? Currently, I can click on an image (jpg) in the file picker, and the interface does not provide any info on what to do).
• The system’s back button does not work (sometimes the app crashes, and sometimes it takes me back to the app’s home screen), see this video.

So, here are my questions:

1) What can we do to improve the current file picker experience? Minimum UX requirements:

• System back button should work in c) to get back to the app
• When tapping a file that is not supported (e.g. jpg) and going back to the app – a dialog should appear that this file type is not supported, and only json is supported.

2) When users tap import, can we take them to the same folder as when exporting to the device (likely, Downloads)?

Hi @scblr
Thank you for the review! :-)

Please download the latest version and check the improvements I made. Few things to discuss:

4) About the view action:

View in the snackbar should take users to the place where the list has been exported (Files → Downloads).

We had decided to send it to Downloads Robin. :-) But its a minor change, please let me know where it should point to.

2. Regarding the filePicker for the import file. I made a few changes which make the ux much better
   • The file picker now only shows json file, and if you accidentally pick a wrong kind of json file, the message "Reading lists import failed" is shown. This is a generic message I have for all kinds of failure. However, if you want a more specific message for this, I can update the text. Please let me know.
3. The back button now brings you back into the reading lists screen where we started.

However what I was not able to find a way to do was to take the user directly to Downloads folder rather than Recents, while picking a file. In theory I feel this should have been possible, but the way we mention the target path is different when creating the file v/s accessing it, so will discuss with other engineers and let you know.

Thanks @Sharvaniharan 👍

View in the snackbar should take users to the place where the list has been exported (Files → Downloads).

We had decided to send it to Downloads Robin. :-) But its a minor change, please let me know where it should point to.

Exactly, that’s why I mentioned this in the last comment ( T319345#8446697 ):

«When users tap import, can we take them to the same folder as when exporting to the device (likely, Downloads)?

The problem was that it took users to different places (Downloads vs Files main folder). But never mind, I see that you are addressing it further down 👍.

2. Regarding the filePicker for the import file. I made a few changes which make the ux much better
   • The file picker now only shows json file, and if you accidentally pick a wrong kind of json file, the message "Reading lists import failed" is shown. This is a generic message I have for all kinds of failure. However, if you want a more specific message for this, I can update the text. Please let me know.

What do you mean exactly by “a wrong kind of JSON file” ?

• The back button now brings you back into the reading lists screen where we started.

Sounds good!

However what I was not able to find a way to do was to take the user directly to Downloads folder rather than Recents, while picking a file. In theory I feel this should have been possible, but the way we mention the target path is different when creating the file v/s accessing it, so will discuss with other engineers and let you know.

Ok, thanks for following up. If not feasible – we’ll leave it like it is.

Hi @scblr

Thank you for reviewing :-)

I am not able to reproduce the view action button click Robin... It is always taking me to the Downloads folder [Also reflects same in code]. Could you please verify this again..

However, I see this problem happening when we open a filePicker to pick a json for import - That one is acting device-specific and sometimes takes you to Recents folder, and Dmitry and I have discussed this and we will try to resolve when he gets a chance to code review this code.

About the json, I just meant that if they happen to have json files on their device that are not our's [ very unlikely], in that edge case we can show a toast that the wrong kind of json was found. Currently, if that happens I just show a very generic message, but I can show a more specific one if you feel its needed.

Thank you for the discussions... :-)

Thanks for clarifying @Sharvaniharan. Let me know what comes out of this:

However, I see this problem happening when we open a filePicker to pick a json for import - That one is acting device-specific and sometimes takes you to Recents folder, and Dmitry and I have discussed this and we will try to resolve when he gets a chance to code review this code.

Other than that, looks good to me now.

Thank you @scblr .
Since this is a lower priority issue and Dmitry and I will discuss this more during Code review, I will just move these two tasks to Code review column. Please let me know if that sounds good. Thank you.

Great @Sharvaniharan 👍

Hi @scblr

A couple things that came up in code review:

1. When users select many lists, and "Saved" [Default] list happens to be one of them: It is okay for exporting, but if they press delete, then in the background, we delete all the selected lists other than the default list. In this case, could we please show a toast message so it is clear to them? If yes, could I get copy for that please?

2. When we select lists from the long press menu, we have named the option as "Select", but on the overflow menu, we have named it "Edit". Can we please consolidate and call it "Select" at both places?

Thank you.

Thanks @Sharvaniharan.

1. When users select many lists, and "Saved" [Default] list happens to be one of them: It is okay for exporting, but if they press delete, then in the background, we delete all the selected lists other than the default list. In this case, could we please show a toast message so it is clear to them? If yes, could I get copy for that please?

Snackbar text:

a) Multiple lists + default list selected for deletion:

Lists deleted. The default list (%nameOfTheDefaultList) can’t be deleted.

Action: Undo

b) One list + default list selected for deletion:

%nameOfTheSelectedList deleted. The default list (%nameOfTheDefaultList) can’t be deleted.

Action: Undo

c) Default list selected for deletion:

The default list (%nameOfTheDefaultList) can’t be deleted.

(No snackbar action)

2. When we select lists from the long press menu, we have named the option as "Select", but on the overflow menu, we have named it "Edit". Can we please consolidate and call it "Select" at both places?

Sounds good to me.

Per @JTannerWMF ’s request in yesterday’s planning meeting:

I checked if 'Share' and 'Export' work well together, and I can confirm with a Yes 👍

Minor thing @Sharvaniharan:

I realized that we’re not using an 'indeterminate' state for the 'select/deselect all' button in the app bar:

{F36803225}

Can you use this icon for that case? 👇

Thanks!

Hi @scblr
What should happen when you click on it? should it turn to check all or uncheck all?
Thank you :)

Have made changes @scblr . Please check it out on latest alpha.

Hi @scblr

Taking the liberty to move this to Merged and waiting so we can get this on beta as the tweak was minor and is fixed now :-). Please feel free to let me know if anything needs to be changed. We can make the tweak and re-release.

Thank you

Works for me on 2.7.50429-r-2023-02-13

This looks good, two notes for the future:

When choosing "saved" where it has 10 articles the options are:

• Save all for offline
• Remove all from offline
• Export list
• Select

For my list is DC

• Edit/Name
• Save all for Offline
• Remove all from offline
• Delete
• Export list
• Select

Its disorienting to have delete as a new option in the middle of it. It should either be at the top under Edit/Name or at the bottom

Additionally the toast to indicate the list was imported feels a little too subtle, but we can get feedback on users for this one.