# RAUSCH Navigation — datenbelegtes Konzept (Grundlage für die Mockups) **Datum:** 2026-07-14 **Grundlage:** Clarity-Report 06/2026 + Redesign-Brief + Live-UX-Review 07/2026 + Sitemap + **Evergreens eigener UX-Check & Nav-Vorschlag 2024** + Best-Practice-Recherche (UX-Buch-Korpus + Baymard/NN/g). **Cross-Checks eingearbeitet:** Codex + Fable (beide adversarial). Zahlen selbst nachgerechnet. **Kern-These (kalibriert):** Der Bedürfnis-Einstieg **existiert heute schon** — aber **nachrangig einsortiert und von außen unsichtbar**: als *zweite* Spalte hinter einem Abteilungslabel im Mega-Menü, mobil hinter einem zugeklappten Akkordeon, die Haaranalyse nur als Utility-Link in der Promo-Leiste bzw. im Drawer-Footer. Aufgabe ist also **Umpriorisierung + Sichtbarkeit**, nicht Einführung: Bedürfnis, Kategorie und Suche/Finder gleichrangig und früh führend machen, in einem schlanken Funktions-Gerüst. --- ## 0 · Die Kontinuitäts-Story (für Manuel) **Evergreen hat 2024 empfohlen**, die Navigation zu verschlanken und nach Bedürfnis/Anwendungsfall zu strukturieren — wörtlich: *„Beschränkt euch auf eure wichtigsten Kernprodukte in der Navigation. Weitere (z. B. Nahrungsergänzungsmittel) können auch in einem Footer-Menü unterkommen."* (UX-Check 2024, S. 1, Note 2). Der 2024er Nav-Vorschlag zeigte bereits 4 Top-Level (Haare/Körper/Über uns/Wissen) mit Haartyp-Spalte im Mega und Haaranalyse als Hero-CTA. → **Nicht umgesetzt.** → **Clarity 06/2026 stützt die Richtung jetzt mit echtem Nutzerverhalten.** Kontinuität, kein Kurswechsel. --- ## 1 · Was die Daten sagen (belegt, kalibriert, nachgerechnet) - **Ist-Zustand korrekt benannt:** Das Haarpflege-Mega hat **heute schon** eine „Nach Haarbedürfnis"-Spalte (13 Links, inkl. Haarausfall/Schuppen/Sensible Kopfhaut) — laut `nav-ist-zustand.md:34–47` sogar mehr Links als die Kategorie-Spalte (13 vs. 9). **Was fehlt, ist nicht der Einstieg, sondern seine Priorität/Sichtbarkeit:** zweite Spalte statt erste, hinter einem Abteilungslabel, mobil im zugeklappten Akkordeon, kein Einstieg *vor* dem Menü-Öffnen. - **Navigation/Seitenkopf trägt die Orientierung** — stärkster sicher zuordenbarer Klickbereich (Desktop Hauptnavigation, mobil gebündelter Seitenkopf/Menü als Shop-Einstieg). *(Clarity §21/§32/§38/§41)* — **Einschränkung:** Clarity trennt die Einzelanteile *innerhalb* des Menüs nicht (§21), d. h. wir wissen **nicht**, ob heute die Kategorie- oder die Bedürfnis-Spalte geklickt wird. „Anliegen führt" ist damit eine **Hypothese** (siehe §4/§5), kein Nav-Klick-Beleg. - **Anliegen-Nachfrage ist stark — aber als Such-/Mental-Modell, nicht als belegtes Nav-Verhalten:** `collections/haarausfall` (1.535 Sessions) ist die stärkste *Anliegen*-Collection und schlägt jede *einzelne* Shampoo-Locale (1.244 / 1.178); in **Summe** liegt „Shampoo" (2.422) aber vorn → **kein Entweder-oder**. Zudem: von den 1.535 Haarausfall-Sessions sind ~1.181 Einstiege (SEO/Direct), nur ~354 kamen *intern* an — belegt Suchnachfrage, nicht internen Nav-Weg. *(Clarity §9/§10)* - **„Alle Produkte" ist die intern meistgenutzte Collection** (2.604 Sessions − 2.213 Einstiege ≈ **391 interne Ankünfte**, mehr als jede Kategorie-Collection: Haarausfall ~354, de-de/Shampoo ~161). Trotzdem verzichtbar als *eigener* Top-Level-Slot — der Report empfiehlt Ersatz durch drei Einstiege (§24), bei ~81 Produkten ist Browse-all kein Drama. **Aber:** reale Nutzung transparent ausweisen, nicht „nicht datengedeckt" behaupten. *(Clarity §9/§10)* - **Themen-/Anliegen-Content zieht enorm, ist aber SEO-Einstieg, kein Nav-Klick:** `nissen-oder-schuppen` = Rang 5 (2.728 Sessions), davon 2.721 Einstiege ≈ 2.710 Exits. 49 Haarausfall-/Schuppen-Blogposts (nach Locale-Dedup). → Ratgeber-Nachfrage real, braucht aber **Produktbrücken** je Artikel. *(Clarity §9/§10; Sitemap)* - **Reichweiten-Cliff im Header + ersten Content-Screen:** mobil −52 pp (10–15 %), Desktop −32 pp (20–25 %), Collections-all −18 pp (**frühester** Cliff, 5–10 %). → Einstiege müssen so weit oben wie möglich; „weiter unten" sieht die Mehrheit nie. *(Clarity §22/§33/§39)* - **Kategorie-Seiten brechen die Erwartung stärker als die Startseite:** Quickback-Rate `collections/shampoo` 218/1.178 ≈ **18,5 %** vs. Startseite 619/5.755 ≈ 10,8 %. → stützt bessere Symptom-Labels & Info-Scent direkt. *(Clarity §8/§9)* - **66 % mobil**, 1,4 Seiten/Session. *(Clarity §5/§14)* - **Der Header ist auch technisch die kaputteste Komponente:** JS-Fehler #1 (`closest`, 5.275, 42 %) + #2 (`#annbar-localization-language-button`, 3.231, 26 %) = **68 % aller 12.665 Fehler**, beide im Header/Announcement-Bar-Code. → Zusatz-Argument: der Header-Neubau **repariert nebenbei die fehlerträchtigste Komponente**. *(Clarity §16)* - **Haaranalyse existiert, ist aber vergraben** — Desktop nur als Utility-Textlink in der Promo-/Announcement-Leiste oben rechts, mobil erst im Footer des geöffneten Drawers (`pages/index.html:1949/1955/3931`). Für 66 % Mobil praktisch unsichtbar. *(nav-ist-zustand; Live-Review)* - **Ehrlich für den Pitch:** die zwei traffic-stärksten Seiten (Longevity-Set) sind weit überwiegend ein **mobiler Ad-Funnel** (`…-3-monate` 0 Desktop-Einstiege, `…-grow` 121); zusammen ~16 % aller Sessions, die die Nav umgehen. Nav-Hebel liegt bei den ~84 % organisch/direkt/Suche. *(Clarity §9/§10)* ## 2 · Was Best Practices sagen (extern belegt) - **Das Top-Level-Problem ist Heterogenität + Redundanz, nicht nur die Item-Zahl:** heute mischen sich Produkttyp (Haarpflege/Styling), Abteilung (Nahrungsergänzung), Aktion (Set), Content (Blog) und Flat-Browse (Alle Produkte). „Set" doppelt Geschenkset/Reiseset, „Alle Produkte" ist redundant. → vereinheitlichen *und* entrümpeln. *(Hick's Law greift bei seriell gescannten Menülisten nur schwach — NN/g relativiert selbst; daher führt hier Heterogenität/Redundanz, nicht das Law.)* - **Bedürfnis-first ist in problem-/beratungsgetriebenen Verticals belegt gut** (Tidwell: WebMD „Health A–Z", Red Cross „by use case"; Colborne „hard edges": Nutzer-Sprache statt Org-Chart) — **aber Funktions-Skelett behalten** (Haare/Körper), um „category explosion" zu vermeiden (Baymard/WisePIM). Anliegen = Gruppierung *innerhalb*, nicht 12 Top-Level. - **Labels in Symptom-Sprache**, keine vagen Verben/Marketing-Begriffe (NN/g). „Schuppen & juckende Kopfhaut", nicht „Kategorie". - **Mega-Menü-Handwerk** (Baymard-Fehlerquoten): klickbare Gruppen-Header, „You-are-here", Subkategorie-Thumbnails, Hover-Delay 300–500 ms (Desktop). - **Mobile zuerst** (Auftrags-Priorität): Touch-Targets ≥ 44/48 px (Fitts's Law), flache Hierarchie, klick- statt hover-aktiviert, Untermenüs direkt zeigen statt „Kategorie"-Label (unser 2024-Check). - **Suche als „dritter Weg" ist Best-Practice-Import, kein Clarity-Befund** — `/search` taucht in keiner Top-Tabelle auf (< 944 Sessions, ≈ 1 %). Ehrlich so kennzeichnen. - **Governance:** Struktur per **Card-Sorting / Tree-Testing** validieren, *bevor* sie in die Stakeholder-Runde geht — externer Beleg schlägt Meinung. ## 3 · Ziel-Navigation (Prinzip) + Slot-Regel **Slot-Regel (explizit, weil es die erste Stakeholder-Frage ist):** Ein Top-Level-Slot bekommt, was entweder (a) **Kern-Sortiment-Einstieg** ist (Haare, Körper), (b) die **Kaufentscheidung trägt** — Anliegen-Wissen (Ratgeber) — oder (c) **Marken-/Vertrauensfunktion + Pflicht-Infos** bündelt (Über uns: Geschichte, Jobs, Nachhaltigkeit). *Nicht* per Traffic allein — sonst müssten Über uns *und* Nahrungsergänzung raus (beide ohne Top-15-Signal). **Styling** ist eine Produktgruppe → wandert in A sichtbar ins „Haare"-Mega; **in B bleibt Styling als vertrauter Top-Level-Einstieg erhalten.** **Nahrungsergänzung** ist Rand-Sortiment ohne Traffic → in A nicht Top-Level; **in B als Stakeholder-Rückfalloption bewusst behalten; in C als gleich sichtbarer Sortimentsraum innerhalb von „Produkte" statt als eigener Top-Level-Slot.** **Variante A: 8 → 4 + Finder + Utilities** ``` Haare │ Körper │ Ratgeber │ Über uns + [Haaranalyse]-Einstieg (Header, sichtbar) ``` „Alle Produkte" → ersetzt durch die drei Wege (real genutzte ~391 interne Ankünfte über „Alle Haarprodukte" im Mega auffangen). „Set" → in die Megas (Geschenke). „Blog" → **„Ratgeber"** (Label-Bruch zu 2024 „Wissen" bewusst — beide in den Tree-Test) **mit Produktbrücken** je Artikel. **„Haare"-Mega (Showcase) — Anliegen als führende, gleichrangige Spalte:** ``` NACH ANLIEGEN (führend) NACH PRODUKT [Haaranalyse-Teaser] Haarausfall Shampoo „Unsicher? Finde in Schuppen & juckende Kopfhaut Conditioner 30 Sek. die passende Trockenes/strapaziertes Haar Kur Pflege." Feines Haar Haaröl → Haaranalyse Coloriertes Haar Kopfhautpflege Fettiges Haar Styling → Alle Haarprodukte Sensible Kopfhaut Sonnen-/Hitzeschutz (Läuse · umweltbelastet · Accessoires graues/blondes Haar) ``` Gruppen-Header klickbar · „You-are-here" · Thumbnails · Hover-Delay (Desktop) · mobil: klick-aktiviert, flach, große Touch-Targets, Untermenüs direkt sichtbar. > **Zu testen (Tree-Test):** die komprimierten Anliegen-Gruppen (z. B. „Schuppen & juckende Kopfhaut" bündelt heutige Einzel-Collections) sowie „Ratgeber" vs. „Wissen". **Mobile-Realität (wichtig):** Ein reiner Header-/Nav-Tausch bringt Bedürfnis/Kategorie NICHT in den ersten Viewport (dort steht mobil nur der Hamburger) — er macht sie **einen Tap entfernt und im geöffneten Menü sofort führend**. Eine echte Quick-Entry-Row (Bedürfnis-Chips + Haaranalyse) *unter* dem Hero wäre die stärkere Lösung, liegt aber **außerhalb des Mockup-Scopes** (wir fassen den Hero nicht an) → als Release-Empfehlung vermerkt. ## 4 · Zwei Varianten — echte IA-Unterschiede | | IA-Logik | Nahrungsergänzung | Für wen | Risiko | |---|---|---|---|---| | **A „Finder-first"** *(führende Hypothese)* | **Bedürfnis-Finder = primärer Pfad** (persistent); 4 Top-Level, Anliegen führt im Haare-Mega | nicht Top-Level | unsicher, braucht Führung | mittel-hoch | | **B „Sanft verschlankt"** *(Stakeholder-Fallback)* | **Produktkategorie bleibt Spine** + Anliegen-Spalte ergänzt; Top-Level: **Haarpflege · Körperpflege · Styling · Nahrungsergänzung · Über uns** | **bleibt Top-Level** | geringster Umbau | gering | A ist die **führende Hypothese, nicht gesetzt** — Haaranalyse-Nutzung und Tree-Test entscheiden zwischen A und B. Beide sind **in eine Kopie der echten `pages/index.html` gebaut — nur Header/Nav getauscht, Hero & Inhalt bleiben real.** Begründung je Variante im Hub. ## 5 · Offene Punkte / Governance / vor der Zwischenabstimmung zu beschaffen - **Card-Sort/Tree-Test vor der Stakeholder-Runde** — als Entscheidungsinstrument zwischen A und B, und als externer Beleg für oder gegen Nahrungsergänzung-/Styling-Slots. - **Zwei Datenpunkte beschaffen (für A zwingend):** Nutzung der Haaranalyse-Seite/-Quiz (Shopify/Klaviyo) und Aufschlüsselung von **SubmitForm** (2.869 Sessions, häufigstes Smart-Event, §6) — ist das das Bedürfnis-Quiz (dann trägt es A) oder Newsletter (dann nicht)? - **Haaranalyse vs. Klaviyo-Popup:** ein bewusster Bedürfnis-Funnel statt zweier konkurrierender — sonst Kannibalisierung. - **Announcement-Bar-Governance:** dort sitzen heute der Haaranalyse-Link *und* die stärkste mobile Klickzone „Gratis-Haarbürste" — wer den Header neu baut, muss die Leiste mitentscheiden. - **Jobs/Über uns:** Jobs hat im Ist keinen Footer-Fallback → bei jeder „Über uns"-Änderung erreichbar halten. - **Mehrsprachigkeit:** Labels („Ratgeber", Anliegen-Formulierungen) müssen in FR/IT/EN funktionieren (6 Locale-Stores in der Sitemap). - **Erfolgsmessung nach Rollout:** Clarity-Re-Run (Quickbacks, Seiten/Session, Menü-Klick-Tracking auf die Spalten — schließt zugleich die C2-Beleglücke). - **Nahrungsergänzung** = einziger echter Stakeholder-vs-Daten-Konflikt; über die Variantenachse bewusst offengehalten: A ohne Top-Level-Präsenz, B mit eigenem Slot. - **Ad-Funnel-Ehrlichkeit:** Nav bewegt die Longevity-Landingpages (~16 %) kaum — Erwartung im Pitch kalibrieren. - **Checkout** = separater Auftrag/Stretch (eigenes Budget). ## Quellen - **Clarity/Ist:** `data/ux-ui-report-rausch.md` (§-Abschnitte), `data/redesign-brief-rausch.md`, `docs/superpowers/nav-ist-zustand.md`, `data/sitemap-all.csv`, `data/2026-07-09-rausch.ch.md`, `data/Vorschlaege-aus-2024/` (Evergreen 2024). - **Best Practices (extern):** Baymard — [Homepage & Navigation](https://baymard.com/blog/ecommerce-navigation-best-practice), [Mobile Search & Navigation](https://baymard.com/blog/mobile-ecommerce-search-and-navigation); NN/g — [Mega Menus](https://www.nngroup.com/articles/mega-menus-work-well/), [Menu-Design Checklist](https://www.nngroup.com/articles/menu-design/), [3 IA Mistakes](https://www.nngroup.com/articles/3-ia-mistakes/); UX-Korpus — Krug *Don't Make Me Think*, Tidwell *Designing Interfaces*, Colborne *Simple and Usable*, Yablonski *Laws of UX*, Wathan/Schoger *Refactoring UI*; WisePIM [Beauty categorization](https://wisepim.com/guides/product-categorization/beauty-personal-care).