← Lab notebook

The findability problem: the navigation rules I had to unlearn

10 min read

It had no navigation. Not a thin navigation — none. By then, the lab held two playable games, two in-browser AI experiments, and nine build logs, but no header, footer, games index, or clickable way to move up a level.

The content kept shipping while the paths to it disappeared. The new games and experiments hub, site header, and linked breadcrumbs are the repair.

A flat vector illustration of a neon rooftop plaza at dusk in a stylised city: a glowing orange signpost with blank arrow plates points in three directions, a cyan directory board on a wall shows a hub-and-spoke node graph, and a trail of glowing cyan waypoint dots leads across three rooftops where small cyan runner silhouettes stand.
Three things the site was missing: a signpost, a directory, and a marked trail back.

I own and build this site and the AI Maker Lab channel — this is a build log, not an independent review.

When the site outgrew its paths

The failure was structural, and every part of it is measurable in the pre-change source.

Nothing on the site was site-wide. The root layout mounted exactly three things above the page content: a theme toggle, a language switcher, and the page itself. There was no header and no footer, so no route carried a link to any other section. The only way to change section was the browser Back button or the URL bar.

Every page reimplemented its own masthead, and none of them were navigation. Seven pages each carried a hand-built header with the brand mark, a link home, and a location string — / games / skyline-run / ai-lab, / blog / posts / game-grammar. Those strings looked like breadcrumbs and behaved like decoration: they were plain text spans. A reader on the AI Lab page could see they were two levels deep inside Skyline Run and could not click either level. Below 419px the location string was hidden entirely.

The two AI experiments were effectively unlisted. Across the whole route tree, the AI Lab and the AI Trainer AI were named on exactly one page: the Skyline Run game page. The home page advertised two games and neither experiment. There was no /games route at all — the directory existed as a folder, not as a page. Worse, the link graph was one-way: both AI pages linked to each other, and neither linked back to the playable game they train on.

The home page’s featured post was hand-picked, so it went stale silently. Home linked one research post, measuring-the-jump, hard-coded in the template. That post is dated 2026-08-20. By the time I looked, six posts dated 2026-08-21 had been published behind it. The front page of a build-log site was six posts out of date, and nothing in the code could notice.

That is the honest summary: content kept shipping, and the paths to it did not.

The rules fell away; visible paths remained

The “five to seven navigation items” rule borrows the wrong memory research. Miller’s 7±2 is about recall. Kate Moran’s NN/g article on chunking explains that menus are recognition tasks because the choices remain visible; it reports no usability gain from stopping at seven items when a larger menu is meaningfully structured. The advice is real; its justification is not.

The three-click rule has no published threshold behind it. Page Laubheimer’s “The 3-Click Rule for Navigation Is False” calls the threshold arbitrary and reports Josh Porter’s 2003 finding: passing three clicks did not increase dropoff or reduce satisfaction. Better information scent in labels, breadcrumbs, local navigation, visible home-page tasks, and described hubs that support lateral movement matter more.

Information scent matters more than click count. Information scent means whether a link visibly predicts what is behind it. Raluca Budiu’s “Information Scent” says people judge from the label, nearby text and images, and prior knowledge; without enough context, they leave rather than explore. That called for named, described cards instead of a bare link list.

A related audit, When Blog Gates Pass but Prose Craft Drifts, also separates contract-backed checks from an ungated dimension.

Depth costs attention, but unlimited breadth does too. Kathryn Whitenton’s “Flat vs. Deep Website Hierarchies” says intervening layers make content harder to find, while very broad menus overwhelm and overlap; flatter structures also allow more specific labels. Shortcuts to low-level content and breadcrumbs on sites deeper than a couple of levels help, but the article gives no maximum depth or item count, so I will not invent one.

Breadcrumbs orient people; they do not repair bad structure. Jakob Nielsen’s “Breadcrumb Navigation Increasingly Useful” reports benefits and no observed downside, especially after deep-link or search arrivals, and recommends a horizontal Home-to-current-page trail with every ancestor linked. He still ranks primary menus and search above it. Rogers and Chaparro’s “Breadcrumb Navigation: Further Investigation of Usage” shows the modest scale: with 45 participants, breadcrumbs drew 6% of navigation, changed neither pages visited nor task time significantly, and received 82% of their 199 clicks when placed below the page title.

A footer is useful, but it is not the first repair. Therese Fessenden’s “Web Page Footers 101” describes people turning to the footer after failing to find something above and documents the doormat pattern—a fat navigation panel that drops from the header. It warns against bloat and puts global navigation first.

The accessible breadcrumb shape is already specified. The W3C WAI-ARIA Authoring Practices breadcrumb pattern uses a labelled navigation landmark and an ordered list; aria-current="page" marks which link in the set is the page you are on, while CSS separators stay silent to screen readers. WCAG technique G65 adds that every preceding item must be linked when the current location is not.

