The visibility of the secondary navigation is far from optimal, after seeing how people used Drupal 7 only a little - it was clear that the visibility of these links is not good.

As we get more complex information architectures that distributions and other applications bring, it is very critical these links have good exposure. This because its impossible for all navigation in these apps to be placed in tabs, as much as we strived to do that.

One of the options, is adding a tiny bit of spacing.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Bojhan’s picture

FileSize
2.54 KB

So this is the current situation.

secondarynavigation.png

yoroy’s picture

sub, will work on a patch

Bojhan’s picture

FileSize
7.92 KB

Here is a better illustration, as you can see the secondary navigation is a bit squished together the help text and the tabs.

betterillustration.png

yoroy’s picture

Status: Active » Needs review
FileSize
796 bytes

Something like this. More evenly distributed space above and below the links. Added 1px top and bottom padding to the dark active state for a bit more body:

secondaries

Bojhan’s picture

I reviewed it. I think it needs a little bit more to increase its visibility, for example adding a gray-ish background to the inactive items.

rickvug’s picture

Here is a new version of the patch with an 1px more padding top and bottom than the last patch (2px total increase relative to core). Border radius settings have been updated to increase for the additional height. Also, I noticed that the text inside each menu item was not properly centered. The text was about 2-3px extra padding on the right. I fixed this at the same time. Screen shots attached.

aspilicious’s picture

you need the bottom padding, else you have two borders squeezed on each other see top border of the table on the after picture.
And what happened with the text o_O

aspilicious’s picture

Status: Needs review » Needs work
yoroy’s picture

Status: Needs work » Needs review
FileSize
1.26 KB

Worked on it some more with Bojhan:

secondaries2

Took care to keep breadcrumb and link line-heights intact:

secondaries-align

As you might notice, we're dropping the gray border below the tabs as well, considering it needless 'chrome'.

aspilicious’s picture

FileSize
35.02 KB

Here is a screenshot

PS: If people think my screenshots need to be in lower resolution, tell me...

yoroy’s picture

Heh, they were there already but the input format selection keeps tripping me up

Bojhan’s picture

Status: Needs review » Reviewed & tested by the community

Spoke about it with webchick, she was fine with it so putting it to RTBC.

Dries’s picture

Status: Reviewed & tested by the community » Fixed

Committed to CVS HEAD. Thanks.

yoroy’s picture

I'm not happy with this yet myself and would like to refine this. Mainly because compared to the primary tabs, I switched around the visual vocabulary for 'acitve' and 'normal': active primary tabs are black text on white, right now, active secondary tabs are white on dark gray.

Applies the primary styling to the secondary tabs as well:

secondarytabs

I worry about the contrast ratio for the inactive ones, but overall this is a lot more consistent and less visual noise.

yoroy’s picture

Status: Fixed » Needs review

status

Bojhan’s picture

Oef, I am not sure - it makes it more consistent. But to me "Garland" and "Seven" ask for more attention then the "active" item. This is different from the tabs, which have this presence simply because of their scale and form.

rickvug’s picture

re #14: This is more consistent but I find it confusing. A white background without an underline typically means a link is inactive (or isn't a link at all). The white background on the settings tab makes visual sense as the white is visually connected with content being displayed below.

james.elliott’s picture

FileSize
19.71 KB

I don't know if this should be a separate issue, but it pertains to the styling of the secondary navigation and specifically how it interacts with the breadcrumbs.

They overlap each other on narrow pages instead of flowing on their respective sides of the page.

Only local images are allowed.

Bojhan’s picture

Buy a wider screen.

Jeff Burnz’s picture

@18/19 - I think this can be fixed and probably should be, we can never predict the length of a breadcrumb nor the number of secondary links, also Seven allows a fairly narrow min-width therefor the display should work with that min-width.

We should be able to make it so that if they overlap the breadcrumb appears under the secondary links, which I would assume is the preferred option, otherwise they appear on the same "line".

Bojhan’s picture

Hah, ofcourse :) I was only joking

james.elliott’s picture

I'd happily take donations towards my wider screen fund.

Actually I only have wide screens and never would have noticed this issue. This actually came up in the media module issue queue #976728: Breadcrumbs overlap buttons on Manage Display tab

Jeff Burnz’s picture

Status: Needs review » Needs work

I crafted a fix for this the other day - I had to move the breadcrumb variable, which I think is OK, unfortunately I updated from head without rolling a patch, I'll crack on with this asap... unless someone beats me to it :)

