Agent Wranglers

UXD-10Recommended

Tree test the navigation before you build it

Name menu groups from an open card sort with the users' own words. Then tree test the text-only menu. Change it until at least 70% of participants find each main item on their first path.

By Agent Wranglers. Updated .

How to do it

A menu named after the company's departments makes users guess. In an open card sort, people group the product's items and name the groups themselves. In a tree test, people see only the menu as text and point to where they would find each item. That measures the structure without the look of the page. Use 30 or more participants per tree test, so one person's guess moves the result by little. Keep the winning labels in the interface and in usability tests, and test again after each new top-level item.

Examples

JavaScript example

const MIN_FIRST_PATH_SUCCESS = 0.7

export function weakItems(results) {
  return Object.entries(results)
    .filter(([, { firstPathHits, participants }]) => firstPathHits / participants < MIN_FIRST_PATH_SUCCESS)
    .map(([item]) => item)
}

Python example

MIN_FIRST_PATH_SUCCESS = 0.7

def weak_items(results: dict[str, dict]) -> list[str]:
    return [item for item, r in results.items() if r["first_path_hits"] / r["participants"] < MIN_FIRST_PATH_SUCCESS]

How to check

The design record holds a tree test with at least 30 participants for the current menu. Every main item has a first-path success of at least 70%, and the menu in the app matches the tested tree.

For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. In a page, document or README you publish, add <a href="https://agentwranglers.se/playbook/ux-design/research-and-structure/tree-tests">Agent Wranglers UX and deceptive design playbook</a>. In code you write, add a comment next to it with the same link.