Navigation (wayfinding) in the Hybrid Cloud Console

Author: Mary Shakshober
Last edit: June 30, 2023

Design decisions checklist

Coming soon: a summary of what you, as an interaction designer, have to think about so that you can integrate your service into the HCC wayfinding/navigation components described below.

Navigation demo video

This recording gives a brief visual overview of the components that make up the Console (HCC) navigation/wayfinding interactions:

• Services drop down and the global nav flyout menu 
• categories within the global nav flyout menu and  services within them; how you can favorite services there
• the Favorites dropdown and favorited services within it
• the All Services page and favoriting there
• how you move from the global nav flyout menu to a service in a bundle

Quick reference usage chart

These are the components that users might interact with when they try to find services in the console; the chart explains how and why we assume users will interact with them.

Global search (WIP/NA)

Here’s what it looks like

[Screenshot coming soon]

Here’s when and how we expect users to engage with it

• For regular users who know what they’re looking by either service name or bundle name
• For users who want to see services based on industry keywords/categories

Here’s what it's NOT for

• a user just looking to ‘browse’ 
• Not for finding a specific details page or subpage within a service. User can search for the service name, but will still have to drill into the desired subpage. 

Design decisions for you to make

Guidance coming soon

Interactions

• Intention is to have a fuzzy / dynamic smart search that guesses results as user types
• Unknown if hitting ‘enter’ will navigate users to a results page, or if it would just continue to show dynamic matches in the dropdown.
• More details to come as the feature gets finalized.

Other notes

• This feature is in implementation now, and should release to stage-beta fairly shortly. Stay tuned!

All Services page

Here’s what it looks like

Here’s when and how we expect users to engage with it

• For users who want to see all services at once in one view and get a sense/gist of the what the console offers
• For users who want to understand interconnections between services (ie. “I see ‘Clusters’ and ‘Image builder’ are both services supporting deployment”)

Here’s what it's NOT meant for

• exploring at a glance what various services specifically do (there are no descriptions of the services)

Design decisions for you to make

• on the current All Services page, which category or categories does your service belong in? Note that we can display your service in more than one category/flyout. However, there should be a match between the categories your service appears in on the global nav flyout menu and here on All Services. If a reasonable category doesn't already exist, think of another that might apply and speak to Console product management and UXD.
• what description accompanies your service. Its length should be similar to that of other services already in the global nav flyout menu.

Interactions

• User can click on the blue service name links to go to the landing page for that given service
• When user hovers over the blue service name links, a grey star will appear. If that star is clicked, the service will be added to favorites and will show the orange star unless the user unfavorites it. More conventions around favoriting are coming soon.
• User can use the search filter bar at top to filter their view. See below notes for nuances. 

Other notes

• The ‘Find a service’ bar is currently a search FILTER that queries the view by service name or group name. It does not know keywords. The icon will be changed to a ‘filter’ icon shortly. 

Global nav flyout menu

Here’s what it looks like

Here’s when and how we expect users to engage with it

• For users look to browse and find a service that fits their industry need
• For users who don’t know what a given service does (each one has a description and is grouped under one or more industry categories)
• Quick switching services without knowing what bundle it lives in.

Here’s what it's NOT meant for

• Not for users who know the name of the service they're looking for and what the service does
• Not for experienced users who want to act quickly/not explore

Design decisions for you to make

• Which categories does your service belong in in the existing global nav flyout menu? This should match the categories your service appears in on the current All Services page.
• What will the description that accompanies your service in the menu be? It should be approximately the same number of characters as existing items in the menus.
• What URL does the service card link to? It can open a new bundle to the bundle's home page;  or to a service that's part of a bundle and has its own “sub” home page.

Interactions

• User clicks on ‘Services’ in the top masthead, dropdown menu to appear
• User moves mouse over each of the left-side categories (just hovering, no need to click these categories) and the content in the right side of the panel changes to reflect it 
• When user hovers over service cards on right, they will get the default PatternFly tile/card hover treatment and a star will appear (if not already favorited).
  • If user clicks on the gray star, it will turn orange indicating that it has been added to favorites
  • If the star is already in its orange ‘favorited’ state, it would disappear and become unfavorited when clicked
  • When user clicks anywhere outside of the star on a given card, it would navigate them to that service

