CX/UX/UI-Unterschiede & wie du mit UX dein Onlineshop-Erlebnis optimierst

Tipps zur Optimierung der User Experience (UX) deines Onlineshops inkl. Vorlagen und Beispielen.

Was ist User Experience?

Der Begriff User Experience (UX) oder zu deutsch “Nutzererlebnis/Nutzererfahrung”, beschreibt das Erlebnis, eines Users bei der Nutzung einer/eines Produktes/Webshops/Website.

Deine UX ist gut, wenn die subjektive Wahrnehmung eines Users deiner Website gegenĂŒber positiv ist. Zudem sind technische sowie optische Faktoren relevant fĂŒr die optimale UX. Können deine User deinen Shop fast intuitiv mit Hilfe von gutem Design bedienen und spielt des Weiteren die Technik mit, bist du auf dem besten Weg zu einer guten Nutzererfahrung. Wieso ist UX fĂŒr deinen Shop, Website oder Produkt so wichtig?

Eine optimale User Experience fĂŒhrt dazu, dass Besucher auf deiner Seite bleiben, deine Produkte oder Dienstleistungen kaufen und spĂ€ter einmal treue Stammkunden werden.

Was ist der Unterschied zwischen Usability und UX - und was ist dann CX?

HĂ€ufig werden die Begriffe User Experience und Usability gleichgesetzt. Hier solltest du jedoch wissen, dass dies nicht ganz richtig ist, denn Usability ist nur ein Teilbereich der User Experience. Unterscheiden kannst du hier zwischen folgenden Bestandteile:

  • Usability: hoher Nutzen der Bedienfunktionen sowie der Inhalte → einfache und effektive Bedienung, relevanter Content.
  • ZugĂ€nglichkeit: Mobile Optimierung des Onlineshops zur Anpassung an verschiedene EndgerĂ€te, Dauer der Ladezeiten.
  • Ästhetik & Schönheit: subjektives Wahrnehmen der Optik des Webshops → einfaches, einheitliches, ansprechendes Design mit klarer Struktur/Hierarchie der Inhalte.


Group 11 (2).png


Usability

Usability oder zu deutsch “Benutzerfreundlichkeit”, beschreibt die Benutzerfreundlichkeit eines Onlineshops oder eines Produktes wĂ€hrend der Anwendung. Bei digitalen Produkten wie Websites/Shops oder Apps sind die Bedienbarkeit und das UI-Design die zwei wichtigsten Faktoren fĂŒr eine gute Usability.

Die Usability eines digitalen Produkts wird daran gemessen, wie zufriedenstellend die Nutzung ist. Eine verbesserungswĂŒrdige Usability erkennst du unter anderem an einer hohen Absprungrate (Bounce-Rate) oder einer sehr niedrigen Conversion-Rate. Nachdem schlechte Usability im Normalfall stĂ€rker wahrgenommen wird als eine gute Usability, ist es umso wichtiger, die Zusammenarbeit von Mensch und Technik zu erleichtern.

Zusammengefasst: “Usability” beschreibt die Nutzerfreundlichkeit einer Website oder Onlineshops wĂ€hrend der Nutzung. Ein erfolgreiches UI-Design fĂŒhrt zu einer guten Bedienbarkeit und Nutzern, die wissen, wo sie welche Funktionen finden - ohne lang suchen zu mĂŒssen.

Beispiele fĂŒr gute Usability:

screely-1621251929800.png
Filterfunktion fĂŒr eine strukturierte Übersicht


usability-online-shop-weiter-einkaufen-button.jpg
“Weiter einkaufen”-Button fĂŒr einfaches und schnelles Weitershoppen


Inline-Validierung-beitrag1.png
Automatische ÜberprĂŒfung der Eingabe auf Fehler (Inline-Validation)

UX

Unter “User Experience” versteht man einen ganzheitlichen Ansatz des Nutzungserlebnis eines (digitalen) Produktes. Benutzer sollen zum Beispiel wĂ€hrend dem Surfen im Onlineshop schnell und reibungslos zum Ziel kommen und ein positives GefĂŒhl wĂ€hrend der Nutzung haben.

UX umfasst somit alle subjektiven Erfahrungen mit einem Produkt. Dazu zĂ€hlen auch Erwartungen, die bereits vor der Nutzung entstanden sind, aber auch Empfindungen, die nach der Nutzung zurĂŒckbleiben.

Zusammengefasst: UX umfasst die gesamte Wahrnehmung der Usability sowie des Designs und der Informationsarchitektur deiner Webseite, deines Webshops oder deines Produktes. Sie ist nicht nur gekoppelt an das Design sondern auch an Erwartungshaltungen des Users, die GefĂŒhle, die wĂ€hrend der Benutzung entstehen und die danach noch im Kopf bleiben.

Beispiele fĂŒr gute User Experience:

airbnb-user-experience-design.jpg
Airbnb


db-navigator-user-experience-design.jpg
DB Navigator


CX

