UI shell left nav: Provide a mechanism to expand width panel + section for additional links

[tifftea]

Summary

1. There should be a toggle or some other mechanism to expand or reduce the width size of the UI shell left panel.

2. We propose to have a section at the bottom of the panel where additional icons and links that are less relevant to users are placed.

Example:

(In this example, that toggle is shown as a hamburger menu. It is understood that a hamburger icon is not the best icon to use as it is already being used in the UI shell header.)

Justification

A hamburger button was added to sit right above the navigation. Clicking on the hamburger icon expands the left panel and reveals the full menu. This panel is unique to WOC and should not be interfered with CPD UI shell.

Additional icons that sit at the bottom of the panel includes: help, documentation, API, and account info. Because these links are most irrelevant to users, it is necessary to distance them.

The Db2 Warehouse on Cloud ("WoC") navigation strategy was guided by user insights and human factor cognitive psychology in order to assure the following goals:

• simplify and streamline users' application workflows
• scalability
• an integration into an enterprise platform

The hamburger icon denotes the key interaction point to reveal the nomenclature of the primary navigation to reinforce users’ cognition on the information hierarchy and structure. This functional hamburger button instantly guides users to the primary category and ties the relationship between the primary and the secondary navigations.

When the hamburger menu is clicked, the navigation bar slides out and displays the primary navigation menu on top and tertiary navigation menu towards the bottom.

The tertiary navigation menu disassociates from the primary menu by a great distance and a line to clearly disclose the organizational hierarchy between two menus.

WoC is a highly functional SaaS solution with streamlined workflows, and that, the primary navigation enables users to instantly access the secondary menu by directly clicking on the primary navigation icons.

Desired UX and success metrics

-A more define hierarchy and easier navigation

"Must have" functionality

--

Specific timeline issues / requests

--

Available extra resources

--

[asudoh]

Hi 👋 thank you for reporting - One quick question. Would you have a summary of the difference between your to-be scenario and https://codesandbox.io/s/header-with-sidenav-1u7su?from-embed?

[tifftea]

@asudoh
The current design has two states:

1. open at full width
2. closed

The proposed design has three states:

1. open at full width (text + icon)
2. open at minimal width (icon only)
3. closed

[asudoh]

I see, tri-state with the "rail mode" as the mid-state. Thank you for clarifying, let's see what our designers thanks.

[tifftea]

@yayitsnatasha

[chrisconnors-ibm]

The rail is intended to be persistent - shortcuts to actions or views that are part of a menu but without taking up the screen real estate of a menu.

If a rail is dynamically toggled into view at all with the hamburger menu button, it becomes a label-less menu without the benefit of persistence for users to become practiced with their appearance and function.