Einstieg ins UX-Design: Zehn Tipps für ein besseres Einkaufserlebnis

Lieblos gestapelte Ware, ein Irrgarten aus Gängen und Probleme an der Kasse – niemand würde einen solchen Laden gern besuchen. Das gilt auch für Online-Shops: Sie benötigen eine übersichtliche Struktur und funktionierende Prozesse.

Die Benutzeroberfläche eines Shops sollte dem Kunden ein attraktives, angenehmes Einkauferlebnis bieten – mit dem Ziel, die Conversion zu verbessern und idealerweise Stammkunden zu gewinnen. Die Gestaltung der Benutzererfahrung – User Experience oder kurz UX genannt – ist der Kern jedes E-Commerce-Projekts und entscheidet über Erfolg oder Misserfolg. Die Benutzerführung und das Einkaufserlebnis müssen speziell auf die Ware zugeschnitten sein. So überrascht es nicht, dass LinkedIn Anfang des Jahres UX Design zu einem der „Hottest Skills“ auf dem Job-Markt erkor. Die Fähigkeiten eines UX-Designers sind gefragter denn je. Zum Einstieg ins UX-Design bieten die folgenden Tipps eine Basis für die Gestaltung einer guten Benutzerführung und einen Startpunkt für die Gestaltung einer erfolgreichen E-Commerce-Webseite.

 1. Nutzerzentriert denken

Die gesamte Benutzererfahrung sollte grundsätzlich so gestaltet werden, dass sie den Bedürfnissen und Erwartungen der Anwender entspricht. Sie ist ein elementarer Teil der gesamten „Customer Journey“ – ganz besonders bei Händlern, die Waren ausschließlich online anbieten. Deshalb ist es wichtig, im Vorfeld die Zielgruppe der Käufer genau zu definieren. Außerdem ist der Einsatz von Marktforschungsinstrumenten wie einzelnen Nutzertests und Nutzerinterviews sowie Fokusgruppen sinnvoll. Dabei handelt es sich um eine moderierte Gruppendiskussion mit „typischen“ Vertretern der Zielgruppe, die sich in diesem Fall über ihre Erwartungen an die Benutzererfahrung in einem Webshop austauschen.

 2. Nutzerpfade zu Ende denken

Wenn ein Besucher des Webshops plötzlich nicht mehr weiterkommt oder sich in einer Sackgasse befindet, ist er mit Recht verärgert. Beispiele dafür sind etwa Meldungen über fehlende Seiten während einer Suche, wenn der Rückwärtspfeil nicht zurück, sondern auf die Startseite führt oder wenn der Nutzer auf einer Seite ankommt, die weder über weiterführende Links noch ein Menü verfügt. Um so etwas zu verhindern, sollten Shopbetreiber jeden einzelnen Prozess, den ein Besucher durchlaufen kann, von Anfang bis Ende nachverfolgen – am besten aus Sicht eines Anwenders, der nur wenig Vorwissen hat und den Shop noch nicht kennt.

3. Usability-Tests einsetzen

Viele Entscheidungen im UX-Design müssen sich erst in der Praxis bewähren. Hierbei sind Usability-Tests hilfreich. Sie können mit ausgewählten Testnutzern, aber auch im Regelbetrieb durchgeführt werden. Ein häufig genutzter Usability-Test ist der A/B-Test. Hier werden zwei verschiedene Versionen einer Seite an zufällig ausgewählte Besucher ausgespielt. Durch die üblichen Methoden der Performance-Messung können die Betreiber nun ermitteln, welches Design effizienter ist. Typische Messwerte sind die Conversion Rate oder die Anzahl der Kaufabbrüche. Um die Nutzererfahrung und die Webseite kontinuierlich zu verbessern, ist es außerdem wichtig, die Erkenntnisse des A/B-Tests zu analysieren und auszuwerten sowie weitere Tests anzuwenden, um die erfolgreichere Variante immer wieder zu optimieren.

4. Lean-Methodik einsetzen

