eCommerce UX für das mobile Erlebnis

Der Begriff „Mobile Commerce“ wurde vor 20 Jahren von Kevin Duffey eingeführt, als er vorschlug, dass ein mobiles Gerät als Verkaufsstelle in der Tasche eines Kunden fungieren könnte. Wer hätte in Anbetracht der technologischen Einschränkungen der damaligen Zeit gedacht, dass wir eines Tages Waren auf einem kleinen Gerät im Taschenformat einfach erkunden, überprüfen und kaufen können würden?

Ich kann gar nicht genug betonen, wie Mobile die Art und Weise verändert, wie wir mit unseren Kunden interagieren. wir müssen uns diesen Veränderungen stellen. – Joel Anderson, CEO von Walmart

Das erstaunliche Wachstum des E-Commerce hat auch das Wachstum des mobilen E-Commerce angeheizt, der jetzt fast 700 Milliarden US-Dollar wert ist. Mobile eCommerce ist derzeit der größte Teil des riesigen Online-Marktes. Mehr als 80 % der Amerikaner haben im letzten Monat online eingekauft – vor drei Jahren waren es nur 11,6 %.

Ein Bericht von Business Insider Intelligence geht davon aus, dass der mobile Handel bis 2020 um bis zu 45 % zunehmen wird. Die ComScore-Forschung stimmte dem zu und meldete 2016 einen Anstieg der Ausgaben über mobile Geräte um 44 % im Vergleich zu 2015.

Trotz der hohen Verkaufszahlen sind immer noch mehr als 60 % der Nutzer besorgt darüber, dass ihre Finanzinformationen bei der Verwendung eines Mobiltelefons gehackt werden könnten. Dennoch ist die Kundenzufriedenheit immer noch ziemlich hoch, wobei mobile Einzelhandelsgiganten wie Amazon und Apple beide eine Zufriedenheitsbewertung von mehr als 80 % erhalten.

Mobile eCommerce UX Best Practices für den Erfolg

Unterstützt das Zoomen von Bildern durch Kneifen und Doppeltippen

Menschen sind vertraut mit Gesten wie Doppeltippen und Auf- und Zuziehen, um Bilder auf Mobilgeräten zu vergrößern. Das Baymard Institute hat im Rahmen einer Usability-Studie zum mobilen E-Commerce festgestellt, dass Käufer das Produkt ganz selbstverständlich gründlich inspizieren wollen und sich über die kleinen Details Gedanken machen. Benutzer, die am Kauf eines Produkts interessiert waren, es aber nicht durch Heranzoomen erkunden konnten, fühlten sich beim Kauf nicht wohl und verpflichteten sich oft nicht zum Verkauf.

Es ist ziemlich überraschend, dass von den 50 umsatzstärksten mobilen E-Commerce-Anwendungen mehr als 40 % keine Zoom-Gesten unterstützten. Sogar Websites, die Nahaufnahmen von Bildern anboten, verzeichneten ähnliche Absprungraten, was darauf hindeutet, dass die Unterstützung von Gesten zum Zoomen von Produktbildern in einer mobilen E-Commerce-App von grundlegender Bedeutung ist.

Angesichts der kleinen Bildschirmgröße mobiler Geräte ist dies ein plattformspezifisches Problem. Die Unterstützung von mindestens einer dieser Funktionen bringt eine App in die Gesellschaft der 50 % der besten E-Commerce-Anwendungen, dh der Liste mit den höchsten Einnahmen.

Ein paar zu berücksichtigende Faktoren:

• Bilder mit niedriger Auflösung sind das Äquivalent zu Bildern ohne Zoom. Die Nutzer sind daran interessiert, die Details eines Produkts deutlich zu sehen und benötigen dafür hochauflösende Bilder. Die Option, ein Bild mit geringer Qualität zu vergrößern, ist ziemlich nutzlos, da der Benutzer keine Details sehen kann.
• Das Baymard Institute hat herausgefunden, dass 50 % der Apps den Benutzern nicht anzeigen, dass sie Produktbilder zusammendrücken oder doppelt antippen können. Es ist wichtig, die Verfügbarkeit des Bildzooms anzugeben. Obwohl diese Gesten mobilen Benutzern allgemein bekannt sind, muss noch gezeigt werden, dass sie verfügbar sind. Hierfür empfiehlt sich die Verwendung von Icons oder visuellen Darstellungen.

Stellen Sie eine „Speichern“-Funktion für den Warenkorb bereit

Wie bereits erwähnt, ist die kleine Bildschirmgröße mobiler Geräte ein Haupthindernis für den mobilen E-Commerce. Das Baymard Institute beobachtete, dass mehr als 61 % der mobilen Benutzer häufig ihre Desktops verwenden, um einen Kauf abzuschließen, und nicht ihr Telefon.

