Maj
26
2009

Eksempel på et godt checkout

For et par uger siden oplevede jeg i forbindelse med et online køb, en checkout process, der fyldte mig med beundringer over hvor godt den var designet.

Heldigvis nåede jeg at tage screendumps af den, og jeg vil i denne artikel dele med jer hvad jeg fandt godt, og komme med forslag til forbedringer.

Butikken er Made4men, der sælge plejeprodukter og parfumer til mænd.Jeg kan anbefale at tage et kig forbi dem.

Produkvisning

Produktvisning - Klik for stort billede

Positive ting:

  • En virkeligt god produktbeskrivelse, også selvom der i eksemplet er tale om en "pakkeløsning".
     
  • Gode relaterede produkter, der ikke bare virker som et eller andet tilfældigt et automatiseret system har hevet frem.
     
  • Kundeanmeldelser (dog ikke på det viste produkt), som er noget der seriøst kan hæve conversion raten.

Forslag til forbedringer:

  • Jeg ville nok vælge at lave "Læg i kurven"-knappen med den samme grønne farve, som "Gå til kassen".

    Disse er de primære Call-to-actions på siden, og hvor den grønne knap har en klar, tydelig kontrast til de øvrige elementer på siden, så kanp den blå godt falde lidt i baggrunden i forhold til alle de blå link-tekster.
     
  • Jeg ville nok forsøge mig med en lidt større skrifttype på beskrivelsen.

    Rundt regnet siger man, at så snart ens målgruppe bevæger sig op over de 30 år, så har 20% synsproblemer. Og den lille skrifttype gør det til en næsten smertefuld oplevelse at læse meget tekst.
     
    Desuden begynder øjet at have problemer med at skifte linie, når man når op på over 55 karakterer per linie. Og i dette tilfælde er vi oppe over de 70 karakterer, hvilket gør det træls at læse den ellers fine, lange produktbeskrivelse.
     

Indkøbskurven

Indkøbskurv - Klik for stort billede

Positive ting:

  • Man er ikke i tvivl om, hvor man er henne i processen. En stor tydelig overskrift, og en klar markering af hele processen er utroligt godt lavet.
     
  • Det er super med et mini-billede af produkterne i kurven. Så er man ikke i tvivl om hvad men er igang med at købe.
     
  • "Videre"-knappen er lavet med den grønne, primære Call-to-action farve, og befinder sig lige nøjagtigt der hvor man forventer at knappen er placeret.
  • Det er fedt at Call-to-action farven ikke bliver misbrugt til alt muligt andet. Så bliver begrebet ikke udvandet, og man er aldrig i tvivl om hvor man skal klikke for at komme hurtigt videre.

Forslag til forbedringer:

  • Font-størrelsen har nu fået yderligere en tak nedad. Hvorfor mon, der er jo masser af plads?
     
  • Produktbeskrivelsen måtte godt være klikbar.
  • Det er fint med de fremhævede priser. Men fordi der bliver brugt så radikaldt en anderledes font-størrelse får det det hele til at se en smule rodet og uoverskueligt ud. Hvilket er kritisk, da indkøbskurven lige netop bliver brugt til at danne overblik.
     
  • Hvad med diskret at lave forslag til andre relevante produkter i bunden, ud fra de varer man har proppet i kurven?

    Det kan godt designes uden at være alt for forstyrrende, og man misser en oplagt mersalgsmulighed.
      

Levering

Levering - Klik for stort billede

Positive ting:

  • Her kom en af de ting, der fik mine øjne op for, at jeg havde fat i en butik, der vidste hvad de gjorde: Læg mærke til hvordan al unødvendig navigation og mersalgsgrafik pludseligt er forsvundet! Tilbage er der kun de elementer, som du måske vil have brug for i checkout-processen.

    To kæmpe thumbs-up her fra!
     
  • Registrering er ikke påkrævet!
     
    Jeg fatter simpelthen ikke hvorfor butikker bliver ved med at kræve at folk opretter sig som kunder først. Forsøg har vist at frafaldet i denne del af checkout-processen kan falde med helt op til 20 procentpoint, hvis man fjerner en tvungen oprettelse.
     
  • Der bliver ikke bare spurgt, om man vil modtage deres nyhedsbrev. Men det bliver også nævnt hvilke fordele man vil opnå i form af gode tilbud og nyheder før alle andre (det såkaldte WIIFM-princip, "What's In It For Me?").

