Jonastone - Herausforderungen im UX-Design einer Produktseite für Steinfliesen
29. September 2020

Seit über 20 Jahren ist jonastone im Online-Handel für qualitativ hochwertige Natursteine aktiv. Die Webseite des Unternehmens wird stets weiterentwickelt. Häufig ergeben sich die Verbesserungsideen im Kontakt mit den Kunden selbst.

In einem Usability-Test fand der Steinhändler heraus, dass die Shopdetailseiten seiner Produkte auf viele Nutzer kompliziert und unübersichtlich wirkten. Insbesondere das Hinzufügen von Produkten zum Warenkorb war für die Nutzer ein verwirrender Prozess. Beim Kauf von Bodenbelägen müssen die Kunden nämlich wissen, welche Menge sie benötigen. Diese wird anhand der zu belegenden Quadratmeterzahl berechnet. Daher ist es notwendig die Menge der gewünschten Bodenfliesen in m² einzugeben oder alternativ die Anzahl Kisten (mit fester Fliesenmenge) zu bestimmen, die man benötigt. Ein solches Formular kann kompliziert und abschreckend wirken. Auch wichtige Informationen wie Verlege-Hinweise oder verfügbare Zubehörprodukte für die Fliesen waren laut des Nutzertests nicht gut auffindbar. Da auch eine Überarbeitung der Seite in ein modernes, frisches Design gewünscht war, beauftragte jonastone uns mit dem Redesign ihrer Produktdetailseite.

Auf die Frage hin, warum sich jonastone mit Hauptsitz in Mannheim für die Zusammenarbeit mit einer externen Dienstleisterin aus Aachen entschied, sagt der Marketingleiter Patrick Finkbeiner:

“Wir arbeiten sehr gerne mit externen Dienstleistern zusammen, wenn es sich anbietet. So können wir Kapazitäten und Knowhow nutzen, die wir als kleine Firma intern nicht immer haben. Dabei brauchen wir keinen Designer, der sich versteckt und nach fünf Wochen mit der perfekten oder falschen Lösung daherkommt. Wir möchten unser Team mit User-Experience-Qualifikationen (wie UX-Design) erweitern und gemeinsam Lösungen erarbeiten, damit unsere Erfahrungen einfließen können.”

Seine Erwartungen sieht er in der Zusammenarbeit mit uns voll erfüllt: “Die Arbeit mit Anna hat uns allen sehr viel Spaß gemacht. Das responsive Redesign der Detailseite wurde zunächst für mobile Ansichten ausgearbeitet und dann schrittweise auf vier anderen Gerätegrößen übertragen. Währenddessen führten wir mehrere Feedback-Gespräche, in denen wir unsere eigenen Ideen und Erfahrungen einbringen konnten.”

Die Designs wurden über das Sketch-Werkzeug Zeplin geteilt, für die Feedback-Runden nutzten wir virtuelle Konferenzen und das Chatprogramm Slack. So lief die Zusammenarbeit trotz räumlicher Distanz reibungslos.

Viele Online-Shops bestehen im Kern aus Landingpage, Produktübersichtsseiten, Produktdetailseiten und dem Zahlungsprozess – dem sogenannten Checkout. Die Produkte werden sowohl auf den Übersichtsseiten als auch auf den Produktseiten mit Bildern vorgestellt. Während die Nutzer auf Übersichtsseiten mit wenigen Kriterien (wie z.B. Preis, Farbe und bei Fliesen z.B. auch Steinsorte) eine Vorauswahl treffen können, dienen die Produktdetailseiten eher als Kaufentscheidungsgrundlage, indem dort alle relevanten Informationen bereitstehen.

Leider reicht es meist nicht, als Lösung einfach zwei bis drei Fotos mit den Produktdaten und dem Preis zur Verfügung zu stellen. Im Kontext von jonastone treffen die Kunden Kaufentscheidungen, mit denen sie über viele Jahre hinweg zufrieden sein möchten. Das jonastone-Team möchte möglichst viele Informationen über die Steinfliesen zur Verfügung stellen. Der Besuch des Online-Shops soll dem Besuch eines Showrooms gleichgestellt oder sogar überlegen sein. Die Bilder müssen vermitteln, wie sich die Fliesen anfühlen, wie groß sie sind und welche Verlegevarianten möglich sind, aber auch zu welchem Einrichtungsstil sie passen. Die wichtigsten Informationen, die die Fliesen von anderen Produkten unterscheiden, müssen schnell erfassbar und verständlich aufbereitet sein, so dass auch Laien sie verstehen.

Warum gibt es überhaupt in Online-Shops Produktdetailseiten? Welche Funktion haben sie im Shopping-Erlebnis allgemein? Welche Herausforderungen gab es speziell für die Darstellung von Natursteinfliesen? Im Kontext des jonastone Shops waren uns vor allem diese Aspekte wichtig: Inspiration, Beratung & Service, der Aufbau von Vertrauen sowie Planungsunterstützung & Wissensvermittlung.

Produktseiten sollen die potentiellen Kunden von dem jeweiligen Produkt begeistern. Hier gilt es zum einen, einen sehr guten Ersteindruck des Produktes zu vermitteln, und zum anderen, das Produkt so darzustellen, dass unterschiedliche Kunden es sich gut für ihren Zweck vorstellen können oder sogar neue Ideen erhalten, wie ihnen das Produkt den Alltag vereinfachen und das Leben verschönern kann. Einen sehr hohen Stellenwert für die Inspiration haben Fotos, Videos und ggf. auch Illustrationen.

