User story
As a user of the reading list feature I want to be able to easily manage, organize and personalize my reading lists
User types
- New user (no saved articles)
- Existing user with out saved articles
- Existing user with saved articles on one device
- Existing user with saved articles on multiple devices
- Existing user with saved articles on multiple devices on multiple platforms
Why are we doing this
Reading list management allows users to personalize and easily identify their reading lists through customizable titles, descriptions and auto generated images based on article lead images.
Additionally, users can utilize management tools to search within lists, sort their lists and apply bulk actions to articles within a list (delete, move).
Design
Suggested features
- List title (char limit?)
- List description (char limit?)
- Image / thumbnail
- Number of articles
- Search within a list
- Sort list (alphabetically, by date added, by date last updated)
- Apply bulk actions (delete, move to a different list)
User flows
New users / users without saved articles | Existing user: Non-logged in user with saved articles |
InVision | InVision |
Prototype + Mocks
https://wikimedia.invisionapp.com/share/AUE8AFIVZ#/261342942_01_Segmented
Sample mocks and Zeplin links below, please see Zeplin or the InVision link above for the full flow
Saved tab | Multi-select on All saved view | Read lists view | Individual reading list view | Edit Reading list | Create reading list | Article saved | Article added to reading list |
Zeplin: https://zpl.io/V1y6qYm | Zeplin: https://zpl.io/VQ0pYAn | Zeplin: https://zpl.io/aRMDYDe | Zeplin: https://zpl.io/aXYE4kE | Zeplin: https://zpl.io/VxmDl7X | Zeplin: https://zpl.io/aNwGoeQ | Zeplin: https://zpl.io/adxWrwl | Zeplin: https://zpl.io/bL4pKn7 |
Design details
Saved article presentation
Reading list tags
Saved articles in list view (both in the 'All saved articles' view and within an individual reading list) utilize small 'tags' to denote which reading lists they are sorted into. On the 'All saved articles' view, there should be a 'tag' for all reading lists except for the 'default' reading list. On the individual reading list view, tags should only be presented for lists that are not the current open list or the 'default' reading list. Tapping on a tag will open the associated reading list. Reading list names may need to be shortened using ellipses based on character length. If there are more lists than can be presented in the list view, a tag with the number of lists that aren't presented on the list item should be shown (eg. if there are 5 lists that an article is on in total, but only 3 can be presented as tags then a tag with +2 should be shown). Tapping on this tag will open an action sheet with the remaining lists.
Update available indicator
If there is an update available for an individual article a small green dot should appear next to the article title.
Reading list presentation
Default list
The default list is the only list that cannot be deleted or renamed, therefore when bulk editing for reading lists is active, a special note warning users that their default list cannot be deleted should appear. If a user selects the default list on its own in the bulk editing view the 'delete' label should appear disabled. If the user selects multiple articles and the default list, upon tapping on 'delete' a warning message should appear explaining that all of the reading lists except for the default list will be deleted.
Update available indicator
If there are updates to articles within a list available, this is indicated to the user with a text label on the reading list list view and with a corresponding CTA button on the individual reading list view.
Triggering reading list syncing/updating
Users can manually trigger reading list syncing by pulling down to refresh within a specific reading list. Additionally users can sync/update multiple reading lists by tapping on the 'Edit' button on the Reading Lists section and multi-selecting reading lists.
In future versions user will also be able to trigger reading list syncing by tapping on the CTA to 'Update N articles'