Forslag til forbedringer

  • WIIFM for nyhedsbrevet kunne forbedres yderligere ved at skrive noget om frekvens, og evt. linke til den sidste nye udgave af nyhedsbrevet.
     
  • Hvorfor er der ingen WIIFM for kundeklubben? Hvad er det lige jeg får af fordele, hvis jeg opretter mig?
     

Betaling

Betaling - Klik for stort billede

Positive ting:

  • At betalingssiden er integreret i sitet, og ikke sker via en popup eller på en betalingsgateway, er altid et kæmpe plus.
     
  • Det er super med eksempler på hvorhenne på ens kreditkort informationerne kan findes.
     
  • Ekstremt fedt at man kan se selve ordren og leveringsadresse, så man har mulighed for at bekræfte at alle oplysninger er OK inden man indtaster sine kreditkortoplysninger.

Forslag til forbedringer:

  • Selvom det er fedt med billederne af kreditkortene, så er det ret utydeligt at se hvad de forestiller p.g.a. det grønne motiv.
     
  • Jeg ville nok vælge at kalde Call-to-action knappen for "Godkend og gennemfør". Så snart man klikker på den bliver ordren registreret, og det bliver ikke fremhævet godt nok med teksten "Videre".
     
  • I første forsøg missede jeg at man skulle acceptere handelsbetingelserne aktivt. Jeg ville nok vælge at placere den lige over "Videre"-knappen.
     
  • Muligheden for indtastning af Rabatkode bør placeres helt ude på indkøbskurven.

    På dette tidspunkt i checkout'et har man ligesom accepteret prisen. Så det er lidt sent at tilbyde en rabat.
     

Kvittering

Kvittering - Klik for stort billede

Positive ting:

  • Den daglige leder selv siger tak for ordren og tilbyder dig hjælp.
    Det er sgu' da go' stil!

    Hvis du lige havde købt noget i en fysisk butik, så ville du helt klart forlade den med en fed fornemmelse, hvis chefen selv lige stak hovedet ud og sagde pænt tak, imens han stak posen i hånden på dig. En lille ting, der har enorm effekt!

Forslag til forbedringer:

  • Hvorfor er det lige at de små billeder af produktet er forsvundet?

    Det ville klæde Made4men, hvis de gjorde indkøbskurv/ordrevisningen mere ensartet.
     
  • Et tydeligt link til handelsbetingelserne vil nok være rimeligt relevant.
     
  • Der er vist en bug ved "Forsendelsesmåde", da der ikke rigtigt står oplyst noget.
     
  • Igen ville jeg forsøge at lave mersalg ud fra de varer man lige har købt. Og tilbyde at pakke dem sammen med den originale ordre.

    Kunden HAR jo gennemført ordren, så jeg ser ikke noget i vejen for at forstyrre dem i et sidste forsøg på at presse produkter ned i halsen på dem tilbyde dem noget relevant.
     

Konklusion

Made4men er helt sikkert en butik jeg fremover vil hive frem igen og igen, når jeg skal komme med eksempler på, hvordan en god butik skal designes. Det var simpelthen en kæmpe fornøjelse at handle hos dem, og helt sikkert et sted jeg vil vende tilbage til.

Hvis jeg skulle hive 3 ting frem, som jeg nok ville anbefale dem at optimere lidt på, så er det:

  • Drop den lille, nørdede font, og arbejd med en lidt større skrifttype samt større farvekontrast imellem skriften og baggrunden.

    Det ville seriøst hjælpe alle os, der har rundet de 30 :-)
     
  • Lav en mere ensartet visning af en ordre.
     
  • Mersalg, mersalg, mersalg!

    Det ser ud til de har dataene til det, i kraft af "Relaterede produkter" på produktvisningen. Dette kunne sagtens udnyttes langt mere aggresivt, uden at det går alt for meget ud over købsoplevelsen.
     
Desuden savner jeg at "Den Gode Historie" bliver fortalt om butikken. Der er ikke rigtigt nogen fortælling om hvem der står bag, hvad deres filosofi, eller gode billeder af dem selv og deres forretning. Noget der er med til at højne troværdigheden gevaldigt.

