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

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

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

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

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

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.
   

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.