Eine „Warenkorb speichern“-Funktion reduziert die Anzahl der Warenkorbabbrüche und ermöglicht es Käufern, Artikel für einen späteren Kauf zu speichern. Permanente Warenkörbe ermöglichen es Kunden, ihren Einkauf fortzusetzen, ohne bei ihrer Rückkehr nach dem gewünschten Produkt suchen zu müssen – eine Funktion, die 55 % der Käufer nutzen würden.

So binden Sie diese Kunden:

1. Machen Sie den Einkaufswagen zu einer Wunschliste, indem Sie Artikel speichern, die dem Einkaufswagen hinzugefügt wurden.
2. Erstellen Sie eine Option, mit der Käufer E-Mails mit gespeicherten Artikeln erhalten können. Zeigen Sie Erinnerungen an, dass sie ihren Desktop verwenden können, um den Kauf abzuschließen.

Verwenden Sie beschreibende, gut beschriftete Formulare

Die Anwendung von Best Practices für mobile Formulare ist eine weitere Überlegung. Es ist wichtig, dass das UX-Design einer E-Commerce-App oder -Website den Benutzern ermöglicht, Formulare so schnell wie möglich auszufüllen, während jegliche Verwirrung vermieden wird.

Hier sind die Best Practices für die Benutzerfreundlichkeit mobiler Formulare:

• Platzieren Sie Formularbeschriftungen über dem Formular, um die Lesbarkeit, Benutzerfreundlichkeit und Klarheit zu verbessern. Das Erklären, warum bestimmte Informationen benötigt werden, wird die Angst der Benutzer beim Ausfüllen von Formularen auf ihrem Handy verringern.
• Ordnen Sie die Texteingaben der entsprechenden Tastatur zu. Zeigen Sie eine Wähltastatur an, wenn Sie Telefonnummern und Kreditkartenziffern eingeben, und eine Texttastatur, wenn Sie Adressen und Text eingeben. Dadurch werden Benutzerfehler reduziert und das Ausfüllen von Formularen beschleunigt.
• Begrenzen Sie die Anzahl der Eingabefelder, um den Tippaufwand zu reduzieren. Weniger Eingabefelder erzeugen ein weniger geladenes Formular und verbessern den UX-Checkout-Flow.
• Wenn Sie fertig sind, rücken Sie jedes Feld automatisch auf dem Bildschirm nach oben. Dadurch wird die Sicht auf die unvollständigen Felder nicht behindert.
• Verwenden Sie Stepper anstelle von Dropdown-Menüs, um den Aufwand des Käufers zu reduzieren. Stepper werden verwendet, um den Wert um einen konstanten Betrag zu erhöhen oder zu verringern, und sind eine Lösung, mit der Sie schneller arbeiten können und die ansprechender für das Auge ist.

Stellen Sie intelligente automatische Vorschläge, automatische Erkennung, Adresssuche und Fehler bereit

Der Hauptzweck hinter automatischen Vorschlägen besteht darin, Benutzern das Ausfüllen von Formularen einfacher und schneller zu machen. Automatische Vorschläge sagen häufige Suchanfragen voraus und helfen Käufern, Produkte leichter zu finden.

Die mobile Nutzbarkeit kann durch die automatische Erkennung des Kreditkartentyps weiter verbessert werden. Die automatische Erkennung optimiert den Kaufprozess, indem sie sofortiges Feedback für unterstützte Kartentypen liefert. Die Automatisierung so vieler Dateneingabeprozesse wie möglich – vorzugsweise mit Visualisierungen – verbessert die Benutzererfahrung und wirkt sich positiv auf die Konversionsraten aus.

Adresssuche und -validierung beschleunigen den Checkout-Prozess – verschiedene APIs (wie Google Places und USPS) ermöglichen eine einfache Implementierung dieser Funktion.

Die Bereitstellung einer Inline-Eingabevalidierung für Fehler ist auch eine bewährte Methode im mobilen UX-Design. Der Mangel an schneller Leistung ist eine große Frustration für E-Commerce-Käufer. Dies kann durch die Bereitstellung von Live-Feedback zu ihrem Fortschritt (z. B. während des Bezahlvorgangs) unterstützt werden, insbesondere wenn sie einen versehentlichen Fehler machen. Dadurch können Benutzer ihre Fehler sofort beheben, was sich positiv auf die Benutzerfreundlichkeit auswirkt.

Verwenden Sie Mikrointeraktionen, um die mobile Shopping-UX zu verbessern

Mikrointeraktionen sind Details in der Benutzeroberfläche eines Produkts, die eine einzelne Aufgabe erfüllen und gleichzeitig den natürlichen Produktfluss verbessern sollen. Das Liken und Bewerten eines Produkts, das Auswählen einer Farbe und Größe und das Wischen nach unten, um Daten zu aktualisieren, sind Beispiele für Mikrointeraktionen.

