Effective navigation is critical for users. It lets them know what they can accomplish, where they are and where they can go, and shows the breadth and depth of the application.
Harmony’s navigation framework contains patterns that work together to guide the user through the application or a particular flow. Patterns like left navigation, header, tabs, and flow navigation help orient the user as well as convey what other areas of the application exist. These patterns help users get from point A to point B.
Back Navigation allows the user to travel one level up in the information hierarchy.
On mobile devices, users can use the Create Icon to create transactions and other important actions. It is available on every screen except transaction modals.
- On a tablet, it opens a menu with multiple selections.
- On a phone, it is contextual to the current screen.
Flow navigation guides the user through a task that includes multiple steps. It’s designed to give the user a sense of place and progress within a particular flow, while breaking down the tasks into easily digestible sections.
- Linear flow navigation guides the user through tasks that require the completion of steps in a specific order.
- Non-linear flow navigation allows users to complete steps without adhering to a specific order.
The Global Header contains creation tools, help, messages, and settings utility menus that apply to all areas of the application. Items in the Global Header that require the user’s attention may be highlighted by a notification Badge. Within the global header, the Create Menu allows the user to create and access important application-related items, while the utility items on the right are for utility; settings, help, and inbox.
Tabs are used to separate content into different views, which can be displayed one at a time without a page refresh. Tabs provide easy access to additional content without requiring the user to go to a new page.
You probably know what Left Navigation is. For the 0.1% of you who do not: the Left Navigation panel links to important sections of the application, and contains app branding.
Within the application, Search occurs at an application level (e.g., accessible from the Global Header) as well as at a component level (e.g., within the Add Drawer).