Das jonastone-Team hatte bereits tolle Fotos und bei vielen Produkten sogar Videos und 360°-Ansichten. Zusätzlich sollte eine weitere Möglichkeit eingefügt werden, sich Fliesen-Produkte über eine Augmented-Reality-App im eigenen Raum ansehen zu können. Die Herausforderung war, diese Vielfalt der Möglichkeiten benutzerfreundlich auf verschiedenen Bildschirmgrößen zur Verfügung zu stellen. Zugleich sollte die Webseite schnell laden. Wir lösten dieses Problem wie folgt:

Bilder und Videomaterial werden prominent und mit viel Fläche weit oben auf der Produktdetailseite dargestellt. Für den Wechsel zwischen verschiedenen Medien- und Ansichtsformen gibt es nah am Bildbereich Thumbnails der Fotos und weiter rechts Icon-Buttons für Video- und 360°-Ansichten sowie für einige Produkte auch einen Button „Im eigenen Raum ansehen“, der eine Anwendung öffnet, die Fliesen in die selbst fotografierten Räume projiziert.

Passt dieses Produkt zu mir und meiner Situation? Eine Produktdetailseite berät die potentiellen Kunden ähnlich wie gute Verkäufer in einem Ladenlokal. Die Seite stellt unaufdringlich zur richtigen Zeit Zusatzinformationen zur Verfügung, die für die Kaufentscheidung benötigt werden. Wir empfehlen ein ausgewogenes Maß an relevanten Visualisierungen und Informationen, die kurz und leicht lesbar dargestellt werden. Bei der Kaufentscheidung für einen neuen Bodenbelag stellt sich die Frage, ob die online gefundenen schönen Fliesen für die eigenen vier Wände überhaupt passend gewählt sind. Hier hilft es sehr, wenn die wichtigsten Produkteigenschaften, z.B. ob sie für Bodenheizung oder Haustiere geeignet sind, übersichtlich in Listenform präsentiert werden. Wir gaben dieser „Eigenschaften-Box" einen markanten Rahmen, um ihre Relevanz zu zeigen.

Da die meisten Menschen ihre Fliesen nicht täglich wechseln und sich daher über Fliesenpflege nicht bewusst sind, ist es auch hilfreich, z.B. die besondere Pflege und Pflege-Produkte zu erwähnen. Sie schaffen zudem Vertrauen in die fachliche Expertise des Händlers (siehe weiter unten). Hierbei sollten lange Texte vermieden und gut lesbare Texteinheiten verfasst werden. Im jonastone-Kontext können sich die Leser Schritt-für-Schritt durch Verlege-Anleitungen klicken, wobei in der nah am Text positionierten Grafik interaktiv die jeweiligen Bodenschichten markiert werden.

Ist die Entscheidung für ein Produkt gefallen, so sollte auch der Kaufprozess bestmöglich unterstützt werden, wie z.B. mit einem Hinweis, dass Kunden 10% Verschnitt bei der Mengenberechnung einplanen sollten.

Kunden, die Wert auf Qualität und Herkunft ihrer Ware legen, möchten auch wissen, bei wem sie einkaufen. Daher sollte auch die Produktdetailseite die individuellen Vorzüge und Alleinstellungsmerkmale des Unternehmens widerspiegeln. Ein liebevoll gestalteter Shop, der aktuelle Inhalte zur Verfügung stellt und Kunden das Team zeigt, welches diese betreut, erzeugt Vertrauen und das Gefühl, es hier wirklich mit echten Menschen zu tun zu haben, die Experten in ihrem Berufsfeld sind. Darüber hinaus ist es natürlich auch wichtig, das Feedback anderer Kunden zu präsentieren. Über Zitate von Kunden kann man zeigen, dass andere Kunden diesem Service Vertrauen schenkten und womit die Kunden insbesondere zufrieden waren.

Haben Kunden entschieden, dass das Produkt genau richtig für sie ist, dann heißt das noch nicht, dass direkt bestellt wird. Äußere Faktoren haben häufig Einfluss darauf, dass auch der Zeitpunkt und die Art der Lieferung bedacht werden müssen. Die Frage, ob das Produkt rechtzeitig geliefert wird, kommt den Nutzern vielleicht schon auf der Produktdetailseite, spätestens jedoch im Checkout-Prozess in den Sinn. Daher ist es ratsam, Lieferzeiten transparent darzustellen und ggf. sogar Lieferketten verständlich zu präsentieren. Die Berechnung des Lieferungszeitpunktes einer Steinfliesen-Bestellung hängt z.B. von der benötigten Menge ab. Kleine Mengen können zügig direkt ab Lager verschickt werden, während riesige Mengen für große Flächen möglicherweise erst im Werk produziert werden, damit ein gutes Preis-Leistungs-Verhältnis gewährleistet werden kann.

Die Überarbeitung der gesamten Produktdetailseite war ein iterativer Prozess: Wir starteten mit groben Skizzen und Mockups und entwarfen schrittweise neue Versionen in enger Abstimmung. Die so überarbeitete Seite wurde als Test zunächst im österreichischen stonenaturelle-Shop und schließlich auch in Deutschland auf jonastone.de veröffentlicht.