Comments and questions welcome…
UX evaluated the vertical navigation demonstrated at: https://bluejeans.com/s/mUV2Z .
Our feedback here is about:
- vertical navigation
- breadcrumbs in the content pane
- items in the masthead in the user menu
The demo also included some explanation on the following topics, which we’ll evaluate when the components/areas are the focus of a demo:
- explorer window and filtering
Our Findings and Suggestions
Issue 1: Refresh buttons are different on some pages.
Topology page: Network > Topology
(there is no tooltip over the refresh button)
Datastores page: Compute > infrastructure > datastores > datastore
(tooltip over circular arrow: Reload current display)
Suggestion: Use PatternFly recommended Refresh icon at http://www.patternfly.org/styles/icons/ on a button, without a text label: Include the following tooltip over the refresh button: “Refresh this page”
Issue 2: Can’t identify how I got to various content panels through the vertical nav. For example, there are no breadcrumbs or back button to get back to the all hosts/nodes page to choose another host.
Suggestion: Show breadcrumb for for all content panels in CloudForms. Breadcrumb for the above example would show: Compute > Infrastructure > Host Nodes
An explanation of what belongs in the breadcrumb, what is a link, and what appears in the page title are here: http://www.patternfly.org/pattern-library/navigation/breadcrumbs/#/design .
Issue 3: Object summary pages display inconsistent ways to navigate back to list pages. Some pages show a back button and others show a partial breadcrumb.
- E.G., in Compute > Infra > Host Nodes > , the breadcrumbs do appear in partially correct format in the content panel when the user double clicks a particular provider to show its details as “Host/Nodes > esxi2 (summary)” .
- For compute > infrastructure > datastores, there’s no breadcrumb , but there’s a back button.
Suggestion: Show PatternFly breadcrumbs (examples below) for all content panels in CloudForms. http://www.patternfly.org/pattern-library/navigation/breadcrumbs/#/design .
- The breadcrumb for the host/nodes example above is: Compute > Infrastructure > Host/Nodes > esxi2
where “Host/Nodes” is a link that navigates the user to the page containing a list (or grid) of all hosts and nodes.
Also, the page title should be “esxi2”.
- The breadcrumb for the datastore example above is: Compute > Infrastructure > Datastores > datastore-esx1
where “Datastores” is a link that navigates the user to the page containing a list (or grid) of all datastores.
Issue 4: Unexpected navigation result Clicking a previously visited menu section (primary or secondary) displays the last visited content in that section. However, clicking a menu section for the first time (primary or secondary) always displays the first section in the submenu.
Also, this deviates from the current PatternFly standard and is inconsistent with our other RH products. Given that users click to navigate rather than hover at times (because it’s quicker ), this overloads the navigation system and provides unexpected behavior.
Suggestion: Let the user bookmark or star an important subsection to display it by default when clicking the primary or secondary menu. A subsection visited once before doesn’t necessarily have higher importance to the user.
Issue 5: Selecting a menu item often reloads all content in the viewport (not just the content panel). Why this is an issue:
E.G., Networks > Topology loaded slowly. The page also has no title or breadcrumb. I didn’t know if I had clicked the wrong menu item or if the application was malfunctioning.
The Notification icon with blue badge changes (flickers) while the page refreshes. The blue badge disappears and reappears after ~3 seconds.
- If the navigation menu is collapsed, the icons change (flicker) and show their title. The menu then collapses entirely.
Refresh the content panel only.
Delay displaying the notification icon until its status is accurate. If the notification icon can’t be shown immediately with an accurate status, delay showing. Show loading spinner on the content page (see PatternFly discussion of loading state on wizard page for an example: https://www.patternfly.org/pattern-library/communication/wizard/#/design )
Usability issues for the UX team to investigate further
Issue 6: _There are two menus in navigation (vertical nav and masthead nav dropdown) named _
Configuration. Also, on this page, there is also a button named Configuration.
Suggestion: UX to prioritize and design a solution (related to issue 8 below).
Issue 7: Can’t identify how I got to this content panel or what it’s for when I click a drop down menu in the masthead upper right (eg, Settings or My Tasks). When I select Settings, there’s no page title describing the content I’m viewing.
Suggestion: UX to prioritize and design a solution (related to issue 7 above).
PatternFly issues for the UX team to address
Issue 8: A collapsed vertical nav (icons only) doesn’t indicate that the user changed the nav display from the default or provide an invitation to reset it. Also, “always show” scrollbars partially block the > next to the icon.
Suggestion: UX to prioritize and a design a solution to show the toggled state of the menu.
Issue 9: Collapsing the menu to show only icons hides the menu arrow under the vertical scrollbar.
Suggestion: This is an issue with PatternFly code. UX will file an issue.