Page MenuHomePhabricator

[QA] Show both Watch and Save functionality above article on Desktop
Closed, ResolvedPublic

Description

Background

The ReadingList/Saved pages feature is being planned to be rolled out to all account holding users in early July 2026. This ticket is to ensure that Save functionality can be shown alongside Watch function in a way that minimizes user confusion.

Because the star icon is often interpreted as a “favourite” action, the proposal here is to add a label to the Watch action to better communicate its purpose and more clearly differentiate it from Save functionality.

User story

As a Wikipedia user, I want the Watch and Save actions to be clearly distinguishable so that I can understand the purpose of each feature.

Requirements

For logged in users,

  • The WatchStar is now presented as a link with a star icon as shown in the mocks
  • The Save function is shown to all users
  • Remove the current preference of showing Save to users with 0 edits/beta users and Watch to other users above the article
  • The sticky header shows the Save action and hide the star (as a star without a label will cause confusion.)
  • Smaller screen size both functions will be folded into tools menu. See T426131 for further direction on how tool belt should work.
  • Tests added to cover this behavior, for both Vector Components and Hooks.php in Vector
Technical notes

Relevant files to change in Vector include VectorComponentStickyHeader.php and Hooks.php

Article actions.png (1,440×791 px, 377 KB)

Smaller viewport
Article actions.png (733×791 px, 282 KB)

Sticky header
Sticky header.png (1,440×789 px, 387 KB)

Event Timeline

Sneha updated the task description. (Show Details)
Sneha updated the task description. (Show Details)
Sneha updated the task description. (Show Details)
Sneha updated the task description. (Show Details)
Sneha renamed this task from [Reading list roll out] Show both Watch and Save functionality about article on Desktop to [Reading list roll out] Show both Watch and Save functionality above article on Desktop.May 25 2026, 8:59 PM

@Sneha are we sure about doing "sticky header shows the Save action and hide the star (as a star without a label will cause confusion.)" ?

I think not having the watchstar (for editors) in the sticky header could be an issue. Maybe not it is not ideal to have both without the label, but not sure removing the watchstar is better?

@aude I have explained the thinking in this thread.. besides that my assumption is that the absence of the watchstar in the sticky header (given we already have it on top of the article) may affect a relatively small group of users, whereas confusion between the star and save icons could impact a much larger audience of readers and newer editors. There’s a tradeoff either way. cc @HFan-WMF if you have any thoughts on the riskier tradeoff.

@Sneha maybe we include both watchlist and save in the sticky header only if the user has any pages in their watchlist? at that point, the user is familiar with what watchlist is and I think less likely to be confused.

aude set the point value for this task to 3.Jun 2 2026, 3:14 PM
aude moved this task from Needs refinement to Ready for sprint on the Reader Experience Team board.

@aude My concern is that some people may have only tried the feature once out of confusion/curiosity and may not be using it regularly and so there is still a chance of getting confused. We can look at the frequency of use but I feel coming up with these kind of rules can still be arbitrary and unpredictable. It will be great if the UI was the same for everyone.

We were talking of releasing all these proposed changes to beta first. So it will be great to go with proposed design and then gather feedback during beta before we try other approaches.

Jdlrobson-WMF renamed this task from [Reading list roll out] Show both Watch and Save functionality above article on Desktop to [QA] Show both Watch and Save functionality above article on Desktop.Jun 8 2026, 5:24 PM
Jdlrobson-WMF removed the point value 3 for this task.
Etonkovidova subscribed.

Checked on enwiki wmf.6

  • the watch star icon looks not aligned vertically

Screenshot 2026-06-11 at 7.08.20 PM.png (828×270 px, 69 KB)

Although it is positioned in the middle:
Screenshot 2026-06-11 at 7.10.47 PM.png (964×84 px, 23 KB)

  • there is a long-standing issue with non-valid ARIA value for Invalid ARIA attribute value: aria-controls="mw-watchlink-notification" (rated as a Critical issue)

<a href="/w/index.php?title=Carta_nazionale_dei_servizi&action=watch" data-mw-interface="1" title="Add this page to your watchlist [ctrl-option-w]" accesskey="w" aria-controls="mw-watchlink-notification">

Designenwiki wmf.6
Article actions.png (1,440×791 px, 377 KB)
Screenshot 2026-06-11 at 7.03.28 PM.png (1,067×559 px, 159 KB)
Screenshot 2026-06-11 at 6.38.40 PM.png (2,504×1,288 px, 491 KB)
Smaller viewport
Article actions.png (733×791 px, 282 KB)
Screenshot 2026-06-11 at 6.40.58 PM.png (1,360×1,754 px, 452 KB)
Sticky header
Sticky header.png (1,440×789 px, 387 KB)
Screenshot 2026-06-11 at 6.42.17 PM.png (2,652×620 px, 345 KB)

Tested this out on production and everything worked smoothly. Thank you!