geerlingguy’s picture

Same problem as #18, but this time with Boost #1045664: Breadcrumbs overlap secondary tabs. Boost adds 5 large links under the main Boost tab, and this means two of the links are completely obscured by the breadcrumbs, offering only a 1-pixel-high clickable area (not very easy to use!).

We should definitely clear the breadcrumbs for the secondary nav links (see screenshot here: http://drupal.org/files/issues/overlapping-tabs.png).

The #page { position: relative; } rule makes it so it's impossible to simply clear the breadcrumb div for the secondary tabs div/ul. Not as quick a fix as I thought it would be.

Oh, and I'm using a 27" iMac - I just like having 3-6 browser windows open at the same time, not hogging the entire screen ;-)

mikeytown2’s picture

subscribe from boost. Odds are I will be adding more menu items as I bring features from 6.x over.

yoroy’s picture

Boost could also go a bit easier on name spacing each link there, no need to use the module name in each and everyone of them. mikeytown2: I'll be happy to help you sort boost admin pages out, got a pointer to a relevant issue for boost?

Regardless, we want to fix this behavior of course.

effulgentsia’s picture

Subscribe. There will be a growing number of contrib modules (we already have Boost, Media, Display Suite) that add enough secondary tabs to cause an overlap with the breadcrumb. With Seven as the default admin theme, and Overlay as on by default, it would be great to have this fixed.

Noyz’s picture

Subscribe

Noyz’s picture

My suggestion to fix this...

Move the breadcrumbs above the overlay title, brighten them up a bit so they stand out on black. Move all pills to the left of the overlay (which will also make them easier to find), wrap as necessary. As it is, it doesn't make sense to have breadcrumbs below the title anyways. I.e., breadcrumbs show you how you got to a page, they are not part of the page you got to. Like this:

https://skitch.com/jeff.noyes/fxtq9/adobe-fireworks-cs5

(not I also pushed over the overlay title to align to the overlay and make room for tabs)

pixelsweatshop’s picture

Might i suggest moving to jump menus (aka quick menus) for secondary navigation. It will take up very little space, you can unlimited number secondary items (without breaking layout), it's supported by most major mobile devices (and in fact get's opened up in a nice native popup on many modern mobile devices (ipad/iphone)

Noyz’s picture

The trouble with jump menus is that

1. They hide items: Im all for leading with the option thats most used, but I'm not sure we can understand the 80% in this case. That is, can we really say that 80% of the time, people only care about managing the display of full nodes and not RSS feeds, Comments, Teasers, Etc?

2. Jump menus cause issues for the mobile impaired. Honestly I have less of a concern here - but just calling it out.

I did another revision to the design that I posted earlier:

https://skitch.com/jeff.noyes/f2uaj/adobe-fireworks-cs5

Jeff Burnz’s picture

If we can get some UX feedback and a provisional go ahead (Bojhan/yoroy and co) I can craft a patch for Noyz suggestion, I think it looks good and am big +1 for moving the tabs over to the left, I can't tell you how much this screwed me up when first starting with Seven - they are practically invisible on the right, especially the secondary tabs. My own admin theme uses a very similar approach with breadcrumbs above the tile and all tabs on the left below the title - I think this works better.

dcrocks’s picture

How does #29 look with the toolbar? Seems like it might be hard to pickup.

Noyz’s picture

@dcrocks... pretty much the same as #31. Both work, but #29 was really just a stop gap, whereas #39 was redesigned to solve the following:

  • Overlay tabs are moved to be in the path of reading (moved to the left)
  • Overlay "display tabs" are also moved to be in the path of reading - and can now scale to accommodate many displays without interrupting the breadcrumb trail (moved to the left)
  • Breadcrumbs are about how you got to a page, and as such, they are a parent to the page - not a child of the title. (moves above the page title)
  • DSM's pop down and have more contrast and presence than current alerts. (alerts slide down from below the admin bar)
dcrocks’s picture

I like what you have done but would it pass WCAG tests? I have problems picking up that blue against black.

Jeff Burnz’s picture

The contrast of the blue on the background is a concern but something we can figure out in a patch, its not an insurmountable issue.

Bojhan’s picture

Title: Visiblity of secondary navigation » Visiblity of primary & secondary navigation
Version: 7.x-dev » 8.x-dev
FileSize
24.58 KB

I dont think we will be needing patches soon, lets first discuss this more in depth. The issue that we tried to solve originally was improving the visibility of secondary navigation without changing to much of Sevens overall look. This because it was late in the D7 cycle, however for D8 (changed version accordingly) we can reconsider this whole pattern altogether.

The ideas proposed by noyz, seem to focus on trying to solve this more holistically. Not just fixing the visibility of secondary navigation, but also primary (changed the title accordingly). Both are significant problems given that they are the main method of navigation within a section. The actual overlapping of secondary with breadcrumbs, could be solved for D7 with a quick fix of wrapping when they overlap (we should consider doing this in a separate issue, if you guys agree on this I can open one).

I would like us to experiment some more, throwing in an idea of my own. One of the things I want to do is create more balance, the secondary menu items kind of look ugly in any way we position them. And if we start stacking things up we have a risk of diminishing the visible area even more (toolbar, shortcut bar - take up quite some vertical screen real estate).

Below is an idea, to create a "bar" that holds the secondary navigation. This also requires some re positioning of other elements on the page. I am definitely not totally pleased about it yet (action button, not enough prominence, contrast could use work), but its a starting concept.

overlay-revision-of-things-onthe-page.jpg

To give a little bit of feedback on Noyz idea, I like the positioning to the left - although the buttons that should be less prominent are kind of in your face right now. With some more visual balance, that should be oke. Placing the breadcrumbs above the title of the page is correct, not sure if the fact they are often longer than the page title is not distracting though. Quite often the breadcrumb has less prominence above the page title, because either the page title is far bigger or the colors used for breadcrumbs do not attract attention.

Lets leave the DSM for another issue, and keep this one focused only on the on-page navigation.

Jeff Burnz’s picture

The main issue I find with this design pattern is when there are no secondary links there are only a few options - an empty navbar, bad looking tabs, or three, switch the color of the active tab to white, which is what we did in Bartik (when the featured content region is active the active tab changes color to match). If we went in this direction I think I like the idea of switching the active tab color to white when there are no secondary tabs.

Not really sure about those breadcrumbs down there in the content, they feel like a distraction and not part of the task the user is looking to achieve. Possibly above the title and below the tabs could work.

All in all not really sure about this pattern, its an oldie but is it a goodie? I like that it separates away the nav from the task (the content), and its very easy to glance back and fourth between the two - easy to both ignore and locate.

Noyz’s picture

FYI, we're about to release the version in #29 on Drupal Gardens. I'd really like to keep DG and Drupal in sync.

Bojhan’s picture

@Noyz In sync with 7 or 8? For 7 this wont happen, we will need a quick fix for wrapping in D7 - because we cant touch visual design there.

For D8 I think we can explore more designs (its still 2 years out anyway), I don't like the aesthetic imbalance that the direction in DG creates. Whenever there are two tabs, this solution doesn't look quite as nice and the design is very "hard" as in putting loads of stuff in your face, I would like to balance it out more by for example trying out more calm designs such as in #37.

theborg’s picture

I'd like to note that there is an extra ul in page.tpl code that is not needed.
Issue: Overlay breadcrumb overlaps secondary tabs

In the same patch I've added wrapping to the secondary links that Bojhan mentioned.

Bojhan’s picture

With #1510532: [META] Implement the new create content page design now posted, we should reconsider how to design for this new pattern in parallel with improving our primary/secondary level nav.

Xano’s picture

I've seen lots of people being unable to locate the secondary tabs. They just don't see they're there or that they're relevant. I would say this is because of a lack of a visual link between the primary and secondary links, a concern which is addressed by the design posted in #37.

AaronBauman’s picture

Just want to reiterate that having tabs / buttons / pills / local tasks on the right, especially with ever-increasing widths for desktop monitors, leads me to miss them. every. single. time.
Bojhan's design in #37 is, for me, a major improvement on Seven's tab placement.

For posterity, I've dug up a handful of other issues that were closed as duplicates on this one complaining about the right-aligned tabs (dating back to mid-2009):
#549814: Seven theme tabs are unclear
#570780: Curtail Seven widths
#721308: Active tabs in seven stick to the tab on the right
#1034416: Tabs on the right go unnoticed
#1003988: Improve the visibility of tabs

Further, even though this will probably never get backported to Drupal 7, I'm attaching a one-line patch to move the tabs back over to the left.

Xano’s picture

@aaronbauman: Don't forget to update the corresponding line from the RTL stylesheet as well ;-)

Noyz’s picture

Update from me on this... We hit a bug at the last minute and had to pull this from DG. Since then we have to shift gears, so no rush to align to DG. To answer the question about aligning to D7 or D8, the answer was both - as best as possible. To the extent that it can't align to D7, then we'd want to align to D8.

To the point about the buttons being to prominent... I like #37 too, but I think your logic is wrong. The goal is not to hide those buttons, possibly not even diminish since major actions like configuring different displays occur. To the point made by Xano (#37) people are missing these links. That's an issue that needs fixing.

#1 and #37 both work. And by the way, the blue does pass contrast tests.

mgifford’s picture

This issue hasn't moved much since April. Do we need more mockups to move this ahead? How do we help improve the visibility of these items so we can close this issue in D8?

ry5n’s picture

Played around with how this could look alongside the new content creation page. Three variants that take into account previous ideas in this thread while making minimal changes to the existing UI.

d8-secondary-tabs-A
d8-secondary-tabs-B
d8-secondary-tabs-C

dcrocks’s picture

Seems like the primary menu is overlayed in 2 images. And sorry, as someone with vision problems, I don't see how this passed contrast tests.

ry5n’s picture

@dcrocks Yeah, I know there are contrast issues. I'm more concerned about these as potential solutions in terms of layout and overall styling. If the layout is sound, we can fix the contrast problems. The important ideas are:

- Move breadcrumbs out of the overlay, tying them more closely to the toolbar
- Align the secondary tabs to the left
- Style secondary tabs in such a way that they are connected both to the primary tabs (which remain at top right) and the content below.

I'm not sure what you mean by the primary menu being overlaid. Can you elaborate?

dcrocks’s picture

Sorry, I forgot I'm looking at an overlay. And which menu I'm talking about. Though it makes no difference, its just that the page beneath the overlay is different in the images.
I prefer the appearance in image A as it better gives the impression that clicking on a tab will change the view, as well as being consistent with the other tabs displayed on the overlay. My 2 cents.

ry5n’s picture

@dcrocks Thanks for your feedback, duly noted. I'd like to hear from a few other folks and get a consensus on what to put in a patch.

ry5n’s picture

I was unsatisfied with my comps from yesterday. I decided to try something more lo-fi to focus in on the core of the issue. What I ended up with is the same solution as Jeff Noyes in #31. See his excellent rationale in #34 for why this works. I do think my sketch is visually clearer, though.

Jeff's design:

My sketch:

I think this basic solution is good to go, and should make the narrow-screen state easier to implement.

ry5n’s picture

Status: Needs work » Needs review
FileSize
97.68 KB
88.47 KB
17.18 KB

A patch! It depends on the latest patch from Tame Seven’s Reset though, so apply that first.

Details:
- moves things around visually in accord with #34 (and #53)
- adjusts markup and supporting template/module code as needed (needs PHP review!)
- I had trouble with contrast (differentiating the various tab levels) in non-overlay mode. Found that switching the branding area to light text on dark solved this issue, but this change needs design review.
- updates the overlay-close image for technical reasons (style is not changed).

Screenshots:
New secondary tabs, no-overlay mode
New secondary tabs in the overlay

ry5n’s picture

Issue tags: +design, +Seven, +#d8ux, +Usabilty

Reviewing my own patch here, but if the change to the overlay-close image is deemed acceptable, overlay-close-rtl.png can be deleted, since it's not needed. The downside is that in IE8 the overlay-close tab itself will be square rather than rounded.

sun’s picture

Oh wow! I really like the suggested design and screenshots in #53 and #54.

Will have to apply the latest patch to review the changes.

ry5n’s picture

@sun Thanks! Don't forget to apply the latest patch from http://drupal.org/node/723392 (Tame Seven's Reset) since this patch depends on that.

