UX GUIDE BOOST E-COMMERCE CONVERSION RATES

Transkript

1 UX GUIDE BOOST E-COMMERCE CONVERSION RATES

2 INHALTSVERZEICHNIS 1 - Von der Usability zur perfekten User Experience Mit Ihrer Story zur Begehrlichkeit Grundanforderung Ihres Shops: Glanceability Flatdesign die neue Designsprache Typographie Milestone im Design Hero Images - der Blickfang Micro Interactions - der Shop reagiert Mobile Thinking mehr als ein responsive Design OnePage Checkout einfacher bestellen Über uns

3 1 VON DER USABILITY ZUR PERFEKTEN USER EXPERIENCE

4 VON DER USABILITY ZUR PERFEKTEN USER EXPERIENCE Unter Usability versteht man die Gebrauchstauglichkeit von Produkten, Websites und Online-Shops. In Shops spricht man allerdings eher von enutzerfreundlichkeit, die zu einem positiven Erlebnis führt, wenn ein Shop wie gedacht und gewohnt funktioniert. In Effizienz, Durchschaubarkeit und Zuverlässigkeit kann man diese Erwartungen zusammenführen User erwarten also dass ein Shop nutzerfreundlich ist. Funktioniert der Shop gut, ist schnell und leicht verständlich, Produkte leicht auffindbar und der Bestellprozess schlank und effizient, ist die Usability gut. Stehen dem User zudem alle Informationen zur Verfügung, die er für eine Kaufentscheidung benötigt Beschreibung, Bilder, Bewertungen steigt die Conversion Rate. User brechen weniger ab und kaufen mit höherer Wahrscheinlichkeit. Die User Experience geht weit über die Erwartungen der User hinaus uns lässt sich in keinem Standard und keiner Norm mehr zusammenfassen. User Experience ist das einzigartige Nutzungserlebnis. Die Wahrnehmung ist von jedem User anders abhängig von Alter, Vorlieben, Stimmungslage, benutztes Endgerät usw. Die User Experience ist aber vorrangig dafür verantwortlich dass User den Shop gut finden, dass Sie von Produkten überzeugt werden, mit Ideen inspiriert und in die richtige Stimmung des Shoppens versetzt werden. Während in einer Standardsoftware wie PrestaShop bereits viel Usability Wissen steckt, muss die User Experience individuell aufgebaut werden. Das Einkaufserlebnis muss der Shopbetreiber produzieren. Shopbetreiber brauchen dafür gutes Produktwissen, die Kenntnisse über die potentielle Zielgruppe und eine gute Idee. 3

5 2 MIT IHRER STORY ZUR BEGEHRLICHKEIT

6 MIT IHRER STORY ZUR BEGEHRLICHKEIT Produkte lassen sich einfach verkaufen, wenn der User danach sucht und Ihren Shop findet. Der Zielkäufer interessiert sich dabei in erster Linie für die Verfügbarkeit der Ware, schnelle Lieferung, günstigen Versand und den besten Preis. Online-Shops, die auf Zielkauf ausgelegt sind brauchen keine Story sie müssen schnell und billig sein. Problem dabei ist der enorme Wettbewerb insbesondere von Amazon. Amazon ist sicherlich der beste Zielkaufshop den es gibt. Das erklärt auch die ungewöhnlich hohe Conversion Rate von angeblich mehr als 70% bei Prime Kunden. Auf der Suche nach loyalen Kunden, die Ihren Shop gut finden, Ihre Idee lieben und gerne bei Ihnen bummeln und einkaufen, brauchen Sie eine andere Story. Eine Story, die für User begehrlich erscheint und hier gibt es ein paar Erfolgsrezepte, die sie abwägen können. Shops für die eigene Individualität User kaufen bevorzugt in Shops, die ihre Individualität unterstreichen. Ausgefallene Produkte, die woanders kaum zu finden sind. Besondere Marken, die es hierzulande noch überhaupt nicht gibt. Shops, die persönlich wirken User kaufen bevorzugt in Shops, die persönlich wirken. Der Macher oder das Team stehen im Vordergrund und verkaufen meist selbstentwickelte oder sehr persönlich ausgewählte Produkte. Nachhaltige Shops Bio-Shops, Vegane-Shops, Öko-Shops oder Shops mit einer sehr nachhaltigen Idee sind ein Grund von den großen, etablierten Playern abzurücken. Geh shoppen und tu Gutes Eine gute Story für einen Shop. Sehr kompetente Shops Manche Shops vermitteln unglaubliche Kompetenz. Entweder durch ihr enormes Sortiment, die geschickte Produktauswahl oder die glaubhafte Historie. Kompetenz ist ein gutes Argument für Käufer. Sympathische Shops Sympathie spielt im Handel eine große Rolle und ist im e-commerce schwer abzubilden. Aber manche Shops sehen unprofessionell aus, um sympathisch zu wirken. Dadurch wird die Zielgruppe erst aufmerksam. 5