Other notes

• The content in the dropdown is ever changing with new services coming to the console, IA needs changing, and other shifts in industry keywords.
• Anything ‘favorited’ can be quickly accessed in the ‘Favorites’ masthead item. When clicked, it triggers a dropdown menu with all of the favorited services shown in cards. Users can ‘unfavorite’ items from this dropdown as well. 
• More conventions around favoriting are coming soon.

Bundle left nav

Here’s what it looks like

Here’s how a service uses it

• Lefthand ‘bundle navigation’ appears when a user clicks a service (eg, from the global nav flyout menu or a favorited service) or otherwise navigated into a bundle (from an link on redhat.com, eg). If the URL contains a path beyond “console.redhat.com," such as console.redhat.com/openshift, the OpenShift bundle opens with its own dedicated left nav.
• Users can easily  easily switch between services that share a bundle (ie. “I am in the API Designer service, and I need to hop into API Management)

Here’s what it's NOT meant for

• Not for users needing to navigate between bundles (ie. they cannot use this left hand navigation to navigate from the API Designer Designer service in the App + Data Services bundle to the Clusters service in the OpenShift bundle). 

Design decisions for you to make

• Which existing bundle might your app belong in?  Or might it belong in a new, dedicated bundle?
• Where inside the bundle might the app and its pages belong? Have you thought about your app’s structure or sections and subsections? Note that users will be able to navigate directly to your service from the global nav flyout menu, etc, to the service's home page, but it will appear as part of a larger nav bundle.

Interactions

• Assuming that a user is in a bundle, they will be able to do the following within the left hand nav …
  • Click into a given service (each item in the left hand nav is a service)
  • If a service has multiple pages, they may show up and be accessible in a collapsible section in the left hand nav
• Assuming that that a user in is in a bundle, they will be able to do the following with the secondary masthead/breadcrumbs bar
  • Toggle the left hand navigation open and closed by clicking the hamburger in the secondary masthead / breadcrumbs bar
  • View the nesting / parent-child relationship for their given location in the bundle and how it is situated in the bundle itself. For example, if a user clicks into ‘API Designer’ they will be dropped into the first subpage of that service, but the service name (API Designer) will show the user the nesting of their page.
    • Breadcrumb structure: [Bundle name] > [Service name] > [Page name]
    • Note: If a bundle has an ‘Overview’ page, we recommend that they make the breadcrumb [Bundle name] parent item be linkable back to that ‘Overview’.
  • User can ‘Favorite’ or ‘Unfavorite’ a service by interacting with the ‘Star’ dropdown at the right side of the bar.
    • Note: The dropdown will automatically disable the current state of ‘Favoriting’ (ie. if a service is already ‘Favorited’, the ‘Add to Favorites’ action will be disabled).
      

Other notes

• Implementation is coming soon!

In-service nav (breadcrumbs and subnav)

Here’s what it looks like

• Breadcrumbs bar examples
  • Full secondary masthead/breadcrumbs bar
    
  • Just breadcrumbs section
• Left hand sub-nav examples
  

Here’s when to use it

• Left hand sub-nav: When a given service has more than one high level page that we want a user to have easy access to. Services may choose to use in-page tabs instead as well to navigate user within their service)
• Breadcrumbs: Use at all times once in the context of a bundle to make for easy tracking both within a bundle and to drill up a level when deep into a service. Even if a user is just on a bundle ‘Overview’ page, we should display the bar with a breadcrumb having just a parent with no children items. Here’s how the breadcrumb would look for the OpenShift bundle ‘Overview’ page: 
  

Here’s what it's NOT meant for

• Not for very simple single page services (basic services should just have their one nav item within their bundle, and then rely on the breadcrumbs when drilling into details). 

Interactions

• Left hand sub-nav:
  • User triggers open the sub-nav by clicking on the ‘chevron’ icon to the right of the service name in the bundle navigation.
  • User clicks on service sub-page and sees the context of the breadcrumbs bar reflect that movement. 
• Breadcrumbs: Refer to the ‘Bundle navigation’ section for more details about navigating with breadcrumbs.

Other notes

• User cannot favorite a page within a service; only the service itself.