Wenn man bedenkt, wie häufig sie sind, können Mikrointeraktionen die UX einer mobilen E-Commerce-Anwendung beeinflussen oder beeinträchtigen.

Mikrointeraktionen können verwendet werden, um:

• Führen Sie den Benutzer intuitiver durch die Anwendung;
• Vermitteln Sie ein besseres Gefühl des Vertrauens, reduzieren Sie die Angst der Käufer und steigern Sie das allgemeine psychologische Wohlbefinden durch reibungslosere, natürlichere Interaktionen.
• Verhindern Sie zukünftige Fehler und geben Sie den Benutzern basierend auf den von ihnen abgeschlossenen Aktivitäten sofortiges Feedback. und/oder
• Verbessern Sie die Benutzerinteraktion mit der App, indem Sie auf Benachrichtigungen reagieren.

Bieten Sie eine einfache, daumenorientierte Interaktion

Das Verständnis der häufigsten Art und Weise, wie Käufer ihre mobilen Geräte halten, verbessert die Benutzererfahrung und Benutzerfreundlichkeit des mobilen E-Commerce. Im Jahr 2013 fragte Steven Hoober: „Wie halten Benutzer wirklich mobile Geräte?“ und beobachtete, wie Menschen mit ihren Smartphones interagieren und sie halten, und bemerkte drei Hauptverhaltensmuster, die das mobile UX-Design leiten sollten.

Die Anpassung der Schnittstellen an die natürliche Nutzung von Mobiltelefonen wird den Benutzerkomfort erhöhen und die Angst der Käufer verringern. Mobilgeräte und Bildschirmgrößen variieren, aber die „Daumenzone“, ein kritischer Aspekt des Designs und der Benutzererfahrung, bleibt gleich.

Gestaltung rund um die „Daumenzone“:

• Löst potenzielle Probleme bei der Navigation und Erkundung
• Verbessert die Interaktion durch eine bessere Anpassung an Gesten und Fingerreichweite
• Konvertiert besser und verbessert die Benutzerfreundlichkeit, indem wichtige Elemente in „leicht erreichbaren“ Zonen platziert werden

Überlegungen zum Conversion-orientierten Mobile eCommerce Design

Vermitteln Sie ein sicheres Gefühl in mobilen E-Commerce-Anwendungen

Sicherheit ist eine der größten Sorgen für Benutzer beim Einkaufen auf mobilen Geräten. Die Kommunikation, dass ihre Transaktionen sicher sind, erhöht die positive Wahrnehmung, die Käufer gegenüber einem Geschäft haben, erheblich.

Hier sind einige UX-Designtechniken, die den Benutzern Sicherheit vermitteln und die Angst der Benutzer verringern:

• Machen Sie Button-Etiketten suggestiv und klar, wohin die Käufer gehen. Wörter wie „fortfahren“, „sicher“ und „verschlüsselt“ werden den psychologischen Komfort der Benutzer stärken.
• Verwenden Sie Schlosssymbole, um Käufern die Gewissheit zu geben, dass ihre Transaktionen sicher sind.
• Verwenden Sie Vertrauensabzeichen von Sicherheitsanbietern wie McAfee Secure und Norton. Dies trägt dazu bei, dass Nutzer eine Website positiv wahrnehmen (Studie des Baymard-Instituts).
• Wenden Sie Prinzipien der Farbpsychologie im Design an, um das Vertrauen der Käufer noch besser wahrzunehmen. Einige dieser Prinzipien beinhalten zielgruppenorientierte und geschlechtsspezifische Farben.

Suche priorisieren (und „above the fold“ halten)

Käufer nutzen eine mobile E-Commerce-Website oder -App, um Produkte zu erkunden oder ein bestimmtes Produkt zu kaufen; Folglich kommt einer gut gestalteten Suche für eine mobile E-Commerce-Anwendung eine entscheidende Bedeutung zu. eBay ist der Ansicht, dass seine Website-Suche eines der wichtigsten Features für mobile Käufer ist, und betont dies, indem es sie in der Mitte und über der Falte auf der Benutzeroberfläche platziert.

Wichtige Überlegungen zur mobilen Suche:

• Stellen Sie sicher, dass es sichtbar ist! Wenn die Suchleiste leicht zugänglich und über dem Falz gehalten wird, können Käufer mühelos nach Produkten suchen.
• Bieten Sie eine vorausschauende Suche, indem Sie Daten verwenden, die aus gängigen Suchmustern stammen, und zeigen Sie verwandte Produkte auf Suchergebnisseiten an.
• Stellen Sie erweiterte Filteroptionen bereit, mit denen Kunden ihre gewünschten Produkte schnell und mühelos finden können.