7 MIT IHRER STORY ZUR BEGEHRLICHKEIT Shops der Hersteller Direkt beim Hersteller kaufen ist immer ein Magnet. User versprechen sich bessere Preise, eine professionellere Abwicklung oder nur mehr Sicherheit. Wenn die Story klar ist, dann erübrigen sich plötzlich viele Fragen. Soll ich du oder sie zum Kunden sagen, passt ein Black Friday oder Cybermonday zu mir, ist es gut wenn das Sortiment ausgeweitet wird, wie soll ich Facebook nutzen, soll ich ein Blog schreiben. Die Story ist das Fundament Ihres Unternehmens und die Basis für User Experience und letztendlich Webdesign. Das Webdesign folgt der Story und nicht die Story als nachträgliche Ergänzung zu einem fertigen Shop. Nicht jede Entwicklung im Design passt auf jedes Konzept. Die Anforderung Glanceability aber in jedem Fall. 6

8 3 GRUNDANFORDERUNG IHRES SHOPS: GLANCEABILITY

9 GRUNDANFORDERUNG IHRES SHOPS: GLANCEABILITY Wie kann man die Uhrzeit auf einer Uhr am besten darstellen? Ein langer, dünner Zeiger für die Minuten, ein kurzer, dicker Zeiger für die Stunden. Als Ziffern reichen eigentlich die 3, 6, 9 und 12, ergänzt um Striche bei allen 5 Minuten. So kann der User die Uhrzeit erfassen, lesen muss er sie nicht mehr, denn die Darstellung ist gelernt und auf den ersten Blick innerhalb von hundertstel Sekunden erfassbar. Die Uhr ist bestes Beispiel für Glanceability erfassbar auf den ersten Blick. Fasst man alle User Experience Trends zusammen, würde man genau bei diesem einen Wort landen: Glanceability. Alles auf einen Blick! Wie bei der Uhr, beim Cockpit im Auto, beim Smartphone der User muss alle Funktionen und Inhalte auf einen Blick erkennen. Er sollte erkennen was verkauft wird, welche Vorteile der Shop für ihn hat, welche Funktionen und Inhalte zur Verfügung stehen. Besonders durch die mobilen Zugriffe sind diese Übersichtlichkeit und Leichtigkeit des Shops gefragt. Bilden Sie logische Areas in Ihrem Shop. Navigation im Header, Filter in der Randspalte, Informationen im Footer etc Vermischen Sie nicht unterschiedliche Navigationselemente. Es gibt eine Navigation für Produkte, eine für Informationsnavigation und eine Funktionsnavigation. Jede Navigation hat seinen fixen Platz. Auch auf der Detailseite soll es eine Logik geben. Vor allem die Buybox fasst wichtige Informationen zusammen, die für eine Bestellung notwendig sind. Preis, Verfügbarkeit, Lieferzeit, Varianten. Bei der Reduktion von Websites hat die letzten Jahre vor allem Flatdesign und das Material Design von Google die Entwicklungen vorgegeben. 8

