JxRath
commented
10 years ago Menu: http://wet-boew.github.io/v4.0-ci/demos/menu/menu-en.html Also referenced: http://Canada.ca
A. Please indicate which devices were tested (Desktop/Mobile/Tablet): IE Windows 8.0.7601.17514, HP Desktop, Dell widescreen monitor (1920x1080) Apple iPhone 4 - latest iOS 7, iPad mini – latest iOS 7
B. Provide status feedback
- Does the component always let users know about its current status?
IE 8 – Header Menu: No. The horizontal menu in the header is a common Web standard, so people would likely guess that the words and downward pointing arrows are clickable, even if the bar they are sitting on does not have a 3D clickable look. It is implemented a bit differently in the “examples” page than is use on the Canada.ca site. On the examples page a dark blue divider line is used to show the left edge of the clickable area for the “WET project” menu button. The Canada.ca site uses a light grey hairline that separates and defines the edges of the buttons. The light grey line is a better implementation as the contrast of the dark blue divider on a dark blue button bar background is not sufficient. The “Contribute to WET” menu button is also missing the dark blue divider line on the right side that should be there to indicate the edge of the clickable area. (Bug or missing in code?)
The “Implement WET” Menu button is selected and is a darker blue, indicating that the user is in that selected menu button’s content area. If the user rolls over this selected menu button, it expands to show the sub-menu with 5 content areas. There is no indication of what sub-content area the user is currently in; all the submenu choices are identically unselected. Canada.ca does keep the highlight on the selected/current page in the sub-menu; the WET example should be modified to match that implementation.
If the user looks at the crumb trail they can see that they are in the “Working Examples” area. The crumb trail is not accurately “Synced” to the menu, as the user is actually in “Home > Implement WET > Working Examples > Menu”. The “Implement WET” part is missing from the crumb trail which breaks the user’s mental model of the navigation path.
There is a roll-over effect on the menu buttons; a white underline appears under the text. On-hover a drop-down menu appears under the selected menu button. The text in this drop-down menu is navy blue (or maybe black) on a mid grey background, and the downward pointing triangle disappears. When rolling over the items on the grey pop-down menu, the text becomes bold and white on a dark blue background. When the user selects an item from the sub-menu they are taken to the linked page but as mentioned above the item in the sub-menu does not keep its selected state.
IE 8 – Side Panel Menu: No. When the user makes the browser window narrower; the header menu bar and footer links disappear. They are now consolidated under a menu icon in the upper right corner of the screen. While the menu icon has become a quasi-standard on mobile devices (especially Blackberry), it is not yet common in the web browsers on desktops and laptops. On the WET site the menu icon is on a dark grey bar that spans the width of the website; the on-click/active area of the button spans half of the body area and not just the icon itself. In Canada.ca the menu icon is on a dark blue “pennant” that floats on the white background. The on-click/active area is just the white square icon and not the complete blue pennant area which would be expected of a button.
During roll-over and on-click there are no effects. It would be more consistent behavior if this matched the roll-over and on-click effects that WET has established for buttons. On-hover a tooltip with the word “Menu” appears.
On-click the menu appears spanning the full height of the browser window. At the top there is the word “Menu” and a close “X” to close the side menu. Clicking in some other areas of the page which is outside the side menu also closes it which may be an unintended result as it is inconsistent. Below this is the search entry box and search button. Immediately below this is the word “Français” which acts as the language toggle. The “Search” button has the proper roll-over and on-click behavior, while nothing else in the side menu has a roll-over effect and only the close “X” shows and on-click movement down and to the right. The roll-over, on-hover and on-click “Status” is extremely inconsistent. WET should establish solid standards and be consistent in their use and implementation.
Items that were in the header menu appear in bold white text on a mid blue background. The footer items appear on below the header items on a darker blue background which would help the user make a distinction between the header and footer elements. Triangle “twisties” appear next to the words in the menu allowing the user to open (unpack) the main menu areas and see the sub-menu items.
The area where the user is in is shown as unpacked so they can see that they are in the “Implement WET” area. The subcategory “Working examples” where they currently are is not highlighted. Showing the highlight on the area they are currently in would let the users know about their current “status” or location in the hierarchy. Oddly the “About” area in the footer zone also is unpacked which is unexpected, as the user did not make this choice.
When unpacking other “twisties” in the main topic area, it causes the currently open selection to close. This saves vertical space and theoretically shows only what the user is focussing on, but this automatic hiding behavior may extend the “Hunt” for the item they are looking for, especially when sub-menu items are similar. For example the main area “Implement WET” has a sub-menu item that says “Documentation”. “Contribute to WET” has a sub-menu item that says “Creating Documentation”. If the user could have both of these menus open at the same time it might help them make the correct choice.
When longer areas of text are unpacked exceeding the visible height of the page a scrollbar will appear on the right side of the menu. Header and footer unpacking behaviors are separated, so packing and unpacking items in the header affects only the items in the header and not in the footer and vice-versa.
If the page already had a visible scrollbar, then the user will see two scrollbars side by side with the left scrollbar controlling the menu and the right scrollbar controlling the page “underneath” the side menu. Two scrollbars are not generally thought of as good UI, but are sometimes unavoidable.
There are no roll-over or on-hover effects when the user mouses over the items in the side menu. This is unexpected, as the menu bar used roll-over effects. The arrow cursor does change to a pointing hand when mousing over the words on the side menu, but this is the only visual indication that the items are clickable. On-click IE 8 shows the black and white dotted line around the clickable area of the text on the side menu, but this is not a proper or consistent on-click behavior.
The Canada.ca site uses the side panel menu a bit differently. In many cases the crumb trail, page title and side menu items are not in sync which will cause confusion. Example; go to page: http://www.cic.gc.ca/english/citizenship/index.asp Crumb trail item is “Home>All services>Immigration & citizenship”; Page title is “Canadian citizenship” and the non-highlighted link in the side menu that calls up the page is Main selection “Immigration” sub-menu item “Citizenship”. These three navigation items are called three different things, but all point to the same page.
The Canada.ca site footer is also non-representational of what appears in the “normal” header bar page view. In the Header bar view, the footer has 7 headers. 4 of the headers (Government, Transparency, News, Contacts) have sub-menu items which should, but do not, appear under “Twisties” in the side menu view. Instead the main heading, which is not a link in the normal view, becomes a link in the side menu view, and links to the first sub-menu item in the list. Example: On Header bar page, the footer has a non-linked header “Transparency” with five sub-items “Government-wide reporting, Open government, Proactive disclosure, Terms & conditions, Privacy”. When in the side menu view the “Transparency” menu has no sub-menu items and links directly to the first link “Government-wide reporting”.
IOS 7 – Side Panel Menu: No. As with the IE version the menu once opened shows the “Implement WET” selection unpacked but the “Working examples” is not highlighted as it should be. The “About” area in the footer is also unpacked and as mentioned above, it should not be.
The other issue that shows up more in iOS 7 (but is similar in only extreme cases in IE) is that when the text in menu items is too long it wraps to a second line. The lime spacing is such that the wrapped line can appear to be its own separate menu selection. For example, in the “About” menu item in the footer, the sub-menu item “About the Web Experience Toolkit” is a long line. When it wraps it becomes two lines; “About the Web Experience” on one line and “Toolkit” is on the line below. “Toolkit” appears to be its own content area, and not associated with the “About the Web Experience” on the line above. When text wraps, the leading (space) between the lines needs to be tightened up, so the user will see that the phrase belongs together.
- Does the component give immediate, easy to understand feedback?
IE 8: No. The feedback (roll-over, on-hover, on-click and selected highlight) behaviors are not consistent with WET standards and are different between the menu bar and side menu components.
iOS 7: No. The feedback is missing on most sidebar elements with the exception of the close “X” and the “Search” button. Also there is a lag (between 1 and 6 seconds) after clicking a menu item so the feedback is not “immediate”. The 6 second lag was for the “Twitter” link.
- Will the user have enough visual cues to easily complete the component’s tasks?
IE 8 & iOS 7: Mostly yes. Though the inconsistency, disconnect between the navigation menu, information architecture, breadcrumbs, page titles and lack of proper implementation will cause confusion.
There are many areas on the Canada.ca site where the side menu was coded incorrectly. Two examples of many: http://canada.ca/en/services/taxes/index.html on the side menu in the “Taxes” landing page the “Jobs” section is shown as unpacked. In the “Travel” section, they tried to make the side menu 3 levels deep and broke the component. The third level links show up at the top of the menu on a light blue background and none of the links work. I only mention this because if people are coding it incorrectly; maybe the code needs to be better commented so people won’t make these errors.
- If some part of a component is hidden, can users see something that allows them to bring it in and out of view?
IE 8 & iOS 7: Yes. There is the Menu icon that appears in iOS, and in IE 8 at reduced screen sizes. The menu icon is not a common component in most web sites in a desktop environment so it may not be interpreted correctly by some people. People using mobile devices will likely find it as this is becoming more of a web standard icon.
C. Match real world conventions
- Do parts of the component match what you see, hear (if any) and touch (if any) meet common expectations and are they easily recognizable?
IE 8 & iOS 7: No. Most of the proper and consistent roll-over, on-hover, on-click and selected states are very inconsistent. Areas in the side menu are not coded properly and sub-sections appear open by default when they should not be.
- When users perform actions within the component, are the results they get what they would commonly expect?
IE 8 & iOS 7: No. See comments above.
D. Apply standards and ensure consistency
- Have industry formatting standards been used consistently throughout?
IE 8 & iOS 7: No. See comments above.
- Is there a logical and consistent usage of elements throughout the component?
IE 8 & iOS 7: No. See comments above.
- Is there a consistent usage of language that is clearly understandable, relevant, concise, current and to the point throughout the component?
IE 8 & iOS 7: N/A. Language is determined by the writer/coder.
- Is the experience consistent across screen sizes?
IE 8: No. It changes from having the link visible to having it “hidden” under a menu icon. This may confuse some users on the desktop as it is not yet a common web behavior.
iOS 7: Yes for the iPhone. The experience is consistent across landscape and portrait view and at various levels of magnification. No for the iPad mini. In portrait mode on the iPad mini the side menu is used, when the user switched to landscape mode the layout switches to using the menu bar. This is unexpected, as in both cases there was “room” for the header style menu. Switching from portrait to landscape mode causes a bit of confusion, due to this inconsistency of use. E. Help users recognize, prevent and recover from errors
- Does the component help to prevent users from making errors whenever possible?
IE 8 & iOS 7: No. Lack of proper feedback and highlighting of current selection and disconnect between menu selection, breadcrumbs and page title will cause confusion.
- When there is an error, is it simple and informative?
IE 8 & iOS 7: N/A. No Error messages, though there were errors in implementation on the Canada.ca site.
- Does it provide information to fix or correct the error?
IE 8 & iOS 7: N/A. No Error messages.
F. Design for human interaction
- When using the component:
a. Is the layout/style intuitive?
IE 8 & iOS 7: Generally yes. The layout could be improved a bit, the text is not centered properly vertically; its a few pixels too high.
b. Are the interactions intuitive?
IE 8 & iOS 7: Generally yes, with comments above. Also there are implementation issues when there is a combination of items on the menu bar with and without dropdown items. For example, on the Canada.ca site the “Business” menu button does not have drop down items. When you click once on the “Business” button the user is taken to the “Business” homepage which shows 9 sub-sections that did not appear in the drop-down menu. On the areas with a dropdown like “Travel” it shows 5 sub-items. The expectation is when the user clicks on the main Travel button again they would be taken to the “Travel” homepage – which is the behavior they learned from the “Business” menu button. Instead nothing happens. There is another item on the bottom of the Travel menu “Travel – More” that takes the user to the Travel homepage. This implementation is not clear and consistent. Comments should be made in the code to help people use the components properly and avoid these inconsistencies and IA errors.
- Is the layout designed so that various input methods (touch, keyboard, mouse, gesture) and screen sizes can easily interact with things like input fields, sliders and buttons?
IE 8 & iOS 7: Yes.
- If the task can't be completed in one session, does the user have an option to save and return to it at a later time?
IE 8 & iOS 7: N/A.
G. Keep it simple
- Does the component display only the information needed by the user at any given point in time?
IE 8 & iOS 7: No. Areas that the user did not select are shown unpacked by default in the side menu.
- Overall, are user interactions kept as simple as possible?
IE 8 & iOS 7: Yes. See comments above.
- Does the component use plain language? IE 8 & iOS 7: Yes. Writer/Coder controlled.
nrustand92
ballantr
neoinsight
rubinahaddad
pjackson28
Please perform a heuristic review of the following component: Main menu (Large views) example.
Performing a heuristic evaluation