Die Customer Experience (CX) umfasst alle Erfahrungen, die User mit deinem Unternehmen machen. Langfristig soll dadurch der Effekt der Markentreue, auch LoyalitĂ€t genannt, entstehen. Customer Experience stellt dabei die Unternehmen vor die Herausforderung, durch Interaktion mit den Kunden oder potentiellen KĂ€ufern deren BedĂŒrfnisse und WĂŒnsche in Erfahrung zu bringen. Diesen Bereich steuert das sogenannte Customer Experience Management.

Zusammengefasst: CX beschreibt das komplette Kundenerlebnis - online, sowie offline. Sie umfasst UX sowie das UI-Design und das Erlebnis des Kunden wÀhrend der gesamten Customer Journey (mehr zu Customer Journeys findest du weiter unten).

Beispiel fĂŒr gute Customer Experience (anhand von HelloFresh):

screely-1621254362046.png
Einfacher und personalisierter Bestellprozess (online)


hiw-delivery_de.jpg
Lieferung & Verpackung von HelloFresh (offline)


Warum sind UX und Usability wichtig?

  • Steigerung von Umsatz und Gewinn: “Conversion-Rate-Optimierung (CRO)”
  • Mehr Neukunden durch geringere Absprungraten: Verbesserung der Bounce-Rate durch Landing-Page-Optimierung
  • Bessere ShopqualitĂ€t: Einfache Bedienung, Fehlerreduktion
  • Zufriedene Kunden und Nutzer: Kundenbindung, geringere Absprungraten
  • Reduzierung von Entwicklungszeit und -kosten: Schnellere Prozesse, Reduzierung von Fehlentwicklungen
  • Steigerung der ProduktivitĂ€t: Prozess,- Mitarbeiter,- Arbeitseffizienz, weniger Fehler
  • Reduzierung von Support: Intuitive Bedienung reduziert Kundensupport
  • User Experience als positive Produkteigenschaft: Abgrenzung von Mitbewerbern

Wie erreichst du eine gute User Experience fĂŒr deinen Webshop?

Zuallererst ist es unbedingt notwendig, dass du deine User in den Fokus stellst. Das nennt man dann “User Centered Design”. Deine Kunden sollten in alle Phasen der Entwicklung deines Shops möglichst gut mit einbezogen werden. Das ultimative Ziel sollte fĂŒr dich sein, dass deine Lösungen die BedĂŒrfnisse deiner Kunden erfĂŒllen.

DafĂŒr ist fĂŒr dich wichtig zu wissen, welche Anforderungen und Erwartungen die User an deinen Onlineshop haben und was sie mit der Nutzung erzielen wollen. Aus diesem Grund solltest du mögliche Usability-Schwachstellen frĂŒhzeitig aufdecken und den Usability-Status-Quo ermitteln.

Hier ein Vorschlag, wie du das Ganze angehene kannst:

1. Kenne alle Facetten deines GeschÀftsmodells

Wer ist deine Zielgruppe, was sind deine VertriebskanÀle, wo erreichst du deine Zielgruppe und wie finanzierst du dich? Das sind Fragen, die du vorab klÀren solltest, um ein klares Bild deines GeschÀftsmodells zu bekommen und deine Kunden optimal zu erreichen.

Hier bietet sich der Business Model Canvas zur GeschĂ€ftsanalyse an. Der Business Model Canvas ist ein strategischer Ansatz, der bei der Entwicklung neuer Unternehmen oder der Analyse des Zustands eines bestehenden Unternehmens angewendet wird. Er besteht aus 9 Bausteinen zur VervollstĂ€ndigung und zum Vergleich der Value Proposition (Wertversprechen) des Unternehmens, der Infrastruktur, der Finanzen und des Kundenkreises. Der Business Model Canvas ist eine schnelle und einfache Methode, um in kĂŒrzester Zeit einen kompakten Überblick ĂŒber dein Business zu bekommen.

Einen weiteren Ansatz stellt der Lean UX Canvas dar. Hier handelt es sich um ein Tool zur Visualisierung und Dokumentation eines Problemraums, Àhnlich dem Business Model Canvas.

Der Lean UX Canvas kann eingesetzt werden, um Teammitglieder auf mögliche Probleme aufmerksam zu machen, potenzielle Lösungen zu finden und herauszufinden, wie die Lösung so verfeinert, damit sie schnellstmöglich implementiert werden kann.

Vorlagen zum Download:

2. Kenne deine Zielgruppe

Bei der Entwicklung oder Weiterentwicklung nutzerfreundlicher Webshops ist es eine große Herausforderung die Motivationen und BedĂŒrfnisse verschiedenster Zielgruppen zu verstehen und zu berĂŒcksichtigen. Hier verschaffen dir Personas einen echten Mehrwert.

Personas sind fiktive Nutzer deiner Zielgruppen und genau wie reale Nutzer haben sie BedĂŒrfnisse, persönliche Einstellungen, individuelle FĂ€higkeiten und Ziele. Du kannst Personas nicht nur dazu nutzen, um deine Zielgruppe besser zu visualisieren, sondern auch um gewisse Muster im Nutzerverhalten aufzudecken. Je nach Zielgruppenanzahl ist es sinnvoll 4-6 Personas zu entwickeln. Jede Persona hat eigene charakteristische BedĂŒrfnisse, und vertritt jeweils einen Nutzertyp deiner Zielgruppe.

