Page MenuHomePhabricator

[Design spike] consider moving Watchlist to site header
Open, HighPublic

Description

Description

We recently consolidated user links into a user menu. Some people have requested that Watchlist be taken out of the menu and placed in the site header, for quick/direct access (T288638).

The purpose of this task is to discuss the design implications of this change.

Event Timeline

@ovasileva @Jdlrobson I think the main considerations here are:

  1. what should the icon be?
  2. which position in the site header?
  3. should this be on all projects, or just Wikipedia?
  4. what space constraints / responsiveness / etc. do we need to think about? (this is somewhat dependent on the question above)

1. Icon

While a ★ icon might seem like an obvious choice, it's maybe confusing because there's already a ★ icon for Watch in the page toolbar, plus various ★s as page/article quality indicators. Also using just a ★ doesn't really communicate that it's a list of pages you're watching.

image.png (336×1 px, 130 KB)

Maybe we can have something that's a combination of List + Watch:

image.png (336×1 px, 126 KB)


2. Position

I think there are two options here:

image.png (413×1 px, 136 KB)

AB
image.png (303×1 px, 98 KB)
image.png (303×1 px, 95 KB)

I can't think of any clear pros/cons between the two options. Most likely the Watchlist icon will collapse into the user menu at smaller widths, so in option A it would "jump" over the notification icons, however the username already does this anyways. Any tradeoffs you can think of @RHo @Volker_E @ovasileva?


3. Just Wikipedia?

Is there significant usage / need for direct access to the watchlist on other projects? T289574 will hopefully help us answer this.


4. Space constraints/responsiveness