Hvis du har lagt mærke til nogle detaljer i de ovenstående screendumps, som du synes er top-naise, så læg endelig en kommentar herunder!

Ejer du selv en webbutik, som trænger til at blive rykket rundt på samme facon, så tøv endelig ikke med at kontakte mig.

Kunne du lide denne blog post?
 
Så giv mig mægtigt gerne en +1, så jeg ved at jeg skal skrive mere af denne slags. Eller læg en kommentar herunder, så jeg ved om det jeg skriver er godt / skidt.
23 kommentarer
 Fedt indlæg

Det er da rart, at se der stadig er nogen der forstår at lave godt webdesign der virker.

Kanon anmeldelse.

//Kasper Hamann
Kasper Hamann , den 26. maj 2009 12:58:41
.
 Inspirerende. Super godt lavet og en god anmeldelse Søren.

Potter
Potter , den 26. maj 2009 13:17:52
.
 Lækker anmeldelse. Vi er selv temmelig stolte af den checkout vi i sin tid fik lavet i samarbejde med Made4men.dk, og har fået flere gode tilbagemeldninger på den.

Nu ved jeg ikke om ejeren af m4m læser med, men ellers vil jeg da sende ham linket til din gennemgang og dine forslag til forbedringer.

Johnny R. Christensen, LAiKA iT
Johnny R. Christensen , den 26. maj 2009 14:07:18
.
 Rigtig spændende og lærerig gennemgang. Udover de ting du nævner så faldt jeg også lige over et par småting.

På billede 3-levering kommer der et nyt telefonnummer fra til kundeservice i øverste venstre hjørne. Men det er ikke det samme nummer som det i øverste højre hjørne - selvom begge numre er til kundeservice?

Billede 4-betaling: Nede i højre hjørne ved post-dk logoet, står der "maxibrev danmark 0 DKK". Hvad betyder de 0 kroner? At levering koster 0 kroner og man skal betale 35 kroner for levering? Eller at maxibrev koster 0 kroner udover de 35 kroner? Det er lidt uklart.

Har man forresten ikke mulighed for at få sendt sin ordre som pakke hvis man hellere vil det? (mulighed for track-and-trace og forsikring)

Derudover synes jeg man skal droppe betegnelsen "rabatkode" og udelukkende bruge "gavekort". Rabatkode lyder som noget man kan få tildelt hvis man er heldig, og hvis man ikke har fået sådan en kan man godt føle sig lidt snydt. Gavekort giver ikke helt den samme fornemmelse på mig.

Ellers en rigtig lækker shop. Det er imponerende at få et så professionelt og unikt udtryk ud af en standard OsCommerce webshop!
Jacob W , den 26. maj 2009 14:18:42
.
 Med udgangspunkt i denne side:
http://www.made4men.dk/fudge-matte-hed-haarvoks-p-1274.html

Godt: Smart brug af title-tagget ved at indsætte et tilbud. Det skal nok give en fornuftig CTR i SERP

Dårlig: Når man trykker "forstår billede", så bliver billedet ikke større - det bliver faktisk endnu mindre :)
Jacob W , den 26. maj 2009 18:48:48
.
 @JacobW: Hmmm, sjovt med de forskellige telefonnumre. I lidt større foretagener ser man af og til dette, da det giver en mulighed for at tracke hvilken side det er folk står på, når de oplever problemer.

Men da numrene er ret forskellige, og derfor ikke direkte ligger i samme nummerserie, ligner det mere en fejl.

Der er mange andre småting rundt omkring, men jeg har i artiklen valgt at fokusere lidt på alt det positive. For det var i sandhed en imponerende oplevelse.

Mht. rabatkode, så ved jeg at det er et udtryk brugerne har taget til sig (jeg kan se at mange søger på det). Og derfor vil jeg argumentere for, at det er det rette term at bruge.

Jeg vidste faktisk ikke at det var Johnny / LaiKA, der havde været involveret i udviklingen. Men jeg kan helt sikkert sige at der så ikke ligefrem er tale om en "standard" osCommerce, da Johnny er en haj til at customize denne :-)
Søren Sprogø , den 26. maj 2009 21:35:26
.
 Rigtig god anmeldelse - helt sikkert et lækkert website.

