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
Support from Acquia helps fund testing for Drupal Acquia logo

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
CreditAttribution: xjm at Acquia commented
Status: Needs work » Active
Issue tags: -toolbar, -user profile
tkoleary’s picture

tkoleary CreditAttribution: tkoleary at Acquia commented
Issue tags: +sprint
tkoleary’s picture

tkoleary CreditAttribution: tkoleary at Acquia commented
Assigned: Unassigned » tkoleary
Status: Active » Needs review
FileSize
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 CreditAttribution: tkoleary at Acquia commented
FileSize
2754489-move-user-6.patch3.91 KB
interdiff-c706187.txt1.51 KB

Added to seven also.

yoroy’s picture

yoroy CreditAttribution: yoroy at Roy Scholten commented
Status: Needs review » Needs work
FileSize
rightfloatingness.jpg33.42 KB

Looking good but:

Looks like this floats another link as well.

tkoleary’s picture

tkoleary CreditAttribution: tkoleary at Acquia commented

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

tkoleary’s picture

tkoleary CreditAttribution: tkoleary at Acquia commented
Issue summary: View changes
FileSize
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 CreditAttribution: yoroy at Roy Scholten 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 CreditAttribution: AaronChristian at Acro Commerce commented
FileSize
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 CreditAttribution: krina.addweb at AddWeb Solution Pvt. Ltd. commented
Status: Needs review » Reviewed & tested by the community
FileSize
With patch-1.png24.86 KB
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
CreditAttribution: xjm at Acquia commented
Issue summary: View changes
Status: Reviewed & tested by the community » Needs review
Issue tags: +Needs usability review
FileSize
IMG_4012.PNG64.38 KB
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 CreditAttribution: yoroy at Roy Scholten commented
Issue tags: -Needs usability review
FileSize
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 CreditAttribution: mahtoankit77 commented
FileSize
After Patch.PNG13.3 KB
After Patch_mobile.PNG13.91 KB

Tested and verified in Desktop & Mobile.

mahtoankit77’s picture

mahtoankit77 CreditAttribution: mahtoankit77 as a volunteer commented
Status: Needs review » Reviewed & tested by the community

Tested and verified in Desktop & mobile.

yoroy’s picture

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

tkoleary CreditAttribution: tkoleary at Acquia 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 CreditAttribution: yoroy at Roy Scholten 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 CreditAttribution: tkoleary at Acquia commented

Yes. That disconnect is very problematic.

yoroy’s picture

yoroy CreditAttribution: yoroy at Roy Scholten commented
Status: Needs review » Needs work

Then this needs work :)

tkoleary’s picture

tkoleary CreditAttribution: tkoleary at Acquia 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 CreditAttribution: Bojhan as a volunteer and 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
CreditAttribution: Lendude at iO 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.