Assuming we add a max-width to the username (T287522#7295558), it looks like for projects that don't have the Language button in the site header we should be fine down to 720px. Below 720px the Watchlist icon should collapse into the user menu (like the Username does).

1022725below 700
image.png (299×1 px, 88 KB)
image.png (291×718 px, 63 KB)
image.png (318×600 px, 63 KB)

For projects that do have the Language button in the site header things are a bit more complicated. Firstly I think it's helpful to acknowledge the header (even without the Watchlist icon, and then even more so with it) is quite full. As mentioned in T288638#7283375 this would be helped by combining the Notices and Alerts icons (T142981), however there's no plan for that work to happen currently. This is how the header would look for now:

image.png (392×1 px, 426 KB)

There are currently some minor issues with responsiveness for projects that do have the Language button in the site header, which we haven't yet prioritized fixing. My recommendation here is to first make the decision based on T289574, and then if we do decide to include the Watchlist icon we should revisit when certain elements hide as the screen gets more narrow.

To 1. I agree with Alex and think a specific watchlist icon would make sense! From icon ideation, I'd orient position of the star on icons like 'addUser', 'editUndo' or 'editRedo'. Putting it top right corner (LTR)

  1. I agree we shouldn't use the star. That's too confusing, and most readers will think it's a "Favorite" feature when presented in this way.
  2. From a code perspective, next to the username is most easiest as we have a menu there we can already add to called the "user pages" menu. The notifications icons are in a menu called "notifications", so if we need to introduce the icon to the right we need to add a new menu.
  3. The project-specific question makes little difference to implementation.
  4. I would suggest just hiding it when no space. The interface degrades nicely and I don't think we should cater to people that need access to the watchlist icon on a resized window. It would require too many changes to the interface.

A more generic question, do we want this item to be configurable in preferences on the long run? If so, that has implications on the collapsing behaviour.

+1 to @Jdlrobson on this

@ovasileva @Jdlrobson I think the main considerations here are:

  1. what should the icon be?
  2. which position in the site header?
  3. should this be on all projects, or just Wikipedia?
  4. what space constraints / responsiveness / etc. do we need to think about? (this is somewhat dependent on the question above)

1. Icon

While a ★ icon might seem like an obvious choice, it's maybe confusing because there's already a ★ icon for Watch in the page toolbar, plus various ★s as page/article quality indicators. Also using just a ★ doesn't really communicate that it's a list of pages you're watching.

image.png (336×1 px, 130 KB)

Maybe we can have something that's a combination of List + Watch:

image.png (336×1 px, 126 KB)

I think the specialized icon makes sense here as well, and removes confusion.

2. Position

I think there are two options here:

image.png (413×1 px, 136 KB)

AB
image.png (303×1 px, 98 KB)
image.png (303×1 px, 95 KB)

I can't think of any clear pros/cons between the two options. Most likely the Watchlist icon will collapse into the user menu at smaller widths, so in option A it would "jump" over the notification icons, however the username already does this anyways. Any tradeoffs you can think of @RHo @Volker_E @ovasileva?

No preference here, I think either works.

3. Just Wikipedia?

Is there significant usage / need for direct access to the watchlist on other projects? T289574 will hopefully help us answer this.

I think it would be best if we do it for all projects for consistency of expectation.

4. Space constraints/responsiveness

Assuming we add a max-width to the username (T287522#7295558), it looks like for projects that don't have the Language button in the site header we should be fine down to 720px. Below 720px the Watchlist icon should collapse into the user menu (like the Username does).

1022725below 700
image.png (299×1 px, 88 KB)
image.png (291×718 px, 63 KB)
image.png (318×600 px, 63 KB)

For projects that do have the Language button in the site header things are a bit more complicated. Firstly I think it's helpful to acknowledge the header (even without the Watchlist icon, and then even more so with it) is quite full. As mentioned in T288638#7283375 this would be helped by combining the Notices and Alerts icons (T142981), however there's no plan for that work to happen currently. This is how the header would look for now:

image.png (392×1 px, 426 KB)

There are currently some minor issues with responsiveness for projects that do have the Language button in the site header, which we haven't yet prioritized fixing. My recommendation here is to first make the decision based on T289574, and then if we do decide to include the Watchlist icon we should revisit when certain elements hide as the screen gets more narrow.

@ovasileva @Jdlrobson I think the main considerations here are:

1. Icon

While a ★ icon might seem like an obvious choice, it's maybe confusing because there's already a ★ icon for Watch in the page toolbar, plus various ★s as page/article quality indicators. Also using just a ★ doesn't really communicate that it's a list of pages you're watching.

image.png (336×1 px, 130 KB)

Maybe we can have something that's a combination of List + Watch:

image.png (336×1 px, 126 KB)

I also think the specialized icon makes sense here as well, and removes confusion.

2. Position

I think there are two options here:

image.png (413×1 px, 136 KB)

AB
image.png (303×1 px, 98 KB)
image.png (303×1 px, 95 KB)

I can't think of any clear pros/cons between the two options. Most likely the Watchlist icon will collapse into the user menu at smaller widths, so in option A it would "jump" over the notification icons, however the username already does this anyways. Any tradeoffs you can think of @RHo @Volker_E @ovasileva?

B is the better choice, as it is consistent to relative positioning of these links in legacy Vector.

3. Just Wikipedia?

Is there significant usage / need for direct access to the watchlist on other projects? T289574 will hopefully help us answer this.

I also think it would be best if we do it for all projects for consistency of expectation. But the data form T289574 may change my opinion on this.

4. Space constraints/responsiveness

Assuming we add a max-width to the username (T287522#7295558), it looks like for projects that don't have the Language button in the site header we should be fine down to 720px. Below 720px the Watchlist icon should collapse into the user menu (like the Username does).

1022725below 700
image.png (299×1 px, 88 KB)
image.png (291×718 px, 63 KB)
image.png (318×600 px, 63 KB)

For projects that do have the Language button in the site header things are a bit more complicated. Firstly I think it's helpful to acknowledge the header (even without the Watchlist icon, and then even more so with it) is quite full. As mentioned in T288638#7283375 this would be helped by combining the Notices and Alerts icons (T142981), however there's no plan for that work to happen currently. This is how the header would look for now:

image.png (392×1 px, 426 KB)

There are currently some minor issues with responsiveness for projects that do have the Language button in the site header, which we haven't yet prioritized fixing. My recommendation here is to first make the decision based on T289574, and then if we do decide to include the Watchlist icon we should revisit when certain elements hide as the screen gets more narrow.

You are assuming the username is quite short, like yours. If a user has a really long username, even 725 pixels might cause a horizontal scrollbar. This can lead to the question: if we have to hide something to make space, should we hide the Watchlist icon first, or the username first?

Thanks for the ping @alexhollender - my belated 2c below.

@ovasileva @Jdlrobson I think the main considerations here are:

1. Icon

While a ★ icon might seem like an obvious choice, it's maybe confusing because there's already a ★ icon for Watch in the page toolbar, plus various ★s as page/article quality indicators. Also using just a ★ doesn't really communicate that it's a list of pages you're watching.

image.png (336×1 px, 130 KB)

Maybe we can have something that's a combination of List + Watch:

image.png (336×1 px, 126 KB)

I also think the specialized icon makes sense here as well, and removes confusion.

Agree with others that the new star on list icon makes sense, and second @Volker_E's suggestions about revising slightly so the placement of the star is top right instead.

2. Position

I think there are two options here:

image.png (413×1 px, 136 KB)

AB
image.png (303×1 px, 98 KB)
image.png (303×1 px, 95 KB)

I can't think of any clear pros/cons between the two options. Most likely the Watchlist icon will collapse into the user menu at smaller widths, so in option A it would "jump" over the notification icons, however the username already does this anyways. Any tradeoffs you can think of @RHo @Volker_E @ovasileva?

B is the better choice, as it is consistent to relative positioning of these links in legacy Vector.

Agree that B seems to be better since I am not a fan of the jumping in A (even for the username but at least that jumps to the top of the menu)

3. Just Wikipedia?

Is there significant usage / need for direct access to the watchlist on other projects? T289574 will hopefully help us answer this.

I also think it would be best if we do it for all projects for consistency of expectation. But the data form T289574 may change my opinion on this.

Makes sense to me to have consistency in behaviour.

4. Space constraints/responsiveness

Assuming we add a max-width to the username (T287522#7295558), it looks like for projects that don't have the Language button in the site header we should be fine down to 720px. Below 720px the Watchlist icon should collapse into the user menu (like the Username does).

1022725below 700
image.png (299×1 px, 88 KB)
image.png (291×718 px, 63 KB)
image.png (318×600 px, 63 KB)

For projects that do have the Language button in the site header things are a bit more complicated. Firstly I think it's helpful to acknowledge the header (even without the Watchlist icon, and then even more so with it) is quite full. As mentioned in T288638#7283375 this would be helped by combining the Notices and Alerts icons (T142981), however there's no plan for that work to happen currently. This is how the header would look for now:

image.png (392×1 px, 426 KB)

There are currently some minor issues with responsiveness for projects that do have the Language button in the site header, which we haven't yet prioritized fixing. My recommendation here is to first make the decision based on T289574, and then if we do decide to include the Watchlist icon we should revisit when certain elements hide as the screen gets more narrow.

You are assuming the username is quite short, like yours. If a user has a really long username, even 725 pixels might cause a horizontal scrollbar. This can lead to the question: if we have to hide something to make space, should we hide the Watchlist icon first, or the username first?

I think even for long usernames the importance would be for the watchlist to be hidden first, as it is more "secondary" in importance in comparison to accessing one's user page, usertalk page (and newcomer homepage for those with GrowthExperiment features). But this brings up a question I had related to this – is there some max character length for username before it truncates or does it always full show and wrap regardless of length?

I think even for long usernames the importance would be for the watchlist to be hidden first, as it is more "secondary" in importance in comparison to accessing one's user page, usertalk page (and newcomer homepage for those with GrowthExperiment features).

As discussed in T288638, I would like to call this assumption into question and suggest to wait for the data from T289574.

Based on my observations over the years, my hypothesis is that Wikipedia editors will generally access their watchlist significantly more often than their talk pages or user pages (except perhaps for those who use their user page to catalogue their "own" articles or as a bookmark collection). There is really nothing to do on a user page, it's static unless you change it, while the watchlist is constantly updating with relevant information. The talk page is, generally speaking, only of interest if someone leaves a message there - resulting in a notification and an entry on the watchlist.

Of course, this hypothesis does not say anything about how users access these pages, i.e., whether they click the links we're talking about here. I'm looking forward to find out!