FROM CACHE - de_header

Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop

Gabe
Shopify Staff
Shopify Staff

Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop zu entwerfen, der bei deinen Kunden gut ankommt

(Alle Bilder stammen von Wikimedia Commons oder einem Testshop)

 

Dieser Leitfaden ist der 1. Teil von zwei Leitfäden zum Thema wie die Hauptprinzipien des UX Design Euch beim Aufbau und der Gestaltung des Online Shops helfen können die Kundenerfahrung im Shop zu verbessern.

 

Es liegt in unserer menschlichen Natur, Dinge für andere so zu gestalten, wie wir es für das Beste halten. Und oft haben wir ein fundiertes Wissen und wissen viel über das Produkt oder die Website, die wir für unsere Kunden erstellen. Die UX-Prinzipien können uns jedoch dabei helfen, unseren Blickwinkel zu erweitern und unsere Sichtweise zu ändern, um etwas zu bauen, das unsere Kunden wirklich anspricht, und zwar nicht aus unserer Perspektive, sondern aus der Sicht des Nutzers

 

Oft ziehen wir das Pferd von hinten auf - wir wollen zuerst Besucher in den Laden locken und konzentrieren uns auf das Marketing, anstatt uns darauf zu konzentrieren, einen Shop zu schaffen, das unsere Kunden anspricht. Sollten wir uns zuerst auf unsere Werbung oder auf das Erscheinungsbild unseres Ladens konzentrieren, um das Kundenerlebnis zu verbessern? Die Daten zeigen uns, dass das Verhältnis etwa 60 zu 40 ist -> Marketing vor Shop Design. Wir neigen dazu uns auf unsere Sichtweise zu konzentrieren, anstatt auf die des User.

 

Es gibt jedoch einfache, erprobte Methoden, die du anwenden kannst (sowie beste internationale Praktiken), die dir helfen dich auf den Besucher zum Shop zu konzentrieren, anstatt auf das schnelle Geld. "Warum sollte ich das tun?" fragst du? Nun ja, vielleicht verdienst du später sogar noch mehr Geld, sobald du die Früchte deiner Arbeit erntest...

 

Es gibt viele etablierte Methoden, die dir zur Verfügung stehen, wie z.B. das A/B-Split-Testing bei dem du statistische Tests nutzen kannst, um datengestützte Entscheidungen zu treffen. Außerdem gibt es alte japanische Methoden wie "Affinitätsdiagramme", empathy maps und User Journey-Mapping, die dir helfen, qualitative Daten und Perspektiven zu sammeln, von denen du vielleicht bisher nicht einmal wusstest! Darum geht es bei den UX-Prinzipien auf die ich weiter unten näher eingehen werde.

 

Bei UX Design geht es um "Design Thinking". Es ist ein Problemlösungsansatz, bei dem du Nutzerprobleme identifizierst und Lösungen entwickelst, um diese Probleme zu lösen und positive Emotionen bei den Nutzern und Nutzerinnen zu erzeugen. Außerdem reduzierst du den Aufwand und die Mühen für deine Kunden mit der einfachen Formel:

  • Funktionales Website-Design + ästhetisches Website-Design = Erlebnis design 

 

Beim funktionalen Design geht es darum, was deine Website technisch alles kann, welche Möglichkeiten sie bietet und wie schnell sie lädt usw. Beim ästhetischen Design geht es um das Aussehen deines Ladens, dein Branding, den Laden und die Attraktivität deines Produkts. Beim Erlebnis design geht es darum, wie sich die Nutzung deines Ladens anfühlt, und hier gibt es die Regel: Perfektes ästhetisches Design ohne ein gutes Erlebnis design ist nicht viel wert, denn negative Emotionen können einen negativen Multiplikator Effekt auslösen. 

 

Somit muss man sich folgende Fragen stellen:

  • Verringert dein Ladendesign den Aufwand für deine Kunden? 
  • Können sie mit geringem Aufwand und und über einen kurzen Weg dorthin gelangen, wo sie hinwollen? 

Experience-Design ist das Herzstück von UX und umfasst verschiedene Disziplinen wie Psychologie, Anthropologie, Soziologie, Informatik, Grafikdesign, Industriedesign und Kognitionswissenschaft. Das Ziel von UX ist es, die Logik einer Anwendung aus der Perspektive des Nutzers zu betrachten. 

 

