Navigation Design Method
A website’s navigation is a collection of user interface components. The primary goal of navigation is to help users find information and functionality, and encourage them to take desirable actions. Navigation components include global navigation, local navigation, utility navigation, breadcrumbs, filters, facets, related links, footers, fat footers, and so on.
When approaching a design or redesign project, it is important to take a look under the hood and start by defining or redefining the IA. The IA doesn’t need to be final before beginning to wireframe and prototype, but a first pass is necessary to get a handle on the volume and complexity of the content. Making navigation component choices based on looks alone can force you to change an ideal IA to something that doesn’t best serve the needs of users or accommodate your content.
Preparation
Navigation Design is often more effective when it is informed by these complementary methods.
-
Task Analysis
Observe users in action to understand how they perform tasks to achieve goals
-
Category Design
Creating structures and schemes that make the location and use of content clear.
-
Taxonomy Design
Define a system for labeling and classifying content to make it easier to find, understand, and use
-
Wireframing
Interface illustration that focuses on prioritization, functionality, and behavior
-
Contextual Interviewing
Observation of users performing tasks in their own environment
-
User Interviewing
Understand the tasks and motivations of the user group for whom you are designing
Steps
- Determine usage priority: How much will users rely on this navigation component? For example, will users primarily navigate the site using local navigation? Or are they likely to more heavily rely on related links?
- Determine placement: On which pages should navigation be present? Where should it be placed within the page layout grid (e.g., top, left, right, bottom)?
- Establish patterns: Which navigation design patterns best support findability and discoverability — tabs, megamenus, carousels, accordions, and so on?
Outcomes
Navigation Design typically produces insight and solutions focused on these areas:
-
Navigation Design
A recommendation for navigation affordances in a website or application.
Resources
-
Navigation design: Almost everything you need to know
-
Four Tradeoffs When Designing Navigation Menus
-
Website Navigation Best Practices - 9 Navigation Design Tips and Warnings
-
Classification, Navigation, and the Secret Lives of Watermelon
-
Implement Global Navigation to Improve Website Usability
Next Steps
-
Prototyping
Prototyping is an experimental process where design teams implement ideas into tangible forms
-
Accessibility Evaluation
Ensure an accessible and inclusive experience for users across the spectrum of abilities
-
Usability Testing
Observation of users performing a series of tasks to gather feedback on flows, design, and features
-
First Click Testing
Discover what users interact with first when they land on your web page
References
Navigation Design Method details last edited on 2021-02-01