UX feedback -- Vertical Navigation


#1

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
  • RBAC
  • Policies

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)
01 PM

Datastores page: Compute > infrastructure > datastores > datastore
(tooltip over circular arrow: Reload current display)
06 PM

Suggestion: Use PatternFly recommended Refresh icon at http://www.patternfly.org/styles/icons/ on a button, without a text label: 07 PM Include the following tooltip over the refresh button: “Refresh this page”

separator

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 .

separator

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.

separator

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.

separator

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.

menuflickerclose

Suggestion:

  • 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).

separator

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.

separator

Issue 9: Collapsing the menu to show only icons hides the menu arrow under the vertical scrollbar.

naviiconsonly

Suggestion: This is an issue with PatternFly code. UX will file an issue.


#2

Note: The PatternFly icon to be used Issue#1 suggestion is fa-refresh


#3

Thanks, Serena!


#4

@KendraMar this is great review. What do you guys think is the best way to track this forward? does it make sense to convert the issues noted above to github issues? I assume we could tag it with UX or some other label that we can see the progress? /cc @dclarizio


#5

@ohadlevy
for issue 6 there is an existing gh issue:
https://github.com/ManageIQ/manageiq-ui-classic/issues/1913


#6

the breadcrumbs is a tricky topic imo. there are several use cases where it is a challenge to do proper breadcrumbs.

  1. when you “dive in” several “levels” of relationships, the breadcrumbs list of links starting to get really long and can even take 2-3 rows on the screen.
  2. different views (like dashboard or topology) do not and should not have a breadcrumb because they look very different from GTL/summary pages.
  3. when there is a navigation between entities of different providers, the breadcrumb is not very useful or at least to me it’s really hard to say what should appear in it.
    say, navigating from eap server that belongs to middleware provider to its underlying container that belongs to a pod that belongs to the openshift provider.

has it been considered stop using breadcrumbs?


#7

generally speaking, the left side menu is somewhat defined in a bit of a strange way.
The high level entries that are not exactly comparable to each other on the same terminology scale. It is a “mix” of different things.
For example there’s monitoring entry that displays only alerts. but there is also Control in parallel to it through which users define alerts.
The reports entry for example is not a high level menu unlike dashboard or Monitoring-alerts.
And there are different providers that are grouped by type (Compute, middleware, etc), and their entries are in the same high level left menu.
So is Configuration (which is confusing by itself and mentioned above in another item)


#8

The “cloud intel” entry name should be changed to something else. It’s not only cloud.
Also the name doesn’t imply this is the entry for the dashboard and the reports.
Perhaps alerts should go into this entry as well, and not be a separate Monitoring section.


#9

Thank you, Ohad!

I’ll talk with Serena, see what her recommendation is. Happy to do whatever works best for all.


#10

I think that some of the issues can be resolved by restyling, renaming, or moving things around. Others (such as making breadcrumbs consistent or always refreshing only the content) will take some major redesign or technology changes.

That being said, probably the best way forward is to create github issues for each item so we can have more detailed discussions as to why each issue exists (code/design history, use cases, etc) and what the fixes would be. We can then determine the scopes and address each of them, based on resources.


#11

Hi – will get back to you on this one.


#12

Hi, agree with your observations.

Will talk with Serena about past and future efforts to rework the CF IA (info architecture).


#13

Thanks for your thoughts here. Will consider this for any rearchitecting of the nav.


#14

Issue #1 addressed here: https://github.com/ManageIQ/manageiq-ui-classic/pull/2969