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.
...
Google Cloud
IBM Cloud
MSFT Azure
Amazon Web Services
and quickly a bit of 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 |
Going to mobile breakpoint, the in-content side panel is kept
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).
...
Within a service: similar but different pattern for smaller screens : IBM keeps the larger menu visible until the screen becomes too small and then collapses it and keeps it accessible through:
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.
...
Once more, the same design pattern. But with one major difference: we do not have submenus here.
...
...
There is no sub-menu either sometimes it seems when the user goes into a service. The overall menu stays. It feels a lot less intuitive somehow - the mental load of the huge menu with options is always there.
...
With other services, a contextual sub-menu appears though
...
Staying in the service, clicking on the hamburger reveals again the overall menu overlaying the side menu. But the overall menu does not show the service the user is on. For that, the user has to open another menu ‘all services’ which then will list the suer’s user’s service (see above). It feels disconnected.
...
The responsive behavior is wildly confusing. See below. Within a service, up to a point, the screen adapts.
...
Beyond a specific breakpoint though, the platforms just goes out of the service the user is in and switches to the landing page for general services.(see screen 2 below).
...
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.
...
User stays on the page they did NOT navigate to:
...
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:.
...