Amazon Checkout-Neugestaltungsübung - Teil I: Navigation

Bitte beachten Sie: Dies ist eine Übung. Ihr Zweck ist es nicht, Geschäftslösungen zu erstellen, sondern deren Erstellung in einer simulierten Umgebung zu üben. Die Kraft der Vermutung wird angewendet, um Geschäftsziele und -metriken zu bilden.

Sie finden am Ende dieses Artikels Links zu den Prototypen und anderen Teilen der Übung (sobald sie veröffentlicht wurden).

Das Ziel

Amazon leistet hervorragende Arbeit bei der Verarbeitung von Millionen von Bestellungen pro Tag, aber es gibt immer noch Verbesserungspotenzial: höhere Kundenzufriedenheitsraten, erfolgreiches Upselling, Umstellung auf bezahlte Abonnements usw.

In dieser Übung werden wir versuchen, den Checkout-Prozess in kleinere Erlebnisse zu unterteilen und zu prüfen, ob wir diese nacheinander verbessern können, beginnend mit der Navigation.

Das Gegebene

Das Bezahlen bei Amazon erfolgt in mehreren Schritten. So geht ein nicht registrierter Benutzer vor, um eine Bestellung aufzugeben:

Ablauf der nicht registrierten Benutzer-Kaufabwicklung bei Amazon.com

Obwohl wir keinen der tatsächlichen Leistungsindikatoren für diesen Workflow kennen, können wir hier das offensichtlichste Problem erkennen - die Benutzeroberfläche scheint nicht einheitlich zu sein:

  • Die meisten Bildschirme haben ein einzigartiges Layout und Stil, sodass Sie jeden Bildschirm erst studieren müssen, bevor Sie sicher mit ihm interagieren können.
  • Bildschirme haben einen anderen Kontext: Die Ansicht Einkaufswagen (1) ist Teil der allgemeinen Benutzeroberfläche, die übrigen Bildschirme werden jedoch mit einer speziellen Kopfzeile behandelt, die die auszuführenden Schritte darstellt.
  • Das Navigieren durch den Kaufvorgang ist eine Einbahnstraße: Sie können die meiste Zeit nicht zu vorherigen Schritten zurückkehren. In der Kopfzeile wird Ihr Fortschritt angezeigt, aber die Aufgabe wird nicht richtig ausgeführt: Sie bleiben für drei verschiedene Bildschirme (3–5) im Bereich Versand und Zahlung hängen. In den meisten Fällen werden die Geschenkoptionen einfach übersprungen.

Der Checkout-Prozess ist (aus einem bestimmten Grund) komplex und es gibt viele weitere UX-Probleme. Ich empfehle, dass Sie ihn selbst durchgehen und anderen dabei zuschauen. Das Erleben der Lösung ist tausend Bilder wert.

Im Moment ist es unsere Aufgabe, die Navigation zu verbessern, und es ist Zeit für einige Bleistiftarbeiten.

Skizzierung

Doodling ist ein großartiges Werkzeug für die Erkundung von UI-Designs. Ähnlich wie beim Brainstorming tauschen Sie Qualität und Details gegen die Freiheit und Geschwindigkeit der Lösungsgenerierung aus. Und wenn Sie mich fragen, ist für die erste Iteration neben der Geschwindigkeit vor allem die Freiheit von Bedeutung.

Produkte des Kritzelns: hässlich, chaotisch und aufschlussreich.

Ein paar Stunden später laufen unzählige Ideen auf einen der beiden Navigationsansätze hinaus:

Das erste ist kassenzentriert. Das heißt, wir beginnen im Wesentlichen mit dem letzten Bildschirm des Checkout-Prozesses: Zusammenfassung. Um die Informationen zu bearbeiten, muss ein Benutzer die entsprechenden Ansichten (wie Versand und Zahlung) öffnen.

Die zweite ist schrittweise. Es ist dem aktuellen Design von Amazon sehr ähnlich, jedoch mit einigen Ausnahmen: Der Warenkorb ist Teil des gesamten Checkout-Workflows und wir möchten den Benutzern auch die Möglichkeit geben, frei durch die einzelnen Schritte des Prozesses zu navigieren.

Nachdem wir nun Skizzen für zwei Ausgangspunkte haben, können wir mit der nächsten Ebene der Designerkundung fortfahren. Nein, natürlich keine Modelle.

Prototyping

Anstatt Modelle in Sketch oder Figma zu zeichnen, um unseren handgezeichneten Doodles ein wenig mehr Detail zu verleihen, verwenden wir vue.js, um sofort mit der Erstellung umsetzbarer Designs zu beginnen.

In den Prototypen ist der Prototype Manager integriert, um schnell zwischen den von uns implementierten Versionen und den durchgeführten Iterationen zu wechseln:

Prototyp-Manager

Checkout-zentriertes Design

Die Idee hier ist, die letzte Checkout-Seite zum Ausgangspunkt zu machen und alle anderen (bearbeitbaren) Ansichten zu ihren Kindern zu machen:

Das Anzeigen des Warenkorbs als Teil des komplexen Bildschirms ist keine gute Idee für diejenigen, die nur sehen möchten, was sich dort befindet, oder einige Elemente entfernen möchten. Daher ist es sinnvoll, den bearbeitbaren Warenkorb-Bildschirm als Einstiegspunkt für den Prozess festzulegen, auch wenn dies nicht die Hauptansicht ist.

