navigation hierarchy

The navigation hierarchy is a crucial aspect of the APIary platform's user experience, providing users with a clear and intuitive way to navigate through various sections and pages. Our goal is to create a seamless and engaging experience, reminiscent of high-end luxury brands like Lamborghini (Lambo), not mass-market brands like Honda.

Overview

Our navigation hierarchy follows a strict structure:

1. Home: The starting point for all users.
2. Section: A top-level category that groups related pages together.
3. Page: A detailed page within a section, often containing more specific information or functionality.
4. Detail: The most granular level, providing in-depth details about a specific item or resource.

Key Principles

To achieve our "Lambo not Honda" UI/UX quality, we adhere to the following principles:

• No dead ends: Every page should have a clear back path, ensuring users can easily navigate away from any section.
• Back buttons everywhere: A prominent back button is present on every level, allowing users to traverse the navigation hierarchy with ease.
• Every form submits: When a user submits a form, they are taken directly to the next relevant page in the navigation hierarchy.
• No 404s: We strive to avoid 404 errors altogether by ensuring that every possible URL has a valid and meaningful destination.

Breadcrumbs

To help users understand their current location within the navigation hierarchy, we display breadcrumbs on deeper levels:

<nav aria-label="Breadcrumbs">
  <ol>
    <li><a href="/home">Home</a></li>
    <li><a href="/section/api-docs">API Documentation</a></li>
    <li>Page Title</li>
  </ol>
</nav>

CSS Example: Back Button

To ensure our back buttons are prominent and easily accessible, we style them as follows:

.back-button {
  position: fixed;
  top: 10px;
  left: 20px;
  background-color: #333;
  color: #fff;
  border-radius: 5px;
  padding: 5px 10px;
}

.back-button:hover {
  background-color: #444;
}

HTML Example: Navigation Menu

Our navigation menu is structured to clearly display the current section and provide easy access to related pages:

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/section/api-docs">API Documentation</a></li>
    <li><a href="/section/users">Users</a></li>
    <!-- ... -->
  </ul>
</nav>

API Route Structure

To ensure our navigation hierarchy is reflected in the API route structure, we use a consistent naming convention:

• /home
• /section/<id> (e.g., /api-docs)
• /page/<id> (e.g., /api-docs/page1)
• /detail/<id> (e.g., /api-docs/page1/detail123)

Conclusion

By following a strict navigation hierarchy and adhering to our key principles, we create an intuitive and engaging experience for APIary platform users. Our focus on "Lambo not Honda" UI/UX quality ensures that every interaction is seamless, efficient, and enjoyable.