Amazon Checkoutin uudelleensuunnitteluharjoitus - osa I: Navigointi

Huomaa: tämä on harjoitus. Sen tarkoituksena ei ole luoda yritysratkaisuja, vaan harjoittaa niiden luomista simuloidussa ympäristössä. Arvaamisen voimaa käytetään liiketoiminnan tavoitteiden ja mittareiden muodostamiseen.

Löydät linkit tehtävän prototyyppeihin ja muihin osiin (kun ne on julkaistu) tämän artikkelin lopusta.

Maali

Amazon tekee hienoa työtä käsitellessään miljoonia tilauksia päivässä, mutta parantamisen varaa on aina: korkeammat asiakastyytyväisyysasteet, onnistunut myynti, muutokset maksettuihin tilauksiin jne.

Tässä harjoituksessa yritämme hajottaa kassalle pienempiä kokemuksia ja katsoa, ​​voimmeko parantaa niitä yksi kerrallaan, navigoinnista alkaen.

Annettu

Kassa Amazonissa on monivaiheinen prosessi. Rekisteröimätön käyttäjä käy läpi tilauksen tekemisen seuraavasti:

Rekisteröimättömien käyttäjien kassavirta Amazon.com-sivustossa

Huolimatta siitä, että emme tiedä mitään tämän työnkulun todellisista suoritusindikaattoreista, voimme havaita tässä ilmeisimmän ongelman - käyttöliittymä näyttää puuttuvan johdonmukaisuudesta:

  • Useimmissa näytöissä on ainutlaatuinen asettelu ja muotoilu, joten joudut tutkimaan jokaisen näytön, ennen kuin voit aloittaa vuorovaikutuksen sen kanssa luottavaisesti.
  • Näyttöjen konteksti on erilainen: Ostoskori (1) -näkymä on osa yleistä käyttöliittymää, mutta loput näytöt käsitellään erityisellä otsikolla, joka edustaa toteutettavat vaiheet.
  • Selaus kassalla on yksisuuntainen tie: et voi palaa edellisiin vaiheisiin suurimman osan ajasta. Otsikko osoittaa edistymisen, mutta se ei tee työtä hyvin: olet kiinni lähetys- ja maksutavoista kolmella eri näytöllä (3–5), sitten lahjavaihtoehdot ohitetaan vain useimmissa käyttötapauksissa.

Kassalle on monimutkainen (syystä) monenlaisia ​​UX-ongelmia, ja suosittelen, että teet sen läpi itse ja tarkkailet muiden tekevän sitä. Ratkaisun kokeminen on tuhannen kuvan arvoinen.

Toistaiseksi tehtävämme on parantaa navigointia, ja on aika tehdä joitain lyijykynätöitä.

Sketching

Doodling on loistava työkalu käyttöliittymäsuunnitteluun. Samoin kuin aivoriihi, vaihdat laatua ja yksityiskohtia ratkaisujen tuottamisen vapauden ja nopeuden takaamiseksi. Ja jos kysyt minulta, ensimmäisessä iteraatiossa tärkeintä on vapaus ja nopeus.

Doodling-tuotteet: ruma, kaoottinen ja oivaltava.

Muutama tunti myöhemmin, lukemattomia ideoita kiehuu jompaan kumpaan navigoinnin lähestymistapaan:

Ensimmäinen niistä on kassakeskeinen. Se tarkoittaa, että aloitamme periaatteessa sillä, mikä on tällä hetkellä kassalle viimeinen näyttö: Yhteenveto. Tietojen muokkaamiseksi käyttäjän on avattava vastaavat näkymät (kuten lähetys ja maksu).

Toinen on vaihepohjainen. Se on hyvin samankaltainen kuin Amazonin nykyinen malli, mutta joitain poikkeuksia lukuun ottamatta: ostoskori on osa kassan yleistä työnkulkua, ja haluamme myös antaa käyttäjille mahdollisuuden liikkua vapaasti prosessin vaiheissa.

Nyt kun meillä on luonnokset kahdelle lähtökohdalle, voimme siirtyä seuraavalle suunnittelututkimuksen tasolle. Ei, ei tietenkään makeisia.

prototyyppien

Sen sijaan, että piirtäisimme malleja Sketchissä tai Figmassa vain lisätäksesi hieman lisätietoja käsin piirrettyihin piirrokkeihimme, käytämme vue.js-tiedostoa aloittaaksemme heti toimivien kuvioiden luomisen.

Prototyypeissä on sisäänrakennettu Prototype Manager -sovellus, joka vaihtaa nopeasti toteutettavien versioiden ja käymämme iteraatioiden välillä:

Prototyyppien johtaja

Kassalle keskittyvä muotoilu

Ideana on tehdä viimeisestä Checkout-sivusta lähtökohta ja saada kaikki muut (muokattavat) näkymät sen lapsille:

Ostoskorin näyttäminen osana monimutkaista näyttöä ei ole hyvä idea niille, jotka haluavat vain nähdä, mitä siellä on, tai ehkä poistaa joitain esineitä. Joten on järkevää asettaa muokattava ostoskorinäyttö prosessin lähtökohdaksi, vaikka se ei olisi pääkuva.

