Verständlicher, schneller, plakativer. Das wünschte sich BayWa r.e. aus München von einem neuen UX-Design für die neue Navigation ihres Photovoltaik-Großhandelsshops.
Wir konzipierten die Navigation aus Sicht der Nutzer. Wir legten Wert auf eine inhaltlich logische Navigationsstruktur, eine erwartungskonforme Anordnung und eine visuell sinnvolle Gewichtung der Navigationsebenen.
Das Unternehmen und Geschäftsmodel verstehen. Anforderungen des Auftraggebers kennenlernen. Interviews mit Auftraggeber führen. Analysieren aktueller Navigation. Durchführung Konkurrenzbetrachtung. Richtung für weiteres Vorgehen festlegen.
Verschiedene Ideen und Ansätze in iterativem Prozess entwickeln und eng mit Auftraggeber abstimmen. Ausarbeitung des favorisierten Ansatzes. Erstellung aller Designvorgaben für die Entwicklungsagentur. UX-Animation einplanen und definieren.
Erstellung Produktionsdokumentation mit Beschreibung des detailierten Verhaltens bei Klick, Hove, etc. Animation mit Hilfe von interaktiven Prototypen visualisieren. Abstimmung mit externer Entwicklungsagentur, Produktionsbegleitung und Qualitätssicherung.
Vorher: Als zentralen Knackpunkt im bisherigen Navigationskonzept fiel uns das Burgermenü in der Desktop-Ansicht auf. So muß der Nutzer das Menü aktiv aufklicken, um die Hauptnavigationspunkte zu sehen und einen Überblick über das Angebot zu bekommen.
Nachher: Im Header sind die Hauptmenüpunkte nun gut sichtbar platziert. Für einen schnellen Einstieg in das Shopangebot, ist das Produkt-Menü auf der Startseite direkt ausgeklappt.
Markenkonform: Bei der Designumsetzung berücksichtigten wir die Corporate Design-Vorgaben des Konzerns, um so eine Wiedererkennung zu gewährleisten und die Markenwerte auch in der Navigation zu vermitteln.
Eine verständliche und übersichtliche Navigation bildet immer noch das Rückgrat jeder nutzerfreundlichen Webseite. Dies gilt auch in Zeiten, in denen SEO immer wichtiger wird und mehr und mehr Nutzer direkt per Google auf eine bestimmte Unterseite gelangen. Hier ist die Aufgabe der Navigation, dem Nutzer zu zeigen, wo er sich gerade befindet, was es sonst noch gibt und wie er zu den anderen Inhalten hingelangt, die ihn interessieren könnten.
„Stell dir vor, du wachst mitten in deiner Website auf – woher weißt du, wo du dich gerade befindest?“
Dies gilt nicht nur für Corporate Sites, sondern um so mehr für kommerzielle Onlineshops. Eine schlecht designte und ineffiziente Navigation kann Kunden schnell frustrieren und dazu führen, dass der er auf die Seite eines Konkurrenten geht und einem so ein gutes Geschäft durch die Lappen geht.
Mobile First: Ein mobil-optimiertes Navigationskonzept sorgt für eine reibungslose Bedienbarkeit auch auf Smartphones.
Animierend: Fließende Übergänge, die das Öffnen und Schliessen von Layern verdeutlichen oder Mouseover-Animationen bei Interaktionselementen führen den Nutzer sicher durch den Navigationsflow.
BayWa r.e.
Dominic Rheinwald · Head of Global Digital Marketing
Nalin Sudan · Head of E-Commerce
H2D2
Johannes Reinhart · UX/UI Designer
Markus Remscheid · Productowner
Technische Umsetzung
Projekt eins
BayWa r.e.
UX & UI DesignE-Commerce DesignDesignsystemeResponsive Design
Januar 2022