Page MenuHomePhabricator

Flow topic watch stars are different from page watch stars, on the same skin
Open, LowPublic

Description

you can compare the watched and unwatched topic stars with those at the top of the page to see that they are rendering very differently.

See also T56307: Watchlist icon does not match on desktop and mobile skin.


Roan's perspective from T97696: Watch icon is inconsistent:

The watch icon that MW core uses (for watching the entire page) has the following states:

  • Not watching: not filled, blue outline (blue fits with the context: tabs are all blue)
  • Not watching + hover: not filled, yellow outline
  • Watching: filled blue, blue outline
  • Watching + hover: hover state is filled blue, yellow outline
  • Transition: spinning version of the not watching state (hence the nickname Mario Galaxy star)

The watch icon that Flow uses (for watching individual topics) has the following states:

  • Not watching: not filled, gray outline (gray fits with the context: other icons and text there are also gray)
  • Not watching + hover: not filled, light green outline
  • Watching: dark green fill
  • Watching + hover: light green fill
  • Transition: mouse cursor is busy

This is inconsistent even just because the watch stars for the page and for topics are different; they shouldn't be. T56307: Watchlist icon does not match on desktop and mobile skin tried to resolve this by putting the green watch star in core, but that kind of blew up and went nowhere.

But apart from the fact that we shouldn't be using two different watch stars, there are also inconsistencies in the watch star flow uses:

  • It uses green, but green is the color for constructive. Watching a page isn't constructive, it's progressive, like editing is
  • It also uses green (more green in fact, because of the fill) to unwatch a page; you'd expect the inverse of a constructive action to be destructive, not also constructive
  • It uses two different shades of green
  • When not watching, the default state is gray and the hover state is green, but when watching, the default state is green and the hover state is light green; I'd expect the non-hover state to be gray (but filled) instead

I would propose reconsidering both and establishing common patterns. Vector has a different style right now (the watch star is surrounded by lots of other blue things for instance), but if we moved to a design with patterns like "filled for watching, no fill for not watching; one base color and one hover color that are the same between states; use of progressive instead of constructive colors" then we can apply the same principles to both watch stars without unifying their aesthetics just yet. Then when Vector is revised to not be stuck in 2009, we can actually use the same watch stars.

One specific idea I'll throw out there for the Flow watch star is to use gray as the base color and blue as the hover color, with the star being filled when watching and unfilled when not. That would be more consistent with the Vector watch star, but still be appropriate for the context (the Flow watch star is surrounded by gray things).

Event Timeline

Jaredzimmerman-WMF raised the priority of this task from to Normal.
Jaredzimmerman-WMF updated the task description. (Show Details)
Jaredzimmerman-WMF changed Security from none to None.
Mattflaschen-WMF renamed this task from Flow topic watch stars are rendering inconstancy from page watch stars to Flow topic watch stars are different from page watch stars, on the same skin.Dec 11 2014, 7:30 PM
Mattflaschen-WMF updated the task description. (Show Details)

I changed the blocker into a see also. That task is different, since in that case it's two different skins. In this case, it's the same one.

@Mattflaschen makes sense, that patch is already on mw.org, so you can see it there. but yes, saying that they should match, irrespective of skin in both contexts makes sense.

Restricted Application added a project: Collaboration-Team-Triage. · View Herald TranscriptApr 30 2015, 8:57 PM
Mattflaschen-WMF updated the task description. (Show Details)EditedApr 30 2015, 8:58 PM
Mattflaschen-WMF updated the task description. (Show Details)

Is watching really progressive? You click once and then the action completes; it's on your watchlist and you're done. Progressive is for starting a workflow, e.g. clicking preview starts the preview-then-save workflow. If a login button takes you to a login page, it should be progressive because it starts the login workflow.

Destructive actions are those that "remove or limit, such as deleting a page or blocking a user" (http://tools.wmflabs.org/styleguide/desktop/section-2.html). I think calling unwatch destructive is a stretch. It's true it's not an exact match to a standard UI constructive button, due to the state indication.

I agree it should be standardized, regardless of which color we end up with.

Mattflaschen-WMF lowered the priority of this task from Normal to Low.Mar 18 2016, 12:38 AM

They're still different on Vector, but less obviously since they're both blue.

Restricted Application added a project: Growth-Team. · View Herald TranscriptSep 4 2018, 2:42 PM
SBisson moved this task from Inbox to External on the Growth-Team board.Sep 7 2018, 2:53 PM