Jeg snupper hvertfald selv lige ideen på vores kommende Last Touch webshop med billedet af ejeren på kvitteringssiden, som siger tak for købet - det er da en konge-ide :-)
Mogens Møller , den 26. maj 2009 21:55:47
.
 Hej Søren og alle jer andre,

Mega dejligt med en masse feedback, jeg smider lige et længere indlæg i morgen, og tror jeg vil igang med at implementere nogle af tiltagene. Der er helt sikkert noget vi kan bruge.
Jesper Hvejsel , den 26. maj 2009 21:58:13
.
 Er uenig med Søren Sprogø om at rabatkode er et ord brugerne har lært at acceptere.

Når jeg ser en rabatkode vil jeg altid lave en søgning på google for at se om der ligger nogle rabatkoder online, det gør der næsten altid, men de der ligger virker næsten aldrig. For det første forlader jeg købsprocessen når jeg ser ordet "rabatkode", hvilket må ses som særdeles negativt. Desuden kan jeg blive så frustreret over at rabatkoderne ikke virker (Jeg kan se at andre tidligere har fået 20%!), at jeg dropper mit køb.

Især når der er sådan et åbnetlyst alternativ (brug af "gavekort") er det for mig dybt uforståeligt at made4men bruger "gavekort".

Det var mine inputs :)

Mvh.
Peter
Peter Juel , den 27. maj 2009 08:56:25
.
 Hej Søren

En meget letlæselige artikel med mange gode pointer. Der var ihvertfald lige nogle ting jeg manglede på den nye version af haandlavet.dk som bliver lanceret "ligeomsnart" ;)
Tim L , den 27. maj 2009 09:18:48
.
 Hej alle sammen,

Så har jeg taget mange af punkterne til mig, og de er nu implementeret. Er for så vidt enig i mange af de ting du har nævnt, og nu tester vi lidt frem og tilbage. :-)

@Søren
Tak for god feedback.
Jesper Hvejsel , den 27. maj 2009 11:36:41
.
 Følgende ændringer er implementeret.

-Forskellige telefon numre er ændret.
-I udcheckning står der nu ikke maxibrev danmark 0 DKK - Istedet står der forsendelse med PostDanmark Gratis ved over 700 dkk og 35DKK når du er under 700. Vi sender store ordre som pakke og andre som maxibrev.
-Forsendelsesmåde er ændret så det passer.
-WIIFM er opdateret.
-Font størrelsen i shopping cart er kommet op.
-Produktbeskrivelse er klikbar
-Forbedret overblik
-Læg i kurv knap er nu grøn
-Font på produktbeskrivelsen har fået fra 10pt til 11pt

Ikke ændret
-Forstør funktionen - Vi har desværre ikke alle billederne i store nok størrelser til at forstørre dem. Vi søger dog hele tiden at blive bedre på den front.
-Rabatkode / Gavekort - Vi fastholder denne. Primært fordi den på en almindelig 15 tommer er ude af billedet. A/B Splittest har vist os at her irriterer den mindre.
-Billeder på kvitteringssiden - NOget vi vil lave i fremtiden
-Link til forretningsbetingelser er også med i overvejlserne.
-Mersalg kunne være interessant at lave her også, men kræver lidt mere programmering end egne evner magter.
-Accepterer handelsbetingelser aktivt? Den skulle gerne være checked fra start?
-Godkend og gennemfør, jeg er lidt i tvivl hvad der er bedst.
-Relevante produkter i shopping cart igen lidt mere end jeg magter selv.
Jesper Hvejsel , den 28. maj 2009 14:19:53
.
 @Jesper: Imponerende hurtigt rykket, og fedt du laver en update herinde :-)

Sig endelig til, hvis i har brug for hjælp med noget af det!
Søren Sprogø , den 28. maj 2009 16:33:18
.
 Super review af Made4Men - og super fedt, at Made4Men rent faktisk læser med og tager handling derefter! Jeg skal helt sikkert ud og lure ved næste lønudbetaling ;-)

Keep up the good work!
Michael Mortensen , den 29. maj 2009 22:44:38
.
 God gennemgang. det har helt klart givet mig lidt at tænke over ift. min egen butik rifraf.dk

