Best practices nav: how others do it
Luckily we are not the first ones to build a complex system with many options, so we can benefit from the design patterns other companies use.
...
and same in Salesforce Mkt Cloud
Patterns (column below) | Google Cloud | IBM Cloud | MSFT Azure | Amazon Web Services | Salesforce |
|---|---|---|---|---|---|
Main menu that gives access to all services under hamburger menu top left corner. |  | | | | |
List of services in top header |  | | | | |
Utilities in top header | | | | | |
Search bar for services in top header | | | | | |
Menu panel (collapsable, left side) With services as an overlay | | | | | |
Submenu on the above panel with more nav | | | | | |
Within a product/service, the submenu is shown once more as the main left panel (in content) | | | | | |
Mobile: the inside content panel is persistent | | | | | |
Mobile: the main services menu is accessible from the mobile menu | | | | |
Google Cloud
Google does not use links in the header to navigate their services, but instead opens with a screen-wide dashboard and a hamburger menu in the top left corner.
...
It may seem a bit odd, but it actually works very well. Usually when a user selects a service, they will spend some time within that service and navigate within the components of that specific service.
...
Responsive behavior
When the screen size shrinks, the side panel menu stays in place.
Within a service, the fixed side panel will hide when the screen size becomes smaller, but the main menu (which now offers a vertical sub-menu) remains accessible.
...
IBM Cloud
IBM, like Google, opens up with a full-screen dashboard, and a hamburger at the top left side. But they add also a collapsed side menu.
...
Opening a service, eg Watson, will open a dedicated side menu - exactly like Google does. Additionally, IBM adds an aesthetic theme switch.
Responsive behavior
On the dashboard, once expanded, the side panel menu remains visible (as it should since it was opened explicitly by the user).
...
hamburger menu
black side bar with arrow icon (at bottom of bar)
Microsoft Azure
Here is the MSFT Azure dashboard. Getting to it proved difficult, after encountering a bug with SSO/SAML and the platform’s incessant forwarding to Office.com But ok.
...
The user is kicked out of the page they were at. Resizing the screen to desktop size again keeps the user on the general service page. Notice that just resizing the screen moved me from Load Balancers to Containers.
...
Amazon Web Services
And lastly (for now) - Amazon Web Services. The used design pattern is a familiar one by now. A hamburger in the top left corner, a search bar in the top nav, and utilities on the top as well.
...
When selecting a service, the submenu is hidden on the left. But once opened, it will remain open.
Within a service, when going to a small screen size, the menu stays and takes over the complete screen. Interesting choice.
...
And finally, from within mobile versions the main menu can be accessed
Salesforce Marketing Cloud
Same patterns re-appear.