PLATFORM UX, UI - MENU & STRUCTURE

Platform Menu & Structure in UX/UI - Taxonomy vs. Hierarchy vs. Categorization

Structure: Containers and Panels - How structure is made usable

Platform (UX/UI) = Applications, Phone Apps, Websites, E-commerce Sites/Websites, Social Media Platforms, Gaming Platforms, etc

Taxonomy = the language (what things are called)

Hierarchy = the structure (how things relate)

Categorization = the placement (where things go)

Containers & panels = the UI mechanisms that make all of the above usable

Understanding Platform Menu & Structure

1. Taxonomy — What things are called and how they are conceptually defined

Taxonomy is the naming system. It defines the vocabulary used across the navigation and ensures labels are consistent, meaningful, and mutually exclusive.

In the diagram:

• “Main Category 1 / 2 / 3”

• “Subcategory A / B / C”

• “Item 1 / Item 2 / Item 3”
  

These labels collectively represent the taxonomy.

What taxonomy answers for users:

• What kinds of things exist on this site?

• Are these labels familiar and predictable?

• Do these terms match my mental model?
  

What taxonomy answers for the system:

• How content is indexed

• How search, filters, personalization, and analytics work

• How future content can scale without renaming or restructuring
  

Important distinction: Taxonomy is not about order or depth—it is about semantic clarity and consistency. Obscure taxonomy results in vague, overlapping, or misleading labels, even if the UI looks clean.

2. Hierarchy — How things are ranked and related

Hierarchy defines parent–child relationships. It answers which things are broader and which are more specific.

In the diagram:

• Main Categories → Subcategories → Items

• The vertical progression and indentation visually communicate hierarchy

• Arrows pointing downward reinforce levels of specificity
  

Hierarchy helps users answer:

• Where am I?

• What’s the next logical step down?

• How deep does this go?
  

Hierarchy is a UX responsibility, later expressed visually by UI.

3. Categorization — Where things are placed

Categorization is the act of assigning items to categories.

In the diagram:

• Items are grouped under specific subcategories

• Subcategories belong to a single primary category

• This placement reflects decisions about relevance and belonging
  

Categorization answers:

• Does this item belong here?

• Why is this grouped with these others?

• Is anything duplicated or missing?
  

Vague categorization creates user doubt—even if the taxonomy and hierarchy are sound.

Navigation Menu - The Hamburger Menu

The "hamburger menu" refers specifically to the ☰ icon; the term is derived from its resemblance to a hamburger (bun-patty-bun), rather than the navigation list itself.

It is a space-saving button that conceals links (the menu) to reduce clutter on small screens. The icon functions as a toggle or button which, when activated, reveals the actual navigation links (the "menu" or "nav drawer").

This mechanism efficiently obscures extensive navigation options behind a single compact symbol, which is essential given the limited space available on mobile screens.

Although it enhances focus by minimizing visual clutter, its concealed nature may impede discoverability, prompting many designers to label it simply as "Menu" or something relevant (Nielsen Norman).

Containers and Panels — How structure is made usable

Container

The container is the bounded navigation region (the hamburger menu itself).

Why it matters:

• It isolates navigation from page scroll

• It creates a predictable interaction zone

• It prevents scroll conflict and loss of control
  

Panels

Panels are sub-surfaces within the container that progressively reveal deeper levels.

Why they matter:

• They preserve context while drilling down

• They prevent overwhelming the user

• They allow static parent categories while children scroll independently
  

Panels are UI components that visually convey UX decisions about hierarchy and depth.

Drawer: A navigation panel that slides in from off-screen and overlays page content.

Accordion: Inline expansion/collapse within the page’s content flow. Others: Carousels, Hybrid

Note: This list is extensive, and I will continue updating it.