nanaselect

Appearance

Design principles — UI heuristics for a design AI ​

Part of the design-brief package (issue #263). These are the product principles from docs/vision.md translated into concrete UI instructions. When principles conflict, the lower number wins.

NanaSelect guides architects, builders, and homeowners to the right-sized NanaWall system — not the most expensive one that clears a filter. Every visual decision below exists to serve that: the design must make education feel native, make cheaper alternatives feel like good news, and make a linear guided path feel faster than a filter.

1. Educate through every decision ​

Vision principle: the root failure is uninformed selection; each step teaches the trade-off it asks about.

UI heuristics:

  • One decision per screen. The guided stepper presents exactly one factor (e.g. Interior acoustic control) per step. Never combine factors on a screen; never show a sidebar of other pending questions.
  • Education renders at the decision point, not behind a link. Each step carries the factor's trade-off narrative as an inline callout above the options, and each option may carry a one-line "what this means" under its label. Style these as reading content (serif or relaxed body type, generous line-height), visually distinct from the interactive controls — but never collapsed, never a tooltip, never an (i) icon reveal.
  • Educational content is primary content. Give it real typographic hierarchy — it must not look like legal fine print or helper text. A user skimming the screen should absorb the trade-off before touching an option.
  • Plain language wins. Type and layout should support short paragraphs and concrete examples ("STC 45 means normal speech is inaudible"), not spec tables at the decision point.

2. Right-size, don't up-sell ​

Vision principle: steer to the most cost-appropriate system that genuinely meets requirements; a right-sized spec survives value engineering.

UI heuristics:

  • Cheaper-alternative call-outs are first-class, positive elements. When the results view says "the NW Aluminum 640 — or the SL45 — would satisfy this requirement for less," that call-out gets card-level prominence, a success/affirmative treatment (not warning yellow, not muted gray), and its own action. It must read as the product working for you, never as an ad, an upsell banner, or a disclaimer.
  • Never style price tiers as prestige. Budget / Mid / Premium / Ultra are fit descriptors, not a medal podium. Do not gild "Ultra" or gray out "Budget" — the design must not imply the expensive option is the aspiration.
  • The recommendation explains itself. The results layout gives the rationale (which answers drove the match) equal visual weight with the recommended system's photo and name. A recommendation without visible reasons is a filter result — the thing this product exists to replace.
  • Coverage warnings are honest, not alarming. When data is incomplete or a requirement is only partially met, show a calm warning treatment that invites verification — not red error styling that pushes the user to a "safer" (over-spec'd) choice.

3. Guide, don't just filter ​

Vision principle: prefer a linear decision-driven path converging on a recommendation over an open filter that leaves a pile of options.

UI heuristics:

  • Linear stepped progression with always-visible progress. "Step N of M" plus a progress indicator on every step. The user must always know where they are, how much remains, and that the path ends in a recommendation.
  • One forward action per screen. A single primary button advances (the final step's action is See results, never Next). Previous is secondary and absent on the first step. No skip-ahead grid of all steps on public surfaces.
  • No result counts during the flow. Never show "17 systems remaining" as the user answers — that reframes the guide as a filter and invites gaming answers. Convergence is revealed at the results view.
  • Momentum over density. Steps should feel light: generous whitespace, a fast selected-state, an obvious next action. The stepper competes with a filter UI on perceived speed — a heavy, form-like screen loses.

4. Standalone, but connected ​

Vision principle: own the selection experience; borrow Drupal's strengths (imagery, PDPs, configurator) over JSON.

UI heuristics:

  • Visual continuity with nanawall.com through tokens, not mimicry. Use the brand tokens (see brand-tokens.md) — Source Sans/Serif Pro, the teal brand color, the neutral scale — so the app is recognizably NanaWall. Do not clone nanawall.com's page chrome or navigation.
  • Drupal-sourced product photography is first-class content (see art-direction.md). Layouts must accommodate real architectural photography gracefully — and degrade gracefully (no broken frames, no gray placeholder boxes) when an image is absent.
  • Hand-offs look like continuations, not exits. Deep links into the nanawall.com configurator and product resources are styled as the natural next step of the journey ("See cost in the configurator"), visually consistent with in-app actions.

5. Meet the expert where they are ​

Vision principle: a fast path for professionals who know the range, without forcing the full guided flow — while still nudging past mis-specification.

UI heuristics:

  • Persona entry is self-selection by card, not a quiz. The home page offers track cards (architect/pro, builder, homeowner) alongside the default guided CTA. Cards state who they're for in one line; choosing is one click.
  • The compare view is the expert's room. /compare is denser by design: a real data table, more per-screen information, pro vocabulary. It may relax principle 3's austerity — experts came for the matrix.
  • Nudges follow the expert. Even on fast paths, right-sizing call-outs (principle 2) still appear. The design must let a nudge sit inside a dense comparison surface without being lost.

Priority order in practice ​

When heuristics collide, resolve upward: education beats compactness (principle 1 > 3's momentum), the right-size call-out beats visual calm (2 > everything below it), and guidance beats expert density on public guided surfaces (3 > 5). The admin surfaces are exempt from principles 1–3 — they are a working back-office (see the screen inventory admin section) where density and efficiency win.