FROM CACHE - de_header

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

Gabe
Shopify Staff
Shopify Staff

Teil 2 - 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 2. 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. 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. 

 

Das Prinzip des WYSIWYG - “what you see is what you get” und wie es beim gestalten deines Shops und deiner Produkte helfen kann die Retourenquoten zu reduzieren

 

Produkte in unseren Shops sind digitale verpixelte Repräsentationen der echten und physischen Produkte die an die Kunden per Post verschickt werden. Oft sehen die Produkte beim auspacken nicht so aus wie die Produkte die man im Shop grafisch darstellt und das kann auch bei manchen Kunden leicht zu Reklamierungen führen. Das passiert vor allem bei Bekleidungsprodukten und Apparell und das kann man vermeiden wenn man die Produkte im Shop so nah der Realität darstellt wie möglich sowie den Versand ganz deutlich erklärt und hier sind ein paar Wege das zu machen:

 

  • Viel in die Qualität der Produkte- und Bekleidungs-Fotografie investieren.
  • Die Produkt auch in einem eingebetteten Video in Aktion zeigen, mit einem Modell oder Vorzeiger oder wie es in der Werkstatt produziert wird. Das baut Vertrauen auf.
  • Weitere Infos zum Produkt in den Beschreibungs-Tabs anzeigen wie Grössentabellen.
  • Ganz genau Versandzeiten sowie die MwSt. usw. anzeigen um Enttäuschungen beim Checkout und Versand zu reduzieren.
  • Und jegliche andere Dinge die helfen können die Diskrepanz zwischen dem digital-dargestellten Produkt und dem realen physischen Produkt zu eliminieren

Das Prinzip des Information Chunking oder Gruppierung: Unser Gehirn neigt dazu, sich Dinge in Gruppen oder Blöcken zu merken und nicht in ihren einzelnen Bestandteilen. Beispiele dafür sind lange Daten- oder Zahlenketten, die in Stücke zerlegt werden, wie z. B. IBAN- oder Kreditkartennummern, die in 4x4-Nummernblöcken unterteilt werden.

 

Beim Information Chunking geht es also darum, dass sich die Nutzer/innen Informationen leichter merken oder Informationen wie ihre Kreditkartennummern eingeben können. Hier teilst du die Informationen einfach in kleine Gruppen ein, z.B. Vierergruppen: aaaa-bbbb-cccc-dddd oder deine Handynummer aaa-bbb-cc-dd

 

Das Prinzip der Informationsüberlastung oder TMI (too much information): Die Überlastung des Gehirns ist oft darauf zurückzuführen, dass zu viele Informationen (TMI) auf den Nutzer geworfen oder zu Beginn des Nutzererlebnisses "vorangestellt" werden, und Nutzer verabscheuen zu viele Informationen! Hier musst du den Sweet Spot finden. Ein gutes Sprichwort lautet: "Wenn du einer Person 10 Dinge erzählst, wird sie sich an nichts erinnern", also halte die Informationen kurz, einfach und in maximal 6 klaren Listenpunkten. 

 

Das Prinzip der Muster und Anti-Muster:Unerwartetes oder kontraintuitives Systemverhalten ist nicht gut. Deshalb gilt die Faustregel: Je weniger Schritte es braucht, um zum Ziel zu gelangen, desto besser ist die UX. Formel -> weniger Schritte = weniger potenzielle UX-Reibung. Anti-Muster sind wie längere unnötige Wege oder seltsame und unerwartete Systemverhaltensweisen, die in deine Website eingebaut sind -> siehe das Beispiel des ausgetretenen Gartenpfads unten. Im Grunde genommen musst du den Gartenweg so gestalten, wie es der Nutzer will und nicht so, wie du es willst, dann wirst du erfolgreicher sein:



Gabe_6-1649427218672.png

 

Patterns (“pull”) versus anti-patterns (“push”)

 

Das “Paretoprinzip” oder UX-Prinzip “Paradoxon der Besonderheit” (“paradox of specificity” oder zu viele Funktionen, Seiten, Produkte oder Kollektionen in deine Website zu packen): Die Erfahrung und die Daten zeigen uns, dass sich Produkte besser verkaufen, wenn du nicht zu viele Funktionen in deine Website packst. Behalte immer die Regel im Kopf, dass 20% der Funktionen auf deiner Website von 80% der Nutzer/innen genutzt werden und 80% der Funktionen von 20% der Nutzer/innen.

 

