Mobile design/Watchlist view
This page is obsolete. It is being retained for archival purposes. It may document extensions or features that are obsolete and/or no longer supported. Do not rely on any information on this page. |
This page is currently a draft.
|
This document describes the mobile watchlist feature for logged in users.
Rationale edit
Watchlists are one of the most heavily used and important features for editors on Wikipedia; patrolling changes to watched articles is a vital activity for maintaining the quality of the content on Wikimedia projects, as well as engaging users in contributory actions. However, the default desktop watchlist view is extremely crowded with information, contains redundant functionality, and is not mobile-friendly.
By providing a mobile-friendly watchlist view, we will allow editors to easily keep track of changes to things they care about on Wikipedia, which we hypothesize will indirectly boost editor engagement and encourage more activity in experienced editors.
User research edit
- Summary
Preliminary qualitative research suggests that experienced editors want a mobile watchlist that replicates desktop functionality, makes use of user-created watchlist enhancement tools, and allows them to act on changes that need attention.
- Specific features requests
- Navigation popup-like features: short, condensed meta-information upon hover/touch. Primarily useful as an informal assessment of the user who is making the change and whether they are a productive or non-productive contributor.
- Diff view to see the actual change.
- Bookmarking/saving articles as a reminder to read and/or edit.
- An undo or revert button.
- Links to other heavily used pages, like history and talk.
User stories edit
- Watchlist view
- As an experienced editor, I want to be able to track changes to items on my watchlist when I'm on a mobile device, so I can stay on top of things I care about on Wikipedia.
- Drill-down view
- As an experienced editor, I want to see key information about the user who made changes to an item on my mobile watchlist, so I can assess whether the change is likely to be high quality or low quality (vandalism, spam, test edits).
- Diff view
- As an experienced editor, I want to see the specific changes that were made to items on my watchlist, so I can assess whether these changes are high quality or low quality (vandalism, spam, test edits).
- Tag for followup
- As an experienced editor, I want to be able to tag specific changes when I'm viewing my mobile watchlist, so I can follow up on them later when I'm on my desktop and have full editing functionality.
Design requirements edit
- Create a mobile watchlist view that adds value to the experienced editor's workflow
- Present the bare minimum required information for the editor to understand the changes that have been made
- Summarize or use visual cues to convey complex information where possible
- Leave space for features that may come in next iterations (e.g., diff view, tagging revisions, etc.)
Project phases edit
In progress edit
- Watchlist logged-in view
- A mobile-friendly feed of recent changes to articles on the user's watchlist
- Drill-down watchlist view
- A deeper secondary view at the revision level, presenting meta-information about what has changed and who changed it
- Diff view
- Integrating the difference between revisions view into the drill-down watchlist view
- Read later
- Article-level saving for a mobile-friendly view of the "View and edit raw watchlist" feature on desktop
Planned edit
- Tag for followup
- Revision-level tagging to highlight important changes and act on them later
- Mobile-desktop watchlist integration
- Making mobile watchlist changes such as revision tagging persist in the desktop watchlist view
User experience edit
This feature is intended to be used by experienced editors who already have many pages saved in their watchlist, and who understand the general watchlisting workflow on desktop.
Adding to watchlist edit
Pages that have been added to the watchlist on both desktop and on mobile will appear in the mobile watchlist view. On mobile, users can add articles in the same way as on desktop: by tapping the watchlist star. They will receive a notification that their article has been added to the watchlist. If they tap an activated watchlist star again, the article will be removed from their watchlist, with a corresponding message.
- Flow
- User is logged in and reading Wikipedia
- User sees an article she would like to add to her watchlist
- User taps watchlist star in the top righthand corner of the chrome
- Watchlist star icon activates (visually marked by a fill) and a notice appears, letting the user know that the article was added to her watchlist
- Notice disappears after 2 seconds, or when the user taps on the dismiss button in the corner of the notice or taps outside the notice
- User taps the watchlist star again
- Watchlist star icon deactivates (returns to previous state with no fill), and a notice appears letting the user know that the article was removed from her watchlist
Viewing pages edit
Users can view changes to watched pages by navigating to the watchlist view. Information will be presented relative to user's current time, with most recently changed pages at the top and less recent changes at the bottom. From this view, the user will be able to see the name of the page that changed, the time it changed, and the user who made the change, as well as the edit comment. Long article names and edit comments may be abridged and can be accessed in the drill-down watchlist view.
- Flow
- User is logged in and has articles on her watchlist
- User taps on the lefthand navigation icon and selects the Watchlist menu
- User is taken to a mobile-friendly list of recent changes to articles she has watchlisted
- Tapping on an arrow in the righthand corner of each change takes the user to the drill-down view with additional information about the change
- User can scroll through 3 days' worth of changes
- Tapping back from the watchlist view takes the user to the last page she was on before activating the lefthand navigation menu
Drill-down view edit
Users will be able to tap on any revision and go to a separate page, where a deeper view of the changes (full article name and edit comment, bytes added/removed, and difference between previous and current revisions) will be presented. From this view, the user will be able to take actions such as tagging the revision for followup or undoing a change.
- Flow
- User is logged in and is viewing pages on her mobile watchlist
- Tapping the arrow to the right of any change takes the user to the drill-down view of the change
- User can see additional information about the change and the user who made it
- And eventually user will be able to take action (such as tagging for followup) from this view
- And tapping back takes the user back to her top-level watchlist view
Read later edit
Users will be able to see a list of all articles that they have watchlisted, so that they can easily access articles they saved to read later, not just ones with recent changes.
- Flow
- User is logged in and is viewing pages on her mobile watchlist
- User can see a list of all articles on her watchlist and can quickly remove items from the list
- User can see some additional information about each article, such as a snippet of the first sentence and the time when it was last modified
- User can navigate directly to any article on the list
- User can switch between this and the "recent changes" view
Mockups edit
-
Top level watchlist view -
Drill-down view with diff -
Another drill-down view with diff -
Adding to watchlist notice -
Early design for watchlist view -
Watchlist read later view
Developer card wall edit
Implementation edit
In-progress work in branch at https://github.com/brion/MobileFrontend/commits/watchlist Will squash and merge once it's got a little more work on it. --brion (talk) 00:55, 23 October 2012 (UTC)