10 4 FLATDESIGN DIE NEUE DESIGNSPRACHE

11 GRUNDANFORDERUNG IHRES SHOPS: GLANCEABILITY Flatdesign ist eine neue Designsprache für Websites und Shops, die Lesbarkeit und Übersichtlichkeit enorm erhöhen. Dabei geht es um die Reduzierung von Designelementen es wird bewusst auf realistisch wirkende Texte, Schatteneffekte, Verzierungen aller Art und dreidimensionale Elemente verzichtet. Durch diesen neuen Style sollen wichtige Elemente besser hervorgehoben werden, während Design in der eigentlichen Seite in den Hintergrund rückt. Flatdesign ist einfacher und natürlich schneller, das hat enorme Auswirkungen auf die Ladezeiten von mobilen Endgeräten. Dass Flat nicht gleichzeitig langweilig wirkt, beweist der Shop

12 GRUNDANFORDERUNG IHRES SHOPS: GLANCEABILITY Flatdesign reduziert sogar die Farben. Eine Farbtabelle gibt die Farben vor, die für diesen Designstil geeignet sind. Auf der Website flatuicolors.com kann man diese schnell auswählen und erhält den Farbcode. Schnell merkt man beim Design, dass durch die Farben ein völlig neuer Charakter des Shops entsteht, der an die modernen Seiten Facebook, Google, Facebook & Co. erinnert. Google hat für sich Flatdesign weiterinterpretiert und eine zusätzliche Designsprache definiert. Das sogenannte Materialdesign von Google verwendet mehrere Ebenen und ermöglicht eine realistischere Ansicht. Unter material.google.com gibt es eine umfangreiche Guideline was innerhalb des Konzepts erlaubt ist und was nicht. Welche Designsprache besser gefällt ist Geschmackssache es gibt auf jeden Fall zahlreiche Themes im Flatdesign für PrestaShop. Für einen modern wirkenden Shop sollten Sie überflüssige Grafiken entfernen. Reduzieren Sie das Design um Schatten und Effekte. Nutzen Sie auch Weißflächen für mehr Übersichtlichkeit, reduzieren Sie die Farben und setzen sie den Shop in den Hintergrund was zählt sind Produkte. Verwenden Sie vollfarbige Flächen statt Fotos, die mit dem Shop und den Produkten nichts zu tun haben. Wagen Sie auch mal große Schriftarten und versuchen Sie lange Texte sinnvoll zu gliedern. Das Standardtemplate für PrestaShop 1.7 bietet ein flat design, kombiniert mit Drop-Shadow-Effekten, die eine nahtlose Integration von Schnittstlellen erlauben ohne den Gesamteindruck der dynamischen Elemente zu verlieren. 11

13 5 TYPOGRAPHIE MILESTONE IM DESIGN

14 TYPOGRAPHIE - MILESTONE IM DESIGN Leicht wird übersehen, dass die Typographie eines Shops auch Design ist vielmehr als man denkt. Typographie ist in der Werbung essenziell, um Aussagen hervorzuheben, Inhalte zu strukturieren, Lesbarkeit zu erhöhen. Nur im Shopdesign wurde die Typographie lange vernachlässigt. Auf Google Fonts (fonts.google.com) werden unzählige Schriftarten gezeigt, die problemlos im Web angezeigt werden können. Auf der Seite beautiful Types hellohappy.org/ beautiful-web-type werden eindrucksvoll die Möglichkeiten von Typographie dargestellt. Meistens verwendet man im Flat Design Großbuchstaben und Kontrastfarben, um den Text lesbarer zu machen. Entgegen der Meinung vieler kombinierten sich auch Serifen- oder Handwriting-Fonts optimal mit Flatdesign. Schnell wird klar, dass Grafiken in Shops überflüssig werden und man mit den einfachen Möglichkeiten von Flatdesign und einem guten Typo-Konzept weit mehr machen kann als mit aufwendigen Grafiken. 13