yoroy’s picture

FileSize
83.55 KB

Annotated screenshot of primary/secondary nav styling

Nice work ry5n. My remarks:

1. You've removed the rounded corners on the primary tabs. Not sure this very boxy look is what we're after though. It's very clean and solid but we've also lost that tabby feeling, which is appropriate here. Bordering on pure taste differences, but then again, most browsers use rounded corners for page tabs so it might be worth keeping that here as well. I would also experiment with maybe a rounded corner for the very first and very last tab.

2. I think the styling for the secondary links is a bit too much. You've achieved a clear connection between active primary tab and it's subs. But at the cost of more UI chrome: a border, a background tint and the white triangle for the active secondary link. Seems to me you added a seperation first with the border and bg-color, and then re-established a connection using the white triangle. This issue is primarily about the visibility/discoverability of these links and for the secondary ones, I think just having them left- instead of right-aligned might well be enough to fix that problem.

“No matter how cool your UI, it would be better if there were less of it” – Alan Cooper

What do you think?

ry5n’s picture

@yoroy Thanks for the review! Much appreciated.

RE: 1. Aesthetically, I prefer the tabs without the radii, but I am fine with keeping the existing look, or something in-between.

RE: 2. I agree that we're looking at a little extra visual partitioning here with the extra background tint and the bottom border on the tabs. I don't find it much more 'chrome-y' than the existing tabs (the 'pill' style is gone, as a trade-off), but I realize this is also subjective. More to the point though, the border and tint *are* there for a reason. The tint and/or border separates the tab region decisively from the content region, which helps with designs like http://drupal.org/node/1510532 in which a secondary column of content would otherwise 'end' with no upper boundary. The 'pointer' attached to the active tab thus serves two purposes: marks the active tab, and also provides a clear link with the newly separated content region. I like the speech bubble motif from an emotional perspective as well, since it hints at the human, which is why it is so often used.

