Page MenuHomePhabricator

Watchlist Expiry: Add UI support for mobile watchlist
Closed, ResolvedPublic

Assigned To
Authored By
• Prtksxna
Apr 17 2020, 5:18 AM
Referenced Files
F31793130: specialwatchlist.png
May 3 2020, 3:00 AM
F31793132: Advanced Watchlist.png
May 3 2020, 3:00 AM
F31760964: EditWatchlist.png
Apr 17 2020, 5:18 AM
F31760968: Advanced EditWatchlist.png
Apr 17 2020, 5:18 AM
F31760962: Watchlist.png
Apr 17 2020, 5:18 AM
F31760966: Advanced Watchlist.png
Apr 17 2020, 5:18 AM

Description

As a user…

Acceptance criteria:
Visual example:

For mobile designs there won't be any tooltip on the clock. It'll only be an indicator that the page is temporary. Clicking it would take you to Special:EditWatchlist and scroll to that page's position in the list.

Normal
Special:Watchlist (with icon)Special:Watchlist (with text)Special:EditWatchlist
Watchlist.png (320×690 px, 68 KB)
specialwatchlist.png (320×690 px, 71 KB)
EditWatchlist.png (320×690 px, 138 KB)
With advance setting
Special:Watchlist (with icon)Special:Watchlist (with text)Special:EditWatchlist
Advanced Watchlist.png (320×690 px, 74 KB)
Advanced Watchlist.png (320×690 px, 77 KB)
Advanced EditWatchlist.png (320×690 px, 104 KB)

Event Timeline

From the description:

For mobile designs there won't be any tooltip on the clock. It'll only be an indicator that the page is temporary.

Is the clock indicator clear enough? I was thinking of using a half star, but since that is always used as an action icon, I don't want people to think that they can click it. I think the clock indicator is our best option but wanted to discuss.

Hello, @Prtksxna!

Update: I discussed these mockups with @Mooeypoo, and we have discussed that we can probably add the expiration date in watchlist via long-press with minimal technical effort (add title='foo' to the link). We'll discuss this in greater depth in the planning meeting today. This may be worth considering, so the user does not need to go back and forth between the watchlist and edit:watchlist to get expiry information.

We discussed the highlight as well. This is similar to highlight in notifications via Echo. The work isn't trivial, but it shouldn't be super difficult either.

Technical notes from team planning meeting on 4/21:

  • easiest would be adding in text
  • second in difficulty would be some sort of pop-up or info displayed via long-press
  • the most difficult would be click to redirect to a new page with highlight

@Prtksxna I think the clock indicator is sufficient. The half star isn't necessary, since a) the presentation of a star isn't already expected (like it is in page read view), and b) we received good feedback on watchlist status indicators in the April project page update.

One thing that we should discuss (which we can do in our meeting tomorrow) is the potential of modifying the watchlist display to also show the days left. This was discussed in greater depth in the team meeting on 4/21, and there was general consensus that this may be a good approach to look into. Curious to hear your thoughts. Thank you!

Some things we have discussed in planning meeting:

  • EditWatchlist may be slow to load if we redirect from the watchlist
  • Users may be averse to more clicks
  • Watchlist is a place where someone expects to get all the info
  • We can potentially write this as short-hand writing (2 mo instead of 2 months, for example)
  • The redirect will be a lot more work, due to various considerations & edge cases
  • If we want to be iterative, we may want to do the easiest first
  • The technical considerations should also be taken into account, in addition to product & UX
  • We can ask the community what they think with 3 examples (text, pop-up, or redirect)

Thanks for sharing these, @ifried

  • Users may be averse to more clicks

Yes, extra interactions are more work for the user. Another way to think about this is - what action does the user want to take. Primary actions, such as seeing which article in my watchlist got edited should require no actions, secondary or tertiary actions, for example unwatching a previously watched page, or something like logging out of the site require multiple clicks/interactions.

  • Watchlist is a place where someone expects to get all the info

Yep! Users do expect to get all the information about their watchlist at one place, but it might not be the place to show all of it. Having access to the information is important, but being able to see it all the time might add to cognitive load (particularly on mobile where the space is constrained, and particularly on this page that already has a ton of information)

  • We can ask the community what they think with 3 examples (text, pop-up, or redirect)

I think this is the kind of question that might be better answered by a usability test or by collecting and analysing data rather than asking a relatively small sample set. Lets talk about this soon 😊


  • The technical considerations should also be taken into account, in addition to product & UX
  • EditWatchlist may be slow to load if we redirect from the watchlist
  • The redirect will be a lot more work, due to various considerations & edge cases
  • We can potentially write this as short-hand writing (2 mo instead of 2 months, for example)
  • If we want to be iterative, we may want to do the easiest first

Makes sense 👍🏽

ifried renamed this task from Watchlist Expiry: Add UI support for mobile to Watchlist Expiry: Add UI support for mobile watchlist.May 28 2020, 9:26 PM
ifried claimed this task.

This has been converted into tickets (T253932 & T253934), which include feedback from the project talk page, so I'm marking this design work as resolved. Thanks, Prateek!