Sådan bruger du en trinindikator i dit købsflow

En trinindikator er en naturlig del af købsflowet på e-handelssites. Trinindikatoren fortæller kunden, hvor mange og hvilke steps købsprocessen består af og hvornår den endelige ordre er gennemført. Dette skaber både overblik og giver kunden følelsen af progression i flowet.

Irma

Eksempel på trinindikator på Irma.dk. Købsflowet består af 4 steps: 1. Kundeoplysninger, 2. levering, 3. Betaling, 4. Kvittering.

Baymard Institute beskriver, på baggrund af deres undersøgelse af checkout-usability, hvordan kunder forventer at købsflowet er et lineært forløb, hvor de forskellige trin kommer i en bestemt sekventiel rækkefølge:

If people think of your multi-step form as a straight path, then the sequence of your pages must be linear or you will break people’s expectations (which is bad for usability).

It’s a simple logic, after step #1 comes step #2, and after that step #3, etc. While this sounds obvious, you’d be surprised how often this is broken in practice. Many websites introduce sub-steps and round trips, resulting in a non-linear path.” 

http://baymard.com/blog/ux-illusion-of-space

Ved hjælp af en trinindikator kan du imødekomme kundens forventning om et lineært flow og samtidig give fornemmelsen af progression.

Når du designer en trinindikator til dit købsflow, bør du overveje at:

  1. Præsentere trinindikatoren som en vandret linje i toppen af købsflowets sider, som bevæger dig fra venstre mod højre.
  2. Markere trinene med tal: 1, 2, 3, 4
  3. Lave pile mellem trinene.
  4. Undgå at introducere ekstra ting undervejs, der ikke stemmer overens med de trin du har visualiseret for brugeren

Se f.eks. hvordan irma.dk gør dette i eksemplet ovenfor.

Det er samtidig afgørende at navnene på købsflowets trin er sigende og beskriver, hvad de enkelte trin handler om. Vær klar i spyttet og husk på, at navnene skal tale kundens sprog.

Lad os se på nogle eksempler.

Zalando

Zalando.dk har fire trin i deres købsflow. Alle fire er navngivet efter det siderne i købsflowet handler om og giver hurtigt kunden et overblik over, hvad processen rummer.

 

HMPå hm.com består købsflowet af tre steps: Shoppingbag, Kasseoplysninger, Købet er gennemført. Kasseoplysninger rummer hele checkout delen på sitet, hvilket er designet som et one page checkout med kundeoplysninger, levering og betaling. Men Kasseoplysninger er ikke et specielt sigende navn til dette trin og kunden er derfor tvunget til at scrolle ned på siden, for at finde ud af, hvad købsflowet rummer.

Stylepit.dk kan også give udfordringer:

Stylepit

Stylepit viser også købsflowets trin. Dog ligner de fire trin mere en link menu end en trinindikator. Der er ingen tal, pile eller andet, der indikerer at dette er købsflowet. Trinindikatoren kan nemt blive overset eller blive fejlfortolket som links. Yderligere er navngivningen på det første punkt ”Autorisation” et begreb, som næppe hjælper brugeren. Det tyder på at være et internt begreb, som her er blevet en del af brugergrænsefladen.

Kurv og ordrebekræftelse

Som udgangspunkt er indkøbskurven ikke en del af dit købsflow. Det er først når brugeren går fra kurven og ”til kassen” at din trinindikator skal træde i kraft.

Der er delte meninger om, hvorvidt kvitteringen/ordrebekræftelsen bør være en del af selve købsflowet og dermed trinindikatoren. Benjamin Gundgaard forklarer i sin bog ”Sælg mere på nettet” at kvitteringen ikke er en del af flowet, da den er et resultat af processen, men ikke en del af den. Dette er også teknisk korrekt, men der er også argumenter for at have kvitteringen med i trinindikatoren. Ved at vise kvitteringen som et afsluttende trin, ved kunden præcist hvornår købet afsluttes. Når hun bevæger sig fra det andet sidste trin i flowet, går hun til kvitteringen, hvilket vil sige, at nu lægges ordren definitivt.

Tress

På tress.dk er kvitteringen en del af trinindikatoren og kunden ved derved, hvornår det endelige køb er foretaget.

Husk det naturlige flow

Bag ved scenen er det selvfølgelig helt grundlæggende, at dit flow giver mening og følger kundens mentale model, da trinindikatoren er baseret på dette flow. En klassisk opbygning af flowet starter med oplysninger om kunden og levering i starten af flowet og betaling som det sidste step inden ordren er lagt. Der kan være andre steps, alt efter hvordan din forretning er bygget op og hvor meget tryghed brugeren har behov for undervejs, eksempelvis i forhold til opsummerende sider, der lader kunden bekræfte alle oplysninger i forhold til ordren og levering.

Magasin

Magasin.dk præsenterer 5 steps i deres checkout. Der er tydelig markering med numre og en overskrift til hvert punkt. Men, prøv at se på rækkefølgen i trinindikatoren. Betaling optræder to gange i flowet, først da brugeren skal vælge betalingsform (altså korttype) og efter dette er valgt, går brugeren til en ordreoversigt, inden hun går til betaling. Hvorfor vælges korttype ikke i forbindelse med og lige inden selve betalingen? Magasin kunne skære et trin fra i købsprocessen og undlade at brugeren skal forholde sig til betaling to gange.

Jeg håber dette hjælper dig med at komme i gang med at implementere en trinindikator på dit site og overvej i samme ombæring om ikke et tunneldesign også vil være en god idé. Begge dele vil være til gavn for dine kunders købsproces og dermed din forretning.

Kategorier: E-handel, UX

Tagged as: , , , ,