15 TYPOGRAPHIE - MILESTONE IM DESIGN Gutes Beispiel ist sicherlich auch der Sieger der Shop Usability Award 2016 fischkaufhaus.de. Erst die große Typografie gibt dem Shop eine gewisse Einzigartigkeit. 14

16 6 HERO IMAGES DER BLICKFANG

17 HERO IMAGES - DER BLICKFANG Ein Online-Shop ist nicht nur eine Auflistung von einzelnen Produkten, die mit immer gleichen Produktabbildungen dargestellt werden. Um die Besonderheit des Shops darzustellen, Situationen und Einstiege erkennbar zu machen oder Produkte vorzustellen sind Hero Images sinnvoll. Ein Hero Image ist ein riesiges Bild, das teilweise den kompletten Monitor ausfüllt, um Aufmerksamkeit zu erregen. Kombiniert mit einer Kernaussage bietet das Bild einen optimalen Einstieg in den gesamten Shop, einzelnen Kategorien oder Produkte. 16

18 HERO IMAGES - DER BLICKFANG Hero Images ist eine gute Alternative zu typischen Shopstartseiten. Diese bestehen i.d.r. aus einem Produktslider und einzelnen Angeboten. Studien haben jedoch ergeben, dass die Silder überhaupt nicht so gut funktionieren, weil sie sich zu schnell oder auch zu langsam drehen. Die Vorstellung einzelner Produkte ist ebenso ein Glücksspiel wer braucht schon was zufällig vorne steht. Eine der Basis Prinzipien guter Usability ist, dass ein System dem User auf Aktionen eine eindeutige Rückmeldung geben soll. Das System meldet, wenn ein Artikel in den Warenkorb gelegt wurde, wenn die Merkliste benutzt wurde oder ein Artikel geliked wurde. 17

19 7 MICRO INTERACTIONS DER SHOP REAGIERT

20 MICRO INTERACTIONS - DER SHOP REAGIER Eine der Basis Prinzipien guter Usability ist, dass ein System dem User auf Aktionen eine eindeutige Rückmeldung geben soll. Das System meldet, wenn ein Artikel in den Warenkorb gelegt wurde, wenn die Merkliste benutzt wurde oder ein Artikel geliked wurde. Micro Interactions sind kleine Animationen, die genau dieses Feedback geben können. Die Animationen werden heute bereits massiv in Apps von Smartphones verwendet, kommen aber zunehmend auf normale Website und Online-Shops. Anlässe gibt es viele. Die Micro Interactions geben nicht nur Feedback sondern sollen auch Spaß machen und User für die durchgeführten Aktivitäten belohnen. Ein Shop wird dadurch lebendiger und sympathischer. Die einfachsten Micro Interactions sind ein Layer, der per MouseOver öffnet, ein Effekt bei einem Button, ein MouseOver Effekt bei einem Link. Typische Micro Interactions sind aber auch Ladebalken, wenn beispielsweise ein Bild geladen wird oder Anzeigen, die die Artikel im Warenkorb mitzählen und anzeigen. Sehr ansprechender MouseOver Effekt in Produktlisten 19

21 MICRO INTERACTIONS - DER SHOP REAGIER Clevere Micro Interaction im Warenkorb. Anzahl der Artikel wird angezeigt, per MouseOver öffnet ein animierter Warenkorb. Beispiele: Im Standard-PrestaShop 1.7-Template stehen blaue Call-to-Actions Elemente im Kontrast zu dem weißen und grauen Hintergrund, um die Sichtbarkeit und Identifizierbar zu verbessern. 20

22 8 MOBILE THINKING MEHR ALS EIN RESPONSIVE DESIGN