Viele Unternehmen aus der Digitalwirtschaft sind mit dem Prinzip des „Lean Startup“ erfolgreich. Dabei kommt zunächst ein Produkt auf den Markt, das „gut genug“, aber noch nicht perfekt ist. Anschließend wird es schrittweise und unter Berücksichtigung der Benutzerwünsche angepasst und erweitert. Diese Vorgehensweise ist auch beim Launch eines Shops ein guter Ansatz. Zunächst sollten alle dringend notwendigen Funktionen verwirklicht werden. Anschließend kann das UX-Design anhand von Reaktionen und Feedback der Nutzer verbessert und Schritt für Schritt perfektioniert werden. Die Lean-Methodik vermeidet teure Fehlentwicklungen, die umgesetzt, aber vom Kunden gar nicht gewünscht werden. Es ist sinnvoll, diesen Optimierungsprozess am Anfang der User Journey zu beginnen – schließlich bringt auch der nutzerfreundlichste Warenkorb oder Checkout-Prozess wenig, wenn der Kunde aufgrund eines negativen Erlebnisses die Seite schon lange vorher wieder verlassen hat.

 5. Responsives Design nutzen

Damit ein Webshop auf jedem Gerät (Smartphone, Tablet, Laptop, Desktopcomputer) optisch attraktiv wirkt und gut zu benutzen ist, ist ein „Responsives Design“ notwendig. Die Shop-Oberfläche wird dabei mit Stylesheets und Skripten an Größe, Format und Ausrichtung des Displays angepasst. Leider gibt es keine einfache Lösung für gutes Design auf allen Endgeräten. In der Regel muss die Benutzeroberfläche für jede Geräteklasse speziell angepasst werden. Ein Beispiel: Ein großer Slider auf der Startseite wirkt auf einem 27-Zoll-Monitor beeindruckend. Aber auf Smartphones sollte dieses Element ausgeblendet werden, da es den größten Teil des Displays bedeckt.

 

 6. Online-Shop personalisierbar machen

Ein Webshop sollte personalisierbar sein und sich an die Bedürfnisse des Kunden anpassen. Dazu kann etwa die Möglichkeit gehören, mehrere Lieferadressen für Geschenke an Verwandte oder Nachsendungen in den Urlaub anzugeben, mehrere Girokonten oder Kreditkarten zu nutzen, Merklisten oder Wunschzettel anzulegen und auf ein übersichtliches Bestellarchiv zugreifen zu können. Mobile Shops können zudem die Benachrichtigungsfunktion des Mobilbetriebssystems für Rabattaktionen und Sonderangebote nutzen. Auch diese Benachrichtigungen sollten konfigurierbar sein, damit der Kunde lediglich solche Marketingaktionen sieht, die für ihn auch relevant sind. Hierfür gibt es Tools, die die Ausrichtung auf den Nutzer je nach dessen Verhalten in Echtzeit anpassen.

 7. Selbsterklärende Elemente einsetzen

Sämtliche Elemente der Benutzeroberfläche sollten auf den ersten Blick erkennbar machen, worum es hier geht. Wenn zum Beispiel mehrere Buttons die Beschriftung „Weiter“ tragen, ist die genaue Wirkung jedes einzelnen nicht erkennbar. Besser sind präzise Beschriftungen, beispielsweise „Nächste Seite“, „Zur Kasse“ oder „Produktdetails“. Zudem unterstützen Kontexthilfen bei unklaren Punkten, die auf verschiedene Weisen umgesetzt werden können: So sind etwa Hilfeseiten sinnvoll, die nach dem Anklicken oder Antippen eines Hilfe-Buttons in einem neuen Tab erscheinen. Alternativ kann jedes Element mit einem „Tooltip“ ausgestattet sein, der erscheint, sobald der Benutzer den Mauszeiger darüber bewegt. Bei Mobilgeräten sind Tooltips weniger gängig, sie können aber durch langes Antippen angezeigt werden. Hier können auch alternative Lösungen, beispielsweise ein aufklappbarer Hilfebereich, zum Einsatz kommen.

 8. Formulare übersichtlich gestalten

