This task is about adding the user's experience of the suggested edits module itself. This task may be too large, and we should make sub-tasks if necessary.
**Note on platforms**: all these specifications will need to apply to both desktop and mobile. During the time that explicit mockups for mobile are not available, engineers should use their judgment to build mobile versions. Those initial builds can be modified later as the mobile designs are finalized.
* **The module consists of these elements:**
** Difficulty filter
** Topic filter (ticketed separately)
** List of tasks
** Task feed interface
** Task explanation
* **Difficulty filter** ([[ https://wikimedia.invisionapp.com/share/FUTVMSLV24X#/screens/383484895 | current mockup ]])
** This button opens a modal with a series of checkboxes listing each task type available in the wiki, grouped by level of difficulty.
** These checkboxes combine like “OR” across the levels of difficulty.
** By default, all the “Easy” task types are checked on.
** The user’s choices are sticky from time to time as they open and close the filter.
** An additional option, “Create a new article”, will exist under the “Hard” difficulty, and will have a greyed-out checkbox, along with text that contains a link to a help page about writing a new article.
** A counter along the bottom that says how many articles fit the filter settings. This should update dynamically as the user alters the filters. When the topic overlay also exists, this number should include any topic filter settings.
** If the user unchecks all the boxes, the "Done" button is disabled, and a warning message is displayed at the top of the overlay. If they close the dialog, it is like "Cancel", and their settings are unchanged from when they opened it. [[ https://wikimedia.invisionapp.com/share/FUTVMSLV24X#/screens/383484896 | Current mockup ]].
** The button to open the filter says the difficulty level of the chosen tasks. If the user selects tasks from multiple difficulty levels, the difficulty levels are written in a comma separated sentence, and then cut off with an ellipses.
* **Topic filter**
** This module will also contain a topic filter, ticketed separately.
* **Other filters**
** No protected articles should be shown, at any level of protection.
** No articles should be shown that are nominated for deletion. Specific templates to be collected from ambassadors.
* **List of tasks**
** Recommendations are drawn from articles that are tagged with a maintenance template/category. [[ https://docs.google.com/spreadsheets/d/1Zgat_KdCSqvAIaP3A8RB7OP9yEEveDuqbo3kfSCFnAc/edit#gid=213535649 | This worksheet contains the listing ]]. Here are some notes:
*** For each wiki, a certain set of specific templates/categories are specified, and they are assigned to a higher level task type, such as “Copy editing” or “Adding links”.
*** Some rows have a maintenance template and category, and some have just a template or just a category.
*** The list also contains an approximate count of how many articles should fall into each maintenance/category, which will hopefully be useful for checking to make sure the right maintenance/category is actually being used.
*** The following list is the mapping of task types to difficulty levels.
**** Links = Easy
**** Copy edit = Easy
**** Update = Medium
**** References = Medium
**** Expand = Hard
*** If an article has multiple maintenance categories/templates, it should only be counted once in the list showed to the user. The list from the bullet above should also be used to show the order of preference of how the article is counted. For instance:
**** If an article has both the "Links" and "Copy edit" templates, and the user has selected the "Links" and "Copy edit" checkboxes, the user should see the article in the list once, as a "Links" article. But if they have only selected the "Copy edit" checkboxes, the user should see the article in the list once, as a "Copy edit" article.
**** If an article has both the "Copy edit" and "Update" templates, and the user has selected the "Copy edit" and "Update" checkboxes, the user should see the article in the list once, as a "Copy edit" article. But if they have only selected the "Links" and "Update" checkboxes, the user should see the article in the list once, as an "Update" article.
** Filtering by difficulty
*** The recommendations should be filtered to articles that have any of the maintenance templates/categories that correspond to the task types specified in the difficulty filter.
*** When presented to the user, the articles should be sorted randomly, to decrease how often different users sees the same articles.
* **Task feed interface** ([[ https://wikimedia.invisionapp.com/share/FUTVMSLV24X#/screens/383491464 | current mockup ]])
** The tasks are shown to the user one at a time as a card that includes:
*** Image from the article (or placeholder image)
*** Article title
*** Beginning of the text
*** Number of pageviews in past month
** Above the card is shown how many tasks there are with the current filter settings and which number task the user is looking at, e.g. “4 of 345 matching suggestions”.
** The user can click arrows to pass back and forth across the list. On the first card, the left arrow is grayed out and not clickable.
** Note: the "X" in the upper right of the cards shown in the mockups is not required for the first version. It is ticketed separately in T232899.
** When the user gets to the last card in the list, they can click the right arrow one more time, and then they see an area that says something like, “Change the filter settings to find more tasks.” along with a graphic. [[ https://wikimedia.invisionapp.com/share/FUTVMSLV24X#/screens/383491466 | Mockup here ]].
** If the user's filter settings yield no tasks, they should see an area that says something like, "Change the filter settings to find more tasks." along with a graphic. [[ https://wikimedia.invisionapp.com/share/FUTVMSLV24X#/screens/383491467 | Mockup here ]].
** When the user clicks a card, they go to the article from the card.
* **Task explanation** ([[ https://wikimedia.invisionapp.com/share/FUTVMSLV24X#/screens/383491465 | current mockup ]])
** Below the task feed interface is the area saying which task type is needed on the suggested article.
** Each task type will have some copy written to explain what that task is.
** When the user hovers over the "i" icon, a popup opens to explain the task type further. This may include links.
Below is a list of non-engineering items that need to be complete before this task is complete, but that do not block engineering:
[v] Lay out the exact templates and categories from which we'll source tasks in Arabic, Czech, and Korean Wikipedias, along with their task type and the difficulty levels of each task type.
[] Add mobile designs.
[] Collect deletion templates
[] Finalize copy
[v] Decide hierarchy of which task types to prefer if an article has more than one maintenance template/category.