Usage
Within Boeing applications, we can apply various forms of navigation depending on the application requirements and devices used.
Navigation lets users move through the information architecture of an app intuitively and predictably in different directions:
- Lateral navigation lets users move between screens at the same level of hierarchy.
- Forward and reverse navigation lets users move between various child screens or deeper levels of the same screen.
External navigation is also possible, for example, by providing links that open another app or website.
When designing the navigation of your app:
- Make sure users know where they are, and where they can go.
- Limit the number of navigation menu items to facilitate fast scanning.
- Don't distract people from the actual content of the screen.
The Atmosphere framework is intended primarily for building browser-based web apps. In addition to navigation options within the app, it should be possible to use the back button in the browser to go back in the navigation history.
Main navigation
Navigation design is complex. You can choose from many different design patterns to optimize the user experience.
Design patterns are general, reusable solutions to a problem. No one pattern is necessarily better than the other. Each pattern has its benefits and drawbacks, and needs careful consideration to ensure it's right for your product and users. Always test your navigation design before implementing it.
The next sections describe the design patterns for different depth levels of main navigation using the navigation rail, navigation drawer, and top app bar components.
Do’s and dont’s
Place the top app bar over the nav rail or nav drawer
Don't place the top app bar beside a nav rail or nav drawer
Use a top app bar menu only in use cases where there are few menu items and little depth of navigation
Avoid using a hamburger menu to store primary navigation in addition to a top app bar horizontal menu
Secondary navigation
The main navigation helps the user pivot between different areas to complete tasks without losing context or progress. However, inside a final level, it is also possible to use secondary navigation components that help to establish an information structure.
Tabs
Tabs are used to group different but related content, allowing users to navigate views without leaving the page. They always contain at least two items and one tab is active at a time. Tabs can be used on full page layouts/panes or in components such as dialogs, cards, or side sheets.
Breadcrumbs
Breadcrumbs let the user see where they are in the hierarchy of the application and give a way to navigate back up. They can also include the main navigation.
In many cases users need to drill up into a new context, for example from an overview page to a particular project, device or asset view. A drill down can be triggered from any interactive element in an application, and will generally open a new page focused on the object that was selected. This new page will then include a breadcrumb of the path back to the root level above the title.
Side sheets
Side sheets display content that complements the screen’s primary content.
They can display a list of actions that affect the screen’s primary content, such as filters or actions, or show supplemental content and features.
Menus
A menu is a component that appears with a set of actions relevant to a specific item. Typically, this context is determined by the user’s current selection. Menus can be opened from components such as icon buttons or through right-clicking.
Use menus to hide less frequently used or advanced options until users specifically need them, to keep the interface clean and focused on essential elements.
Cards
When used for navigation, cards can complement the main navigation, or provide shortcuts to detail pages or other modules. They can also show more visual information about their destination. Use them to group related information or actions.
Accessibility considerations
Accessibility in navigation will be given by the components that make up each screen.
From the development side, it is recommended to use accessibility best practices such as maintaining well-ordered code for screen readers, using semantic tags such as nav with an ARIA role='navigation' attribute or, optionally, attaching an aria-label attribute to your navigation to give assistive technology users as much information as possible (especially if there are multiple navigations in the screen).