Joitakin koodaus tunteja myöhemmin, meillä on prototyyppi, joka simuloi vaiheita, joilla ensimmäiset käyttäjät pääsevät läpi tämän navigointiarkkitehtuurin:

Alkuperäiset testit ja havainnot paljastavat joitain hyviä asioita tästä lähestymistavasta:

  • Ensimmäisen käyttäjän päävirta on sama kuin rekisteröidyn: Ostoskori - Kassalle (- valinnaisesti Muokkaa toimitus- / maksutietoja). Tämä kuvio on yksinkertainen verrattuna vaihepohjaiseen navigointiin, jolla on taipumus ohittaa joitain vaiheita hiljaa tietyissä olosuhteissa.
  • Millä hetkellä tahansa on helppo kertoa missä olet prosessissa, miten pääset sinne ja missä painikkeet vievät sinut. Tämä mukavuus saavutetaan poistamalla kaikki salaperäiset Jatka ja Jatka-painikkeet, mikä itsessään on seurausta siirtymisestä lineaarisesta vaihe vaiheelta. Täällä käyttäjien on tietoisesti päätettävä siirtyä jokaiselle näytölle painamalla vastaavaa painiketta.

Myös tämän lähestymistavan huonot asiat paljastuvat nopeasti:

  • Sinun on valittava kirjoittaa puuttuvat tiedot itse. Toisin kuin vaihepohjaisessa suunnittelussa, joka näyttää kaikki vaaditut lomakkeet yksi kerrallaan ennen kuin se antaa sinulle mahdollisuuden jatkaa, tässä sinun on painettava Muokkaa kaikille puuttuville kappaleille.
  • Vilkkain näyttö näkyy heti alusta. Yhteenveto-näkymästä, jonka on näytettävä kaikki tiedot, ei sinun pidä päästä eroon, jotta voit tuntea olosi mukavaksi napsauttamalla Tee tilaus. Mutta se, että se on prosessin koti, voi hämmästyttää käyttäjää.

Täällä voit testata prototyypin itse: Prototyyppi A.1. Älä vaivaudu syöttämään joitain tietoja lähetys- ja maksutapaan - vain Tallenna-painikkeen painaminen tekee nyt tempun.

Askelpohjainen suunnittelu

Tämä arkkitehtuuri on hyvin samanlainen kuin välilehdillä navigoiminen, mutta välilehtien sijaan meillä on vaiheita, ja suurin osa niistä paljastaa lomakkeet, jotka sinun on täytettävä jatkaaksesi. Tämän kuvion tulisi näyttää tutulta jokaiselle, joka onni onnekkaasti asentamalla ohjatun asennusohjelman mukana toimitetut ohjelmistot.

Prototyyppiprosessin ensimmäisten toistojen aikana käy ilmeiseksi, että sisällysluettelo voi toimia myös navigoinnin ja informaation yhteenvedona. Joten miksi et kokeilla sitä:

Hyviä asioita, joita löydämme täältä:

  • Prosessi on selvästi etenevä: yksi näyttö kerrallaan, jota seuraa heti toinen. Näet vain yhden toimintapainikkeen kerrallaan, joten on epätodennäköistä, että koskaan mietit mitä seuraavaksi tehdä.
  • Pystyimme muuttamaan sisällysluettelon käyttökelpoiseksi osaksi käyttöliittymää, joka nyt toimii myös navigoinnissa ja tilausyhteenvedossa. Käyttäjille heidän ponnistelujensa tulosten näyttäminen parantaa yleensä prosessin yleistä ymmärrystä.

Huonoja asioita tässä lähestymistavassa:

  • Virtaus vaihtelee käyttötapojen mukaan. Ensimmäistä kertaa käyttäjät käyvät läpi kaikki vaiheet, kun taas rekisteröidyt käyttäjät siirretään viimeiseen vaiheeseen. Ja monet ihmiset kokevat todennäköisesti molemmat tapaukset.
  • Rekisteröityneet käyttäjät alkavat melko kiireisellä näytöllä, aivan kuten ensimmäisessä lähestymistapassamme. Vaikka tässä tapauksessa se on melkein väistämätöntä, koska täytettäviä tietoja ei ole, mikä tarkoittaa mitään vaihetta näyttää.

Täällä voit kokeilla prototyyppiä itse: Prototyyppi A.2

johtopäätös

Näiden kahden lähestymistavan välillä ei ole selvää voittajaa, koska molemmilla on omat vahvuutensa ja heikkoutensa. Monet korjaukset tulevat myöhemmissä iteraatioissa. Käyttäjien testaamista on ehdottomasti enemmän, mutta se tulee myös myöhemmin. Navigointi on vain vähän suurempi kokemus, jonka pitäisi olla todellinen testattavana.

Samaan aikaan löydät molemmat prototyypit täältä:

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

Kokeile prototyyppejä (älä unohda vaihtaa niiden välillä käyttämällä Prototype Manager -valikkoa oikeassa alakulmassa) ja lyö minut ehdotuksillesi ja ideoillesi Twitterissä.

Älä unohda tilaamista ja näen sinut osassa II: Ostoskorin uudelleensuunnittelu.