Succesen ligger som altid i detaljen :) Endnu en gang tak for en god og relevant gennemgang.
Lisbeth , den 25. juni 2009 21:14:23
.
 Super anmeldelse Søren! Jeg bliver nød til at læse din blog noget oftere:-)

Anders , den 7. juli 2009 08:57:13
.
 Vil blot lige gøre opmærksom på, jeg nu har gjort alvor ud af min tidligere kommentar i dette indlæg og har implementeret billede af ejeren + taleboble hele vejen gennem checkout i vores nye webshop.

Vi har allerede nu fået rigtig god respons og feedback på checkoutet, som også konverterer rigtig godt. Så jeg vil blot sige tak for en super ide :-)

Har du lyst, kan du se webshoppen her: http://www.lasttouch.dk
Mogens Møller , den 22. juli 2009 09:52:06
.
 @Mogens: Fedt at høre!

Måske jeg skulle overveje at lave nogle flere af denne slags site reviews :-)
Søren Sprogø , den 23. juli 2009 09:00:08
.
 Jeg synes du skal lave nogle flere reviews. Det er skide god feedback...
Jesper Hvejsel , den 23. juli 2009 09:24:39
.
 Kanon grundig gennemgang af nogle af de allemest vigtige ting på en god og levedygtig webshop.
Og fandt da også lige et par ting der skal ændres på egen shop.
Kom endelig med flere af disse gennemgange.
Peter Laursen , den 7. maj 2010 20:59:22
.
 Rigtig god gennemgang af dette tjek out - men siden er jo dybt ULOVLIG - der er shoppen side sat v i "tilmeld nyhedsbrev" og "accepter betignelser" - dette er ulovligt da kunden selv aktivt gøre dette - lige en sag til forbrugerombudsmanden
Henrik , den 14. januar 2011 13:18:08
.
 @Henrik: Godt spottet!

"Accepter betingelser" er helt klart ulovligt. Eller ihvert fald et brud på PBS' retningslinier.

"Tilmeld nyhedsbrev", ikke nødvendigvis. Jeg får forhåbentligt snart en længere blog post klar om dette. Men der er lige noget jura, der skal checkes først.
Søren Sprogø , den 14. januar 2011 19:45:07
.
 Rigtig fed og overskuelig gennemgang af check out flowet. Det er fedt med de klare punkter, hvor man selv kan lave et check op, på sin egen shop.
'Dybt ulovlig' er måske stærke ord at bruge, men ja, det ville da være fint hvis de lige fik fjernet den auto check.
Casper Blom , den 16. marts 2011 10:58:46
.
Kommentar-muligheder er desværre midlertidigt slået fra. Der kommer simpelthen for meget spam ind.
Bemærk: Dit website link i kommentarer har NOFOLLOW. Det betyder det ikke har nogen SEO-mæssig værdi, så du kan lige så godt angive dit rigtige navn og et relevant link. Kommentarer, der bryder med dette, vil blive slettet øjeblikkeligt.
 
Det du indtaster som navn, e-mail og website vil desuden blive gemt i en cookie i din browser, så det er nemmere for dig næste gang du vil skrive en kommentar. Det er desværre ikke muligt at frabede sig dette.
 
Om mig
Jeg er en pragmatisk midtjyde med mere end 20 års erfaring i IT-branchen, de sidste 10 med alt inden for eCommerce.
Se hvad jeg kan gøre for dig
Eller se min referenceliste
 
Nyhedsbrev
Få besked per mail, når der er nye posts her på bloggen
 
Tilmeld nyhedsbrev
 
Samtidigt får du en mail med de bedste indlæg, så du ikke behøver at vente på guldkorn.
 
Få det som RSS feed     RSS feed
Få også kommentarer, sitemap
Kategorier
 
Søg
Jeg anbefaler
Rapporten over alle rapporter anno 2012, vinder af SEMaward 2012
 
Rapporten over alle rapporter anno 2012, vinder af SEMaward 2012
 
GA tricks: Skaffer mine kampagner nye eller gamle kunder? vinder af SEMaward 2011
 
Google Analytics rapporten over alle rapporter, vinder af SEMaward 2010
Afdeling 18 Søren Sprogø E-commerce Guru work Grønnegade 3, st. tv. 8600 Silkeborg Danmark work 26727404 56.165787 9.537120 Søren Sprogø Cookies