Navigation

[ericsoderberghp]

(Re)explore navigation.

Exploration

• [x] research
• [x] review existing product screens
• [x] #1652
• [x] #1653
• [x] #1651
• [x] #1655
• [x] #1656
• [x] #1654
• [x] #1917
• [x] #2038
• [x] #2067
• [x] #2148
• [x] #2208

Ideation

• [x] #2036
• [x] #1844
• [x] #1843
• [x] #1921
• [x] #1923
• [x] #1979
• [x] #2058
• [x] #2068
• [x] #2143
• [x] #2222
• [x] #2231
• [x] #2258
• [x] #2276

Implementation

• [x] generate updated guidance
• [x] #779
• [x] #1907
• [x] #1893
• [x] #1999
• [x] #2060
• [x] #2089
• [x] #2090
• [x] #2091
• [x] #2092

User Research

2267

2263

https://www.figma.com/file/b6hiokanRCwNnc93PpHdgQ/HPE-Design-System-Navigation?node-id=519%3A2

[vavalos5]

Beginning to questions whether "navigation" is the appropriate name when referring to a header or sidebar. I say this because there could also be contextual navigation - links may transition to similar pages, lead to different areas, different pages or even a completely new site.

Do we call is main nav? Global nav? Primary nav? 🤔

[ericsoderberghp]

I'm inclined to cover all of it as "Navigation". From the research I've done so far, I think the different forms have to be considered together to provide guidance on how to use them in combination. I've heard from some teams that they want a persistent sidebar, a persistent header bar, and tabs below the header bar. I think each one individually is alright but the combination is where the chrome buildup gets to be too de-focusing.

[vavalos5]

Here is some beginning guidance I worked on to describe what Navigation is/means:

Navigation

Navigation is a process that provides users screen direction through different components such as: lists, table, cards, headers, tabs, etc.

It is important to determine the purpose and importance of how the navigational structure will appear within the application by pairing similar items so they cohesively make sense for a user.

There are 3 different types of navigational categories:

Structural:

Connects one page to another based on the hierarchy of the site; on any page you’d expect to be able to move to the page above it and pages below it.

Examples: Sidebar, global navigation, header

                **Local Navigation** : sub-navigation, page level-navigation
                Used for lower levels of navigation below the main navigational pages.                  
                Typically works in conjunction with a global nav.

                Examples: Inverted-L, Horizontal or embedded vertical, tabs

Associative

Connects pages with similar topics and content, regardless of their location in the site; links tend to cross structural boundaries.

Examples: related links (anchors), menus, footer, buttons

Utility

Connects pages and features that help people use the site itself; these may lie outside the main hierarchy of the site, and their only relationship to one another is their function.

Examples: Cards, Lists, Tables

Best Practices:

1. Be Consistent:
2. Design for every Screen Size
3. Make sure most important information is easily accessible to the user

[vavalos5]

Also including an example of how i'm thinking we can tackle the rest of the navigational components. Thoughts?

[ericsoderberghp]

I like the Structural, Associative, and Utility segmentation.

Some interesting aspects of Structural navigation in particular:

• because it is hierarchical, width and depth
• how do you structure the hierarchy, by resource type or by task type?
• do you organize by conceptual model or by frequency of user task?
• how to convey context for deep links, breadcrumbs vs. just immediate parent + back to home/top?
• which depth(s) in the hierarchy are persistently shown?

I also think a Menu could be used for structural navigation.

[vavalos5]

I'm going to close this ticket and move this info to another ticket since we're ideating.

[ericsoderberghp]

Reopening to use as big item inspiration point tracking issue

[vavalos5]

I might've unlocked a new type of Navigation... Just leaving my comment here to remind myself to further analyze this a bit as what i'm currently working on (card) might not end up living in "Drill Down Navigation" but rather we might want to have "Hub&Spoke" as a type of Navigation that is also a type of Page Layout..

The new Navigation I discovered is called "Network" which connects related task... like a Wizard.. forms? Sign In/Sign Up screens

?

[ericsoderberghp]

We've gotten to a good place for now. Closing this big item and relying on the work on page headers to cary it forward. Any feedback on the existing content will be taken up via subsequent issues.