Vom überladenen Overlay-Menü zur klaren Produktnavigation

Vom überladenen Overlay-Menü zum nutzerzentrierten Mega-Menü das mehr Orientierung, kürzere Klickwege und schnellere Zugänge zu Produkten und Anwendungsbereichen bietet.

Das bestehende Overlay-Menü bildete den umfangreichen Seitenbaum nahezu eins zu eins ab. Dadurch wirkte die Navigation eher wie eine Sitemap als wie ein geführtes Menü.

Für Nutzer, die das Produktportfolio von SCHMITZ medical bereits kannten, war diese Struktur noch nachvollziehbar. Für neue Besucher, internationale Kontakte oder Nutzer ohne tiefes Fachwissen war die Orientierung jedoch deutlich schwieriger.

Es fehlten klare Einstiegspunkte, visuelle Priorisierung und eine gezielte Führung zu Produktgruppen, Anwendungsbereichen oder Übersichtsseiten. Besonders auf dem Desktop wurde Potenzial verschenkt: Statt die größere Fläche für ein strukturiertes Mega-Menü zu nutzen, musste die Navigation zunächst über ein Burger-Menü geöffnet werden.

Auch redaktionell war das Menü aufwendig. Inhalte wurden nicht durchgängig aus dem TYPO3-Seitenbaum gerendert, sondern über eigene Seitenbereiche und Content-Elemente gepflegt. Bei fünf Sprachversionen bedeutete jede Änderung zusätzlichen Aufwand und ein höheres Risiko für inkonsistente Inhalte.

Nach einem gemeinsamen Auftakttermin wurden Ziele, Aufgaben und inhaltliche Schwerpunkte definiert. Auf dieser Grundlage entstanden erste Layout- und Strukturansätze für das neue Mega-Menü.

Der Fokus lag auf klarerer Nutzerführung, visueller Hierarchie und einer hochwertigeren Darstellung der Produktwelt. Dafür wurden vorhandene Produktbilder und die Farbgebung aus dem Corporate Design gezielt in das Menü integriert.

Im ersten Schritt entstanden drei gestalterische Varianten. Gemeinsam mit dem Kunden wurde daraus eine Richtung ausgewählt und mit passenden Elementen aus den weiteren Entwürfen ergänzt. So entstand eine Lösung, die funktional, visuell und redaktionell zur Website passte.

Ein zentraler UX-Aspekt war die Reduktion unnötiger Klickwege. Auf dem Desktop sollten Nutzer schneller zu relevanten Produktgruppen, Anwendungsbereichen und Übersichtsseiten gelangen. Gleichzeitig wurde die Navbar neu geordnet: Suche, Sprachwechsel, Kontaktmöglichkeiten und Navigation erhielten klarere Positionen innerhalb der Website.

Das Ergebnis ist eine vollständig überarbeitete Navigation mit einem klar strukturierten Mega-Menü und einer optimierten Navbar.

Nutzer werden nun gezielter durch Produktgruppen, Anwendungsbereiche und relevante Übersichtsseiten geführt. Produktbilder, Farbflächen und Hover-Effekte unterstützen die Orientierung und machen die einzelnen Bereiche schneller erfassbar.

Jedes Submenü-Item kann zusätzlich mit Bild, Beschreibungstext und weiterführendem Link ergänzt werden. Dadurch entstehen keine reinen Linklisten mehr, sondern kleine Teaser, die Kontext geben und den nächsten Schritt erleichtern.

Auch die mobile Navigation wurde mitgedacht. Die Teaser-Logik aus der Desktop-Ansicht wurde für kleinere Screens angepasst. Geöffnete Untermenüs bleiben präsent und geben Orientierung innerhalb der Seitenstruktur.

Für die Redaktion bringt das neue Setup einen deutlichen Vorteil: Weil die Navigation stärker auf dem TYPO3-Seitenbaum basiert, reduziert sich der Pflegeaufwand besonders bei mehreren Sprachversionen. Änderungen müssen nicht mehr redundant an mehreren Stellen nachgezogen werden.

Gleichzeitig bleibt das Menü flexibel. Ergänzende Teaser-Bilder, Texte und Links können gepflegt werden, ohne das technische Grundgerüst zu verändern.

Das Projekt zeigt: Ein gutes Mega-Menü ist mehr als eine große Navigation. Es ist ein Führungssystem durch komplexe Inhalte und hilft Nutzern, schneller zu verstehen, wo sie richtig sind.