Vorlage zum Download:

  • Personas (Du musst etwas nach untern scrollen bis du hier 👇 bist!)
Persona.png


3. Stelle deine Kunden in den Fokus

Nachdem du jetzt bestens ĂŒber dein GeschĂ€ftsmodell sowie ĂŒber deine Kunden Bescheid weißt, kannst du nun deinen Kunden in den Fokus des Unternehmens stellen.

Zwei Methoden, die du hierfĂŒr verwenden kannst und die bereits in einigen anderen Unternehmen zur Anwendung kommen, sind der Value Proposition Canvas und das Customer Journey Mapping.

Der Value Proposition Canvas ermittelt das grundlegende Nutzenversprechen deines Unternehmens/Onlineshops ausgehend von deiner Zielgruppe. Customer Journey Mapping hingegen fokussiert sich darauf, relevante Prozessabschnitte deiner Zielgruppe (z.B. die Interaktion mit dem Unternehmen) detailliert zu beschreiben und auf diesem Weg AktivitÀten aufzudecken, die neue Mehrwerte schaffen oder negative Kundenerfahrungen minimieren.

Wenn du herausfinden willst, was die wirklichen Empfindungen und BedĂŒrfnisse deiner Zielgruppe sind oder was wirklich hinter den Interessen und Verhaltensweisen steckt, dann eignet sich Empathy Mapping sehr gut als Methode dafĂŒr.

Hier geht es darum, sich in einen fiktiven Prototyp-Kunden hineinzuversetzen und seine GefĂŒhle, Gedanken und Handlungen nachzuempfinden und zu notieren, was ein hohes Maß an Empathie verlangt. Die Methode solltest du am besten im Team anwenden, um verschiedene Blickwinkel zu berĂŒcksichtigen, die dann schlussendlich zu einem “schĂ€rferen” Bild deiner Nutzer beitragen.

Vorlagen zum Download:

4. Kreiere ein optisch ansprechendes Design

Sind die technischen Anforderungen fĂŒr eine gute Usability erfĂŒllt, solltest du dich auch der individuellen Gestaltung deines Onlineauftrittes annehmen.

Egal ob Website, Onlineshop oder Produkt - ohne ein optisch ansprechendes Erscheinungsbild wendet sich der User schnell anderen Dingen zu. Solltest du beispielsweise eine hohe Bounce-Rate haben, dann ĂŒberprĂŒfe dein Design und gleiche es mit deiner Zielgruppe ab.

Hier solltest du auf folgende Punkte achten:

  • Einfache und effektive Bedienung
  • intuitive Navigation
  • qualitativ hochwertige/gut aufgelöste Bilder
  • strukturierte Texte
  • Verwendung von Design-Standards
  • Lesbarkeit
  • Farben abstimmen

Beispiele fĂŒr ansprechende Landingpages:

screely-1621248550790.png
boomerank


screely-1621248722763.png
t3n


screely-1621248813651.png
rÀucher.info


screely-1621248949638.png
Weber-Grill


5. Sprich die Sprache deiner Kunden

Aber nicht nur das Design soll ansprechend sein. Auch die Art, wie du mit deinen Usern kommunizierst ist entscheidend, ob die User Experience gut ist, oder nicht. Wichtig ist, dass du dabei authentisch bleibst und eine passende Kommunikationsart wĂ€hlst, die zu deinem Unternehmen und deiner Branche passt. Einmal ausgewĂ€hlt, sollte sich diese wie ein roter Faden ĂŒber alle KanĂ€le hinweg ziehen.

Entscheide dich zwischen:

  • “Du” oder “Sie”
  • Verspielte oder neutrale Wortwahl
  • Emojis oder keine Emojis

Beispiele fĂŒr eine persönliche Ansprache:

screely-1620834547732.png
boomerank setzt auf die "Du"-Ansprache.


screely-1620834778720.png
Wir nutzen des weitere eine persönliche und einfache Wortwahl und unterstreichen diese mit handgezeichneten Icons.


Zusammenfassung der anfĂ€nglich wichtigsten Schritte fĂŒr eine erfolgreiche User Experience:

  1. Kenne alle Facetten deines GeschĂ€ftsmodelles durch das AusfĂŒllen eines Business Model Canvas.
  2. Kenne deine Zielgruppe durch Personas.
  3. Stelle deine Kunden in den Fokus durch Empathy Mapping und Customer Journey Mapping.
  4. Kreiere ein optisch ansprechendes Design.
  5. Sprich die gleiche Sprache, wie deine Zielgruppe.


Quellen (Zuletzt abgerufen am 06.05.2021):

‍

Jetzt Whitepaper herunterladen!

Jetzt herunterladen

Gleich weiterlesen

Über unsere Cookies đŸȘ
Wie alle Webseiten, verwenden wir bei boomerank auch Cookies um die Webseite laufend besser zu machen. Wenn du Fragen hast, dann schau auf unserere DatenschutzerklÀrung.