Erste Designentscheidungen und Herausforderungen bei der Umsetzung des Projekts

Beim Designprozess fĂŒr die Produktdetailseite waren wir auf ein schnelles und intuitives Filtersystem angewiesen, da das Produktsortiment der HANS KOHLER AG viele verschiedene Produkttypen umfasst. Die Darstellung aller wichtigen Informationen auf einen Blick ist entscheidend, damit die Kund‱innen das fĂŒr sie am besten geeignete Produkt rasch finden können. Im Designprozess konzentrierten wir uns auf die folgenden Anforderungen:

  • Variantenfilterung – alle Grössen, Spezifikationen und Materialien mĂŒssen zugĂ€nglich und schnell auswĂ€hlbar sein. Wie in Abbildung 1 zu sehen, platzierten wir diese Filter ĂŒber der Liste mit den Produktvarianten. So sind alle Attribute auf einmal sichtbar und die Nutzer‱innen können sie mit nur einem Klick intuitiv an- oder abwĂ€hlen.
  • Variantenliste – alle Varianten mĂŒssen auf einen Blick zu sehen sein, ohne dass dabei die Übersichtlichkeit verloren geht. Um dies zu erreichen, haben wir uns fĂŒr eine einfache Liste mit allen Varianten entschieden. Die Nutzer‱innen sollten problemlos eine Variante zu ihrer Bestellung hinzufĂŒgen können.
  • Mobile Optimierung – angesichts des begrenzten Platzes auf Mobiltelefonen legten wir den Fokus auf ein alternatives Modell. Dabei haben wir Filter in den Auswahlfeldern platziert, um so eine möglichst effiziente Mobile Usability zu gewĂ€hrleisten.
UrsprĂŒngliches Design mit allen Filtern

Herausforderungen und Überraschungen: User-Testing-Feedback

Zur Validierung des Designs wandelten wir die Figma-Designs in Frontend-Code um, den wir im Anschluss moderierten User-Testing-Sessions unterzogen. Dabei stellten wir rasch fest, dass einige unserer ursprĂŒnglichen Ideen nicht wie beabsichtigt funktionierten. Die ersten Usability-Tests brachten ĂŒberraschende Schwierigkeiten zum Vorschein, mit denen wir nicht gerechnet hatten:

  • Versteckte Variantenliste: Einige Tester‱innen hatten Schwierigkeiten, die Variantenliste auf Anhieb zu finden. Obwohl sie mit dem Filter interagierten, bemerkten sie nicht, dass die Variantenliste aktualisiert wurde. Selbst der animierte Call-to-Action, der auf FilterĂ€nderungen hinweisen sollte, blieb unbemerkt.
  • Sticky Navigation als Hindernis: Wir implementierten eine fixe untere Navigationsleiste – eine sogenannte Sticky-Navigationsleiste – um die Anzahl der aktualisierten Ergebnisse anzuzeigen. Dadurch hatten die Nutzer‱innen den Eindruck, dass sie am Ende der Seite angelangt waren. Diese unerwartete Erkenntnis zeigte uns, dass weniger technikaffine Nutzer‱innen solche Elemente nicht erkennen und falsch interpretieren.

Diese Beobachtungen machten uns klar, dass wir die Platzierung und die Struktur der Filter ĂŒberdenken mĂŒssen, um die User Experience zu verbessern.

UrsprĂŒngliches Design mit normaler Bildschirmgrösse und Sticky-Navigationsleiste unten

Lösungen: Iterationen und Optimierungen

Anhand unserer Erkenntnisse aus der Testphase begannen wir mit dem Redesign der Produktdetailseite, wobei wir uns stĂ€rker auf intuitive und sichtbare Funktionen konzentrierten. Wir setzten Änderungen an der Informationsstruktur auch designtechnisch um:

  • Inline Filtering: Die wohl wichtigste Änderung war die EinfĂŒhrung von Inline Filtering, dank dem die Nutzer‱innen Varianten direkt im Sticky-Header der Tabelle filtern können. Mit diesem Design können Nutzer‱innen direkt in der Variantenliste filtern, da der fixierte Header immer sichtbar ist.
  • Sticky-Footer entfernen: Wir haben den Sticky-Footer entfernt. Dadurch können die Nutzer‱innen den Bereich unter dem Produktbild schneller erkennen. Somit ist klar, dass die Seite auch unterhalb der Liste weitergeht.
  • Einheitliche Mobile- und Desktop-Experience: Statt zwei verschiedener Layouts fĂŒr Desktop-Computer und mobile GerĂ€te haben wir auf allen Plattformen ein einheitliches Erlebnis – und somit auch eine kohĂ€rente und ĂŒbersichtliche User Experience – geschaffen.

Das Ergebnis: Effizienz fĂŒr Power-User*innen und hohe ZugĂ€nglichkeit

Durch diese Änderungen ist eine Produktdetailseite entstanden, die sowohl optisch als auch in Bezug auf die FunktionalitĂ€t ĂŒberzeugt. Weil wir die Seite zugĂ€nglicher gestaltet haben und auf die BedĂŒrfnisse der Power-Userinnen eingegangen sind, konnten wir die Benutzerfreundlichkeit verbessern. Unsere neue Lösung ist effizienter – vor allem fĂŒr B2B-Kundinnen, die hĂ€ufig grosse Mengen und verschiedene Produktvarianten bestellen. Dies unterstreicht den Nutzen eines iterativen Designprozesses. Wir liessen unsere Annahmen laufend von echten User*innen testen. So konnten wir eine Lösung entwickeln, die viel stabiler und benutzerfreundlicher als das ursprĂŒngliche Konzept ist.

Bei kĂŒnftigen Projekten werden wir die Lektion im Hinterkopf behalten, die wir hier gelernt haben: Kleine Details – wie die Platzierung von Navigationselementen oder die Art der Animation – können einen grossen Unterschied machen. Es zahlt sich also aus, in Usability-Tests zu investieren. Wir freuen uns darauf, mit diesem Ansatz weiterhin innovative, benutzerzentrierte Produkte zu entwickeln.

Willst du dein Produkt anhand von User-Testing auf die Probe stellen?? Kontaktieren Sie uns!