Laura Klein hat es am besten ausgedrückt: "UX-Design ist der Prozess, mit dem festgelegt wird, wie das Erlebnis sein wird, wenn ein Nutzer mit deinem Produkt oder deiner Website interagiert." UX ist also ein Problemlösungsansatz, denn deine Website muss ein Problem lösen oder eine Lücke schließen. Die Nutzer/innen wollen mit möglichst wenigen Schritten und Arbeitsaufwand an ihr Ziel gelangen, daher ist der User Flow sehr wichtig. 

 

Was macht also ein schlechtes Nutzererlebnis aus?

 

Der Hauptgrund dafür, dass Kunden deine Website verlassen, ist oft der Level von "Verwirrung" und die Ungewissheit darüber, was man als nächstes machen muss oder wo man sich gerade befindet, was der genaue Status unseres Fortschritts ist und was das Anklicken einer bestimmten Schaltfläche bewirkt. 

 

Die Nutzer haben oft Angst auf ein Icon oder ein Button zu klicken, weil sie nicht wissen was dann passiert bzw. sie sind dann schnell frustriert, weil sie nicht wissen, was sie tun sollen oder wo sie sich zu einem bestimmten Zeitpunkt im Klick-Trichter befinden. 

 

Nach den 10 Usability-Heuristiken von Nielsen gibt es einige grundlegende Regeln, die dich bei der Gestaltung deiner Website oder deines Shops so unterstützen können, dass der Aufwand für den Nutzer reduziert und die Benutzerfreundlichkeit sowie die Wahrscheinlichkeit eines tollen Erlebnisses erhöht werden.

 

Das Prinzip der Denkmodelle und Mindsets... und das Mietauto

Wir alle bewegen uns in unserem Umfeld mit vorgefassten Vorstellungen, wie die Dinge zu funktionieren haben. Unser Gehirn arbeitet auf diese Weise, um den Kraftaufwand zu reduzieren und um so besser mit der Welt und unserer Umgebung interagieren zu können. Wir wissen zum Beispiel, dass ein Schlüssel in ein Schlüsselloch gesteckt werden muss, wenn wir eine Haustür aufschließen möchten oder wenn wir den Schlüssel in das Zündschloss stecken, um das Auto zu starten, können wir damit losfahren. Und wer am Flughafen in einen Mietwagen einsteigt, braucht eine Weile, um sich mit dem neuen Auto in dem er sitzt, vertraut zu machen. Bei E-Autos gibt es keine Zündung mehr  und Menschen, die zum ersten Mal in ein E-Auto einsteigen, werden etwas verwirrt sein. 

 

User Friction entsteht oft, wenn ein Denkmodell nicht zum Design des Produkts passt, das du zum ersten Mal benutzt, zum Beispiel: 

 

  • wenn Amerikaner in Europa Autos mit Gangschaltung fahren.
  • man ein Blackberry benutzt, wenn man iPhone gewohnt ist.
  • Oder ein MacBook benutzt, wenn man Windows gewohnt ist oder umgekehrt.

 

Ein paar weitere UX-Prinzipien, die dir helfen können, einen großartigen Laden zu bauen und die Konversionen zu steigern

 

Prinzip der Statusaktualisierung (status updating): Ein Nutzer möchte immer wissen, wo er sich in einem Klicktrichter befindet und welchen Status seine Aktionen haben. 

 

 

Gabe_0-1649427027878.png

 

 

 

Wenn ein Nutzer an einen Punkt kommt an dem er sich fragen muss "Was muss ich jetzt tun?" oder "Was passiert jetzt?", dann hast du ein Problem, denn das führt oft zu dem was wir Rage-Quitting oder "Wut Abbruch" nennen. Dieses Problem lässt sich lösen, indem man den Nutzern klar mitteilt in welchem Zustand sich das System befindet. Ein  Beispiel dafür ist der Checkout-Prozess, vor allem dann wenn man auf eine externe Zahlungsseite weitergeleitet wird.

 

Deshalb sollte der Nutzer immer die volle Kontrolle und die Freiheit haben einen Prozess abbrechen zu können, eine Aktion rückgängig zu machen oder dorthin zurückzukehren, wo er vorher war, z. B. wenn man ein Produkt in den Einkaufswagen gelegt hat.

 

