Page MenuHomePhabricator

Add labels field to watchstar popup on all wikis
Open, In Progress, MediumPublic1 Estimated Story Points

Description

User story: As a Wikipedia editor, I want to assign labels to a page when I add it to my Watchlist, so that I can better organise my watched items.
User story: As a Wikipedia editor, I want to edit the labels assigned to a page I'm watching, so that I can better organise my watched items.

We have deployed the new labels field to the watch star popover on test wiki. We think we've resolved the major blockers to releasing this everywhere, so let's do that. This means by default, no URL parameter required.

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

There is a problem with unwatching pages. Scrolling so the watchstar goes off screen and then back on screen readds the page to the watchlist. However, while I was testing it, the popup stopped appearing and a dialog box showed up in its place. This makes the problem way worse because it means that if I watch/unwatch a page, a dialog box box appears every single time I scroll to the top (or away from the top if I use the other watchstar). This also happens on mobile, so it's not a Vector 2022 issue.

This made watching and unwatching pages overly complicated, it's way too many steps for what used to be a simple operation.
You press the star to watch a page, then there's a pop-up form (how many people really use the labels?), the form has only one button, which is not to confirm but to unwatch. Unless you don't spend a few seconds looking around, you're most likely to press the unwatch button, and if you unwatch, they'll confirm that you're not watching any more, but you do want to watch, so you press the watch button in that dialog, and then you run in circles.

(Unwatching a page is not a destructible operation: you get notified, you press the watchstar again)

Way too complicated and buggy. Please revert. Check how many people even change their duration setting, and if anyone uses the labels.

how many people really use the labels?
and if anyone uses the labels.

As far as I can check it's not much for now, it's very new. But I expect this change from "some people" to "most of the people" if and when I'll finish the project I'm working on for the last few months and will continue to work, probably more months. It's very complicated, but it's worth it to give a new service to the users.

A few people have said that one-click unwatching would be good, but I'm still not sure how that should work now that we've got watchlist labels — is unwatching more useful than being able to change the labels (or expiry) for a page? Because if you click to unwatch, then you also discard your labels. We thought about adding a second button next to the watchstar, but that's a lot more complicated (especially now that the watch link is also more likely to appear in the tools menu, if Reading Lists is enabled).

Discord (and maybe some other apps) offers to skip the confirmations with Shift-click. I think that's sensible as a way for experienced editors to adjust to it, as long as it's shortly mentioned in the popup.

I really think that now, with Dialog, you should change the behavior in one point: when clicking on Unwatch, the dialog should disappear, instead of invitation to watch again. This will help many people, especially those that oppose the new layout because of three-clicks unwatching, instead on one earlier.

Unwatching shouldn't trigger any dialogs at all and should be a simple notification, especially now that it's two-step. If someone made a mistake there, they can just press the watch button again.


I also hope eventually you'll fix the initial Codex component and switch back to it again, the full-screen dialog we have now is very intrusive and annoying.

Στο T417847#11878789, ο @Ponor έγραψε:

(Unwatching a page is not a destructible operation: you get notified, you press the watchstar again)

Way too complicated and buggy. Please revert. Check how many people even change their duration setting, and if anyone uses the labels.

Two things, one unwatching a page is destructive until we get the option to set custom expiries. If a page is to be removed from my watchlist in 10 days and I accidentally remove it I have no way of setting that back. Two, while I agree that the change in its present, buggy state should be reverted one of my biggest complaints with labels was that I couldn't set them from the watchstar so I had to go out of my way to use them. Labels will certainly not be adopted if support for them is incomplete. A way to set and unset labels from the watchstar is necessary for labels to be usable imo.

Discord (and maybe some other apps) offers to skip the confirmations with Shift-click. I think that's sensible as a way for experienced editors to adjust to it, as long as it's shortly mentioned in the popup.

Great idea. Shift-(or Ctrl, your choice)-click for simple permanent watch without labels and simple unwatch will be wonderful.

Great idea. Shift-(or Ctrl, your choice)-click for simple permanent watch without labels and simple unwatch will be wonderful.

Or leave the old, simple behavior and make those who need the options click the watchstar with Shift or Ctrl.

Think mobile (70 % of users): no Shift, no Ctrl. Just endless clicking through dialogs, for something that, arguably, most people will leave at its defaults.

Maybe this whole label business should become an opt-in feature?

Whatever has changed has broken what should be a simple operation. Click to watch, click to unwatch. Now clicking to watch brings up an "Unwatch" confirmation dialog. Clicking Unwatch unwatches, clicking off watches. Clicking to Unwatch also brings up an "Unwatch" confirmation dialog, and clicking that unwatches, but clicking off doesn't unwatch? (And when I say clicking Unwatch unwatches, it brings up another pop-up, but at some point I escape the infinite dialog cycle.)

Creative shift+ctrl hacks should be what brings up the advanced options pop-up, not what allows for the old default. (Right clicking or long-press may other options?)

The pop-ups also used to be under the watchlist star rather than the middle of the page, why did that change?

Change #1281444 merged by jenkins-bot:

