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.

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

Status: Needs work » Active
Issue tags: -toolbar, -user profile
tkoleary’s picture

Issue tags: +sprint
tkoleary’s picture

Assigned: Unassigned » tkoleary
Status: Active » Needs review
FileSize
2.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

yoroy’s picture

Status: Needs review » Needs work
FileSize
33.42 KB

Looking good but:

Looks like this floats another link as well.

tkoleary’s picture

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

tkoleary’s picture

Issue summary: View changes
FileSize
21.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

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

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

Status: Needs review » Reviewed & tested by the community
FileSize
24.86 KB
25.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

Issue summary: View changes
Status: Reviewed & tested by the community » Needs review
Issue tags: +Needs usability review
FileSize
64.38 KB
61.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

Issue tags: -Needs usability review
FileSize
57.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

yoroy’s picture

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

@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

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

Yes. That disconnect is very problematic.

yoroy’s picture

Status: Needs review » Needs work

Then this needs work :)

tkoleary’s picture

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

Can we continue with comment #20 here?