That being said, the stylistic changes are not directly necessary for this patch, and can be moved to another issue, or set aside completely. The resolution for this issue is essentially moving both sets of tabs to their own row, and aligning them left.

Would all concerned be happy to see a patch with just those changes?

ry5n’s picture

BTW here is a slightly modified mockup of how this could look with less tinting and with border radii. This is only FYI; my next step is to post another patch with only positioning changes to the tabs.

sun’s picture

FileSize
76.54 KB

I've to say,

  1. I really like the "additional chrome" in #54, because it visually clarifies that these two list of links 1) present navigational links [and not some arbitrary other links like help or whatnot], and 2) are hierarchically connected to each other. I'd recommend to keep it.
  2. The square corners underline their navigational role and are visually in line with surrounding UI elements, since neither the docking toolbar nor the overlay dialog itself uses rounded corners. The rounded corners just look out of line to me, and like something that was tacked on later, "just because 'modern' designs have it." In general, Seven rather has a square appearance and only has a few exceptions (buttons).

...and want to amend that, if Seven would look like #54.1, then I could actually see myself using it.

The only design aspect that would bug me — if I was using Overlay — would be this:

seven-tabs.png

The first shows Seven without Overlay, below is Overlay.

  1. The vertical alignment of breadcrumb, page title, and primary tabs results in a much cleaner look and feel; less disturbed.
  2. The gray background (minimally colorized) of the entire header behind the page title is a lot cleaner.

