Inhaltstypen
Pages
Posts
12.02.2019

E-Commerce-Design Follows Function

Verhindern Sie, in Schönheit zu sterben

Fokussieren Sie auf User Experience und Conversion

Pressant? Na bitte:

  • Entwickeln Sie die Funktionalität Ihres Webshops vor dem finalen Design.
  • Implementieren Sie zuerst die komplette E-Commerce-Lösung und passen dann das Design an.
  • Bilden Sie Ihre USPs (Alleinstellungsmerkmale) auch online ab. Seien Sie auch online einzigartig.
  • Setzen Sie Ihr Geld für viel Konversion und wenig Kosmetik ein.

Die User Experience und die Konversion Ihres Shops sind wichtiger als das Design. Setzen Sie die Prioritäten in Ihrem Webshop-Projekt richtig. Wir erklären wie.

wichtige Differenzierung

Dieser Blog-Post setzt sich mit dem Design-Prozess typischer E-Commerce-Lösungen oder dem eher trivialer Web-Plattformen auseinander.

Wenn Sie hingegen eine anspruchsvolle Individuallösung oder eine bestechende Mobile App entwickeln möchten, die es in dieser Form bisher nicht gibt, dann geniesst neben der User Experience(UX) auch das Design einen ganz besonderen Stellenwert.

In ganz vielen Fällen wird aber nicht jedes Mal die Welt neu erfunden. Manchmal ist es auch nur eine E-Commerce-Lösung.

Design ist Geschmacksache.
Die User Experience bestimmt den Erfolg.

Eine konversionssteigernde User Experience bedingt kein wunderschönes und im Detail ausgearbeitetes Design. Grosse Plattformen wie Amazon zeigen uns immer wieder, wie auch ganz hässliche Lösungen unglaublichen Erfolg haben können. Nicht, dass wir uns bei insign design-technisch nach unten orientieren wollen, aber erfolgsentscheidend ist eine gut funktionierende User Experience, während das Design immer Geschmacksache bleibt.

Natürlich realisieren wir wunderschöne Lösungen, doch wollen wir Ihnen mit diesem Beitrag erklären, wie das am effizientesten gelingt. Der Fokus muss nämlich immer auf der User Experience liegen.

aus dem Fenster geworfene Design-Zeit

Die landläufige Meinung ist, dass ein neuer Shop zuerst hübsch gestaltet und dann realisiert werden muss. Mindestens ging man in unserer Branche die letzten Jahrzehnte so vor. Und die meisten Lösungsanbieter tun dies auch heute noch genau so.

Bleiben wir einen Augenblick bei diesem Szenario: Sie gestalten die Artikel-Detailseite mit dem aktuellen Projektwissen, welche eine Anbindung an Ihr ERP-System(Warenbewirtschaftung) vorerst nicht vorsieht.

Sinngemäss lassen Sie sich auch einen extrem hübschen, aber gänzlich normalen Checkout-Prozess gestalten. Die Lösung sieht super aus und das Projekt startet. Alle sind glücklich.

Bis jetzt. Denn im Projektverlauf zeigt sich, dass die Lösung ohne ERP-Schnittstelle kaum skalierbar und diese wider Erwarten effizient und preiswert zu realisieren ist.

Weitere Vorteile des neuen Entscheids, das ERP-System dennoch anzubinden, sind, dass zusätzliche Informationen auf der Artikel-Detailseite angezeigt werden können, wie beispielsweise der Lagestand oder die Verfügbarkeit des Artikels in physischen Filialen.

Letzteres führt zur Idee, dass man sinnvollerweise eine Standort-Auswertung des Users macht und diejenigen Ladengeschäfte in seiner unmittelbaren Nähe priorisiert. Und schon sieht die Artikel-Detailseite ganz anders aus, als diese ursprünglich gedacht und bereits gestaltet wurde.

Design-Exzesse zu Projektbeginn gehen immer zu Lasten der (wichtigeren) Funktionalität.

Und beim Checkout ist es nicht anders, denn dort kann man neu einen Warenkorb mit gemischten Artikeln bestellen, die wahlweise geliefert oder in der Filiale abgeholt werden können.

Für diese neuen Interaktionsmöglichkeiten braucht es neue Buttons und zusätzliche Informationen. Darum kommt es so, wie’s kommen musste: Auch das Design des Warenkorbs und des Checkouts muss komplett überarbeitet werden.

Genau, Ihnen würde genau das auch passieren. Wenn’s nicht die oben genannten, beispielhaften Änderungen im Projektverlauf sind, sind es einfach andere. Aber es gibt diese Änderungen in jedem Projekt.

