wet-boew-styleguide
wet-boew-styleguide copied to clipboard
wet-boew
Update guidance for section (left) menu
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
Not sure exactly what that means so look forward to seeing the coding in the demo pages :)
@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.
@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!!!!!!!!!!!!!!!!!!!!!!!!!
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
@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.
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 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.
@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.
@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%?
@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?
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).
@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)
@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).
@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.
@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.
@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
@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.
@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.
@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.
@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.
- 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.
- 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
@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!
@pjackson28 Do you happen to have data from previous usability studies that users notice breadcrumbs, specifically for Canada.ca/gov websites?
@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).
@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?
@cfarquharson It is. You only have expanding/collapsing when there are sub-items (which there no sub-items in the current menu).
@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.
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.