I'm not using Overlay (and don't plan to), so I don't see these two issues as a blocker.

Didn't look at the code yet though.

ry5n’s picture

This is still on my to-do list. Working on other patches, but will return to this for D8.

oresh’s picture

Status: Needs review » Active

That's a really nice modification for the submenu, but:
1. for a large quantity of submenu items, especially on a small screen, the item will probably go under each other and the triangle under the active link will look strange ( for the first item active it will be above the link from the below row of links )
2. You break the button concept and it's behavior becomes more confusing.
3. Links in 2 or more rows ( for lots of links or small screen) also look strange and a little broken.

You can see the same issue, if you open the menu toolbar in horizontal version and resize the window, until they start to go in 2 or 3 rows. That looks strange and not very button- or link-like.
We want drupal to work good on mobile, so we have to think of a nice mobile first design/experience. Hope you understand, what I intended to say.

ry5n’s picture

@oresh A revised version of some of these ideas is part of the style guide I’m proposing for Seven. See http://groups.drupal.org/node/283223#Overlay.

And yes, the appearance/behavior needs to adapt for narrow screens; wrapping is not an option. That’s yet to be determined, though.

ainz’s picture

@ry5n great job man! You really put a lot of though into these mockups. I like the designs in #54 although I'd have to agree with @sun in #61 with the first point of alignment.
Coming here from Strategy for Mobile Initiative (http://groups.drupal.org/node/207248) I also have to agree with @oresh that while this would be fine for the desktop, it could get a bit crazy on mobile devices.

Finally, in the proposed style guide for Seven that you mentioned in #64 (which I think would definitely work on mobile devices) where are the breadcrumb links going? I think the proposed style guide accomplishes a lot of the points that were mentioned throughout this thread. Again, great job!

LewisNyman’s picture

Status: Active » Closed (duplicate)

Thanks for all the insights and suggestions that have been brought up here, I'm going to mark this as a duplicate of #1490402: Redesign tabs and the content header so we can consolidate ideas and feedback into one issue.