Alle Formulare zur Eingabe von Adress-, Zahlungs-und Bestellinformationen müssen übersichtlich und leicht bedienbar sein. Zudem sollten die Formulare nur die jeweils notwendigen Dinge abfragen. Ein Beispiel ist das Anmeldeformular. Im ersten Schritt reicht es völlig aus, lediglich Name, E-Mail-Adresse und Kennwort abzufragen. Anschrift und Kontoinformationen muss der Kunde bei einer Bestellung ohnehin nachtragen. Auch hier ist es wichtig, stets auf die mobile Darstellung zu achten. Gegebenenfalls müssen bei Formularen gezielte Änderungen für die mobile Optimierung vorgenommen werden.

9. Dialogfenster sparsam einsetzen

Ein häufiger Grund für vorzeitige Kaufabbrüche sind zu frühe und zu viele Dialogfenster, etwa die Aufforderung zum Abonnement eines Newsletters direkt beim Besuchen der Webseite. Jeder Dialog ist eine Unterbrechung, die den Besucher von seinem eigentlichen Ziel ablenkt: Sich über ein Produkt zu informieren und es gegebenenfalls zu kaufen. Falsch eingesetzte Dialogfenster stören und führen häufig dazu, dass der Nutzer die Webseite wieder verlässt. Die Grundregel lautet also, Dialoge nicht gleich zu Anfang, möglichst sparsam und vor allem sinnvoll einzusetzen.

 10. Regelmäßig Feedback geben

Auch fehlendes Feedback führt öfter zu Kaufabbrüchen. Der Besucher sollte jederzeit sehen können, an welcher Stelle er sich befindet. Es gibt einige Möglichkeiten für Feedback, etwa die Anzeige der Schrittfolge beim Checkout oder eine „Breadcrumb“-Navigation im Shop. Hier werden alle besuchten Stationen als klickbare Links aufgeführt – beispielsweise „Start / Alle Produkte / Elektronik / Monitore“. Ein weiteres Standardverfahren ist die Anzeige von auffälligen Dialogfeldern, wenn der Besucher eine kritische Aktion durchführt – etwa das Löschen eines Adresseintrags oder einer Zahlungsinformation. Aber auch hier gilt: Weniger ist mehr und Hinweise dieser Art sollten sparsam und bedacht eingesetzt werden. So sollte das Löschen eines Artikels aus dem Warenkorb nicht bestätigt werden müssen. Die meisten Nutzer würden sich dadurch wohl eher belästigt fühlen.

Ausbildung zum UX-Designer

Wer diese Tipps beherzigt, hat schon die ersten Schritte zu einem guten UX-Design unternommen. Wer darüber hinaus professionell als UX Designer arbeiten möchte, dem bieten sich einige Wege, UX-Design zu lernen. Eine formale Ausbildung gibt es nicht, doch strukturierte Online-Kurse wie der UX-Design-Kurs von CareerFoundry bieten das nötige Know-how sowie zahlreiche Praxisübungen. Die Kurse dauern drei Monate in Vollzeit oder sechs Monate berufsbegleitend. CareerFoundry-Kursteilnehmer werden dabei von persönlichen Mentoren unterstützt, die sie motivieren, bei Fragen und Problemen helfen und sie auf ihrem Weg in den Beruf als UX-Designer begleiten. CareerFoundry ist eine Online-Weiterbildungsplattform für Berufe im Tech- und Design-Bereich. Sie bietet effektive, mentorengeführte Online-Kurse für Web Development, UX- und UI-Design sowie iOS Development an. Info: https://careerfoundry.com/de/

(jm)

0
RSS Feed

Hat Ihnen der Artikel gefallen?
Abonnieren Sie doch unseren Newsletter und verpassen Sie keinen Artikel mehr.

Mit einem * gekennzeichnete Felder sind Pflichtfelder!

Neuen Kommentar schreiben

Entdecken Sie die Printmagazine des WIN-Verlags