Ein wichtiger Aspekt bei der Anzeige von Suchformularen ist, dass sie nur in den ersten Phasen der Interaktion eines Benutzers mit der Anwendung wertvoll sind. Benutzer durchsuchen die Anwendung normalerweise zu Beginn ihrer Einkaufsreise, und es kann Fälle geben, in denen die Anzeige eines Suchformulars später in der Reise die UX beeinträchtigen kann.

Beispielsweise ist die Suche während des Bestellvorgangs nicht mehr sinnvoll und lenkt nur ab, weil sie dazu führen könnte, dass Benutzer den Fokus verlieren und ihre Bindung an den Kauf aufgeben.

Bieten Sie einen reibungslosen, einfachen und schnellen Checkout

Studien haben gezeigt, dass der Checkout-Prozess der stressigste Teil eines Online-Kaufs ist. Das Baymard Institute meldet eine Rate von 35 % für Warenkorbabbrüche aufgrund der Anforderung, vor dem Kauf ein Konto zu erstellen. Um die Abbruchrate des Einkaufswagens zu verringern, ist es wichtig, einen einfachen, schnellen Checkout-Prozess zu entwickeln, bei dem Käufer nicht aufgefordert werden, sich zuerst zu registrieren.

Usability-Studien haben ergeben, dass mehr als 60 % der Benutzer Schwierigkeiten hatten, die Checkout-Option für Gäste zu finden; ergo muss die Gastkasse gut sichtbar und leicht zugänglich sein.

Hier sind einige Vorschläge für einen verbesserten Bezahlvorgang im E-Commerce:

• Um die Benutzerinteraktion zu fördern, kennzeichnen Sie jeden Schritt des Checkout-Prozesses, indem Sie den derzeit aktiven Schritt nummerieren und anzeigen.
• Verwenden Sie visuelle Darstellungen wie Fortschrittsbalken, um anzuzeigen, wie Sie im Bezahlvorgang vorankommen.
• Bieten Sie eine Option zum Registrieren und Anmelden während des Bestellvorgangs an, aber treffen Sie eine Auswahl.
• Um Angst und Absprungraten zu reduzieren, schlagen Sie vor, dass Benutzer sich nach dem Checkout anmelden oder registrieren, wenn sie als Gast ausgecheckt haben.
• Wenden Sie progressive Offenlegungstechniken an, um die Benutzerorientierung zu verbessern und Inhalte 30 % schneller zu laden.

Zusammenfassend: Was sind einige Hauptmerkmale eines erfolgreichen mobilen E-Commerce-Designs?

• Bietet schnelle und einfache Anmelde- und Checkout-Prozessabläufe
• Vermittelt ein Gefühl der Sicherheit und des Vertrauens durch die Anzeige geeigneter Symbole, Abzeichen, Bewertungen und Erfahrungsberichte
• Bietet Interaktion, die um daumenfreundliche Zonen herum entwickelt wurde
• Verwendet konsistente und komprimierte Navigation
• Beinhaltet eine schnelle Suche und ein einfaches Filtern von Produkten
• Versteht den direkten Zusammenhang zwischen Benutzerstress, Angst und Konversionsraten für mobile Anwendungen
• Bietet schnell ladende, reaktionsschnelle Erfahrungen mit mobilen Websites
• Unterstützt Gesten zum Zoomen von Produktbildern

Der Bereich des mobilen E-Commerce wird immer größer

Mobile eCommerce-Trends zeigen, dass der mobile eCommerce-Markt exponentiell wächst und das Wachstum der Branche eine Vielzahl von Vorteilen für Verkäufer geschaffen hat. Damit einher gingen jedoch viele Best Practices und Standards für das mobile E-Commerce-Design, die Verkäufer befolgen müssen, wenn sie erfolgreich sein wollen.

Käufer erwarten eine mobile Anwendung, die gut funktioniert, schön aussieht und an ihr Verhalten angepasst ist. Obwohl jede Anwendung anders ist und ihre eigenen Einschränkungen und Ziele hat, hilft die Befolgung der in diesem Artikel beschriebenen Grundprinzipien bei der Erstellung erfolgreicher mobiler E-Commerce-Anwendungen.

Laden Sie einen Spickzettel zur Verbesserung der mobilen E-Commerce-UX herunter

• • •

Weiterführende Literatur im Toptal Design Blog:

• Prominente E-Commerce-Trends und ihr Einfluss auf das Design (mit Infografik)
• eCommerce UX – Best Practices im Überblick (mit Infografik)
• eCommerce UX – Wesentliche Designstrategien und -prinzipien
• Der ultimative Leitfaden für das Design von E-Commerce-Websites
• eCommerce neu gestaltet: Wie kleine Änderungen zu großen UX-Verbesserungen führten