Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.The fact that the second level of the toolbar is white is creating problems to distinguish it from the form itself. This is especially visible in the horizontal orientation and when scrolling down into the form:
Probably using the grey of the old shortcut bar or some other shade of grey makes best sense. The second level needs to be discernable from the first level, but still from the rest of the page.
Seven is the default Admin theme and has white background. Most webpages have white background. So going for something that is sufficiently different from white should do.
| Comment | File | Size | Author |
|---|---|---|---|
| #12 | toolbar-overlay.jpg | 93.04 KB | dodorama |
| #12 | toolbar-overlay-lighter.jpg | 99.45 KB | dodorama |
| #12 | toolbar-overlay-darker.jpg | 92.76 KB | dodorama |
| #9 | Brighter Icons.png | 123.86 KB | dodorama |
| #5 | toolbar icons.png | 61.26 KB | dodorama |
Comments
Comment #1
eigentor commentedchanging title.
Comment #2
yoroy commentedSo lets make a list of all these design issues in a central place before opening individual issues for them
Comment #3
sunComment #4
dodorama commentedI've being working on a dark grey version, similar to the shortcut bar in D7. I can post a patch this weekend if you feel it could work.
Comment #5
dodorama commentedOn another note, now that I've been looking at the toolbar for a while, it seems like the icons are too big. I bet there's a reason for it but it looks way more balanced with icons at 16px.
Comment #6
dodorama commentedChanging Status.
Comment #7
eigentor commentedLooks good, but please make the incons brighter. They are quite important and get lost a little since the grey of the icons is too dark.
Comment #8
sunThe dark background color definitely works much better for the horizontal orientation.
The actual color and shade of gray could be optimized though (and also pimped with CSS3). Also, the icons should obviously use a much lighter color - they're barely visible.
Not exactly sure on the vertical orientation though. OTOH, the Admin module suggests that it is a viable approach and users seem to like it.
Comment #9
dodorama commentedYep. I forgot to change the icons. Here we are.
Comment #10
Bojhan commentedIts very nice you guys design without overlay, but reality is overlay is in core. And that design is horrible with overlay turned on - its dark gray, on dark gray.
I do not understand the current Toolbar visual strategy, perhaps tkoleary can shed light on it.
Comment #11
sunPerhaps we can add a 1px white border no the right when the overlay is active? Or alternatively, adjust the shadow?
I think the toolbar needs to work for both with-overlay and without-overlay users. The current white background presents a serious contrast/differentiation problem with regard to the actual, non-toolbar page content.
Another alternative would be to use a lighter background color. Apparently, the shortcut bar from D7 used a lighter background and worked with both overlay enabled and disabled.
Comment #12
dodorama commentedThe overlay at the moment doesn't work with the toolbar. That's why I didn't realize that, in fact, it doesn't really work with the dark grey toolbar.
I did a mockup of a lighter version and a darker one. The problem with the lighter one is keeping the contrast accessible when going into deeper level of the menu.
Also, the tabbed top level menu is awkward when a link that doesn't overlap with the toolbar is active. I'll try something else.
Comment #13
eigentor commentedWe have created a bit of a problem for ourselves with the horizontal/vertical toggle for the toolbar. It needs to be found out how many people actually find the switch and voluntarily switch to vertical.
If those are quite some, the entire color contrast / overlay mess is an issue indeed.
As long as they stay in horizontal, the proposed design does not present a problem as it is basically the old toolbar with icons and a bit more switching between what appears in the second level.
Maybe a solution might be to prevent the overlay from overshadowing the vertical toolbar, because this is a UI nightmare no matter from what angle you look at it. Covering up UI elements the user might want to click with another element is a UX fail because they are going to be confused and frustrated.
The color contrast is only a small part of that, so I don't think we should worry about that. If it plays together, it probably will be like with Admin module in D7: Toolbar on the left, Overlay only appears right of the toolbar and no overlap.
Comment #14
sun#1856672: Toolbar is too large and involves too much chrome: make it spacious on touch interaction, condensed on pointer interaction
Comment #15
tkoleary commentedOk. I missed this issue at the end of last week. First off, while I appreciate the input, i'd just like to note that a great deal of time went in to the design of the toolbar and none of the decisions were arbitrary or unconsidered. There may be problems with the design as implemented, however, I think it could be wheel spinning to start making changes based only on our own opinions and not usability data. Dharmesh will be testing this soon and there will be plenty of that.
If any of the above observations arise repeatedly as usability problems in testing *then* we can make them issues to be acted on. Until then they only represent individual data points. Worse, we may waste valuable time re-designing things that are already usable while other, far more serious issues remain unresolved.
Comment #16
tkoleary commentedGiven that no usability problems have surfaced in any of the many tests Dharmesh has run with this toolbar in place since this issue was started I am closing this as 'works as designed".
However I do think that the simpler up down arrow icons proposed by dodorama in #4 remove visual noise so I am starting another issue to implement them and assigning it to myself.
Comment #17
tkoleary commented