[mediawiki/core@master] Close watchstar popup when unwatching

https://gerrit.wikimedia.org/r/1281444

Whatever has changed has broken what should be a simple operation. Click to watch, click to unwatch.

Yes. Besides the fact that the wording is still a bit confusing, this change adds two advanced features (time-based watching, and labels) that are probably not being used by most users. That said, what's the math? We can tell how many people are using labels, I'd love to know if that number is significant in any way?

I really like the suggestions by others that there be some sort of shift-ctrl option (or a forever setting in preferences) which brings up this advanced feature. The default flow should be nothing. Click it on, click it off. Simple. The end. Adding two more clicks to a basic feature is an access issue, especially on mobile. Please consider adjusting how this works.

I very strongly dislike the suggestion of experienced editors that newbies should know some keyboard shortcut to use site features beneficial to everyone. I use temporary watching and it's amazing. I don't have a use for watchlist labels yet but it doesn't mean someone else won't. There is no access issue to doing two taps on mobile, people do them there every day. If anything, it's more beneficial on mobile because you cannot accidentally unwatch something any more.

Can we put this behind a preference? Now you have to do an additional confirmation to watch/unwatch a page. This is very annoying. The previous method was simple and fast.

Who asked for this? This is what happens when you make changes without asking editors for their opinion.

Im conflicted about this one. I see the use of the feature, but i also prefer the traditional one click unwatch.
What about…

You unwatch immediately (and have unwatch api return the old settings), but the notification includes your ‘old settings’ in context and shows two buttons: undo and modify. Undo rewatches with your old settings immediately and Modify brings up the ‘watch’ dialog again, but with your old settings prefilled ?

That can also help with accidental clicks on mobile.

I believe the dialog should appear immediately, but I can see it disturbs to some people. You should do something, I think, otherwise you will lose a lot of potential label users (exactly as it was with Reading lists in the last few days because of watchstar removal). So, this is my suggestion:

  1. Clicking on watch or on unwatch works immediately as before.
  2. But either of them, not just watch as before, creates a bubble notification for some time, as before. But instead of expiry dropdown it has only one button now, "Organize watching". If clicked, it opens the dialog window with expiration dropdown and labels.
  3. There is a need to add a blue button "Confirm and close" to the Dialog window.

The watch star icon in the page tools isn't updating properly — the expiry state (half-filled icon) isn't shown, likely because the getter here event.detail.watchResponse.expiry isn't working.

image.png (473×174 px, 16 KB)

https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.page.watch.ajax/watch-ajax.js#377

I think it's great that you're planning to bring the tool back. But could you please make this feature a higher priority?

I could imagine having another button next to the watchstar that could also be accessed via a keyboard shortcut. Or having the option to enable or disable the feature in the settings.

But could you please at least introduce a beta version of this feature in Wikimedia projects?
I’d love to be able to use and test the feature, even if it’s not quite ready yet.

Hello all, thanks for all your feedback on this feature. @KimKelting we tried several versions of design and one of them was what you suggested, with a separate dropdown next to watchstar. It had some implementation challenges.

Based on the recent village pump discussion and several valuable design feedback both from the community and WMF design team, I have now updated the design again. The key changes are:

  • Dropping the dialog and bringing back pop-over to not disrupt the workflow
  • One click watch/unwatch (no extra click necessary unless user wants to add a label while adding an item to their watchlist)
  • Automatic timeout of the pop-over if user doesn't interact with it for X seconds
  • Undo feature on the unwatch confirmation to prevent accidental removal of a watched page that had multiple labels assigned to it
  • Mobile web design remains more or less the same except the new watchlist label and undo feature

Here's a link to the prototype for both web and mobile designs
https://www.figma.com/proto/CdyroPkkcT7GJA9bwno0Rq/WE1.4-Task-Prioritization--Watchlist-label-?node-id=2403-75386&p=f&viewport=318%2C-3629%2C0.26&t=kG42Ka3YgMxDjCPR-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=2403%3A75386&show-proto-sidebar=1&page-id=2403%3A74743

Please feel free to test and let us know if you see any missing bits.

@JSengupta-WMF I don’t think this is a correct link since it’s not about watchlist star at all?

Very strange. I tested it before but you're right it doesn't work now. I have updated it again. Hope it works.

That figma looks good. Should add your labels feature without breaking any muscle memory. Thanks to you and your team for the quick revert and for adapting to feedback.

Thanks for your patience and working with us on resolving this!

We will post this design update (both static screens and the prototype) to village pump on the existing thread related to this topic and wait for any feedback from the wider community before making these changes.

It doesn't work for me in most browsers, and in those two it works, I get

image.png (502×616 px, 158 KB)

and I can't know if it's a Figma problem or labels problem. If the patch is ready, maybe it's better to create a Patch Demo? Thank you.

Figma is for making visual mockups. It isn't coded yet. This is just a rough draft of approximately what they will ask software engineers to code up.

Thanks for the explanation. In this case, can you recommend a browser, or OS, or something, where we can see it exactly as intended? I don't think this bug is a part of the plan.