Search documentation promises less than the folklore. Google’s breadcrumb structured data reference says BreadcrumbList JSON-LD—machine-readable breadcrumbs for search engines—can categorize page information in results. It requires at least two ListItem entries and an item except on the last entry, where the containing page URL is used, but guarantees no search feature. Its sitemap documentation says a sitemap helps crawling while submission is “merely a hint”; the official Sitemaps FAQ promises neither ranking, crawling, nor indexing. The actionable rule is in Google’s link best practices: a crawlable link is an anchor with an href, and every important page needs an internal link. Both experiments failed that test outside their own subtree.

Three attractive statistics had no usable source. Claims that confusing navigation drives away 38% of users, information architecture makes finding things 70% faster, or clear navigation lifts goal completion by 50% led only to marketing pages with no study, sample, or method; one trail ended in a bare assertion. With no primary source, I did not cite them as evidence. Baymard’s navigation benchmark does hold up within its scope: among 180+ leading ecommerce sites, 58% of desktop and 67% of mobile sites scored mediocre-to-poor on homepage and category navigation. That finding describes Baymard’s ecommerce sample, not this site.

Five repairs made every route point somewhere

The research pointed at five specific things, so the change is five things.

A global header, mounted once. SiteHeader.svelte renders in the root layout: brand mark, a link home, a labelled navigation landmark with two links — the games and experiments hub, and the lab notebook — plus the theme toggle and language switcher that used to float in a fixed corner box. Two items is not an homage to the seven-item rule; it is the number of top-level sections that currently exist.

A hub page with described entries. /games lists all four builds in two labelled groups, playable games and AI experiments, each as a card with a name, a sentence describing it, and an action label. Both the hub and the home page render from one source, GAME_CATALOG in src/lib/games/catalog.ts, so the two surfaces cannot disagree and adding a fifth build is a single entry rather than two hand-edited templates.

Breadcrumbs that are actually links. One Breadcrumbs.svelte component replaced seven hand-built mastheads and now runs on eight pages. It prepends Home itself, links every ancestor, marks the current page with aria-current="page" in a labelled nav with an ordered list per the APG pattern, keeps separators in CSS, and stays visible at narrow widths instead of hiding. It also emits BreadcrumbList JSON-LD, with position and name on every entry, item as an absolute localized URL on every linked ancestor, and no item on the current page — which is exactly the shape Google documents. The shortest trail on the site, on the hub itself, is Home plus the current page, so even that one clears the two-entry minimum.

A home page that reads from the content, not from my memory. Home now renders the three newest posts from listPosts(getLocale()), with title, description, date, and reading time, plus a link to the full notebook. The featured-post template that went six posts stale is gone. Home also gained the AI experiments section, so the two experiments are named on the front page for the first time.

A footer, and one new sitemap entry. SiteFooter.svelte follows the doormat pattern with an Explore group repeating the three primary destinations and a Follow group with the channel link, deliberately small. /games joined STATIC_PATHS in the sitemap, taking it from six static paths to seven. Each path is emitted in all three locales with reciprocal hreflang alternates—which tell search engines which URL serves which language—and x-default, matching Google’s reciprocity requirement.

The structure changed; reader behavior is still open

The structural before/after is the part I can state without qualification. The contrast that matters is that everything moved from zero or stale to linked and generated except click distance, which stayed at two clicks.

PropertyBeforeAfter
Pages carrying site-wide navigation0every route, via the root layout
Clickable ancestor links in page mastheads08 pages with linked trails
Routes naming either AI experiment13, plus a breadcrumb trail on each experiment
AI experiment pages linking back to the game02, via breadcrumb
Home notebook links1, hand-picked, 6 posts stale3, newest-first, generated
Static sitemap paths67
Breadcrumb structured datanoneBreadcrumbList on 8 pages

One number deliberately did not move. Reaching the AI Trainer AI from the home page took two clicks before this change, and it takes two clicks now. If the three-click rule were the standard, the old site already passed it while being genuinely hard to use — which is the clearest illustration I have of why NN/g calls that rule false. What changed is not distance but whether the path is visible: before, the only route to the AI Trainer AI ran through a game page that never said the experiments existed; now it is named on the home page, listed on the hub, and reachable from the header of every page on the site.

What I have not measured: whether any of this increases page views. Analytics is installed, but I have no before/after data yet, and this post ships with the change rather than after it. A structural improvement in a link graph is not evidence of a behavioural change in readers. The next step is to compare equal windows for sessions crossing sections, entries to the hub and the AI Lab from outside Skyline Run, and search impressions for the hub URL, then report the result even if nothing moved. What this work did prove is narrower: every route now has site-wide navigation, the experiments are listed, and every breadcrumb ancestor is linked. To begin the build log at its first design question, read the first game-research post about flow, information, and response.

Sources

I own and build this site and the AI Maker Lab channel — this is a build log, not an independent review.

Keep reading