Research nav how others do it
- Bart De Pelsmaeker (Unlicensed)
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.
We’ll at how these folks do it:
Google Cloud
IBM Cloud
MSFT Azure
Amazon Web Services
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.
Clicking the hamburger will open up the left panel and its navigation. The navigation menu stays ‘pinned’ until the hamburger menu is clicked again, or the main canvas is clicked.
A nice touch is that the main canvas gets a grey overlay. Clicking on the main canvas closes the navigation panel.
Google’s navigation panel has a fold-out for submenus with variable height.
Once you select one of the services, eg Kubernetes, the fold-out menu becomes the side panel. The Main menu remains accessible through the hamburger menu.
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.
Clicking the hamburger will expand the side menu (smoothly animated).
Submenu, similarly to Google Cloud, expands
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.
Design pattern is very much like Google, incl the search bar and the utilities next to it. The hamburger menu is on the top left corner.
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 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 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. 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.
Clicking the hamburger menu opens up a menu, with a side menu.
Clicking one of the services, eg ML, will show the submenu on that menu.
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.
As shown in screen 2 - when clicking the menu away, the service shows.
And finally, from within mobile versions the main menu can be accessed
Salesforce Marketing Cloud
Same patterns re-appear.