Page MenuHomePhabricator

User Experience for the Watchlist
Closed, ResolvedPublic

Description

⚠️ This task is work in progress and specs will be completed in week 49.
⭐️ Specs in this task originated from this concept doc.
👨‍🎨 Check out the latest designs for this task on Zeplin.


What is a Watchlist?

A watchlist is a page which allows any logged-in user to keep a list of ”watched” pages and to generate a list of recent changes made to those pages (and their associated talk pages). In this way, you can keep track of and react to what's happening to pages you have created or are otherwise interested in.

👉 Learn more on Help:Watchlist


Why are we doing this?

Why are we introducing the Watchlist on Android? The Android team is focusing on building a stronger ecosystem for editors. If we enable editors (beginner and advanced) to communicate with each other with less friction, it will cultivate a more widespread ecosystem and a better community. Advanced editors can guide beginners in making good edits and a larger community of regular readers can give feedback on article talk pages. As part of these efforts, Wikipedia Watchlist is introduced on Android.


User story

As a novice editor (or an experienced editor) of an article I care about, I'd like to monitor the article for changes, including:

  • Good-quality edits by other editors, so that I could thank those editors for their contributions.
  • Good-faith edits that don't quite make the grade, so that I could give feedback to those editors to improve their edits.
  • Bad-faith edits (vandalism, misinformation, etc.) that I could revert.

TOC

  • 1) Watchlist article experience
  • 2) Watchlist main view
  • 3) Watchlist diff view
  • 4) Watchlist notifications?
  • 5) Onboarding new users
  • 6) Analytics questions
  • 7) Appendix

1) Watchlist article experience

1.2.3.4.5.
watchlist-02-article.png (1×720 px, 403 KB)
watchlist-03-article-snackbar.png (1×720 px, 603 KB)
watchlist-04-expiry-bottom-sheet.png (1×720 px, 470 KB)
watchlist-05-expiry-confirmation.png (1×720 px, 602 KB)
watchlist-06-remove-from-watchlist.png (1×720 px, 605 KB)

Flow:

  1. User selects Add to Watchlist in the overflow menu
    • When the item has been added before the icon changes to a filled, respectively half filled star (impermanent). Copy ready. Remove from Watchlist and triggers the snackbar in step 6.
  2. User sees a confirmation snackbar with an additional option to change the duration of the watched item (Watchlist Expiry).
    • Copy: %itemName and its talk page have been added to your watchlist permanently.
  3. User sees a toast to select the duration
  4. User sees a confirmation snackbar
    • Copy: %itemName and its talk page have been added to your watchlist %durationPeriod.
    • Options (consistent with Desktop Wikipedia):
      • Permanent
      • 1 week
      • 1 month
      • 3 months
      • 6 months
  5. Users removes item from the Watchlist

2) Watchlist main screen

1.2.3.
watchlist-01-home.png (1×720 px, 186 KB)
watchlist-06-list.png (2×720 px, 185 KB)
watchlist-02-list-dialog.png (2×720 px, 193 KB)

Remarks:

  • Users access their Watchlist via More main navigation item.
  • Watchlist features items from all active user languages by default. The languages can be selected via language icon in the app bar (see 2.).
    • Hide the language icon in the app bar if only 1 app language is set.
  • Quick filters at the top (All, Talk, Pages, Other) allow filtering the view (similar to the Mobile web version).
  • Tapping a Watchlist item leads to the diff view, see chapter 3).
  • A Watchlist card item consists of:
    • Title (article, talk page, other)
    • Language indicator (e.g. EN)
      • Hide the language indicator if only 1 app language is set.
    • Time
    • Diff summary, if available
      • If not available, preview the change itself
    • Characters added / removed
    • Link to user profile (preferably in-app)
      • User icon (person or anonymous)
      • User name

3) Watchlist diff view

1. Diff view2. Overflow menu3. Unwatch4. User profile (web view)5. User contributions (native, optional)6. Thanks: Dialog (shown once)7. Thanks: Snackbar8. Thanks: Already thanked
watchlist-diff.png (1×720 px, 160 KB)
watchlist-diff-dialog.png (1×720 px, 164 KB)
watchlist-diff-unwatch.png (1×720 px, 164 KB)
watchlist-user-page.png (1×720 px, 129 KB)
watchlist-user-contributions.png (2×720 px, 167 KB)
watchlist-diff-thank-01.png (1×720 px, 147 KB)
watchlist-detail-thank-02.png (1×720 px, 170 KB)
watchlist-diff-thank-03.png (1×720 px, 166 KB)
  1. Shows the main view of the screen.
  2. Show the overflow menu of the screen.
  3. State when tapping the 'WATCHING' button: Snackbar appears and button changes 'WATCH'.
  4. User profile (web view, preferably in-app) — Talk link leads users to native talk page
  5. Optional: User contributions page (reuses Watchlist main screen design)
  6. Thanks flow #1: Dialog appears after tapping the 'Thanks' button to raise awareness (only shown once)
  7. Thanks flow #2: Snackbar confirms that the 'Thanks' has been sent. Thanks button is greyed out.
  8. Thanks flow #3: Shows the Snackbar when 'Thanks' has already been sent for a specific edit.

The view consists of:

  • App bar
    • Back button
    • More menu
      • Share edit (icon) → triggers native share dialog with a link to this diff
      • %userName’s talk (icon) → takes users to the in-app talk page of this user
      • %userName’s contributions (icon) → takes users to the user contributions screen (external link)
  • Link to Watchlist item (article, talk, other)
  • Button
    • Watching
      • Full star icon when permanent
      • Half star icon when impermanent (→ Watchlist Expiry)
  • Date / time
  • Previous / next navigation buttons → to navigate back and forth between the Watchlist item’s edit history
  • Link to user profile (preferably in-app)
    • User icon (person or anonymous)
    • User name
  • Thank button
  • Indication of characters added / removed
  • Edit summary
  • Edit diff