Auf diese Weise werden viele Elemente mehrfach gestaltet. Das geht leider konsequenterweise immer zu Lasten des Projekts oder anderer Funktionen, die für den Erfolg Ihres neuen Shops viel relevanter wären.

Priorisieren. Wie im richtigen Leben.

Aktuelle Frontend-Frameworks wie zum Beispiel Bootstrap ermöglichen ein effizientes Gestalten einer Lösung. Es braucht wenige Handgriffe und die Lösung sieht schon äusserst ansprechend aus, auch wenn sie noch nicht bis ins letzte Detail gestaltet ist.

Und weil man sich dabei auf diese Details (noch) nicht konzentrieren muss, geniesst die Funktionalität der neuen Lösung die gesamte Aufmerksamkeit. Diese entscheidet über Erfolg und Misserfolg. Vorstellen müssen Sie sich das Ganze wie eine fertige Lösung, inkl. responsivem Verhalten und damit für Smartphones optimierter Mobile-View.

Wenn der Shop dann einmal funktioniert, bleibt immer noch genügend Zeit für alle kosmetischen Anpassungen. Bis dahin aber bleibt die Lösung auch während der Realisierung sehr flexibel und funktionale Änderungen können effizient integriert werden.

Kommt dazu, dass es weit weniger schlimm ist, als Sie jetzt denken mögen. Reine Bootstrap-Lösungen sind solide und optisch ansprechend. Die interaktiven Elemente sind voll funktionsfähig und alle Standard-HTML-Elemente hübsch gestaltet.

Alles, was es jetzt noch an Kosmetik braucht, ist die Kür des Corporate Designs, denn in Bootstrap sind Farb- und Bildwelten als Pflichtprogramm bereits eingearbeitet worden.

Jetzt, wenn das E-Shop-Projekt funktional realisiert ist, wenn alle Informationen und Interaktionsmöglichkeiten vorhanden sind, jetzt kann man sich um das Design kümmern, denn die Gefahr der laufenden Änderungen wie einleitend beschrieben ist gebannt.

Grundsätzlich könnte Ihre Lösung bereits so und ohne weitere Kosmetik live geschaltet werden, denn alle Design-Anpassungen sind nun eine Frage Ihrer Marketing-Abteilung oder des Geschmacks. Entscheidend für den Erfolg Ihrer Lösung sind sie allerdings kaum.

Das Beauty-Case gibt’s bei uns separat.

In unseren Projekten und vorab in unseren Angeboten richten wir uns nach diesem Vorgehen. Wir schätzen und rechnen den Aufwand für Ihren E-Shop ohne jegliche Design-Anpassungen als elegante und bestens funktionierende Bootstrap-Lösung. Die Stunden, die für die individuelle Gestaltung eingesetzt werden können, weisen wir im Angebot separat aus und gehen die im Projekt erst dann gemeinsam an, wenn die Lösung im Detail funktioniert.

Damit haben Sie auch die Möglichkeit, den Aufwand aktiv mitbestimmen zu können. Wenn Sie im Projektverlauf zusätzliche Funktionen als wichtiger erachteten, verzichten Sie auf exzessive Design-Anpassungen und realisieren damit ein besseres Projekt als zu Beginn konzipiert, ohne dass Mehrkosten generiert werden.

Der umgekehrte Fall wäre für den Erfolg Ihrer neuen Lösung fatal: Viel Design-Zeit wird zu Beginn des Projekts vertrödelt und fehlt schliesslich für Funktionen, welche Ihre Alleinstellungsmerkmale unterstrichen hätten. Das Geld ist weg, die Lösung schön aber trotzdem erfolglos. Priorisieren Sie darum richtig.

Ihr USP bestimmt die Funktionalität Ihrer Lösung

Oben stehende Ausführungen könnten suggerieren, dass grundsätzlich sowieso alle Shops in etwa gleich aussehen, was die typischen Inhalte wie Produkte-Detailseite, Warenkorb und den Checkout-Prozess angehen. Viele tun dies auch. Darum scheint es uns wichtig, hier abschliessend anzuregen, dass sich Ihre E-Commerce-Lösung von allen anderen zu unterscheiden vermag.

Überlegen Sie, was Ihr offline-Geschäft von Ihren Mitbewerbern unterscheidet. Wenn es die kompetente Beratung ist, dann müssen Sie genau diese mit unserer Hilfe und intelligenten Algorithmen in Ihrem Shop abbilden. Wenn es die gelungenen Empfehlungen sind, dann müssen diese online auch zu finden sein.

Egal was, sorgen Sie zusammen mit uns dafür, dass Ihre Alleinstellungsmerkmale auch online funktionieren und Sie keinen Shop realisieren, der komplett substituierbar ist und auf den die Welt nicht gewartet hat. Auch hier beraten wir Sie sehr gerne.