Ein guter Weg, um herauszufinden, ob du gegen dieses Prinzip sowie andere verstoßen hast, ist es, das Feedback der Nutzer/innen einzuholen und eine zweite Meinung einzuholen. Worum geht es bei deiner Kernidee oder Marke, und kannst du das in einer kurzen und konsequenten Weise zeigen? Wir wollen die Nutzer/innen nicht überfordern, indem sie sich durch zu viele Funktionen quälen müssen.

 

Einfachheit/Simplicity ist daher der Schlüssel und ein minimalistisch gestalteter Laden ist ein guter Weg. Läden, die mit Zeug vollgestopft sind und vor Lärm schreien, mindern das Nutzererlebnis und lenken nur vom Wesentlichen ab. Behalte den Inhalt und die visuelle Gestaltung der Benutzeroberfläche bei und konzentriere dich auf das Wesentliche. Lass nicht zu, dass unnötige Elemente die Nutzer von den Informationen ablenken, die sie wirklich brauchen. Setze Prioritäten bei den Inhalten und Funktionen, um deine Hauptziele zu unterstützen.

 

Das Prinzip der Affordanzen: Affordanzen sind die Qualität oder Eigenschaft eines Objekts, die seine Nutzungsmöglichkeiten definiert oder deutlich macht, wie es genutzt werden kann oder sollte. Wir setzen uns auf einen Stuhl, weil diese Affordanzen ziemlich offensichtlich sind und unsere Intuition uns hilft, uns in der Welt der Dinge zurechtzufinden. Dein Shop und seine Funktionen müssen wie ein Stuhl sein - so intuitiv wie möglich und der Nutzer muss in der Lage sein, sich zurechtzufinden: 

 

  • Was kann das Produkt oder die Webseite? 
  • Was muss ich tun, um es zu benutzen? 
  • Was ist der erste Schritt, den ich machen muss? 

 

Visuelle Hinweise sind hier wichtig, denn sie zeigen dem Nutzer, wie eine Website oder ein Produkt bedient werden sollte. Der Lackmustest hierfür wäre, ein Kind interagieren zu lassen und zu sehen, wie es auf die visuellen Hinweise reagiert und Dinge und Knöpfe drückt. Affordanzen berücksichtigen alte Gewohnheiten ("mentale Modelle") der Nutzer/innen, die ihnen entweder helfen oder sie bei der Nutzung deiner Website behindern können. 

 

Affordanzen erfordern, dass die Benutzerfreundlichkeit deiner Website visuell offensichtlich ist, und sollten so viele alte Benutzergewohnheiten wie möglich in das Design einbeziehen, damit der Benutzer mit einem Blick auf den Bildschirm verstehen kann, was der nächste Schritt sein wird. Das hilft, die Dinge wahrnehmbarer, auffindbarer, offensichtlicher und natürlicher zu machen, wie du in diesen Beispielen sehen kannst:

 

08-15-10463-24727

 

 

User sollen also von Anfang an nicht gezwungen werden alles von neu lernen zu müssen Du kannst gerne die vielen Online-Musterbibliotheken verwenden da diese Dir helfen können, schneller Konventionen zu erkennen sowie dir einen guten Ausgangspunkt für deine eigenen Entwürfe zu bieten.

 

Das Prinzip der effektiven Tool-tipps: Es gibt verschiedene Arten von Inline-Hilfe-tipps und Tool-tipps, die du deinen Nutzern anbieten kannst, wenn sie mit deiner Website interagieren. Wichtig dabei ist, dass die Hilfe- oder Tooltips den Nutzer nicht von der Seite wegführen, sondern bei jeder Aktion erscheinen, die der Nutzer durchführt. Sie stehen dem Nutzer also zur Verfügung, sind aber nicht aufdringlich oder hinderlich und kontextbezogen, d.h. sie erscheinen nur dann auf dem Bildschirm, wenn sie gebraucht werden:

 

 

Gabe_9-1649427401946.png

 

Gabe_10-1649427408012.png

 

 

 

Das Prinzip der Vorhersehbarkeit: Bevor der Nutzer mit deiner Website interagiert, muss er vorhersehen können:

 

  • Wie lange wird es dauern, eine Aufgabe zu erledigen? 
  • Welche Schritte sind erforderlich? 
  • Was wird das Ergebnis sein? 
  • Was passiert danach? 

Das Prinzip der etablierten Konventionen: Dieser hilft dem Benutzer Zeit zu sparen,, indem bereits etablierte Konventionen in das Design übernommen werden. Ein typisches Beispiel sind die MS Word Ribbons, die genauso aussehen wie die Vorgängerversionen und wie die Ribbons anderer Microsoft Office-Anwendungen. Diese müssen daher in das Design integriert werden, damit die Benutzer/innen nicht viele neue Dinge lernen müssen, wenn sie ein Produkt oder eine Website benutzen:

