Navigation

Navigation is the overall structure providing users screen direction to complete a task logically and easily through a website or an application.

Part of creating a seamless application or interface is creating an obvious flow from one view or interaction to the next. Think of navigation as a story map where you help guide your user through each process.

Pages and content of a site or service are typically organized in an information hierarchy. Navigation provides various means for traversing this hierarchy depending on the user's task. There are 5 navigational directions in which a user can maneuver:

Drill Down - Used when the user wants to view greater detail on the current topic than the current page displays.

Side-to-Side - Used to visit to the next or previous sibling of the current page, typically when the user is scanning across similar items.

Reverse Navigation - Used to return to the previous visited page using the browser's built-in back button.

Matrix - Used to "jump" to a different place in the information hierarchy which isn't a direct parent or child of the current page.

Ascending Navigation - Used to allow the user to move up the information hierarchy from a child page to its parent.

Users should always be able to tell where they are on a page, application or product and should be predictable as to how they can get to the next step or destination. A task has a start and an end point so it is important to keep the functionality or task(s) in mind when creating products with common user experiences and expectations.

For more tips on how to implement successful navigation, check out this Figma file.