Diff style / colors

  • Images below derive from iOS, we keep it consistent
  • Use Roboto Bold to highlight changes in diff
  • Use strike through to indicate removed characters
  • Background-color: → see table below
LightSepiaDarkBlack
Addition
IMG_0330.PNG (2×1 px, 368 KB)
IMG_0332.PNG (2×1 px, 364 KB)
IMG_0334.PNG (2×1 px, 367 KB)
IMG_0336.PNG (2×1 px, 368 KB)
font-colorbase10green50green50green50
background-colorgreen90nonenonenone
Removal
IMG_0329.PNG (2×1 px, 372 KB)
IMG_0331.PNG (2×1 px, 370 KB)
IMG_0333.PNG (2×1 px, 377 KB)
IMG_0335.PNG (2×1 px, 371 KB)
font-colorbase10red30red75red75
background-colorred90nonenonenone

More on colors: Visual Style: Colors – Wikimedia Design Style Guide


4) Watchlist notifications?

Per @Dbrant’s technical investigation: «Unfortunately, it does not look like watchlists are designed in such a way that Echo notifications can be sent upon every edit made to any article in a watchlist. (Question: would we ever need such functionality?) The watchlist would become a 'destination' that the user would need to enter deliberately.»


5) Onboarding new users

1.2.
watchlist-onboarding-01.png (1×720 px, 416 KB)
watchlist-onboarding-02.png (1×720 px, 558 KB)
  1. Show onboarding tooltip in the article
    • Copy: Keep track of what's happening to articles you are interested in. Tap the overflow menu and select Add to Watchlist to see changes to an article.
  2. Trigger this tooltip after users seen the article tooltip and go back to the main screen.
    • Copy: Find articles and pages you previously added to your watchlist in the More menu under Watchlist.

6) Analytics questions

To be refined with Shay and Dmitry.

  • Existing users to Watchlist
    • How many existing users have adopted the feature?
  • New users to Watchlist
    • How many new users with an account are using the feature?

7) Appendix

Related links

Todos

  • Add concept for diff view
  • Define thanks flow
  • Add color definitions for diff view
  • Define onboarding with Johan’s help
  • Q: What analytics questions do we have?
  • Q: Do we want to encourage account creation with this feature?
  • Q: Do we want to include “Undo” functionality?
  • Create task that includes future features for the Watchlist:
    • Revert flow
    • Notifications
    • (related) Revision history
    • (related) User page

Event Timeline

Charlotte created this task.
Charlotte updated the task description. (Show Details)
schoenbaechler renamed this task from UX for in-app watchlists to User Experience for Watchlists.Nov 6 2020, 10:38 AM
schoenbaechler renamed this task from User Experience for Watchlists to User Experience for the Watchlist.Nov 19 2020, 2:32 PM

@Johan — just added an onboarding section to the task’s description.

Could you review the onboarding copy, please? It’s a first draft, feel free to rewrite it. As mentioned, it’d be great to target both newcomers and experienced editors.

Thanks a lot for your help!

5) Onboarding new users

1.2.
watchlist-onboarding-01.png (1×720 px, 415 KB)
watchlist-onboarding-02.png (1×720 px, 555 KB)
  1. Show onboarding tooltip in the article
    • Copy: Keep track of what's happening to articles you are interested in. Tap the overflow menu and select Add to Watchlist to track this article.
  2. Trigger sequential tooltip once users are back on the main screen
    • Copy: Copy: Find articles and pages you previously added to your Watchlist in the More menu under Watchlist.

If possible, I'd like us to clarify what one does when tracking an article. I don't think we can assume that everyone understand what this means, or that they remember that Wikipedia articles are constantly being edited. Would "see changes to an article" or "see edits to an article" or something like that, instead of "track this article", be too long?

Hey @Dbrant @SNowick_WMF, please add your analytics questions to chapter 6 in the task’s description. Thx!

If possible, I'd like us to clarify what one does when tracking an article. I don't think we can assume that everyone understand what this means, or that they remember that Wikipedia articles are constantly being edited. Would "see changes to an article" or "see edits to an article" or something like that, instead of "track this article", be too long?

Sounds good to me @Johan – I updated the copy. What do you think about the copy of the second tooltip? I would say it’s not a masterpiece at the moment, as it’s kind of repetitive (includes “Watchlist” twice). Can you think of something more simple / elaborate?

Copy: Find articles and pages you previously added to your Watchlist in the More menu under Watchlist.

Thx!

Not sure this is the optimal solution, but if you simply remove the capitalisation of watchlist in the first case, where it's not necessary, it will seem less repetitive. It will differentiate between a normal noun ("watchlist") and the menu option ("Watchlist").

Find articles and pages you previously added to your watchlist in the More menu under Watchlist.

Not sure this is the optimal solution, but if you simply remove the capitalisation of watchlist in the first case, where it's not necessary, it will seem less repetitive. It will differentiate between a normal noun ("watchlist") and the menu option ("Watchlist").

Find articles and pages you previously added to your watchlist in the More menu under Watchlist.

I like your suggestion @Johan, let’s go with it for now.

LGoto lowered the priority of this task from High to Medium.Jan 25 2021, 5:16 PM
LGoto claimed this task.