Spreadsheet
https://docs.google.com/spreadsheets/d/1ycWnt2IuZSgC2zNxGXjaFvqxkaC0M2eO1ka_Kv9BN40/edit?usp=sharing
Interaction updates
Updates/bugs with interactions in the Reading list feature
| Screen | Steps to reproduce | Expected behavior | Actual behavior | Proposed solution | Related links |
|---|---|---|---|---|---|
| Create a new list | Type a reading list name in the reading list name field then hit the return key | Cursor is moved to the Description field | A second row is added below the title | Change the 'return' key to a blue 'next' key, tapping on next moves to the following text field. The key will turn to a 'done' key after the description has been entered, tapping on the 'done' key creates a new reading list | |
| Create a new list | Type a reading list name in the reading list name field | An 'x' (clear field) button appears when the text field is active. | There is no clear field button when the text field is active | Add a clear field button to the text field when it is active, tapping on this button clears entered text | |
| Saved articles tab | Tap on the sort link | The current sort is shown as selected with a check mark | All options are shown without a check mark | Add a checkmark after the selected sort | https://zpl.io/aXKJBkj |
| Saved articles tab | Save 6+ articles then scroll to down the list of saved articles | Scrolling down the list of saved articles hides the Search field and Sort link, scrolling back to the top of the list reveals them. | Search field persists | Utilize a similar 'show/hide' behavior with the search bar in the saved articles tab as on the Explore feed | https://zpl.io/aBwGMqQ and https://zpl.io/blrx5Ze |
| Saved articles tab | Save an article to a reading list, then tap on the reading list tag | Opens the associated list | Opens the article Tapping on the tab should open the associated list, tapping elsewhere in the cell opens the article | https://phabricator.wikimedia.org/T177546 | |
| Bulk editing | Tap on the edit link on the Saved articles or Reading lists view | Bulk editing toolbar is visible | Bulk editing toolbar is only visible after a selection has been made Make the toolbar visible when the bulk editing view is activated, which should help users to have a better understanding of what actions they can take | https://zpl.io/bJQxy73 | |
| Article view | Tap on the 'Save' button in the article toolbar | Article is saved and a hint to add the article to a reading list is shown at the bottom of the screen | Article is saved | Show the hint that is used on the Explore feed to add the article to a reading list on the article view | https://zpl.io/V4EMWeN |
| 3D Peek | Peek an article and tap on Save for later | Peek closes, article is saved and hint to add the article to a reading list is shown at the bottom of the screen | Peek closes, article is saved | Show the hint that is used on the Explore feed to add the article to a reading list on the screen that is shown after the peek is closed | https://zpl.io/V4EMWeN |
| Table view | Swipe left on an article cell, then tap on the 'save' icon | Article is saved and a hint to add the article to a reading list is shown at the bottom of the screen | Article is saved | Show the hint that is used on the Explore feed to add the article to a reading list on the table view | https://zpl.io/V4EMWeN |
Visual tweaks
Visual changes and updates for the Reading list feature
| Screen | Proposed update | Related link |
|---|---|---|
| Create a new list | The design as currently implemented uses a slightly compacted version of the login flow form. The proposal is to utilize the same layout as the login form. Left and right margins should be 15px, form fields should include relevant hint text | https://zpl.io/VQM7wvn |
| Saved articles view | Saved articles' and 'Reading lists' should be the same font size as article titles (16pt) | https://zpl.io/aBwGMqQ |
| Saved articles view | HR should appear under the 'Saved articles' and 'Reading lists' selector (.5pt, #d3d6da) | https://zpl.io/aBwGMqQ |
| Saved articles view | Edit and Sort links should use the same font size (16pt) and color (#36c). Both links should be right aligned with a 20pt right margin | https://zpl.io/aBwGMqQ |
| Bulk editing | In the bulk editing view, selection indicators should utilize an unfilled circle for the unselected state and a filled blue circle with a checkmark for the selected state. Selected cells should use a background fill of #eaf3ff | https://zpl.io/bJQxy73 |
| Bulk editing | The bulk editing actions toolbar should be the same height as the app tool bar (currently it appears to be a pixel or two taller) | https://zpl.io/bJQxy73 |
| Bulk editing | The bulk editing actions toolbar should have a fill color of #f8f9fa | https://zpl.io/bJQxy73 |
| Add to list | The padding above the title should be 15pt | https://zpl.io/VDpwyAJ |
| Add to list | A HR should appear between reading list cells. The HR is left aligned with 55pt of right padding. The HR is .5pt thick and #d3d6da | https://zpl.io/VDpwyAJ |
| Add to list | Include thumbnails for lists that have one or more articles with a featured image | https://zpl.io/VDpwyAJ |
| Add to list | Include alphabetical list headers | https://zpl.io/VDpwyAJ |
| Add to list | Remove subtitle from all lists except for the default list | https://zpl.io/VDpwyAJ |
| Reading lists view | A HR should appear between reading list cells. The HR is left aligned with 55pt of right padding. The HR is .5pt thick and #d3d6da | https://zpl.io/2y10nqJ |
| Reading lists view | Include the number of articles in the list above the list name | https://zpl.io/2y10nqJ |
| Reading lists view | Include thumbnails for lists that have one or more articles with a featured image | https://zpl.io/2y10nqJ |
