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; Heatmap-Export: Hamburger = 673 Taps ≈ 12,3 % aller Startseiten-Taps). (Clarity §21/§32/§38/§41)
• „Anliegen führt" ist mobil jetzt direkt belegt (Update 15.07.): Der Heatmap-Export der Startseite (Juni, selektorgenau dem Ist-Nav zugeordnet) zeigt im Haarpflege-Drawer das Akkordeon „Nach Haarbedürfnis" mit 109 Taps vor „Kategorie" mit 82; meistgetippter einzelner Mega-Link ist Haarausfall (45) vor Shampoo (28). Desktop gleichauf (Haarausfall 34 ≈ Shampoo 37). Einschränkung: nur Startseite, nur Juni, Akkordeon-Öffnungen ≠ Zielklicks — aber der erste echte Verhaltensbeleg statt Hypothese. (Daten-Check Haaranalyse Befund 2b, data/clarity-heatmap-*.csv)
• 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 — und wird dort faktisch nicht geklickt: 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). Der Juni-Heatmap-Export der Startseite führt den Link in keiner einzigen Klick-Zeile (Desktop 0–1 von 2.097 Klicks, mobil 0–1 von 5.481 Taps). Das Quiz selbst ist ein Cross-Origin-iframe (getskinmatch.com) — Clarity-SubmitForm kann es daher nicht messen; Nutzungszahlen nur im SkinMatch-Dashboard. (nav-ist-zustand; Live-Review; Daten-Check Haaranalyse)
• 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.

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 HAARBEDÜRFNIS (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

A ist die führende Hypothese, nicht gesetzt — Haaranalyse-Nutzung und Tree-Test entscheiden zwischen A und B. Beide Varianten sind in eine Kopie der echten pages/index.html gebaut — nur Header/Nav getauscht, Hero & Inhalt bleiben real. Begründung je Variante im Hub.

Verworfen (15.07.2026): Variante C „Visuelle Schaltzentrale" — eine bildgeführte Gegenhypothese nach Yucca/Coterie-Prinzipien (Top-Level: Produkte · Nach Anliegen · Haaranalyse · Ratgeber · Über RAUSCH) wurde gebaut, browser-verifiziert und bewusst wieder entfernt: Bildführung ist eine Präsentations-, keine IA-Frage (lässt sich später auf die Gewinner-IA legen), hatte als einzige Variante keinen Clarity-Anker, und eine dritte gleichwertige Option hätte die Stakeholder-Entscheidung Richtung Geschmack statt Daten verschoben. Stand in der Git-History (Commits bis 8dbce43).

5 · Offene Punkte / Governance / vor der Zwischenabstimmung zu beschaffen

• Card-Sort/Tree-/First-Click-Test vor der Stakeholder-Runde — A gegen B prüft die IA, mobil per First-Click den Ersteinstieg. Der Test liefert zugleich den externen Beleg für oder gegen Nahrungsergänzung-/Styling-Slots.
• Quiz-Nutzung beschaffen (für A zwingend): SkinMatch-Dashboard-Zahlen (Starts/Abschlüsse/Empfehlungs-Klicks) von Manuel — das Quiz ist ein Cross-Origin-iframe von getskinmatch.com, Clarity misst dort nicht hinein. SubmitForm ist damit analytisch geklärt (15.07.): die 2.869 Sessions (§6) können nicht das Quiz sein; Kandidaten sind Klaviyo-Newsletter, Sprachwahl-POST, Suche, Checkout. SubmitForm darf im Pitch nicht als Quiz-Nachfrage auftauchen. Details + Anforderungsliste: Daten-Check Haaranalyse.
• Haaranalyse vs. Klaviyo-Popup: ein bewusster Bedürfnis-Funnel statt konkurrierender — es existieren sogar zwei Analyse-Seiten (/pages/haaranalyse de/de-de, /pages/kopfhautanalyse 6 Locales) plus Popup → 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. Gewichtiger als gedacht: Im Juni-Heatmap-Export ist Jobs mit 82 Klicks der zweithöchste Einzelklick der Desktop-Startseite (Cluster Über uns 82 + Jobs 82 + Team 41) — Bewerber-Traffic ist ein realer Nutzungsstrom des Headers.
• 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 — der Juni-Heatmap-Export liefert dafür die Baseline: Bedürfnis-Toggle 109 vs. Kategorie 82 mobil, Haarausfall 45 vs. Shampoo 28).
• 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: UX/UI Report (§-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, Mobile Search & Navigation; NN/g — Mega Menus, Menu-Design Checklist, 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.