After waiting like 10 seconds for it to load, I was able to view it in Firefox on a big monitor. (Oddly, I tried to zoom out but that didn't work.) The page is interactive rather than a slideshow, screenshot, etc. I also had to close the side panel for the page to slide over enough to see the watchstar. Once you can see the watchstar, try clicking the watchstar a couple times to see the behavior that they're trying to showcase.

image.png (659×777 px, 151 KB)

image.png (553×476 px, 61 KB)

As it's a simple click through prototype, I have only created the adding and removing items from watchlist. The prototype wouldn't work like the current implementation and have limited features. You can click on the watchstar, see the pop-over display, click on the label field to apply a mock label. You can also unstar an item.

Should work on Chrome, Safari, IE and Firefox. I haven't really tested on multiple browsers.

Hello all, thanks for all your feedback on this feature. @KimKelting we tried several versions of design and one of them was what you suggested, with a separate dropdown next to watchstar. It had some implementation challenges.

Based on the recent village pump discussion and several valuable design feedback both from the community and WMF design team, I have now updated the design again. The key changes are:

  • Dropping the dialog and bringing back pop-over to not disrupt the workflow
  • One click watch/unwatch (no extra click necessary unless user wants to add a label while adding an item to their watchlist)
  • Automatic timeout of the pop-over if user doesn't interact with it for X seconds
  • Undo feature on the unwatch confirmation to prevent accidental removal of a watched page that had multiple labels assigned to it
  • Mobile web design remains more or less the same except the new watchlist label and undo feature

Here's a link to the prototype for both web and mobile designs
https://www.figma.com/proto/CdyroPkkcT7GJA9bwno0Rq/WE1.4-Task-Prioritization--Watchlist-label-?node-id=2403-75386&p=f&viewport=318%2C-3629%2C0.26&t=kG42Ka3YgMxDjCPR-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=2403%3A75386&show-proto-sidebar=1&page-id=2403%3A74743

Please feel free to test and let us know if you see any missing bits.

Seems there is no way to pause the dialog/toast. It always disappears after a certain time. On desktop, it could be paused on hover. On mobile, it would need either a button or should not hide automatically. Mobile also needs a close button.
https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html

Firefox does not load at least 4 minutes for me any picture, just waiting icon.

simple click through prototype

I see. Is this intented that the popup disappears after short time? Most of the tries it wasn't enough time for me to click on something before it disappeared. Maybe it's better to give it least 6-7 seconds, while clicking on any place outside the popup will do what it is supposed to do, and also remove the popup?

This comment has been deleted.

Here are the screen mocks used to create the prototype. If the prototype doesn't load on your browser or takes too long. Please refer to these.

T415173 - screen mocks.jpg (3,235×2,136 px, 2 MB)

Note that the images may appear pixelated. I had to reduce the file size drastically due to Phabricatior limitations.

T415173 - screen mocks.jpg (3,235×2,136 px, 2 MB)

For me the design workflow looks good, much better than the dialog version that was implemented. I hope that before being deployed, the watchlist organization feature could be tested on test wiki (such as test.wikipedia.org) or being incorporated as a beta feature first.

Here's a link to the prototype for both web and mobile designs
https://www.figma.com/proto/CdyroPkkcT7GJA9bwno0Rq/WE1.4-Task-Prioritization--Watchlist-label-?
Please feel free to test and let us know if you see any missing bits.

This looks promising. It should stay on a little longer, and if possible the timer should reset every time one interacts with the dialog in any way (clicking, or even hovering).
How will it work with Reading lists, whose button currently replaces the watchstar and puts the watch option in the Tools menu?

How will it work with Reading lists, whose button currently replaces the watchstar and puts the watch option in the Tools menu?

I think you can refer to the mentioned design workflow, which on the lower left corner there is a situation when Reading lists feature is enabled:

T415173 - screen mocks.jpg (3,235×2,136 px, 2 MB)

I think you can refer to the mentioned design workflow, which on the lower left corner there is a situation when Reading lists feature is enabled:

Oh. It was hard to see it without zooming the browser window in.

I'm more interested in the interaction when the Tools menu is 'hidden', i.e. when it's a drop-down menu.

I'm more interested in the interaction when the Tools menu is 'hidden', i.e. when it's a drop-down menu.

After mentioning it, I also become curious of how would the watchlist label organization popover be handled when the Tools menu is in drop-down format (when reading lists bookmark occupy the space of watchstar). Would it be similar to when the Tools menus is positioned as a sidebar?

Can this feature please be rolled out as a beta feature now?

After that, it will still be possible to work on the finer details, right?

So, I’d like to have this feature back.

Samwalton9-WMF renamed this task from Add labels field to watchstar popup to Add labels field to watchstar popup on all wikis.Tue, Oct 13, 3:55 PM
Samwalton9-WMF updated the task description. (Show Details)
Samwalton9-WMF set the point value for this task to 1.
Samwalton9-WMF moved this task from Epics to Estimated on the Moderator-Tools-Team board.
Samwalton9-WMF moved this task from Estimated to Kanban on the Moderator-Tools-Team board.