DOSSIER-STANDALONE/docs/research/ux-patterns.md

# UX/UI-Patterns moderner Browser-CAD/BIM-Tools — Research & Leitplanken

> Recherche für unser Browser-BIM (React + TS + Three.js, DOSSIER-Port, Wohnbau,
> CH/SIA-Kontext). Ziel: konkrete, **übernehmbare** Interaktions- und UI-Muster.
> Stand: 2026-06-29.
>
> Untersucht: **Arcol**, **Snaptrude**, **TestFit**, **Onshape** (Browser-CAD),
> **Vectorworks** (Resource/Navigation-Modell), **Figma** (Canvas-Interaktion,
> Inspector). Querschnitt: Snapping/Inferencing, Grip-Editing, perceived
> performance, Command-Palette, Onboarding.
>
> Jeder externe Claim ist mit Quelle verlinkt. Am Ende:
> **„Leitplanken für unsere UI"** — priorisierte Empfehlungen.

---

## 0. Kurzfazit (TL;DR)

Die ganze Klasse moderner Browser-CAD/BIM-Tools konvergiert auf ein **gemeinsames
Set von Mustern**, das wir fast 1:1 übernehmen sollten:

1. **Ein Modell, viele synchrone Sichten** (2D-Plan ⇄ 3D ⇄ Daten/Sheets), Änderung
   in einer Sicht propagiert sofort in alle anderen. (Arcol, Snaptrude)
2. **Kontextuelle UI** statt voller Werkzeugleisten: Buttons/Felder erscheinen nur,
   wenn die aktuelle Auswahl sie erlaubt. (Arcol, Onshape, Figma)
3. **Drei-Zonen-Layout**: links Navigator/Layer-Baum, Mitte Canvas + schwebende
   Tool-Palette, rechts Inspector. (Figma, Vectorworks, Onshape)
4. **Aggressives Snapping/Inferencing** mit Live-Glyphen + Modifier zum
   Unterdrücken. (Onshape) — für Maus-im-Browser unverzichtbar.
5. **Direkte Manipulation per Grips** statt Dialogen. (Figma, DOSSIER-Backlog)
6. **Perceived performance** über Skeletons, optimistic UI und gescopte
   Ladezustände — im Browser-3D-Kontext ein Differenzierungs-Hebel.
7. **Command-Palette (Ctrl/Cmd-K)** als Discovery- und Speed-Layer.
8. **Onboarding via „learn by doing"** an einem mitgelieferten Sample-Projekt +
   progressive disclosure.

Unsere bestehende Architektur (semantisches Modell als Single Source of Truth,
abgeleitete Sichten, Vectorworks-Terminologie) ist exakt der richtige Unterbau für
diese Muster — die meiste Arbeit liegt in der **UI-Schicht**, nicht im Datenmodell.

---

## 1. Gesamtlayout & Navigator-/Layer-Panels

### 1.1 Was die Tools machen

