Update guidance for section (left) menu

[thomasgohard]

Section menu will display only children of the current section to support forward navigation. This will also ensure that the behaviour of the menu items is consistent across all pages.

cc/@rubinahaddad

[rubinahaddad]

cc/ @cfarquharson

[cfarquharson]

Not sure exactly what that means so look forward to seeing the coding in the demo pages :)

[thomasgohard]

@rubinahaddad @nrustand92 and I did a design sprint this morning to come up with a solution for the design of the left menu following your issue https://github.com/wet-boew/wet-boew/issues/4592.

The demo will help explain the design, but essentially there will only be one level in the left menu and so all items will have the same function, appearance and behaviour. It will also make it easier to implement and use.

[cfarquharson]

@rubinahaddad @thomasgohard @pjackson28

I have just seen it in action as the pages and been updated and I have to say that I think this is such an UNREALISTIC approach! So you mean that if you click a left menu item, that entire menu disappears and you get a new left menu and the other way to get back to the parent item, which was just one click away, is via the breadcrumb? (or the back button)??? That's NUTS!

We offer a menu bar that is 2 levels, a footer that is 2 levels and a left menu that is 1 level? I agree that back in the day, the left menus were getting too deep, but I don't think have a second level, for the active area in the left menu, is a problem or confusing to the user.

It seems like you made this decision for ease of coding, not because it's a convention or what anyone had asked for.

I don't think this meets anyones expectation of what would happen in the left menu.

I am fine with it as an option, but not as the ONLY option. We NEED to offer a left menu solution that allows for the active area to have a sub-menu!!!!!!!!! !!!!!!!!!!!!! !!!!!!!!!!!! !!!!!!!!!!!!!! !!!!!!!!!!!!

I'm seriously going mental right now!!!!!!!!!!!!!!!!!!!!!!!!!

[cfarquharson]

Another point, is that maybe that's the behaviour you want for canada.ca, but if you want WET to be usable by other gov't/businesses etc , it can't be such a simplistic approach. I don't see why offering support for a known behaviour like a single single sub-menu would be such a problem?

Here's an example of why that singular method is a problem, even within the canada.ca site:

On this site: http://www.healthycanadians.gc.ca/kids-enfants/index-eng.php if you don't allow for a 'parent' category called "Kids", and instead forced the sub-menu to be it's own first level menu, then the user would only see these items:

• Boating Safety
• Bullying
• Childhood obesity
• Cyber safety tips
• Emergency preparedness
• .... (and yes, I think they have too many, but that's beside the point)

These items, when detached from their IA, seem to have no natural relationship (i.e. what's the commonality that makes 'boating safety' and 'bullying' and 'emergency preparedness'?...well, nothing!). The relationship is only clear IF a user looked at the breadcrumb and saw they were in the 'Kids" topics....which is likely not going to happen.

@rubinahaddad @thomasgohard @pjackson28

[pjackson28]

@cfarquharson What are you trying to accomplish with a side menu? Is the point of it to convey the site hierarchy, to move around between sibling sections or to faciltate task completion? Is it more important to facilitate drilling down or upward movement? How much can you rely upon it now that it is collapsed by default on mobile devices?

So what value is there in it conveying a small portion of the site hierarchy? What value is there to the user to know what are the siblings of the parent section for the task you are attempting to complete? Are those sibling sections relevant to task completion or just a distraction? The reality is they just distract from task completion (users have to wade through irrelevant links just to get to the relevant ones). So if they are a distraction and not pertinent to task completion then why keep them in the side menu?

Once you remove the distracting sibling sections, what point is the parent link? You now have to mechanisms (breadcrumb + side menu parent link) that do the same thing, identifying what is the parent section and providing a link to it. Why would you need the duplication?

Also why do you need to make the upward movement link more prominent than the drilling down links? Which is more important for task completion, upward movement or drilling down? If drilling down is more important then why put the upward movement link first and make it more prominent? How does that help the user, especially with a breadcrumb trail right above it?

Now you have an issue with links disappearing when you click on them, what happens in every single content area out there? Do the links stay in the same place on the page when you click them? Why would the user even need that link any more if they already followed it?

As for comparing to the site menu and footer, they are static menus while the side menu is contextual. Also in the site menu and footer, there is only one level of links exposed, not two like you had in the side menu. So if anything, this approach is more in line with the site menu andd footer than the side menu was previously.

[cfarquharson]

I agree, sometimes that's great.....but you can't force a purist approach on all users of WET. For example, this page: http://www.healthycanadians.gc.ca/kids-enfants/index-eng.php has a sub-menu that doesn't make sense unless you know that you are in an area called "Kids". If you were forced to see:

Boating Safety
Bullying
Childhood obesity
Cyber safety tips
Emergency preparedness

...it would be totally confusing cuz these items seemingly have no natural relationship. These items, when detached from their IA, seem to have no natural relationship (i.e. what's the commonality that makes 'boating safety' and 'bullying' and 'emergency preparedness'?...well, nothing....unless you knew these were "Kids" topics!). The ONLY way a user would understand why these items were grouped together is via the breadcrumb where it says " Kids".

If you are going to have a singular menu system, then you have to at least have show the parent menu item. For example, on anthropologie's site they kinda follow your approach BUT show you the parent category as a link above the sub items so you understand why they are grouped together: http://www.anthropologie.com/anthro/category/lighting/home-lighting-table.jsp?cm_sp=LEFTNAV-_-SUB_CATEGORY-_-TABLE_LAMPS ..... This page's first left menu item is the parent category ("Lighting") and then the sub items are below. This is a very localized model, which is what you are proposing BUT it offers the ability to explain (and link to) the parent item. Without that, as demonstrated above in the "Kids" example, the user is stuck trying to determine what area of the site they are in.

If you want to detach the left menu each level down, at minimum you should put the parent name at the top of the left menu. The breadcrumb should not be the only way a user understands why these left menus are grouped together.

Plus added to all this, if you want WET to be desirable to other gov'ts, it's a very reasonable need that a left menu should be able to show a sub-menu. To force every single user of WET to this single approach is unrealistic. I have no idea why we wouldn't support the model you have, plus the ability to have a single sub-menu open. You can't be this purist on behalf of every single user of WET.

Every site I have gone to this morning does not do what you are forcing via WET.

Here is Walmart and they do progressively get more specific, like you are mentioning, but they still keep the parent category displayed: http://www.walmart.ca/en/baby/baby-apparel/N-2426 If you didn't have 'Baby Apparel' at the top of the menu, then links like "Dresses" and "Sleepwear" would suggest it's a link to all dresses and all sleepwear (adults included) and so they would then to have put the word 'Baby' in every single link to offer that context that a single parent menu provided.

I cannot find a single site that model's this WET approach but I can show you site after site that shows either a localized menu with the parent listed above, or, as we had it before, a menu with a sub-site shown.

Please show me how this is in use in actual websites and not just a theoretical nice idea, cuz that's how I see it now.

[cfarquharson]

@masterbee can you chime in here?

[pjackson28]

@cfarquharson Since the secondary menu is collapsed by default on mobile devices (and only 10% of all users, including desktop users, use it), the content area needs to convey all the important information. You can't provide important contextual information exclusively in the side menu and hope that it will be usable for mobile users. So you need to first design the page without any secondary navigation. Since it is important to identify the content is about kids, how would you convey that through the content area? You can't expect mobile users to open the mobile panel to just get the context they need to understand the page.

So this is not about being purist, this is about aligning to a mobile-enable world and user behaviours. With 80% of users using the content area for navigation and only 10% each for site search and secondary navigation we need to shift our designs and content/navigation approaches to actual user behaviour and not perpetuate what we've done all along. Since the vast majority of users are focusing on the content area for their navigation and context needs we need to shift out focus to communicating our relevant information through the content area and not the secondary navigation.

[cfarquharson]

@pjackson28 Again, show me sites that follow your model.... I can show you a ton that don't so please show me ones that you are aligning with....cuz I just don't get the resistant to this? I get what you are saying that ideally I get why, but when you actually try to create a site, I think there are a lot of problems that come up with this....that's why I'm saying it's purist. The reality of it isn't as do-able as the logic.

Please provide some example sites that do this.

[pjackson28]

@cfarquharson I don't see what those other sites prove or how it changes the issue at hand. We need a solution that works for all users not just the 10% who rely upon the side menu. This important information/navigation you need to provide through the side menu, how are you going to provide it to the other 90% who don't use the side menu. How are you going to provide it to mobile users? That is why we need a content area solution and not just a side menu solution that is targeted at just 10% of users. Do you have any examples of sites that address the issue at hand for the other 90%?

[pjackson28]

@cfarquharson One possible solution could be a modification of the breadcrumb area. For instance it could start off with the parent section and then have the regular breadcrumb (or even the breadcrumb in reverse). That way you would have the parent section on the left of the page like in the side menu except that it would be displayed for all users (even mobile users). It's also structurally an interesting idea because the breadcrumb area has a "You are here" hidden heading so having the parent section at the start of the breadcrumb area could make sense semantically and would help to give the context you are looking for ("You are here: Kids" + Breadcrumb trail). What are your thoughts on the breadcrumb area idea? The parent section before the breadcrumb could even have it's own styling to help visually distinguish it from the breadcrumbs.

@rubinahaddad @thomasgohard What do you think of such an approach?

[pjackson28]

A side benefit of the above solution is that it also provides a means of giving that context even when there is no side menu (like a lot of Canada.ca pages) as giving context in the side menu didn't work for those pages. Essentially what I'm looking for is a consistent solution that works whether you have a side menu or not and whether users see or use the side menu or not (so covers 100% of cases).

[cfarquharson]

@pjackson28 I have been discussing this with @rubinahaddad . Both you and Rubina have won me over with a contextual menu that is free from unnecessary IA. That said, we need to strike a balance. This is what Rubina and I propose.

There are 2 types of menus. The first, it the basic one of just a <ul> that is only one level deep. For example

However, there is a need for a second type of contextual menu. This if for when one of those first level items would open up and reveal more. In this case, we keep on the item that would be open (in this case "Integrity") and drop the unrelated IA ("Professionalism", "Respect", "Cooperation"). Furthermore, this sub menu might represent a huge area of content and the user might arrive at any of those sub pages via a search engine...and if so, they wouldn't have had the 'forward' approach where they knew that there were 3 other choices ("Professionalism", "Respect", "Cooperation")....so it's important that they know that this sub-menu belongs to a bigger menu system. So, we have added a link back to the parent site above name above the menu.

As demonstrated here, this design would stay the same for the rest of this sub-menu (with the exception the wb-navcurr triggering on the appropriate item):

FYI, the nice thing too, is that if the root area homepage didn't have a left menu and just had contextual links in the content area, you could still just have the sub-menu set up the same

...and then just like above, the "Integrity" landing page would be this (same image)

[pjackson28]

@cfarquharson One problem with the proposal is that it is three levels deep so cannot be supported in the mobile panel (which can only fit two hierarchy levels due to space issues on small-screen devices). At the very least one hierarchy level would have to be dropped from your proposal. Also the second Corporate values link and left arrow are very confusing. The page already has a right arrow in the breadcrumb trail (as recommended by the W3C) and then you added a second Corporate values link with a left arrow a short distance away. I can see people getting really confused as to what the arrows mean and how they pertain to the two Corporate values links. As a result, the second Corporate values link should be dropped from the side menu proposal (which address the three hierarchy levels issue as well). Besides, if they need to know what is up a level in the hierarchy, that information is provided in the breadcrumb trail (which is a short distance from the side menu).

As for the rest of the side menu, I can understand the need to provide context (since side menu links in the mobile panel do not have the benefit of context provided by the breadcrumb trail or content area), but why would the parent item ("Integrity") need to be a link? There are many prominent sites that do not provide a link to the parent item in the side menu and instead rely upon the breadcrumb trail or another mechanism to go up a level (Best Buy, Amazon.ca, Canadian Tire, Home Depot, Sears, etc.).

So would having an unlinked parent item in the side menu be a balanced compromise? It provides the context you are looking for and is consistent with many major sites out there but also addresses the concerns we raised regarding providing a link that is not available in the mobile panel and giving upward movement more prominence than drilling down and task completion (which usability testing found it reduced task completion in the mega menus). Also the upward movement is available through the nearby breadcrumb trail and is available to all users in all scenarios.

Note that having a parent item (linked or not) will mean in the mobile panel that there will be one collapsed menu item with sub-items for side menu (don't know if that is a good or bad thing although it will help to keep the mobile panel short).

[cfarquharson]

@pjackson28 @rubinahaddad The reason you need the parent link "Integrity" is because otherwise the left menu would have "What everyone needs to know", "Manager resources", "Author and researcher resources" and "Executive resources". These links are are soooo broad in nature and only make sense when the user understands that the scope of that is "Integrity". The different between Best Buy, Amazon etc and us, is that we are a site of information whereas those are sites of products, and those products have nicely defined meanings like "TVs" and "CDs". Ours is way hard to architect.

Further, I honestly don't see why putting a link to the homepage of the area that houses these pages (ie. the 'parent page' is deemed a luxury?).

I'm not sure why we would need to have it unlinked? In the mobile, there would be no need to offer an details/summary feature of the contextual nav. It would display as links, just like in the desktop. Only the footer and horizontal menu bar would have the expand/hide feature in mobile....not the left menu. The left menu is contextual and represents your current local area so it would already be open by default. Closing it is a nice perk I suppose but not at all necessary.

Also, I would be easy enough to visually represent this level'd model in mobile. I can mock that up for you if we get agreement on this. Lastly, I am happy to use a chevron instead of an arrow.

[pjackson28]

@cfarquharson I don't see how "Integrity" being a link adds any more context to those four links compared to it being unlinked. The "Integrity" menu item ties the side menu into the site hierarchy conveyed immediately above it in the breadcrumb trail. Without that "Integrity" menu item I agree it can be a little unclear what is the relationship to the site hierarchy conveyed by the breadcrumb trail but adding the "Integrity" side menu item resolves all that. Making it a link adds nothing more since there is already an "Integrity" link a short distance away in the breadcrumb trail.

Also the question of "Integrity" being a link is not about it being a luxury, is it about whether it does more harm than good. As mentioned previously, having it a link gives more prominence to upward movement versus drilling down and task completion. There are also worrying usability testing results from mega menus showing a significant decrease in task completion (up to 30%) when the upward movement/general link is immediately before the drilling down/task-focused links.

So considering the potential consequences, why does "Integrity" need to be a link when many sites don't make it a link and there is already an Integrity link provided a short distance away in the breadcrumb trail? Whre is the compelling justification for it being a link?

As for the parent of the parent, I don't see why it is even needed in the side menu when such information is already provided a short distance away in the breadcrumb trail. The double chevron has already been shown to be difficult to understand for many users and still confuses the meaning as you have a right arrow for "Integrity" in the breadcrumb trail and a short distance away you have "Integrity" with a double left chevron. The breadcrumb trail is there for a reason and we shouldn't be adding confusing duplication in the side menu.

To sum up, I can see the justification for adding the "Integrity" menu item to the top of the side menu to tie it into the breadcrumb trail hierarchy, but I don't see what is the justification for it being a link or how it any benefits outweigh the drawbacks (considering there is already another "Integrity" link a short distance away tied into the site hierarchy). I also don't see the justification for the parent of the parent link considering that is the purpose of the breadcrumb trail a short distance away.

[nrustand92]

@pjackson28 According to this article http://www.nngroup.com/articles/breadcrumb-navigation-useful/ The growing popularity of breadcrumbs may mean their presence is sufficient indeed for users to return to previous menu/give users context

[cfarquharson]

@pjackson28 If this was the left menu:

...then this is how it would appear in mobile:

Or even simplier as this:

In both the mobile view and the desktop view, everything is a link. There is no need for the expand/collapse toggle for the contextual menu in mobile. It's just a simple layout.

[pjackson28]

@cfarquharson The three level hierarchy in the mobile menu is exactly what caused mobile users problems previously (found it very confusing and too complicated) which is why we capped it off at two hierarchy levels. So we can't implement what you propose. Again, why do we need the parent of the parent link in the side menu when that is what the breadcrumb trail is for?

Also the approach you have proposed where Integrity is a parent menu item in the mobile panel but is not expandable collapsible will break the WAI-ARIA menu approach we are using. Every other section in the mobile panel implements the standard structure and semantics required of WAI-ARIA menus yet that would not be possible with what you are proposing. It would mean a change in what is reported to screen reader users, keyboard support and overall menu structure. We already have a standard convention for the mobile panel where the top level is either a link with no sub-items or a sub-menu trigger and to move away from that for just the side menu will disrupt keyboard users and screen reader users.

[cfarquharson]

@pjackson28 You are comparing a super deep IA from before that had a ton of expand/hides that were not contextual and were levels and levels deep. You can't compare the confusion around that with this simple version...it's different. Plus, I don't know why we need to offer expand/hide for the contextual menu. If you are on a page that has a left menu, then in mobile, it is open by default. It's the local contextual nav. Why offer an ability to toggle it open and close when it's open by default...always. As you pointed about above, the menu bar and the footer are site wide links but the left nav localized and contextual.

[pjackson28]

@cfarquharson Let's bring this back to the beginning. What are you trying to achieve through the side menu? We've already agreed upon having the parent item in the side menu to tie the side menu into the hierarchy provided by the breadcrumb trail.

1. What is the purpose of making the parent item a link? Why is that purpose not satisfied by other elements on the page (e.g., breadcrumb trail)? Please also explain how the benefits outweigh the drawbacks.
2. What is the purpose of the parent of a parent link? Why is that purpose not satisfied by other elements on the page (e.g., breadcrumb trail)? Please also explain how the benefits outweigh the drawbacks.

As for why the menus in the mobile panel are expandable/collapsible, that is exactly what is required of WAI-ARIA menus: http://www.w3.org/TR/wai-aria-practices/#menu

[cfarquharson]

@pjackson28 @rubinahaddad Let's set up a call...we will give ourselves carpal tunnel on this thread.

Thanks for pointing out the WAI-ARIA info. I can appreciate now why you need that feature!

[nrustand92]

@pjackson28 Do you happen to have data from previous usability studies that users notice breadcrumbs, specifically for Canada.ca/gov websites?

[pjackson28]

@nrustand92 I not aware of any but there are results showing that only 10% of users pay attention to secondary navigation like the side menu and the menu bar so I would assume it would be similar results considering proximity to those two menu systems. I'd also assume that in mobile view that there would be higher numbers for the breadcrumb trail as it is visible on the page by default while the other secondary navigation is collapsed into a mobile panel (so the user needs to open it to see it).

[cfarquharson]

@pjackson28 the left menu's display in mobile menu on this page doesn't expand/hide either: http://wet-boew.github.io/themes-dist/theme-gcwu-fegc/content-secmenu-en.html

I thought you said it had to based on WAI-ARIA?

[pjackson28]

@cfarquharson It is. You only have expanding/collapsing when there are sub-items (which there no sub-items in the current menu).

[nrustand92]

@pjackson28 There are evidence users tend to focus on content rather than the navs indeed:

http://www.smashingmagazine.com/2010/01/11/the-case-against-vertical-navigation/ (scroll to "Left-Side Navigation Virtually Ignored")

http://my.safaribooksonline.com/book/web-design-and-development/9780321549730/navigation/ch04lev1sec1 (especially the "Global Navigation" & "Consistent, Persistent, and Simple Navigation" sections---although this link talks more about the top nav)

The discussion about breadcrumb here is also interesting http://www.quora.com/Do-people-actually-use-breadcrumbs

According to this study, 89% of the participants notice the breadcrumbs, but the usage rate is low: http://usabilitynews.org/breadcrumb-navigation-an-exploratory-study-of-usage/

This experiment indicated that only 6% of usage is attributed to the breadcrumbs http://psychology.wichita.edu/surl/usabilitynews/52/breadcrumb.htm

@rubinahaddad last Wed at code sprint mentioned this issue will need usability testing anyway. What will be interesting to see later is if the users notice the breadcrumbs & use them accordingly. 1 user in the quora link mentioned that in testing people use them if they're visible enough. So, that's certainly something to consider for the testing.

[cfarquharson]

@nschonni can you chime in here?

[shawnthompson]

I like the idea that the left menu only be one level deep. I think there should be a contextual heading that could link to the parent section of the site or at the very lease that doesn't have a link and also doesn't look like a link for the left menu.

[shawnthompson]

After further discussions the left menu should be used to go further down into the site and not used to group related links. So the sample image above is using the left navigation wrong.

The following image is what the left menu would look like on the Kids page with all the sub pages listed but as you go deeper into the section, the left navigation should be related to the subject of the current page and not it's parent sections.

It is suggested that if you want to link to the parent related subject to do so in the content area. Which would than remain visible even in mobile viewing.

[cfarquharson]

@shawnthompson I can't see the difference between your last 2 images. The "Kids" are shows the menu for kids and the "Childhood obesity" retains that menu and then shows the current menu item as 'Childhood obesity'. Since there is no sub-menu for Childhood obesity, wouldn't this menu stay? Can you show what you think the new menu would be?

[shawnthompson]

For the childhood obesity, there wouldn't be a menu because it would not have any sub pages. The first image was wrong.

[shawnthompson]

I'll make this change in WET and GCWeb

[nrustand92]

A good reference for this left menu issue can be found in GCpedia http://www.gcpedia.gc.ca/wiki/Government_usability_research_index

In the table, go to March 2010 -> Industry Canada, file name is Neo_final_pres_optimized_v6.pdf Pages 56-58 are especially relevant

[pjackson28]

@nrustand92 Could you please paste the relevant snippets on the thread for those that can't access GCPEDIA?

[nrustand92]

[shawnthompson]

We will need to come up with a common solution to handle the "related links" for the sub pages. @cfarquharson and @rubinahaddad we can put this in the style guide once a solution has been decided on.

[nrustand92]

Early suggestion, what about related links in a right nav E.g.,

This is also NeoInsight's recommendation for the IC report which screenshots I posted above For those who can access GCpedia, it's the same link http://www.gcpedia.gc.ca/wiki/Government_usability_research_index File name is NeoInsight_UsabilityTest_Final_Report.pdf Page 87

Here's the screenshot of the relevant snippet with the particular recommendation highlighted:

The downside is I wonder if it will confuse users who are used to see the menu on the left side up till the particular page with no sub pages

[shawnthompson]

I would recommend something at the bottom of the content in mobile view that floats up in desktop view.

[patlaj]

Sorry, just jumping back to the left-hand menu discussion briefly -

Just to clarify, do we agree that what's currently in use on http://heathycanadians.gc.ca and http://travel.gc.ca is problematic? You get a parent section that's linked in the left-hand menu:

http://healthycanadians.gc.ca/environment-environnement/home-maison/chemicals-chimiques-eng.php

(Home and garden), but its parent (Environment) isn't linked. But the other items in the menu that look exactly the same ("Your health", "Kids") are linked. They look the same but behave differently for no discernible reason. And then the last item in "Home and garden" is "More on Environment"…(!)

Anyway, a lot of that would be improved by using contextual navigation like you've proposed here and in https://github.com/wet-boew/wet-boew/issues/4592

I did a lot of work on navigation patterns a couple years ago, and the contextual menu as you've proposed made the most sense - something that shows the links relevant to the current page. In working on that pattern though, I assumed the top of the menu would be a link to the parent page, and that's how it worked in all of the cited examples.

However - our CLF2 intranet has a left-hand menu with an un-linked "Main" heading. I've seen many people click it in usability tests it when trying to get back to the home page. When that didn't work, they'd quickly go to the breadcrumb or horizontal menu and never try again. So would it be better for a desktop user if the top item in the left-hand menu were a link to the parent section? Probably. Is it worth the problems in making this work on mobile? Maybe not.

By the way, regarding the 10% of users who use the left-hand menu. I've seen many times when people scan the content page, then go to the left-hand menu when they don't find what they need. We've also done Chalkmark tests where in some cases many more people chose from the left-hand menu even when the content was in the content area as well. Here's one example where the task was to get some particular publication:

27% went to the left-hand menu, only 7% in the content area. (That's out of 99 clicks, 37 seconds average time, so people weren't just clicking blindly). The style of the menu had a big impact - where the menu was more boxy fewer people used it. That's a test not reality of course, but it suggests that left-hand menus may still have a place.

[shawnthompson]

That's some great information, thanks. I'm curious what it would be for mobile users seeing as though the left menu disappears into the main menu. Also what if there was no left menu and the user only had the content to navigation from, would they still be able to find what they were looking for?

As for the parent heading at the top, it would be the same text as the h1 because the page is the parent page and list only the sub pages in this section of the site. We would need to make sure it doesn't look at all like a link at all. I'm not stuck on the colour but I just wanted to make it as different as possible as to the links below. We might even consider increasing the size a little bit and making it bold.

[patlaj]

We did do some tests without a left-hand menu to see if that made a significant difference to completion or speed. I'll look to post something tomorrow if I find anything relevant. Our conclusion was that we'd keep the menu. Note though that a lot of that was due to the practical reality of supporting content pages that had been built assuming there would be a menu. I think gov.uk shows you don't actually need one.

Agreed about trying to make the parent header not look like a link. But that might be an impossible task. Anything can be a link, and you can't really tell until you try.

[pjackson28]

@patlaj Whether or not a side menu is provided, we'll need to shift to designing and building pages as if there are no menus since that is what happens by default in mobile view (collapsing all menus into a panel). If the menus have to be relied upon for task completion (or design our pages based upon the presence of a menu system) then that will cause major issues for the mobile users who have to find and open the mobile panel first before they can use the menus (which also means that the menu options are not available during their initial visual scan).

Considering the above, it is particularly worrying that some existing GC pages have one or more links that are exclusively in the side menu so it would be impossible to complete some tasks if the side menu can't be found (more of a risk with novice users).

It can still be beneficial to provide a side menu, but we just to need make sure it is not the only way to efficiently complete tasks.

[cfarquharson]

@pjackson28 @patlaj I find best buy does a good job of making the heading not look like a link: http://www.bestbuy.ca/en-CA/category/laptops-ultrabooks/20352.aspx?path=667d54682e0f5309125ed6faae37dfcden01

(heading black text/background colour....links blue text and not background or decoration. That said, their menu items are simply/short text that doesn't word wrap so it's easy to keep it clean

[patlaj]

@pjackson28 - yeah makes sense. Do you know if departments have that guidance now? I might be wrong because I don't usually work on content, but I wouldn't be surprised if people weren't sometimes leaving out in-page links expecting users to get there from the left-hand menu.

@cfarquharson yeah looks good. When I said "impossible" I meant some people will still try to click it. We can definitely minimize the likelihood though.

[pjackson28]

@patlaj The new mobile standard requires that pages be optimized for mobile but people are still learning what that means. I think this style guide is an excellent place to provide such guidance as it is relevant across all themes and is something that is important to follow when using responsive designs.

@thomasgohard @laurawesley It might be a good idea to add to the mobile optimization section in the tech specs the requirement that all side menu links must be in the content area as well (or something to that effect). Should it also be put in performance measurement as well?

[shawnthompson]

This is what has been decided.

The left navigation will only be used for contextual links in relation to the page you are currently on and not the section of the site. It will only be used for going deeper into the site. And will look like this:

Code:

<nav class="wb-sec col-md-3 col-md-pull-9" typeof="SiteNavigationElement" id="wb-sec" role="navigation">
      <h2 id="wb-sec-h" class="wb-inv">Secondary menu</h2>
      <ul class="list-group menu list-unstyled">
        <li>
          <h3><a class="wb-navcurr">Kids</a></h3>
          <ul class="list-group menu list-unstyled">
            <li><a class="list-group-item" href="boating.html">Boating Safety</a></li>
            <li><a class="list-group-item" href="http://www.healthycanadians.gc.ca/kids-enfants/bullying-intimidation/index-eng.php">Bullying</a></li>
...
          </ul>
        </li>
      </ul>
    </nav>

The heading for the left navigation would in most cases be the same as the h1.

For the links that were in the left menu but don't relate to the current page, you will move them into an aside after the main element on the page as they do not relate to the current content and give the list a proper heading to describe the links inside. Looks like this:

Code:

<aside class="well">
  <h2 class="h3 mrgn-tp-0">Related kid topics</h2>
  <ul class="list-unstyled colcount-md-4 colcount-sm-2 colcount-xs-1">
    <li><a href="/kids-enfants/bullying-intimidation/index-eng.php">Bullying</a></li>
    <li><a href="/kids-enfants/obesity-obesite/index-eng.php">Childhood obesity</a></li>
...
    <li><a href="/kids-enfants/sleep-sommeil/index-eng.php">Safe sleep</a></li>
    <li><a href="/kids-enfants/toy-jouet/index-eng.php">Toy safety</a></li>
  </ul>
</aside>

[JxRath]

There were some statistical comments about the use of nav: <<results showing that only 10% of users pay attention to secondary navigation like the side menu and the menu bar >> that are contridicted by Norman/Neilson/Pernice in eyetracking studies where 49% of users looked at the left side navigation, in addition of the 54% using the Top Horizontal Subnavigation and 24% for Top Horizontal Nav.

http://my.safaribooksonline.com/book/web-design-and-development/9780321549730/navigation/ch04lev1sec1

People tend to misinterpret eye tracking for navigational elements, thinking that people only glanced at it for a second, so it must not be that important. The "real" reason is that if it is done well, and is used consistently, then a glance is all that is required for the user to orient themselves.

Norman goes on to say: "It may seem like people should look at global navigation more than a quarter of the time, but think of it as you would a lifejacket stored under your seat on an airplane. You may confirm its existence during the safety instruction presentation, but you are not going to put it on, inflate it, and wear it just in case you need to evacuate. Nor will you repeatedly look to make sure it’s still there during your flight. (As frequent flyers, we have a word of advice for you if you do either of these things: medicate.) But you know where it is if you need it. You ignore it when you don’t. That’s the way it is with Web site menus.

For this reason, it is usually not a good idea to make the main menu change when people select a submenu. Users almost always miss these discreet changes because they are no longer focused on the main navigation."

The solution currently proposed where the left nav changes from page to page, is like moving the lifejackets to different parts of the airplane during flight. When the user needs it they'll find that it's no longer there.

Please user-test.

[patlaj]

@JxRath The horizontal menu is the main menu, and doesn't change (as far as I know).