Problem/Motivation

The ubiquitous position of "user" or "account" menu items in toolbars is on the upper right. This has become a standard in most web applications. For better usability we should be following this pattern.

Proposed resolution

Given that we are also proposing moving "edit" to the far left isnce it is currently undiscoverable (based on UMN testing). Now the righthand toolbar position would be (by default) empty, and "user" would be even more clear and discoverable if moved to the right.

Remaining tasks

Move the item.

User interface changes

The User link moves to the right.

CommentFileSizeAuthor
#16 After Patch_mobile.PNG13.91 KBmahtoankit77
#16 After Patch.PNG13.3 KBmahtoankit77
#15 user-menu-right.png57.5 KByoroy
#14 IMG_4011.png61.14 KBxjm
#14 IMG_4012.PNG64.38 KBxjm
#13 Without patch-1.png25.06 KBkrina.addweb
#13 With patch-1.png24.86 KBkrina.addweb
#12 2754489-move-user-12.patch4.55 KBaaronchristian
#9 Screen Shot 2016-12-09 at 5.08.31 PM.png21.32 KBtkoleary
#7 rightfloatingness.jpg33.42 KByoroy
#6 interdiff-c706187.txt1.51 KBtkoleary
#6 2754489-move-user-6.patch3.91 KBtkoleary
#5 2754489-move-user-5.patch2.41 KBtkoleary

Comments

tkoleary created an issue. See original summary.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

xjm’s picture

xjm
she/her
Primary language English
commented
Status: Needs work » Active
Issue tags: -toolbar, -user profile
tkoleary’s picture

tkoleary commented
Issue tags: +sprint
tkoleary’s picture

tkoleary commented
Assigned: Unassigned » tkoleary
Status: Active » Needs review
StatusFileSize
new 2754489-move-user-5.patch2.41 KB

Since we can't change this css in Stable I also added it to Bartik. Other themes that inherit stable but want this will need to override stable.

tkoleary’s picture

tkoleary commented
StatusFileSize
new 2754489-move-user-6.patch3.91 KB
new interdiff-c706187.txt1.51 KB

Added to seven also.

yoroy’s picture

yoroy commented
Status: Needs review » Needs work
StatusFileSize
new rightfloatingness.jpg33.42 KB

Looking good but:

Looks like this floats another link as well.

tkoleary’s picture

tkoleary commented

Weird. It's targeting those specific items, not a generic class.

tkoleary’s picture

tkoleary commented
Issue summary: View changes
StatusFileSize
new Screen Shot 2016-12-09 at 5.08.31 PM.png21.32 KB

@yoroy

My code's not doing that. That's already the built-in behavior, for some reason.

It's coming from shortcut module, which I didn't touch.

yoroy’s picture

yoroy commented
Status: Needs work » Needs review

Doh, you're right, it's by design. Disregard!

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

aaronchristian’s picture

aaronchristian commented
StatusFileSize
new 2754489-move-user-12.patch4.55 KB

Looks good on my end @tkoleary.

Was having an issue applying to drupal 8.4.x-dev.

error: patch failed: core/themes/seven/seven.libraries.yml:25

Rerolled the patched.

krina.addweb’s picture

krina.addweb commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new With patch-1.png24.86 KB
new Without patch-1.png25.06 KB

@AaronChristian, Your patch seems working correctly, I checked it by changing the Administration theme's ( Bartik,Seven & Default theme)

PFA

xjm’s picture

xjm
she/her
Primary language English
commented
Issue summary: View changes
Status: Reviewed & tested by the community » Needs review
Issue tags: +Needs usability review
StatusFileSize
new IMG_4012.PNG64.38 KB
new IMG_4011.png61.14 KB

Thanks for the manual testing!

I tested this on mobile. It mostly works as expected. However, there is a small UX regression IMO. The design behavior in HEAD is that when I click on the menu button in the toolbar, this expands and collapses the vertical toolbar which is over the page. In HEAD this is also true of the user button and it looks visually connected to the vertical toolbar it is expanding or collapsing:

However, with the patch, it is visually disconnected, and I did not initially understand that clicking on the user icon was the way to make the menu go away so I could use the page:

This actually also applies to the vertical toolbar mode on a desktop width, with the user link being visually disconnected (and actually very far away from) from the thing it opens and closes. On a desktop you're maybe less likely to want to close the menu, whereas on mobile it's essential.

Setting NR for usability feedback on that part of the change, and to weigh whether the user enhancement of moving the link to the expected place is worth the regression of the disconnect, or whether there is a third solution. Thanks!

yoroy’s picture

yoroy commented
Issue tags: -Needs usability review
StatusFileSize
new user-menu-right.png57.5 KB

Quick video to show that the disconnect is indeed very big on desktop: https://youtu.be/4V56YSOD_6M

Could we special case the subs for this user account menu and float the vertical toolbar to the right as well?

mockup with the user menu expanded in vertical layout, floated to the right so that it appears directly under the user account link in the toolbar

mahtoankit77’s picture

mahtoankit77 commented
StatusFileSize
new After Patch.PNG13.3 KB
new After Patch_mobile.PNG13.91 KB

Tested and verified in Desktop & Mobile.

mahtoankit77’s picture

mahtoankit77 commented
Status: Needs review » Reviewed & tested by the community

Tested and verified in Desktop & mobile.

yoroy’s picture

yoroy commented
Status: Reviewed & tested by the community » Needs review
tkoleary’s picture

tkoleary commented

@yoroy

On it's face that looks like a good idea but I'm concerned about how it works with the settings tray.

If you recall, in responsive preview we had a similar scenario and we addressed it with a separate dropdown. I think that might be a better solution here.

yoroy’s picture

yoroy commented

Hmm, I don't recall :-)

A separate dropdown would be even better, having those account sub menu items in the toolbar always looked a bit contrived to me. Seems that you agree that we *do* have to do something about the current disconnect between main menu item and its subs, yes?

tkoleary’s picture

tkoleary commented

Yes. That disconnect is very problematic.

yoroy’s picture

yoroy commented
Status: Needs review » Needs work

Then this needs work :)

tkoleary’s picture

tkoleary commented
Assigned: tkoleary » Unassigned

Here is the implementation of a right-side dropdown from the toolbar.

https://www.drupal.org/files/project-images/screenshot-2_5.png

Bojhan’s picture

Bojhan commented

Can we continue with comment #20 here?

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

lendude’s picture

lendude
Primary language Dutch
Location Amsterdam
commented
Category: Bug report » Feature request
Issue tags: +Bug Smash Initiative

This came up as a daily triage target of the Bug Smash Initiative.

We discussed this and feel like it is more a feature request than a bug, so changing it.

Also, is this something we still think needs fixing? After the discussion about this leading to a disconnect between the link and the subs, this sort of stalled.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

quietone’s picture

quietone commented

The Toolbar Module was approved for removal in #3476882: [Policy] Move Toolbar module to contrib.

This is Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.

The deprecation work is in #3484850: [meta] Tasks to deprecate Toolbar module and the removal work in #3488828: [meta] Tasks to remove Toolbar module.

Toolbar will be moved to a contributed project before Drupal 12.0.0 is released.

quietone’s picture

quietone commented
Status: Needs work » Postponed
quietone’s picture

quietone commented
Project: Drupal core » Toolbar
Version: main » 1.x-dev
Component: toolbar.module » Code
Status: Postponed » Needs work

Toolbar module has moved to contrib.