**Figma** strukturiert die Fläche in vier Zonen: eine Toolbar, **zwei Panels** und
einen scrollbaren Canvas. Links das **Navigation-Panel** mit Layern und Pages,
rechts das **Properties-Panel**; der Layer-Baum „enthält und organisiert alle
Elemente auf dem Canvas … und zeigt, wie Elemente verbunden sind"
([Figma: left sidebar](https://help.figma.com/hc/en-us/articles/360039831974-View-layers-and-pages-in-the-left-sidebar),
[Figma: Interface](https://www.inthepocket.design/course/figma-for-everyone/the-interface)).

**Vectorworks** trennt sauber zwei Konzepte, die für uns 1:1 relevant sind:
- Die **Navigation Palette** gibt Zugriff auf *Classes, Design Layers, Sheet
  Layers, Viewports, Saved Views, References* — jeweils als eigener Tab mit Liste.
  Sichtbarkeit wird per Klick in einer **Visibility-Spalte** gesetzt; Doppelklick
  **aktiviert** einen Layer/eine Class. Die Zeichenfläche bleibt nutzbar, während
  die Palette offen ist
  ([VW Navigation Palette](https://app-help.vectorworks.net/2022/eng/VW2022_Guide/Structure/The_Navigation_palette.htm)).
- Paletten sind **andockbar/ein-/ausblendbar pro Workspace**
  ([VW Palettes & Tool Sets](https://app-help.vectorworks.net/2018/eng/VW2018_Guide/Start/Palettes_and_Tool_Sets.htm)).

**Arcol** baut beim Modellieren einen **Model Tree** im Menü auf — pro
BIM-Komponente wächst der Baum mit
([AEC Magazine: Arcol BIM in browser](https://aecmag.com/bim/arcol-bim-cloud-browser/)).

**Onshape** zeigt links den **Feature-/Assembly-Baum** (parametrische Historie:
Sketches, Features, Mates) — die Bauhistorie ist die primäre Navigation
([Onshape UI Basics](https://cad.onshape.com/help/Content/ui-basics.htm)).

### 1.2 Übernahme für uns

Unser Dokumentmodell hat **zwei unabhängige Achsen** (siehe ROADMAP §2c):
**Zeichnungsebenen** (Geschosse + Schnitte/Ansichten) und **Ebenen**
(Grafik-Kategorien-Baum `00 Raster … 80 Plangrafik`). Das mappt fast wörtlich auf
das Vectorworks-Navigations-Modell:

- **Linke Sidebar, getabbt** wie die VW-Navigation-Palette:
  - Tab **„Geschosse / Ansichten"** (= unsere Zeichnungsebenen): EG/1OG/…,
    Schnitte, Ansichten. Mit **Visibility-Toggle**, **Lock**, und **Doppelklick =
    aktiv setzen** (welches Geschoss editiert wird).
  - Tab **„Ebenen"** (= Grafik-Kategorien-Baum, in *jedem* Geschoss gleich): Baum
    mit Code, Name, Farb-Swatch, Linienstärke, Visibility, Hatch. Pro Ansicht
    schaltbar (das ist genau VWs „Sichtbarkeit pro Viewport/Saved View").
  - Tab **„BIM-Tree / Elemente"** (aus DOSSIER-Backlog §11: *Element-Übersicht
    Geschoss→Kind→Element, Suche, Shift-Klick = Zoom*). Das ist unser Pendant zu
    Arcols Model Tree + Onshapes Feature-Baum.
- **Visibility-Spalte als Erstklass-Interaktion** (VW-Muster): Auge-Icon je Zeile,
  Klick togglet sofort, kein Dialog. (Wir haben bereits `EyeIcon.tsx` — das ist die
  Keimzelle.)
- **Wichtig:** Geschoss wird **im 3D *oder* Plan** betrachtet, *keine* getrennten
  Daten — der View-Umschalter (siehe §2) gehört in die Geschoss-Auswahl, nicht in
  separate Dokumente.

> **Anti-Pattern vermeiden:** Vectorworks selbst leidet unter
> **Paletten-Wildwuchs** (viele frei schwebende Fenster). Für ein fokussiertes
> Wohnbau-Tool: **feste 3-Zonen-Shell** (links Navigator, rechts Inspector), nicht
> N frei schwebende Palettenfenster. Figmas Striktheit schlägt VWs Flexibilität für
> unsere Zielgruppe (Architekt:innen, die schnell ein EFH zeichnen wollen).

---

## 2. 3D ⇄ Plan-View-Umschaltung (das Herzstück)

### 2.1 Was die Tools machen

- **Snaptrude:** Nutzer arbeiten **in 2D *und* 3D gleichzeitig**; Änderung in einer
  Sicht spiegelt sich automatisch in der anderen. Objekte sind **nach Geschossen
  klassifiziert**, was es erlaubt, „3D-Geometrie zu zeichnen, während man in einer
  2D-Grundriss-Ansicht arbeitet". Push-an-einer-Fläche „fühlt sich an wie eine
  Linie ziehen", berechnet aber sofort Flächen/BIM-Daten neu
  ([ArchDaily: Snaptrude](https://www.archdaily.com/1009121/snaptrude-the-browser-based-bim-tool-thats-changing-the-way-architects-work),
  [Snaptrude](https://www.snaptrude.com/)).
- **Arcol:** „Every view is 3D in Arcol" — und **Boards** (Präsentations-Layouts)
  sind **live-synced**: ändert sich das Gebäude, aktualisieren sich die Layouts
  automatisch (kein statischer PDF-Export)
  ([AEC Magazine: Arcol BIM 2.0](https://aecmag.com/bim/arcol-unleashed-bim-2-0/)).
- **TestFit:** explizites **Expand/Collapse von Optionen** — man klappt Varianten
  auf zum Vergleichen und wieder zu, um sich aufs Detail-Editieren im Canvas zu
  konzentrieren („smoother flow between setting up a site, reviewing options, and
  refining a design")
  ([TestFit 5.19](https://www.testfit.io/blog/testfit-5-19-a-new-generative-design-workflow)).

### 2.2 Übernahme für uns

Das ist **genau unsere Kern-Architektur** (ROADMAP §2c: „Ansichtstyp = Kamera-
Projektion + optionaler Schnitt"). Konkrete UI-Muster:

- **View-Switcher als segmented control** direkt am Canvas (oben links oder
  oben mittig): `3D | Grundriss | Schnitt | Ansicht`. Plan-View = orthogonale
  Top-Kamera + Clipping-Ebene auf `okff + schnitthöhe` (steht bereits so im Modell).
- **Kein** Moduswechsel der *Daten*, nur der **Kamera + Schnitt** — visuell als
  weicher Übergang (Kamera-Animation) kommunizieren, damit Nutzer Orientierung
  behalten (Snaptrude/Arcol-Gefühl: „dieselbe Sache aus anderem Winkel").
- **Optional, stark differenzierend:** **Split-View** (3D links, Plan rechts) wie
  Snaptrudes „2D + 3D simultan". Da unsere Sichten ohnehin reaktiv aus *einem*
  Modell abgeleitet werden (Zustand-Store → SVG-Plan + Three-Scene), ist Split-View
  technisch billig und ein Wow-Moment im Onboarding.
- **Kamera-Presets** (aus DOSSIER-Backlog): Kardinal N/O/S/W, Iso-Oktanten,
  **Norden-Rotation** (CH/Swisstopo-Georeferenz) — als kleine Würfel-/Kompass-Gizmo
  oben rechts im 3D (ViewCube-Muster, bekannt aus Onshape/CAD allgemein
  ([Onshape UI Basics](https://cad.onshape.com/help/Content/ui-basics.htm))).
- **Drawing Layers (Schnitte/Ansichten) sind „Saved Views"**: Auswahl in der linken
  Sidebar = Kamera + Schnitt + Maßstab + Layer-Kombination springt an (VW „Saved
  Views" / DOSSIER „Ausschnitte"). Das ersetzt Ordner-Wildwuchs bei 50+ Ansichten.

---

## 3. Zeichnen & Editieren: Snapping, Inferencing, Grips, Tool-Paletten

### 3.1 Snapping / Inferencing — das wichtigste Detail im Browser

**Onshape** ist hier die Referenz (sehr konkret dokumentiert,
[Onshape Automatic Inferencing](https://cad.onshape.com/help/Content/Sketch/automatic_inferencing.htm)):

- **Inference-Typen:** horizontal, vertikal, **midpoint**, parallel, coincident,
  Ausrichtung zum Origin/zu anderen Entities, Tangente, Perpendikular.
- **Visuelles Feedback:**
  - **gelbe Highlights** auf Vertices/Mittelpunkten beim Hovern,
  - **orange gestrichelte Linie** zeigt eine vorgeschlagene H/V-Ausrichtung,
  - **orange Highlight** verwandter Geometrie beim Ziehen (relationales Feedback).
- **Steuerung:** Linksklick **akzeptiert** die vorgeschlagene Bedingung; **Shift
  gedrückt halten unterdrückt** Inferencing temporär (loslassen = wieder an).
- **„Wake-up"-Inferences:** kurzes Verweilen über einer Geometrie „weckt" deren
  Bezugslinien (z. B. erst Mittelpunkt antippen, dann woanders zeichnen → bekommt
  Ausrichtung zu diesem Mittelpunkt).
- **Post-hoc:** vorhandene Geometrie ziehen triggert erneut Inferencing (Center
  eines Kreises vertikal zum Origin ziehen → fügt automatisch vertikale Constraint).

**Constraint-Sichtbarkeit:** Constraint-Icons sind farbcodiert (blau =
externe/Referenz, weiß = intern) und ein-/ausblendbar
([Onshape Working with Constraints](https://cad.onshape.com/help/Content/Sketch/working_with_constraints.htm)).

### 3.2 Übernahme für uns (Snapping)

Für ein Maus-bedientes Browser-Tool ist **gutes Snapping der Unterschied zwischen
„Spielzeug" und „Werkzeug".** Konkret:

- **Snap-Targets** (Wohnbau-relevant): Wand-Endpunkte/Achsen, Wand-Mittelpunkte,
  Rechtwinklig/Parallel zu bestehender Wand, **Raster** (Achsraster `00 Raster`),
  Öffnungs-Achsen, vorhandene 2D-Linien-Endpunkte, Schnittpunkte.
- **Feedback exakt wie Onshape übernehmen:** Snap-Glyph am Cursor (●
  Endpunkt, △ Mitte, ⟂ rechtwinklig), **gestrichelte Hilfslinie** für
  Achsen-Alignment, Hover-Highlight des Snap-Ziels.
- **Modifier:** **Shift unterdrückt Snapping** (Onshape-Konvention) — Nutzer
  erwarten das bereits aus anderen Tools. Zusätzlich **Ortho-Modus** (z. B. Shift
  für 0/45/90° beim Linienziehen — Figma-Konvention) sauber davon trennen oder per
  Toggle.
- **Live-Maßeingabe beim Zeichnen** (CAD-Standard, auch Onshape): während des
  Ziehens Länge/Winkel tippbar (Tab zwischen Feldern). Das ersetzt nachträgliches
  Dimensionieren und ist für Architekt:innen Pflicht.
- Wir brauchen **kein** volles Constraint-Solver-System wie Onshape (mechanisches
  parametrisches CAD). BIM-Wände sind achs-basiert; **Inferencing beim Setzen**
  genügt, persistente geometrische Constraints sind Overkill für Wohnbau.

### 3.3 Grip-Editing / direkte Manipulation

- **Figma:** Auswahl zeigt Bounding-Box mit **Resize-Handles**; ziehen
  manipuliert direkt; Smart-Guides/Maße erscheinen relativ zu Nachbarn beim Bewegen
  ([Figma right sidebar](https://help.figma.com/hc/en-us/articles/360039832014-Design-prototype-and-explore-layer-properties-in-the-right-sidebar)).
- **Snaptrude:** Push/Pull an Flächen als primäre 3D-Edit-Geste
  ([ArchDaily](https://www.archdaily.com/1009121/snaptrude-the-browser-based-bim-tool-thats-changing-the-way-architects-work)).
- **DOSSIER-Backlog (§11)** listet **Grip-Editing** (Wand-Endpunkte,
  Schnitt-Symbole im Plan) explizit als Aufwand L, Phase 3–4 — und das **9-Punkt-
  Objekt-Info** (lesen + verschieben/skalieren/rotieren direkt).

**Übernahme:** Grips sind der wichtigste „pro feel"-Hebel.
- **Wand-Endpunkt-Grips** im Plan *und* 3D, mit Snapping (s. o.) und Live-Maß.
- **Öffnungs-Grips** (Position entlang Wand, Breite) — Host-Beziehung bleibt erhalten.
- **Schnittlinien-Grips im Plan** (Schnittlinie ziehen → Schnitt-Ansicht
  re-deriviert) — das ist Grip-Editing über die Sicht-Grenze hinweg, ein starkes
  Differenzierungsmerkmal.
- Selektion → **bounding handles** (Figma-Muster) für 2D-Plangrafik (Linien,
  Rechtecke, Text).

### 3.4 Tool-Palette & kontextuelle Werkzeuge

**Kontextuelle UI ist das durchgehende Muster:**
- **Arcol:** „buttons appear only when they can be used" — Loft/Sweep erscheinen bei
  Auswahl zweier Sketches, Boolean bei zwei Extrusions
  ([AEC: Arcol sneak peek](https://aecmag.com/bim/arcol-a-sneak-peek/)).
- **Onshape:** Sketch-Toolbar erscheint beim Betreten des Sketch-Modus; Tools in
  Gruppen (vertikale Trennlinien), Dropdown-Pfeile für Varianten; Dialoge mit
  **blau hinterlegtem Feld**, das eine Auswahl im Graphics-Bereich verlangt
  ([Onshape sketch toolbar](https://cad.onshape.com/help/Content/Sketch/sketch_basics.htm),
  [Onshape Constraints](https://cad.onshape.com/help/Content/Sketch/working_with_constraints.htm)).
- **Figma:** schmale Bottom-/Top-Toolbar mit den Kern-Tools; alles Weitere
  kontextuell rechts.

**Übernahme:**
- **Schlanke Tool-Palette** (Figma-artig), gruppiert nach unserer Domäne:
  *Wand · Tür/Fenster · Decke · Treppe · Dach · Raum* (BIM) und *Linie · Polylinie
  · Rechteck · Kreis · Bogen · Text · Bemaßung* (2D auf `80 Plangrafik`).
- **Modus-bewusste Tools:** im Grundriss andere Defaults als im 3D; im
  Schnitt/Ansicht nur Annotation/2D-Tools.
- **Contextual action bar bei Auswahl** (Arcol-Muster): selektiere eine Wand →
  schwebende Mini-Toolbar „Tür einsetzen / Fenster / Wandtyp / verschneiden".
  Selektiere zwei Wände → „verschneiden / verlängern".
- **Aktives Tool sticky + ESC bricht ab**, Leertaste = Pan, Scroll = Zoom
  (Figma/CAD-Konventionen — Nutzer bringen Muskelgedächtnis mit).
- **LoD-bewusste Tool-/Stil-UI** (DOSSIER-Backlog: *zeigt nur passende Controls je
  Geometrie-Typ*) — keine Füll-Optionen bei 3D-Auswahl. Deckt sich mit Figmas
  „controls appear based on layer type".

---

## 4. Property-/Inspector-Panel

### 4.1 Was die Tools machen

**Figma — rechte Sidebar** (für uns das Vorbild,
[Figma right sidebar](https://help.figma.com/hc/en-us/articles/360039832014-Design-prototype-and-explore-layer-properties-in-the-right-sidebar)):
- Tabs **Design / Prototype** (bei Edit), **Inspect / Properties** (bei View-only).
- Kategorien: **Alignment/Rotation/Position → Dimensions → Constraints/Layout →
  Appearance (Fill, Stroke, Effects) → Export**.
- **Controls erscheinen je Layer-Typ** (kontextuell).
- **Dev-Mode/Inspect** liefert konkrete Werte + Abstände zwischen Objekten + Code.

**Arcol — rechtes Panel** zeigt **Gebäude-Metriken** kontextuell: Geschossfläche,
Anzahl Geschosse, GFZ/FAR, Unit-Count, Standortfläche, Kostenschätzung
([Arcol BIM 2.0](https://aecmag.com/bim/arcol-unleashed-bim-2-0/)).

**TestFit — ein zentrales Parameter-Panel:** „alle Schlüsselparameter an einem
Ort" (Unit-Counts, Parkplatz-Ziele, Gebäudegrößen-Limits) → sofortige Wirkung auf
generierte Optionen
([TestFit 5.19](https://www.testfit.io/blog/testfit-5-19-a-new-generative-design-workflow)).

**Onshape — Feature-Dialoge:** Erstellen/Editieren über Dialoge mit Pflicht-
Selektionsfeldern (blau)
([Onshape UI Basics](https://cad.onshape.com/help/Content/ui-basics.htm)).

### 4.2 Übernahme für uns

- **Rechter Inspector, kontextuell nach Element-Typ** (Figma-Muster):
  - **Wand** → Wandtyp (→ WallType-Bibliothek), Referenzlage mid/left/right
    (DOSSIER-Backlog), Höhe, Achs-Endpunkte (9-Punkt/Maße), Stil-Overrides.
  - **Tür/Fenster** → Breite/Höhe, Brüstung, Schwenkbogen/Anschlag, Detailgrad,
    Symbol.
  - **Decke/Slab** → SlabType, UK/OK-Override, Aussparungen.
  - **Raum** → SIA-416-Kategorie (HNF/NNF/VF/FF/GF/AGF), Fläche (read-only,
    berechnet), Stempel-Felder.
  - **2D-Element** → Linienstil (→ Line Manager), Hatch (→ Hatch Manager), Farbe.
- **Sektionen kollabierbar** (Figma) — Wohnbau-Inspector kann lang werden;
  Default-Sektionen offen, Fortgeschrittenes (Overrides) zugeklappt
  (= progressive disclosure, s. §7).
- **Mixed-value-Handling bei Mehrfachauswahl** (Figma): bei Mehrfachauswahl
  abweichende Werte als „Mixed/—" zeigen, gemeinsames Editieren erlauben. Wichtig
  z. B. „alle EG-Wände auf Wandtyp X".
- **Live-Metriken-Block** (Arcol-Muster) — selbst im Wohnbau wertvoll:
  Bruttogeschossfläche, **SIA-416-Bilanz**, Raumzahl, Volumen. Im Inspector wenn
  nichts selektiert ist = „Projekt-Übersicht" (vgl. Figmas Canvas-Level-Optionen
  bei leerer Auswahl).
- **Read-only-Felder klar markieren** (berechnete Flächen/Volumen) vs. editierbar.

---

## 5. Resource-Manager (Bibliotheken)

### 5.1 Was Vectorworks macht — unser direktes Vorbild

Der **Resource Manager** ist „ein zentraler Ort für Assets" (Symbole, Linientypen,
Texturen, Materialien …)
([VW Resource Manager](https://app-help.vectorworks.net/2026/eng/VW2026_Guide/ResourceManager/Resource%20Manager.htm)):
- **Zwei-/Drei-Pane-Modell:** **File-Browser** (offene Dateien, Favoriten,
  VW-Libraries, User-/Workgroup-Libraries) → **Resource-Viewer** (Ressourcen der
  gewählten Datei) → optional **Preview/Metadaten**
  ([VW File browser pane](https://app-help.vectorworks.net/2023/eng/VW2023_Guide/ResourceManager/Resource_Manager_File_browser_pane.htm),
  [VW Resource viewer pane](https://app-help.vectorworks.net/2026/eng/VW2026_Guide/ResourceManager/Resource_Manager_Resource_viewer_pane.htm)).
- **Organisation mehrdimensional:** nach Quelle, **nach Typ** (Dropdown-Filter),
  nach Ordnerstruktur.
- **Ansichten:** Thumbnails / List / Thumbnails-List; **Suchfeld** mit Filtern.
- **Resource Selector**: dieselbe Bibliothek erscheint **in Dialogen** und zeigt
  dort nur **kontextuell passende** Ressourcen.

### 5.2 Übernahme für uns

Unsere ROADMAP §2d definiert bereits **Line Manager / Hatch Manager / Component
Manager**, mit Verweis-per-id-Architektur (Components → Hatches → LineStyles). Das
Vectorworks-Modell passt perfekt:

- **Ein gemeinsames Resource-Browser-Pattern** für alle Bibliotheken (Linienstile,
  Schraffuren, Components/Baustoffe, später Wand-/Öffnungs-Stil-Kataloge,
  Material-PBR, Raumstempel-Layouts). Eine wiederverwendbare React-Komponente,
  parametrisiert nach Ressourcentyp.
- **Zwei Erscheinungsformen** (wie VW):
  1. **Manager-Ansicht** (großes Panel/Modal) zum Anlegen/Editieren/Duplizieren.
  2. **Inline-Resource-Selector** im Inspector — beim Setzen eines Wandtyps/Hatch
     öffnet sich ein kompakter Picker mit Thumbnails, gefiltert auf den passenden
     Typ. (Figma macht das analog mit „Styles/Variables".)
- **Thumbnails sind im CAD-Kontext kritisch**: Hatch-Vorschau, Component-
  Schichtaufbau, Linienstil-Strich als gerenderte Mini-Previews.
- **Zentrale Änderung propagiert** (unsere id-Referenz-Architektur): Component-Farbe
  ändern → alle Wände mit diesem Component aktualisieren live. Das ist Arcols
  „single source of truth" auf Ressourcen-Ebene.
- **Cross-Projekt-Presets/Favoriten** (DOSSIER-Backlog, LocalStorage; VW-Favoriten):
  „einmal speichern, überall nutzen".

---

## 6. Perceived Performance (gefühlte Geschwindigkeit)

Browser-3D + WASM-Geometrie (web-ifc, OpenCascade) + HLR-Projektion = **echte
Latenz** an mehreren Stellen. Gefühlte Performance ist hier ein
Differenzierungs-Hebel gegenüber schwerfälligem Revit/ArchiCAD.

### 6.1 Belegte Muster

- **Skeleton-Screens** lassen Apps **20–30 % schneller** wirken als Spinner bei
  identischer realer Ladezeit
  ([LogRocket: skeleton screens](https://blog.logrocket.com/ux-design/skeleton-loading-screen-design/),
  [UI Deploy](https://ui-deploy.com/blog/skeleton-screens-vs-spinners-optimizing-perceived-performance)).
- **Indikator zur Situation passen:** Spinner für kurze Waits, Skeleton für
  Content, Progress-Bar für messbare Operationen, **optimistic UI** für
  „instant-feeling" Aktionen
  ([Onething: skeleton vs spinner](https://www.onething.design/post/skeleton-screens-vs-loading-spinners)).
- **Optimistic UI**: UI sofort aktualisieren, Server-Bestätigung abwarten, nur bei
  Fehler zurückrollen — ideal für häufige, risikoarme Aktionen
  ([Smart Interface Design Patterns](https://smart-interface-design-patterns.com/articles/designing-better-loading-progress-ux/)).
- **Verzögerung vor Indikator (100–200 ms):** schließt die Operation vorher ab,
  gar kein Indikator → kein Flackern
  ([Onething](https://www.onething.design/post/skeleton-screens-vs-loading-spinners)).
- **Gescopte Ladezustände** (React Suspense / Next loading.tsx): nur der betroffene
  Bereich lädt, der Rest bleibt interaktiv; `aria-busy`, Live-Regions,
  reduced-motion respektieren
  ([LogRocket](https://blog.logrocket.com/ux-design/skeleton-loading-screen-design/)).

### 6.2 Übernahme für uns (konkret)

- **Optimistic Model-Edits:** Geometrie-Mutation (Wand ziehen, Tür setzen) **sofort**
  im Zustand-Store + 3D anzeigen; **schwere Booleans/HLR im Web Worker** (Comlink,
  bereits geplant) nachziehen. Wand erscheint sofort, die *exakte* verschnittene
  Öffnung/Schnittlinie „schärft nach". UI bleibt flüssig.
- **Progressive Plan-Generierung:** SVG-Grundriss zuerst grob (Achsen/Linien),
  Schraffuren/Symbole nachladen — Skeleton/„low-detail first" statt Spinner.
- **HLR-Schnitte (Risiko #4):** Worker + Caching (ROADMAP §6). UI: **Skeleton der
  Schnitt-Ansicht** + „berechne verdeckte Kanten…" mit Progress, restliche App
  bleibt nutzbar (gescopter Ladezustand).
- **Delay-then-show** für alle Worker-Tasks (150 ms-Schwelle), sonst Flicker beim
  schnellen Editieren.
- **Three.js-Disziplin:** stabile 60 fps beim Orbit/Pan ist selbst „perceived
  performance" — instanziertes Rendering, Frustum-Culling, LoD für ferne Geometrie
  (deckt sich mit ROADMAP-Phase-7-Performance-Härtung). Lieber 60 fps bei grober
  Geometrie als ruckelnde Präzision.
- **Auto-Save-Status klar, unaufdringlich** kommunizieren („Gespeichert"/„Speichern…"),
  optimistic — nie blockierend (Figma-Muster).

---

## 7. Onboarding & Discoverability

### 7.1 Belegte Muster

- **Progressive Disclosure:** zuerst nur Essenzielles zeigen, Komplexität schrittweise
  enthüllen — reduziert kognitive Last; drei Typen: step-by-step, conditional,
  contextual
  ([IxDF: Progressive Disclosure](https://ixdf.org/literature/topics/progressive-disclosure),
  [UXPin](https://www.uxpin.com/studio/blog/what-is-progressive-disclosure/)).
- **„Learn by doing" an Sample-Dokument:** Grammarly startet Nutzer mit einem
  Beispiel-Dokument mit Fehlern; Hotspots/Tooltips führen durch Features
  ([Userpilot: onboarding examples](https://userpilot.com/blog/user-onboarding-examples/)).
- **Stufenweises Aufdecken fortgeschrittener Features** (Asana: erst Projekt
  anlegen, später Dependencies/Kanban/Gantt)
  ([Userpilot: progressive disclosure](https://userpilot.com/blog/progressive-disclosure-examples/)).
- **Command-Palette als Discovery-Layer:** durchsuchbare Befehlsliste hilft, Features
  zu entdecken — „incredible effect on exploration and feature discoverability",
  besonders für neue/seltene Nutzer
  ([Mobbin: command palette](https://mobbin.com/glossary/command-palette),
  [Untitled UI: command menus](https://www.untitledui.com/components/command-menus)).
- **Arcol** wirbt explizit mit „low barrier to entry, gentle learning curve … clean,
  intuitive, requires minimal training"
  ([AEC: Arcol BIM 2.0](https://aecmag.com/bim/arcol-unleashed-bim-2-0/)).

### 7.2 Übernahme für uns

- **Mitgeliefertes Sample-Projekt** (wir haben bereits `sampleProject.ts`!) als
  Onboarding-Bühne: ein kleines EFH, fertig modelliert. Nutzer **manipuliert echtes
  Modell** statt leerem Canvas (Grammarly-Muster). Erste Geste: „zieh diese Wand"
  → sieht 3D + Plan live mitlaufen (unser Kern-Wow).
- **Progressive Disclosure im Inspector & Tool-Palette:** Default zeigt
  Wohnbau-Essenz (Wand/Tür/Fenster/Decke/Raum). Fortgeschrittenes (Prioritäts-
  Verschneidung, Overrides, Detailgrade, Section-Styles) **zugeklappt / hinter
  „Erweitert"**. Das passt zu unserem radikalen Wohnbau-Fokus.
- **Contextual coachmarks** statt langem Tutorial: beim ersten Selektieren einer
  Wand ein kleiner Tooltip „Endpunkt ziehen zum Verlängern, Doppelklick für Wandtyp".
- **Command-Palette (Ctrl/Cmd-K)** — siehe §8 — doppelt als Onboarding: alle
  Werkzeuge/Befehle durchsuchbar = lebende Feature-Liste.
- **Tastatur-Kürzel sichtbar machen** (in Tooltips, in der Palette) — schult
  beiläufig pro Workflows.

---

## 8. Command-Palette & Tastatur

### 8.1 Belegte Muster

- **Ctrl/Cmd-K** ist die De-facto-Konvention (Linear, Figma [Cmd-P], Notion,
  Vercel, Raycast, Slack, Superhuman); VS Code nutzt Cmd-Shift-P
  ([Mobbin](https://mobbin.com/glossary/command-palette),
  [Superhuman: command palette](https://blog.superhuman.com/how-to-build-a-remarkable-command-palette/)).
- Zwei Haupt-Use-Cases: **Navigation/Suche** und **Shortcuts/Quick Actions**
  ([Outdraw Academy: command palette](https://outdraw-academy.gitbook.io/ux-patterns/command-palette)).
- Trigger kann **sichtbar** (Button/Suchleiste) oder nur per Shortcut sein —
  für Discovery besser **auch sichtbar**
  ([Mobbin](https://mobbin.com/glossary/command-palette)).

### 8.2 Übernahme für uns

- **Cmd/Ctrl-K-Palette** für: Werkzeug aktivieren („Wand", „Tür"), Ansicht
  springen („Grundriss EG", „Schnitt A-A"), Ressource öffnen („Hatch Manager"),
  globale Aktionen („Norden rotieren", „PDF exportieren", „SIA-Bilanz").
- **Sichtbarer Trigger** (Such-/Befehlsfeld in der Top-Bar) für Entdeckung +
  Shortcut für Speed.
- **Konsistente, dokumentierte Shortcuts** (Figma-Disziplin): W=Wand, T=Tür,
  L=Linie, Space=Pan, Scroll=Zoom, Shift=Snap aus, Esc=Abbrechen, G=Grundriss-Toggle.
  In Tooltips + Palette anzeigen.

---

## 9. Leitplanken für unsere UI (priorisierte Empfehlungen)

> Sortiert nach **Hebel × Aufwand**. „P#" = grobe Phasen-Zuordnung zur ROADMAP.

### A. Sofort / Fundament (Phase 0–1) — billig, prägt alles

1. **Feste 3-Zonen-Shell.** Links **Navigator** (Tabs: *Geschosse/Ansichten · Ebenen
   · BIM-Tree*, je mit Visibility-Toggle wie VW Navigation Palette). Mitte **Canvas**
   mit schwebender Tool-Palette + View-Switcher. Rechts **Inspector** (kontextuell).
   *Keine* frei schwebenden Palettenfenster (Anti-VW-Wildwuchs).
2. **View-Switcher als segmented control** `3D | Grundriss | Schnitt | Ansicht`
   direkt am Canvas; weiche Kamera-Übergänge; *eine* Datenquelle (kein Daten-
   Moduswechsel). Nutzt unsere bestehende „abgeleitete Sichten"-Architektur.
3. **Visibility/Lock pro Zeile** als Erstklass-Interaktion (1 Klick, kein Dialog) —
   `EyeIcon.tsx` ausbauen.
4. **Kontextueller Inspector**: Controls nur für den selektierten Element-Typ
   (Figma/Arcol); berechnete Felder read-only markiert; Sektionen kollabierbar.
5. **Tastatur-Grundlagen + Konventionen festnageln**: Space=Pan, Scroll=Zoom,
   Esc=Abbrechen, Shift=Snap aus. Früh festlegen → Muskelgedächtnis.

### B. Kern-„Pro-Feel" (Phase 1–2) — der eigentliche Wert

6. **Snapping/Inferencing nach Onshape-Vorbild**: Snap-Glyphen am Cursor,
   gestrichelte Achsen-Hilfslinien, Hover-Highlight, **Shift = unterdrücken**,
   Wake-up-Inferences. Targets: Wand-Enden/Achsen/Mitten, Raster, Rechtwinklig/
   Parallel, Öffnungs-Achsen. **Höchste Priorität für „Werkzeug-Gefühl".**
7. **Live-Maßeingabe beim Zeichnen** (Länge/Winkel tippbar, Tab zwischen Feldern).
8. **Kontextuelle Action-Bar bei Auswahl** (Arcol): Wand selektiert → „Tür/Fenster
   einsetzen / Wandtyp / verschneiden". Buttons erscheinen nur, wenn anwendbar.
9. **Schlanke domänen-gruppierte Tool-Palette** (BIM-Bauteile + 2D-Zeichnen),
   modus-bewusst je Ansicht.
10. **Optimistic Edits + Worker-Nachzug**: Mutation sofort sichtbar, schwere
    Booleans/HLR im Worker (Comlink); Delay-then-show (150 ms) statt Spinner-Flicker.

### C. Differenzierung (Phase 3) — hier gewinnen wir

11. **Grip-Editing** (Wand-Endpunkte, Öffnungs-Position/-Breite, **Schnittlinie im
    Plan**) mit Snapping + Live-Maß, in 2D *und* 3D. (DOSSIER-Backlog, Aufwand L —
    aber Kern-Differenzierer.)
12. **Saved Views / Ausschnitte** in der linken Sidebar = Kamera + Schnitt + Maßstab
    + Layer-Kombination per Klick (VW „Saved Views" / DOSSIER). Skaliert auf 50+
    Ansichten.
13. **Wiederverwendbares Resource-Browser-Pattern** für Line/Hatch/Component-Manager:
    Zwei-Pane (File-Browser → Viewer mit Thumbnails) als Manager *und* als inline
    Picker im Inspector (VW-Modell). Zentrale Änderung propagiert (id-Referenzen).
14. **Perceived-performance-Politik festschreiben**: Skeletons für Plan-/Schnitt-
    Generierung, gescopte Ladezustände (restliche App bleibt nutzbar),
    reduced-motion/`aria-busy` respektieren.
15. **Split-View 3D|Plan** (Snaptrude-Muster) — billig dank reaktiver Sichten,
    starker Wow-Effekt; auch fürs Onboarding.

### D. Adoption & Politur (Phase 1 fortlaufend → 7)

16. **Onboarding via Sample-Projekt** (`sampleProject.ts` als fertiges EFH);
    „learn by doing", erste Geste zeigt 3D⇄Plan-Live-Sync. Progressive Disclosure:
    Wohnbau-Essenz default, Fortgeschrittenes (Prioritäts-Verschneidung, Overrides,
    Detailgrade) zugeklappt.
17. **Command-Palette (Cmd/Ctrl-K)** + sichtbarer Trigger: Werkzeuge/Ansichten/
    Ressourcen/Aktionen durchsuchbar; doppelt als Discovery-Layer.
18. **Live-Metriken-Block** im Inspector (Arcol): BGF, **SIA-416-Bilanz**, Räume,
    Volumen — bei leerer Auswahl als Projekt-Übersicht.
19. **CH-Spezifika UI-seitig vorsehen**: **Norden-Rotation**-Gizmo (ViewCube/Kompass),
    SIA-Raumkategorien im Raum-Inspector, später Swisstopo-Import-Flow mit Auto-Zoom
    + Nullpunkt-Verschiebung.

### Übergreifende Designprinzipien (gelten immer)

- **Kontextualität vor Vollständigkeit** — zeige nur, was jetzt anwendbar ist
  (Arcol/Onshape/Figma). Direkt verzahnt mit unserem „LoD-bewusste Stil-UI"-Backlog.
- **Direkte Manipulation vor Dialogen** — Grips/Drag/Inline-Edit schlägt
  Properties-Dialog (Figma/Snaptrude/DOSSIER).
- **Eine Wahrheit, viele Sichten** — niemals Sicht-spezifische Daten; alles aus dem
  semantischen Modell ableiten (deckt sich exakt mit unserem Architektur-Prinzip).
- **Konventionen respektieren** — Pan/Zoom/Snap/Esc/Cmd-K wie die etablierten Tools;
  Nutzer bringen Muskelgedächtnis aus Figma/CAD mit.
- **Gefühlte > tatsächliche Geschwindigkeit** — optimistic + Skeletons + 60 fps;
  im schweren Browser-3D-Geometrie-Kontext ein echter Wettbewerbsvorteil.

---

## Quellen

**Arcol**
- [Arcol unleashed – BIM 2.0 (AEC Magazine)](https://aecmag.com/bim/arcol-unleashed-bim-2-0/)
- [Arcol – BIM in a browser (AEC Magazine)](https://aecmag.com/bim/arcol-bim-cloud-browser/)
- [Arcol: a sneak peek (AEC Magazine)](https://aecmag.com/bim/arcol-a-sneak-peek/)
- [The Arcol Manifesto](https://arcol.io/blog/the-arcol-manifesto)

**Snaptrude**
- [Snaptrude – browser-based BIM tool (ArchDaily)](https://www.archdaily.com/1009121/snaptrude-the-browser-based-bim-tool-thats-changing-the-way-architects-work)
- [Snaptrude (offiziell)](https://www.snaptrude.com/)

**TestFit**
- [TestFit 5.19: A New Generative Design Workflow](https://www.testfit.io/blog/testfit-5-19-a-new-generative-design-workflow)
- [TestFit (offiziell)](https://www.testfit.io/)

**Onshape**
- [Onshape: User Interface Basics](https://cad.onshape.com/help/Content/ui-basics.htm)
- [Onshape: Automatic Inferencing](https://cad.onshape.com/help/Content/Sketch/automatic_inferencing.htm)
- [Onshape: Working with Constraints](https://cad.onshape.com/help/Content/Sketch/working_with_constraints.htm)
- [Onshape: Sketch Basics](https://cad.onshape.com/help/Content/Sketch/sketch_basics.htm)

**Vectorworks**
- [VW Resource Manager](https://app-help.vectorworks.net/2026/eng/VW2026_Guide/ResourceManager/Resource%20Manager.htm)
- [VW Resource Manager: File browser pane](https://app-help.vectorworks.net/2023/eng/VW2023_Guide/ResourceManager/Resource_Manager_File_browser_pane.htm)
- [VW Resource Manager: Resource viewer pane](https://app-help.vectorworks.net/2026/eng/VW2026_Guide/ResourceManager/Resource_Manager_Resource_viewer_pane.htm)
- [VW Navigation Palette](https://app-help.vectorworks.net/2022/eng/VW2022_Guide/Structure/The_Navigation_palette.htm)
- [VW Palettes and Tool Sets](https://app-help.vectorworks.net/2018/eng/VW2018_Guide/Start/Palettes_and_Tool_Sets.htm)

**Figma**
- [Figma: right sidebar / layer properties](https://help.figma.com/hc/en-us/articles/360039832014-Design-prototype-and-explore-layer-properties-in-the-right-sidebar)
- [Figma: left sidebar (layers & pages)](https://help.figma.com/hc/en-us/articles/360039831974-View-layers-and-pages-in-the-left-sidebar)
- [Figma for Everyone: The Interface](https://www.inthepocket.design/course/figma-for-everyone/the-interface)

**Perceived Performance**
- [LogRocket: Skeleton loading screen design](https://blog.logrocket.com/ux-design/skeleton-loading-screen-design/)
- [UI Deploy: Skeleton Screens vs. Spinners](https://ui-deploy.com/blog/skeleton-screens-vs-spinners-optimizing-perceived-performance)
- [Onething: Skeleton Screens vs Loading Spinners](https://www.onething.design/post/skeleton-screens-vs-loading-spinners)
- [Smart Interface Design Patterns: Loading & Progress UX](https://smart-interface-design-patterns.com/articles/designing-better-loading-progress-ux/)

**Command Palette**
- [Mobbin: Command Palette](https://mobbin.com/glossary/command-palette)
- [Untitled UI: Command menus (Cmd-K)](https://www.untitledui.com/components/command-menus)
- [Superhuman: How to build a remarkable command palette](https://blog.superhuman.com/how-to-build-a-remarkable-command-palette/)
- [Outdraw Academy: Command Palette UX pattern](https://outdraw-academy.gitbook.io/ux-patterns/command-palette)

**Onboarding / Progressive Disclosure**
- [IxDF: Progressive Disclosure](https://ixdf.org/literature/topics/progressive-disclosure)
- [UXPin: What Is Progressive Disclosure](https://www.uxpin.com/studio/blog/what-is-progressive-disclosure/)
- [Userpilot: User onboarding examples](https://userpilot.com/blog/user-onboarding-examples/)
- [Userpilot: Progressive disclosure examples](https://userpilot.com/blog/progressive-disclosure-examples/)