23 MOBILE THINKING - MEHR ALS EIN RESPONSIVE DESIGN Kaum ein Designer wagt heute noch ein Design, das nicht auch mobilefähig ist. Responsive Design ist die Methode, die mit überschaubarem Aufwand einen Online-Shop auf verschiedene Endgeräte skaliert und somit nutzbar macht. Im responsive Design sind daher auch fast alle PrestaShop Templates angelegt und erfüllen so die Basics für einen mobilen Shop. Mit einem responsive Design ist es jedoch nicht getan, denn mobile ist mehr als eine Technologie. Mobile First ist der häufig gefragte Ansatz. Die Konzeption und Planung eines Shops beginnt quasi beim kleinsten Device dem Smartphone. Tablet und Desktop werden sukzessive erweitert. Das ist jedoch nicht nur Arbeit des Designers sondern auch Aufgabe des Shopbetreibers. Häufigstes Problem ist nämlich die Navigation, die typischerweise am Desktop entwickelt wurde und selten auf dem Smartphone richtig zu bedienen ist. Auch Formulare insbesondere im Bestellprozess machen das mobile Shoppen wenig attraktiv. Die perfekte User Experience kann es daher nur geben, wenn der Shopbetreiber mobil denkt und immer nach Lösungen sucht den Shop einfacher und intuitiver zu machen. 22

24 9 ONEPAGE CHECKOUT EINFACHER BESTELLEN

25 ONEPAGE CHECKOUT - EINFACHER BESTELLEN Im Frühjahr hat Amazon seinen Checkout umgestellt und führt User jetzt im OnePage Checkout durch den Bestellprozess. Damit könnte die Diskussion nach dem besseren Checkout beendet werden. Eine Seite oder mehrere Seiten am Stück zumindest Amazon hat sich für eine Seite entschieden. Die Vorteile liegen auf der Hand: Der Checkout wirkt kürzer, ist auf mobilen Endgeräten deutlich übersichtlicher und nimmt das Gefühl eines langen Prozesses bis zum Bestellabschluss. User wollen generell Aufwand vermeiden, so ist der Anschein des geringen Aufwands bereits die Chance für einen höhere Conversion Rate. PrestaShop 1.7 bietet einen One- Page-Checkout, der sich an die Anforderungen eines responsive Designs für mobile Endgeräte anpasst. 24

26 ÜBER UNS PrestaShop wurde 2007 gegründet und stellt eine kostenlose E-Commerce- Software zur Verfügung, die auf dem innovativen Open Source-Prinzip basiert. Derzeit setzen mehr als E-Commerce-Shops in 190 Ländern PrestaShop ein. Das Unternehmen und seine Community ermöglichen es den E-Commerce- Händlern, schnell und kostengünstig einen professionellen und dabei individuellen Onlineshop zu erstellen. PrestaShop steht auf der 2016 Inc. Liste der 5000 am schnellsten wachsenden Unternehmen Europas und erhielt den CMS Critic Award als beste E-Commerce-Lösung für KMUs. PrestaShop ist mit einem eigenen Büro in Berlin vertreten, von wo aus der deutsche, österreichische und Schweizer Markt betreut wird. Das Unternehmen hat Niederlassungen in den USA und Frankreich und wird von XAnge Private Equity, Seventure Partners und Serena Capital finanziert. Die Shoplupe GmbH ist das Beratungsunternehmen für e-commerce Versandhändler. Mit unserer Beratungsexpertise unterstützen wir Shop-Betreiber bei der konzeptionellen Weiterentwicklung ihrer Online-Shops. Die Nutzerfreundlichkeit des Shops steht dabei als zentraler Erfolgsfaktor im Vordergrund. Mit klarem Menschenverstand wollen wir deshalb Shop-Betreiber praxisorientiert und realitätsnah bei ihren Herausforderungen unterstützen. 25

27 NÄCHSTE SCHRITTE STARTEN SIE EINEN ONLINESHOP MIT EINER PERFEKTEN USER EXPERIENCE PRESTASHOP 1.7 HERUNTERLADEN TEILEN 26