Der Zurück-Button des Browsers ist in diesem Fall KEINE gute Wahl für die Benutzerfreundlichkeit. Es sollte eine klar gekennzeichnete Schaltfläche (mit einem guten Design) geben, das dir ermöglicht eine bestimmte Aktion zu verlassen und zu weiteren Aktionen zurückzukehren ohne, dass du auf den Browser Zurück-Button klicken musst.

 

Viele Anwendertests können solche Situationen vorbeugen, indem du die User Journey selbst testest oder einige Testpersonen dazu bringst dein Produkt oder deine Website zu testen und dir damit wertvolles Feedback geben.

 

Verwende Progress Bars (Entwicklungsbalken) oder HInweise oder Fortschrittsanzeigen, die deinen Nutzern besonders gut helfen. Klare Schaltflächenbeschriftungen und Alt-Texte sind ebenfalls gut dafür geeignet. Der/die Nutzer/in muss jedoch immer wissen, wo er/sie sich im Arbeitsablauf befindet und wie der aktuelle Status ist. Siehe einige Beispiele unten).

 

Visuelle Schritt-für-Schritt-Anleitungen oder Infografiken auf der Homepage, die den Arbeitsablauf einfach und visuell ansprechend darstellen, können am Anfang ebenfalls sehr hilfreich sein, damit der Nutzer weiß, was zu tun ist. Zu diesem Zweck kannst du sogar Kinder ein Storyboard oder eine Vorlage im Comic-Stil zeichnen lassen, das du dann in eine Online-Grafik umwandelst, und das Erlebnis der Nutzer/innen in deinem Laden deutlich verbessert.

 

 

Gabe_1-1649427063439.png

 

Gabe_2-1649427067532.png

 

 

 

Diese Funktion ist besonders hilfreich bei den notwendigen Schritten im Checkout Bereich, wo eine Fortschrittsanzeige dem Nutzer helfen kann. Wenn du eine bestimmte Seite oder ein Online-Tool öffnest oder eine Aktion durchführst, die länger dauert als die übliche Ladegeschwindigkeit einer Seite, dann zeigt dir ein Ladefortschrittsbalken am oberen Bildschirmrand an, was gerade passiert. Der Balken zeigt klar an, wie viel Zeit du noch brauchst, um die Schritte abzuschließen. Außerdem wird angezeigt, welche Schritte sie bereits abgeschlossen haben und welche noch ausstehen.

 

Gabe_3-1649427101268.png

 

 

Das Prinzip des unflexiblen Designs: Dies führt zu großer Frustration oder Verwirrung und passiert dann, wenn Nutzer ihre Daten in Eingabefelder eingeben müssen und rote Fehlermeldungen erhalten, weil sie sie nicht entsprechend den Konventionen des Eingabefeldes etwas korrekt eingegeben haben. Ein typisches Beispiel ist, wenn das Eingabefeld für das Passwort oder die Telefonnummer eine für den Nutzer unklare Fehlermeldung ausgibt wie "Bitte geben Sie eine korrekte Telefonnummer ein." Der Nutzer wird sich fragen: "Wie soll eine korrekte Telefonnummer aussehen?" und dabei den Frust steigen lassen, da dies in den meisten Fällen nicht klar erklärt wird.

 

 

Gabe_5-1649427145532.png

 

 

 

Das Prinzip der schrittweisen Offenlegung: Wir, die Designer unserer Website oder unseres Produkts, geben oft von Anfang an viel zu viele Informationen (das sog. information frontloading), was eigentlich gut gemeint ist. Aber warum nicht dem Nutzer die Informationen geben, die er braucht, wenn er/sie sie braucht und NICHT, wenn er/sie sie nicht braucht? Das kannst du ganz einfach erreichen, indem du den Nutzern zunächst nur das gibst, was sie benötigen, und dann nach und nach weitere Informationen einfügst, sobald sie gebraucht werden.

 

Deshalb ist weniger mehr. Die richtigen Informationen zur richtigen Zeit und die Bereitstellung der notwendigen Informationen, dann wenn der Nutzer sie braucht, ist hier entscheidend. Beispiel: sollen Popup-Newsletter gleich zu Beginn des Besuchs einer Website erscheinen oder erst später, wenn der Nutzer deine Produkte bereits gesehen und Interesse entwickelt hat?