Gabe_11-1649427446968.png

 

 

 

Das Prinzip des effektiven Feedbacks: Feedback bestätigt unsere Handlungen und ermutigt uns mit dem nächsten Schritt fortzufahren, da es uns verdeutlicht, was wir als Nächstes tun müssen, denn ohne regelmäßiges Feedback sind wir eher verwirrt.

 

Das Prinzip der Einschränkung: Dieses Prinzip hilft uns, die Aufgabe so zu erledigen, indem es unsere Möglichkeiten kontrolliert und wir so auf dem richtigen Weg bleiben. Beispiel: Wenn ich eine Produktmenge über einen Mengenregler (quantity selector) auswähle, bekomme ich auf meinem Handy entweder einen Ziffernblock oder ein +/- Symbol und kein Dropdown-Menü. Wenn ich die Zahl selbst eingeben muss, könnte ich sehr große Zahlen oder Zahlen mit Dezimalstellen eingeben.

 

Das Prinzip der Fehlerverzeihung: Ein gutes UX-Design rechnet damit, dass Nutzer Fehler machen und verzeiht sie, indem es starke Affordanzen bietet. Es ermöglicht uns, unsere Handlungen rückgängig zu machen, z. B. wenn wir an der Kasse sind und vergessen haben etwas einzugeben. Auch hier ist der Zurück-Button des Browsers keine gute Lösung, da er eine Seite neu laden kann, ohne dass wir vorher zur Bestätigung aufgefordert werden. Ein anderes gutes Beispiel ist, wenn wir vergessen haben eine Datei an eine E-Mail anzuhängen, bevor wir sie abschicken, und die Meldung "Haben Sie vergessen, eine Datei anzuhängen?" erhalten.

 

Das Prinzip des Hick'schen Gesetzes (keeping it simple!): Überfordere deine Nutzer nicht mit Wahlmöglichkeiten und verschiedenen Aktionsmöglichkeiten. Halte die "Analyse-Lähmung" in Grenzen und finde das richtige Gleichgewicht. Verschiebe einige der Entscheidungen auf einen späteren Schritt, wenn sie nicht sofort notwendig sind. Das trägt zu einem reibungsloseren Ablauf der Schritte bei. 

 

 

Gabe_12-1649427475534.png

 

 

Das Prinzip des Fitt'schen Gesetzes: Es ist effizienter, größere und näher gelegene Ziele oder Schaltflächen zu treffen als kleinere, weiter entfernte Ziele oder Schaltflächen. Gestalte deinen Shop so, dass du davon ausgehst, dass deine Nutzer/innen ihn mobil und mit einer Hand bedienen können. Halte also die Dinge so nah wie möglich beieinander und für die einhändige Bedienung mit dem Daumen, z.B. sollten Call-to-Action (CTA)-Buttons leicht mit einem Finger zu erreichen sein: 

 

 

Gabe_13-1649427508217.png

 

 

Das Prinzip der Ausrichtung: Websites können gut gemacht aussehen und zeigen, dass viel Liebe in ihre Erstellung geflossen ist. Andere können aber auch schnell den Eindruck erwecken, dass nicht viel Zeit und Mühe in sie investiert wurde., Wenn zum Beispiel der Inhalt einer Webseite in geraden Linien oder geordnet ist, mit gleich großen Bildern oder Bildern, die schön aneinander ausgerichtet sind, auch wenn sie in einer Collage sind, hinterlässt das  einfach einen besseren Eindruck und weniger den einer schlampigen oder nachlässigen Gestaltung. Außerdem erleichtert es das Verstehen und die Verständlichkeit und hilft Fehler zu vermeiden. Unten siehst du ein Beispiel dafür, wie es NICHT gemacht werden sollte und wie es weiter unten gemacht werden kann: 

 

 

Gabe_14-1649427588968.png

Gabe_15-1649427593711.png

 

 

Bei der Anordnung der Beschriftungen ist es gut, wenn du sie links, rechts oder oben ausrichtest. Oben ausgerichtet ist eine effektivere und ermöglicht eine effizientere Nutzung des Platzes, wie du hier sehen kannst:

Gabe_16-1649427628925.png

 

 

Gabe_18-1649427670346.png

 

Gabe_19-1649427675461.pngGabe_20-1649427744636.png

 

Das Prinzip der visuellen Hierarchie: Es ist wichtig klar zu kennzeichnen, welche Elemente auf dem Bildschirm am wichtigsten sind, da das bloße Auge diese ziemlich schnell erkennt. Du kannst Farbe und größere Schriftarten verwenden, um die wichtigsten Informationen oder Aktionen zu priorisieren. Zum Beispiel stehen H1-Titel visuell höher als H2, H3, H4, H5 usw. Ungelesene E-Mails werden in Schwarz hervorgehoben, wie du in diesem Beispiel sehen kannst:

 

 

