Amazon Checkout Herontwerp Oefening —Deel I: Navigatie

Let op: dit is een oefening. Het doel is niet om bedrijfsoplossingen te creëren, maar om te oefenen met het maken ervan in een gesimuleerde omgeving. De kracht van raden wordt toegepast om bedrijfsdoelen en -statistieken te vormen.

Aan het einde van dit artikel vindt u links naar de prototypes en andere delen van de oefening (zodra ze zijn gepubliceerd).

Het doel

Amazon doet geweldig werk met het verwerken van miljoenen bestellingen per dag, maar er is altijd ruimte voor verbetering: hogere klanttevredenheid, succesvolle verkoop, conversies naar betaalde abonnementen, enz.

In deze oefening proberen we het betalingsproces op te splitsen in kleinere ervaringen, en kijken we of we deze één voor één kunnen verbeteren, beginnend met navigatie.

Het gegeven

Afrekenen bij Amazon is een proces met meerdere stappen. Dit is wat een niet-geregistreerde gebruiker doorloopt om een ​​bestelling te plaatsen:

Niet-geregistreerde gebruikersuitcheckstroom bij Amazon.com

Hoewel we geen van de feitelijke prestatie-indicatoren voor deze workflow kennen, kunnen we hier het meest voor de hand liggende probleem vinden - UI lijkt consistentie te missen:

  • De meeste schermen hebben een unieke lay-out en stijl, dus je moet elk scherm bestuderen voordat je er vol vertrouwen mee kunt communiceren.
  • Schermen hebben een andere context: de weergave Winkelwagen (1) maakt deel uit van de algemene gebruikersinterface, maar de rest van de schermen wordt behandeld met een speciale koptekst die staat om te voltooien.
  • Navigeren door het betalingsproces is een eenrichtingsweg: u kunt meestal niet teruggaan naar vorige stappen. Koptekst geeft uw voortgang aan, maar het werkt niet goed: u zit vast in Verzending en Betaling voor drie verschillende schermen (3-5), dan worden Cadeau-opties in de meeste gevallen gewoon overgeslagen.

Het betalingsproces is complex (om een ​​reden) met veel meer UX-problemen, en ik raad je aan dit zelf te doorlopen en te kijken hoe anderen het doen. De oplossing ervaren is duizend afbeeldingen waard.

Voor nu is het onze taak om de navigatie te verbeteren, en het is tijd voor wat potloodwerk.

Schetsen

Doodling is een geweldig hulpmiddel voor het verkennen van UI-ontwerpen. Net als bij brainstormen ruilt u kwaliteit en details voor vrijheid en snelheid bij het genereren van oplossingen. En als je het mij vraagt, zijn vrijheid en snelheid het belangrijkst voor de eerste iteratie.

Producten van doodling: lelijk, chaotisch en inzichtelijk.

Een paar uur later komen talloze ideeën neer op een van de twee benaderingen in de navigatie:

De eerste is kassa-centrisch. Dit betekent dat we in principe beginnen met wat momenteel het laatste scherm van het betalingsproces is: Samenvatting. Om de informatie te bewerken, moet een gebruiker de respectieve weergaven openen (zoals verzending en betaling).

Tweede is stap-gebaseerd. Het lijkt erg op het huidige ontwerp van Amazon, maar op enkele uitzonderingen na: winkelwagen maakt deel uit van de algehele kassaworkflow en we willen gebruikers ook in staat stellen vrij door de stappen van het proces te navigeren.

Nu we schetsen voor twee startpunten hebben, kunnen we naar het volgende niveau van ontwerpverkenning gaan. Nee, geen modellen natuurlijk.

prototyping

In plaats van mockups in Sketch of Figma te tekenen om wat meer detail aan onze handgetekende doodles toe te voegen, gebruiken we vue.js om meteen bruikbare ontwerpen te maken.

De prototypes hebben de ingebouwde Prototype Manager om snel te schakelen tussen versies die we implementeren en iteraties die we doorlopen:

Prototype Manager

Op kassa gericht ontwerp

Het idee hier is om van de laatste Checkout-pagina een startpunt te maken en alle andere (bewerkbare) weergaven van de onderliggende items te maken:

Het weergeven van het winkelwagentje als onderdeel van het complexe scherm is geen goed idee voor degenen die gewoon willen zien wat er in zit, of misschien enkele items verwijderen. Het is dus logisch om het bewerkbare scherm met het winkelwagentje te gebruiken als toegangspunt voor het proces, ook al is dit niet het hoofdscherm.