Einige Codierungsstunden später haben wir einen Prototyp, der die Schritte simuliert, die Erstbenutzer mit dieser Navigationsarchitektur ausführen müssen:

Erste Tests und Beobachtungen zeigen einige gute Dinge über diesen Ansatz:

  • Der Hauptablauf für einen Erstbenutzer ist der gleiche wie für einen registrierten Benutzer: Einkaufswagen - Kasse (- optional Versand- / Zahlungsinformationen bearbeiten). Dieses Muster ist einfach im Vergleich zur schrittweisen Navigation, bei der unter bestimmten Umständen einige Schritte im Hintergrund übersprungen werden.
  • Es ist jederzeit leicht zu erkennen, wo genau Sie sich gerade befinden, wie Sie dorthin gekommen sind und wohin Sie mit den Knöpfen gelangen. Dieser Komfort wird erreicht, indem alle mysteriösen Schaltflächen "Fortfahren" und "Fortfahren" entfernt werden. Dies ist das Ergebnis einer schrittweisen Abkehr vom linearen Prozess. Hier muss sich der Benutzer bewusst dafür entscheiden, zu jedem Bildschirm zu wechseln, indem er die entsprechende Schaltfläche drückt.

Schlechte Dinge an diesem Ansatz zeigen sich auch schnell:

  • Sie müssen die fehlenden Informationen selbst eingeben. Im Gegensatz zum schrittweisen Entwurf, bei dem alle erforderlichen Formulare einzeln angezeigt werden, bevor Sie fortfahren können, müssen Sie hier für alle fehlenden Teile auf Bearbeiten klicken.
  • Der Bildschirm mit der höchsten Auslastung wird von Anfang an angezeigt. Es gibt keinen Ausweg aus der Zusammenfassungsansicht, in der alle Informationen angezeigt werden müssen, damit Sie sich beim Klicken auf "Bestellung aufgeben" wohl fühlen. Aber es als die Heimat des Prozesses zu haben, kann den Benutzer überwältigen.

Hier können Sie den Prototyp selbst testen: Prototyp A.1. Geben Sie keine Daten in Versand und Zahlung ein, sondern klicken Sie auf "Speichern".

Stufenbasiertes Design

Diese Architektur ist der Navigation mit Registerkarten sehr ähnlich, aber anstelle von Registerkarten haben wir Schritte, und die meisten enthüllen Formulare, die Sie ausfüllen müssen, um fortzufahren. Dieses Muster sollte allen bekannt sein, die das Glück hatten, mit dem Installationsassistenten gepackte Software zu installieren.

Bei den ersten Iterationen des Prototyping-Prozesses wird deutlich, dass das Inhaltsverzeichnis auch als Navigations- und Informationszusammenfassung dienen kann. Probieren Sie es aus:

Gute Dinge, die wir hier finden:

  • Der Prozess ist eindeutig progressiv: Ein Bildschirm nach dem anderen, unmittelbar gefolgt von einem anderen. Es wird immer nur eine Aktionstaste angezeigt. Es ist also unwahrscheinlich, dass Sie sich jemals fragen, was Sie als Nächstes tun sollen.
  • Wir konnten das Inhaltsverzeichnis in einen noch nützlicheren Teil der Benutzeroberfläche verwandeln, der nun auch zur Navigation und zur Auftragszusammenfassung dient. Indem Sie den Benutzern die Ergebnisse ihrer Bemühungen anzeigen, verbessern Sie in der Regel das allgemeine Verständnis des Prozesses.

Schlechte Dinge über diesen Ansatz:

  • Der Durchfluss variiert für verschiedene Anwendungsfälle. Erstbenutzer führen alle Schritte durch, während die registrierten Benutzer zum letzten Schritt geführt werden. Und viele Menschen werden wahrscheinlich beide Fälle erleben.
  • Registrierte Benutzer beginnen mit einem ziemlich geschäftigen Bildschirm, genau wie in unserem ersten Ansatz. In diesem Fall ist dies jedoch fast unvermeidlich, da keine Informationen eingegeben werden müssen, was bedeutet, dass keine Schritte angezeigt werden müssen.

Hier können Sie den Prototyp selbst ausprobieren: Prototyp A.2

Fazit

Es gibt keinen klaren Gewinner zwischen den beiden Ansätzen, da beide ihre einzigartigen Stärken und Schwächen haben. Viele Korrekturen werden in späteren Iterationen erfolgen. Es gibt definitiv mehr Benutzertests, aber das kommt auch später. Navigation ist nur ein kleiner Teil der größeren Erfahrung, die das eigentliche Testobjekt sein sollte.

In der Zwischenzeit finden Sie beide Prototypen hier:

https://checkout-redesign-89a9e.firebaseapp.com/#/

Probieren Sie Prototypen aus (vergessen Sie nicht, über das Menü unten rechts im Prototype Manager zwischen den Prototypen zu wechseln) und teilen Sie mir Ihre Vorschläge und Ideen auf Twitter mit.

Vergessen Sie nicht, sich anzumelden, und wir sehen uns in Teil II: Einkaufswagen-Neugestaltung.