Introduction
In our previous lesson, you created a sitemap, which acts as the architectural blueprint for a product, defining what content exists and where it is located. This gives us a complete inventory of pages and their relationships. Now, we need to decide how users will move through this structure.
This lesson focuses on choosing a navigation structure, the high-level model that governs how users journey through a website or app. Think of your sitemap as an organizational chart listing all company departments; the navigation structure is the policy that defines how information and people flow between them. Selecting the right one is a strategic decision that directly impacts usability and user satisfaction. For a freelancer, being able to articulate and justify this choice demonstrates a level of strategic thinking that sets you apart from purely visual designers.
By the end of this lesson, you will be able to analyze a product concept and its sitemap, select the most appropriate navigation structure, and justify your choice based on user needs, content type, and business goals.
The Four Core Website Structures
At a high level, most digital products are organized according to one of a few fundamental structures. These structures dictate the pathways available to the user. Understanding them is the first step toward making an informed choice for your own projects.
Website Structure 101 with Examples
This article from the UXPin blog provides a concise breakdown of the fundamental structural models that form the basis of information architecture.
Please read the section titled "4 Types of Website Structure." As you read, focus on understanding the core concept behind each of the four models: Hierarchical, Sequential, Matrix, and Database. Think about what kind of website or app might use each one.
Deeper Dive: Common Navigation Patterns
While the UXPin article gives us the foundational theory, in practice, designers often talk about these structures using slightly different names and patterns. These patterns come with specific pros and cons that make them suitable for different situations.
The image below, from an article we'll read next, gives a great visual summary of the most common patterns you'll encounter.
Now, let's explore these patterns in more detail to understand their strengths and weaknesses.
Navigation Matters: Choosing the Right UX Pattern - Medium
This article from Preetham Lawrence on Medium does an excellent job of detailing these common navigation patterns, including their pros, cons, and when to use them. This is the critical information you'll need to justify your design decisions to clients.
Read the sections covering all four patterns: Hub-and-Spoke, Fully Connected, Flat or Tree-Type, and Pyramid. Pay close attention to the "Pros" and "Cons" for each, as this is the language you will use to defend your choices. Note that "Pyramid" and "Flat or Tree-Type" are both variations of the hierarchical model.
To consolidate what you've learned, here is a summary table mapping these patterns to their ideal use cases.
| Navigation Structure | Best For... | Key Characteristic | Example |
|---|---|---|---|
| Hierarchical (Tree) | Most websites, e-commerce stores, blogs. Content with clear parent-child relationships. | Top-down structure, like an org chart. Users navigate down branches and back up. | A corporate site with About, Services, and Contact. |
| Hub-and-Spoke | Task-oriented apps, tool dashboards. When users complete distinct tasks from a central point. | A central home screen (hub) links to independent tools (spokes). | Your phone's home screen, Apple Watch UI. |
| Matrix (Fully Connected) | Wikis, large databases, some e-commerce sites. When exploration and discovery are key. | Users can navigate from almost any page to any other related page. | Wikipedia, a large e-commerce site like Amazon. |
| Sequential (Linear) | Onboarding flows, checkout processes, tutorials. When users must follow a specific path. | A step-by-step progression with clear 'Next' and 'Back' actions. | A multi-step sign-up form or payment process. |
How to Choose and Justify Your Navigation Structure
Now for the most important part: How do you select the right structure and, crucially, justify that choice to a client? Your decision should be a logical conclusion based on evidence, not just a feeling. The process involves weighing three key factors.
Let's return to the UXPin article to learn about these deciding factors.
Website Structure 101 with Examples
This section outlines the strategic considerations behind selecting a structure. It's the "why" behind the "what."
Read the section titled "How to Choose the Best Website Structure?". Focus on the three key factors it presents: user journey, content, and context (business goals).
Based on this, here is a practical checklist you can use for any project:
-
Analyze Your Content & Sitemap:
- Look at the sitemap you created. Does it have a clear, branching hierarchy with parent and child pages? This strongly suggests a Hierarchical structure.
- Is your content a collection of separate, independent tools or features? This points to a Hub-and-Spoke model.
- Is your content a vast, interconnected web where items relate to each other in many different ways? This might call for a Matrix structure.
-
Consider the User's Primary Goal:
- Is the user trying to find a specific piece of information or a product? A Hierarchical structure provides a clear, predictable path.
- Is the user trying to complete a focused task, like checking messages or editing a profile? A Hub-and-Spoke model lets them jump into a tool and then return to the main screen.
- Is the user following a required process from start to finish? This is the exact use case for a Sequential structure.
-
Align with Business Goals:
- Does the business want to guide the user toward a specific action, like a purchase or a contact form submission? A Hierarchical or Sequential structure excels at this.
- Does the business succeed by having users engage with many different features of an application? The Hub-and-Spoke model encourages this behavior.
Finally, justifying your decision with data and established best practices is incredibly powerful. The following video provides case studies that can arm you with data-backed arguments for specific choices within your chosen structure.
Everything About Website Navigations
This video from The Website Architect provides excellent case studies that give you data-backed arguments to justify design choices. This is the kind of evidence that builds client confidence.
Watch the "statistics and case studies" section from this segment. Pay attention to the findings on: The revenue impact of mega menus for e-commerce sites. The conversion benefit of hiding navigation on sales pages. The negative usability impact of hiding desktop navigation behind a hamburger menu icon.
Your Turn: Select and Justify a Structure
It's time to apply this framework to your ongoing project for the bespoke gifting boutique.
Task (approx. 20 minutes):
- Review Your Sitemap: Open the FigJam file containing the sitemap you created in the last lesson for the gifting boutique.
- Analyze and Select: Based on your sitemap, the likely user goals (e.g., finding a gift for an occasion), and the business goals (e.g., selling products, getting custom orders), select the most appropriate primary navigation structure from the table above (Hierarchical, Hub-and-Spoke, or Matrix).
- Write Your Justification: In a text box in your FigJam file or in a separate document, write a short justification (2-3 paragraphs) for your choice.
- Start by stating your chosen structure.
- Explain why it's the right fit, referencing the three key factors: your content's structure, the user's journey, and the business goals.
- Briefly explain why other models are less suitable. For example: "While a Hub-and-Spoke model is good for task-based apps, it is less effective here because users will likely want to browse between related categories (e.g., from 'Wedding Gifts' to 'Anniversary Gifts') without having to return to the homepage each time."
This exercise will solidify your ability to make and defend a foundational design decision, a core skill for any UI/UX professional.
Conclusion
In this lesson, we've moved from the "what" of your content to the "how" of user movement. You've learned to identify and evaluate the primary navigation structures that form the backbone of digital products. Most importantly, you now have a framework for selecting the right structure and justifying your decision with logic and evidence.
Key Takeaways:
- The four main navigation structures are Hierarchical, Hub-and-Spoke, Matrix, and Sequential.
- The choice of structure depends on a logical analysis of three factors: the content itself (your sitemap), the user's goals, and the business's objectives.
- Justifying your decision is as important as making it. Use the pros and cons of each model to build a rational argument for your choice.
Preview of the Next Lesson:
With a sitemap defining our pages and a navigation structure defining the pathways between them, we are ready to start giving these ideas visual form. In our next lesson, we will begin the process of turning abstract structure into tangible layout by sketching rapid, low-fidelity wireframes, allowing us to explore different screen designs quickly and efficiently.