Enkele uren later hebben we een prototype dat de stappen simuleert voor gebruikers die voor het eerst met deze navigatiearchitectuur doorgaan:

Eerste tests en observaties onthullen enkele goede dingen over deze aanpak:

  • De hoofdstroom voor een eerste gebruiker is dezelfde als voor een geregistreerde: Winkelwagen - Afrekenen (- optioneel Verzend- / betalingsinformatie bewerken). Dit patroon is eenvoudig, in vergelijking met stapsgewijze navigatie, dat in bepaalde omstandigheden de neiging heeft sommige stappen stil over te slaan.
  • Op elk willekeurig moment is het gemakkelijk om te zien waar je precies bent in het proces, hoe je daar bent gekomen en waar de knoppen je zullen brengen. Dit comfort wordt bereikt door alle mysterieuze knoppen Doorgaan en Doorgaan te elimineren, wat zelf het resultaat is van het stapsgewijze lineaire proces verlaten. Hier moeten gebruikers bewust kiezen om naar elk scherm te gaan door op de bijbehorende knop te drukken.

Slechte dingen over deze aanpak onthullen zichzelf ook snel:

  • U moet ervoor kiezen om de ontbrekende informatie zelf in te voeren. In tegenstelling tot het op stappen gebaseerde ontwerp, dat u alle vereiste formulieren een voor een toont voordat u verder kunt gaan, moet u hier op Bewerken drukken voor alle ontbrekende stukken.
  • Het drukste scherm wordt vanaf het begin getoond. Er is geen ontkomen aan de overzichtsweergave die alle informatie moet weergeven om u op uw gemak te laten klikken op Bestelling plaatsen. Maar het hebben van het als het begin van het proces kan de gebruiker overweldigen.

Hier kunt u het prototype zelf testen: Prototype A.1. Doe geen moeite om wat gegevens in te voeren bij Verzenden en Betaling. Alleen op "Opslaan" drukken is nu voldoende.

Op stap gebaseerd ontwerp

Deze architectuur lijkt erg op het navigeren met tabbladen, maar in plaats van tabbladen hebben we stappen en de meeste onthullen formulieren die u moet invullen om door te gaan. Dit patroon zou bekend moeten zijn voor iedereen die het geluk heeft om software te installeren die is verpakt met de Installatiewizard.

Tijdens de eerste iteraties van het prototypingproces wordt het duidelijk dat de inhoudsopgave ook kan dienen als navigatie- en informatiesamenvatting. Dus probeer het eens:

Goede dingen die we hier vinden:

  • Het proces is duidelijk progressief: een scherm tegelijk, onmiddellijk gevolgd door een ander. Je ziet slechts één actieknop tegelijk, dus het is onwaarschijnlijk dat je je ooit zult afvragen wat je vervolgens moet doen.
  • We konden de inhoudsopgave omzetten in een nog nuttiger deel van de gebruikersinterface dat nu ook dient voor navigatie en besteloverzicht. Gebruikers de resultaten van hun inspanningen laten zien, verbetert meestal het algemene begrip van het proces.

Slechte dingen over deze aanpak:

  • De stroom varieert voor verschillende gebruikssituaties. Eerste gebruikers doorlopen alle stappen, terwijl de geregistreerde gebruikers doorgaan naar de laatste stap. En veel mensen zullen waarschijnlijk beide gevallen ervaren.
  • Geregistreerde gebruikers beginnen met een behoorlijk druk scherm, net als in onze eerste aanpak. Hoewel het in dit geval bijna onvermijdelijk is, omdat er geen informatie is om in te vullen, wat betekent dat er geen stappen zijn om te laten zien.

Hier kunt u het prototype zelf proberen: Prototype A.2

Gevolgtrekking

Er is geen duidelijke winnaar tussen de twee benaderingen, omdat beide hun unieke sterke en zwakke punten hebben. Veel fixes komen in latere iteraties. Er is absoluut meer gebruikerstesten te doen, maar dat komt ook later. Navigatie is slechts een deel van de grotere ervaring, die het echte onderwerp van testen zou moeten zijn.

Ondertussen vindt u beide prototypes hier:

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

Ga je gang en probeer prototypes eens (vergeet niet om ertussen te schakelen met behulp van het menu van Prototype Manager rechtsonder) en kom op de hoogte van je suggesties en ideeën op Twitter.

Vergeet u niet te abonneren en ik zie u in Deel II: Herontwerp van winkelwagentje.