Gabe_21-1649427845977.png

 

Das Prinzip der Inline-Validierung: Diese Technik erhöht nachweislich die Ausfüllrate, verkürzt die Bearbeitungszeit und reduziert die Fehlerquote erheblich. Wenn du zum Beispiel eine E-Mail oder ein gültiges Passwort eingibst, wird dir angezeigt, ob dein Passwort das erforderliche Format oder die Mindestanzahl von Zeichen hat:

 

Gabe_22-1649427867495.png

 

Das Prinzip der effektiven Fehlerbehandlung: Während der/die Nutzer/in etwas tut, sage ihm/ihr klar, wo der Fehler aufgetreten ist und was schief gelaufen ist, sowie was der/die Nutzer/in tun muss, um ihn zu beheben. Unten siehst du ein schlechtes Beispiel, bei dem der Fehler erst auftritt, wenn du schon alles gemacht hast, und nicht während du es machst: 

 

 

Gabe_23-1649427896428.png

 

Forschung und Recherche betreiben, um die UX in deinem Laden zu verbessern

 

Du kannst sowohl quantitative als auch qualitative Forschung betreiben, um die Customer Journey zu untersuchen und zu testen und sie mit einem Storyboard und einigen Flussdiagrammen abzubilden. Auf diese Weise findest du heraus, ob den Kunden klar ist, was dein Laden ihnen bietet, und findest gleichzeitig heraus, was deine Kunden wollen. 

 

Zuerst musst du dir deinen Laden oder deine Produkte bildlich vorstellen. Ist dein Laden begehrenswert, rentabel und machbar? Forschung ist der erste Schritt im Problemlösungsprozess und wird oft zusammen mit den Kunden durchgeführt, um das Problem zu verstehen, denn wir können die Probleme nicht lösen, wenn wir nicht wissen was sie sind. UX-Design ist evidenzbasiert, d. h. daten- und forschungsbasiert und Entscheidungen werden auf der Grundlage der Forschung getroffen. UX ohne Recherche ist KEINE UX.

 

Empathy Maps (wie oben in der Einleitung beschrieben) helfen dabei mehr Sinnhaftigkeit in die Dinge zu bringen und bessere Designentscheidungen zu treffen. Sie helfen uns, die von den Nutzern gewonnenen Erkenntnisse darzustellen, indem wir Fragen stellen wie: 

 

  • Was sagt der Nutzer? 
  • Was denkt der Nutzer? 
  • Was fühlt der Nutzer? 
  • Was tut der Nutzer?
  • Was sind die Ziele des Nutzers?

 

Eine gute Möglichkeit damit anzufangen, ist die Darstellung der Customer Journey mit Hilfe von Flussdiagrammen und Grafiken bei denen Rechtecke den Bildschirm darstellen, Rauten Entscheidungen wie "eingeben" oder "löschen" und Pfeile diese miteinander verbinden und die Flussrichtung anzeigen. Ein Beispiel findest du hier:

 

 

Gabe_24-1649428150079.png

 

 

Hier ist ein Beispiel für eine Empathiekarte, die auf einem Whiteboard mit farbigen Post-it-Zetteln erstellt wurde und in der du die Hauptkategorien der Quadranten rund um den Nutzer abbildest: 

 

  • Die mentalen Modelle des Designers und des Nutzers und ihre Abweichungen bzw. Unstimmigkeiten.
  • Was der Nutzer wissen möchte.
  • Die Vorteile, derer sie sich nicht bewusst waren/sind.
  • Alle Dinge, die die Nutzer verwirren.
  • Und alle anderen Probleme, die im Laden und beim Kauf eines Produkts auftreten.
 

Weiteres Lesen:

 

Die Disziplin des UX-Designs umfasst also viele verschiedene Ansätze und Prinzipien. Schauen wir uns einige davon an, um das Gesamtbild besser zu verstehen. Bevor du das tust, kannst du dir auf dribbble.com einige tolleBeispiele ansehen. Hier bekommst du einen guten Überblick wie in deinem Shop 1) deine Produkte und dein Branding wirklich repräsentiert werden und 2) deinem Kunden ein Erlebnis mit Wow-Faktor geboten werden kann. Du kannst auch unsere eigenen Shopify-Themes nach Branchen filtern und sie hier durchstöbern. Siehe weitere Tipps dazu hier:

 

 

Ein tolles Buch zu diesem Thema: "Don't make me think!" von Steve Krug