Reading/Web/Desktop Improvements/Features/User menu

As a part of the Desktop Improvements project, we are introducing a new way to display the user tools found at the top of the page. We plan to collect these features under a single menu that will allow logged-in and logged-out users easy access to their user tools. Our goal is to make the navigation more intuitive by visually highlighting the structure of user links and their purpose.

Background
Currently, the user tools are found as links at the top of the page. This introduces confusion in our navigation hierarchy. As the links are not presented cohesively as a unit, they can create confusion for newcomers that do not know that the links are associated with individual user tools. In addition, the links take a lot of space on the screen, creating a cluttered appearance.

We plan on improving the appearance of these links with the following goals:


 * Allowing for increased clarity in the purpose of the links by visually identifying that all links are related to user-specific tools and features
 * Allowing for a decreased visual clutter and thus, a more welcoming appearance of the header of the page as a whole

Release plan
We have been working on these changes between April and June 2021, and are hoping to deploy our first iterations in mid-2021. We will be deploying the changes by default to our early adopter wikis. The changes will also be available to all logged-in users that have opted into the new experience.

Sample Use Cases

 * As a reader, I want to see fewer links at the top of the page, so that I can focus better on the content itself
 * As a reader, I want an easy entrypoint to account creation, so that I can create an account quickly
 * As an editor, I want quick access to all of my user links
 * As an inexperienced editor, I want my user tools to appear in a cohesive manner, so that I know which tools are available

Feature descriptions and requirements

 * 1) All user links currently found at the top of the page will be consolidated into a single menu
 * 2) The menu must allow for different options for logged-in and logged-out users
 * 3) No links can be removed from the menu
 * 4) Direct links must be available for each user page
 * 5) Direct links must be available when a new message is received on the user’s talk page
 * 6) The menu must allow for links added via gadgets (such as the UTC clock) or user scripts
 * 7) The menu must contain logos as well as text for each menu item, to allow for quicker identification
 * 8) The menu must work at lower resolutions down to 500px

Prototype
[ https://people.wikimedia.org/~jdrewniak/dip/p4.html#/en/wiki/Moon This prototype] displays the behavior for logged-in and logged-out users of the current iteration of the user tools menu. The final design will be subject to change based on the results of the quantitative tests and qualitative feedback described below.

User testing with readers and editors
We performed user testing with readers and editors in three different locations. The goal of this test was to indicate the ease of use of the user menu and, in particular, to determine whether the iconography used was understandable. The results of the test indicated that it was preferred to use both icons as well as text within the menu, especially for wiki-specific pages such as Sandbox and Contributions.

Prototype testing with editors and other logged-in users
In May 2021, we performed prototype testing with logged-in users across 30 wikis. Our preliminary results show that the menu itself was easy to use and participants could intuitively navigate to pages within the menu from their first try. However, some participants indicated that they would like more control over which items are shown within and outside of the menu. This is something we’re considering for further iterations of the feature.

Quantitative testing
We will be monitoring the before and after usage of the user links on our pilot wikis following our initial deployments. While we expect to see a small drop in user links, any drop over 10% will be considered ground for immediate iteration on the feature.

Why doesn't the user menu show on hover?
Showing a menu on hover is not a good user interface pattern. A menu should not be triggered by hover. Only by click. It's standard in basically all interface elements we provide and Vector legacy was the exception to the rule, historically grown without design oversight. Expected by one user group, surprising to confusing by another.

More context is provided on https://phabricator.wikimedia.org/T275681#6882448