Tweak the active styling of the toolbar tab to be more noticeable [#2523062]

Problem/Motivation

During the usability study, some participants did not realise the 'manage' tool tab was open by default. The effect is very subtle. Gradients are also very rare in the admin interface, so the new styling should follow the Seven style guide

Proposed resolution

Design experimentation needed

Remaining tasks

Design
Patch
Test

User interface changes

Toolbar tab active state

API changes

None.

Data model changes

None.

Comment	File	Size	Author
#5	invert_active_toolbar-2523062-5.patch	6.45 KB	mErilainen
#5	8.0.x: PHP 5.5 & MySQL 5.5 Patch failed to apply
#4	contextual.png	4.34 KB	mErilainen
#4	user.png	19.96 KB	mErilainen
#4	shortcuts.png	20.16 KB	mErilainen
#4	manage.png	19.9 KB	mErilainen
#4	invert_active_toolbar-2523062-4.patch	5.79 KB	mErilainen
#4	8.0.x: PHP 5.5 & MySQL 5.5 13,241 pass
#3	Screen Shot 2015-08-13 at 14.24.47.jpg	365.2 KB	LewisNyman
#3	Screen Shot 2015-08-13 at 14.22.23.jpg	135.92 KB	LewisNyman
#3	Screen Shot 2015-08-13 at 14.21.58.jpg	361.56 KB	LewisNyman
#2	lighter-active-tab.png	60.43 KB	mErilainen
#2	lighter_active_toolbar_tab-2523062-2.patch	774 bytes	mErilainen
#2	8.0.x: PHP 5.5 & MySQL 5.5 13,239 pass

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

amateescu CreditAttribution: amateescu commented 3 July 2015 at 13:56

Component:

entity_reference.module

» toolbar.module

Moving to the right component :)

Comment #2

mErilainen CreditAttribution: mErilainen at Wunder commented 13 August 2015 at 11:07

Status:

Active

» Needs review

File	Size
lighter_active_toolbar_tab-2523062-2.patch	774 bytes
8.0.x: PHP 5.5 & MySQL 5.5 13,239 pass
lighter-active-tab.png	60.43 KB

Simply making the background gradient lighter helps a lot.

Comment #3

LewisNyman

he/him

CreditAttribution: LewisNyman at Wunder commented 13 August 2015 at 12:26

Issue summary:

View changes

File	Size
Screen Shot 2015-08-13 at 14.21.58.jpg	361.56 KB
Screen Shot 2015-08-13 at 14.22.23.jpg	135.92 KB
Screen Shot 2015-08-13 at 14.24.47.jpg	365.2 KB

I think that we are going to run into text color contrast issues with this solution. If we leave the text white then it limits how much contrast we can have between the active state and the regular state.

Other options would be to invert the colors or use a different highlight color:

I prefer the inverted colors as it creates a relationship between the active tab and the toolbar tray below it.

Comment #4

mErilainen CreditAttribution: mErilainen at Wunder commented 14 August 2015 at 07:32

File	Size
invert_active_toolbar-2523062-4.patch	5.79 KB
8.0.x: PHP 5.5 & MySQL 5.5 13,241 pass
manage.png	19.9 KB
shortcuts.png	20.16 KB
user.png	19.96 KB
contextual.png	4.34 KB

I like the inverted colors approach also. It will make the patch a lot more complicated, because I had to add new inverted svg icons not only for toolbar module, but also shortcut, user and contextual modules. Attached screenshots of the changes.

Comment #5

mErilainen CreditAttribution: mErilainen at Wunder commented 14 August 2015 at 07:38

File	Size
invert_active_toolbar-2523062-5.patch	6.45 KB
8.0.x: PHP 5.5 & MySQL 5.5 Patch failed to apply

Whoops, the active edit link background changed to blue after clicking anywhere, fixed that.

Comment #6

LewisNyman

he/him

CreditAttribution: LewisNyman at Wunder commented 14 August 2015 at 08:16

Status:

Needs review

» Needs work

I think this looks pretty good. I noticed that the toolbar background color is not actually pure black #000. It's #0f0f0f

Two other comments

+++ b/core/modules/toolbar/css/toolbar.theme.css
@@ -47,8 +47,8 @@
+  color: #000000;
+  background-color: #ffffff;

Where possible, we use the three character color values. https://www.drupal.org/node/1887862#properties

Comment #7

Bojhan CreditAttribution: Bojhan commented 14 August 2015 at 10:55

I am wondering if this is actually going to solve the issue. Isn't it more that they don't really look like tabs but are? We don't have issues like this with the tabs on admin pages.

Comment #8

mErilainen CreditAttribution: mErilainen at Wunder commented 18 August 2015 at 06:58

Status:

Needs work

» Needs review

Even if the background isn't "pure black", I think the font can be exactly pure black. Does it make any sense to create a svg icon for fifty shades of gray, bloating the curiously named "misc" folder even more?

When it comes to the three character values vs. six char values, I was trying to follow the convention in the same file. There are no three char values there.

Are we trying to get Drupal8 out someday, or fine tune it until perfection?

Changing back to Needs review, because I disagree.

Comment #9

LewisNyman

he/him

CreditAttribution: LewisNyman at Wunder commented 28 August 2015 at 16:24

I am wondering if this is actually going to solve the issue. Isn't it more that they don't really look like tabs but are?

My first thought went to contrast because the eye tracking seemed to completely ignore the area.

Comment #10

LewisNyman

he/him

CreditAttribution: LewisNyman at Wunder commented 28 August 2015 at 16:26

Status:

Needs review

» Needs work

Changing back to Needs review, because I disagree.

We have agreed standards for this, my opinion or your opinion aren't worth much compared to an agreed consensus. Setting back to needs work.

Comment #11

mgifford

he/him

English

CreditAttribution: mgifford at OpenConcept Consulting Inc. commented 13 March 2016 at 05:32

Just following up on #9 - @Bojhan if contrast isn't enough, what else should we throw at this?

Comment #12

13 March 2016 at 05:38

The last submitted patch, 5: invert_active_toolbar-2523062-5.patch, failed testing.

Comment #13

13 March 2016 at 05:38

Version:

8.0.x-dev

» 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Comment #14

13 March 2016 at 05:38

Version:

8.1.x-dev

» 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should 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.