-

Zo verhoogde Coolblue conversie smartphones met 30 procent

Coolblue zag het afgelopen jaar het aantal bezoekers met smartphones snel toenemen tot ruim 8 procent. Maar ze zagen ook dat de conversie van deze bezoekers ver achterbleef bij die van de desktop. Hoogste tijd dus om deze bezoekers een betere gebruikerservaring te bieden met een mobiele website.

Als Coolblue zo’n grote stap maakt, loont het om daar goed naar te kijken. Want van hun ervaringen kunnen we absoluut veel leren. Daarom deze analyse aangevuld met een gesprek met Vincent Vreugdenhil, Product Owner / User Experience Designer bij Coolblue en verantwoordelijk voor het design van de websites.

Responsive Web Design

Het eerste dat opvalt is de keuze voor Responsive Web Design in plaats van een aparte mobiele website of een native app. “De keuze voor responsive web design in plaats van een losse mobiele website heeft vooral te maken met de beheersbaarheid van de content”, legt Vincent Vreugdenhil uit. “We wilden voorkomen dat we content op twee of drie verschillende plaatsen zouden moeten onderhouden. Ook is het op deze manier makkelijker om kleine aanpassingen snel door te voeren. De keuze voor responsive web design in plaats van native apps is gebaseerd op onze wetenschap dat het publiek vooral via Google komt. Dan kunnen ze veel beter direct op een mobiel geoptimaliseerde pagina uitkomen, dan dat ze eerst een app moeten downloaden.”

Een verstandige keuze denk ik, aangezien het aankoopproces van de meeste consumenten vaak over meerdere schermen loopt. De zoektocht begint regelmatig op een smartphone en wordt niet zelden afgemaakt op een laptop of tablet. Dit blijkt uit een groot onderzoek dat Google deed in 2012. Een responsive website heeft één webadres (URL) voor alle apparaten en is daarmee ideaal voor dergelijke ‘consumer journeys’.

Geleidelijke introductie

Coolblue koos er ook voor om de responsiveness geleidelijk in te voeren. “We begonnen met de checkout en het winkelmandje”, zegt Vincent Vreugdenhil. “Daar stapten namelijk heel veel smartphonegebruikers uit. Hier viel direct al het meeste te winnen aan conversie. De conversie op smartphones is sinds de eerste release al met 30 procent gestegen. De terugverdientijd laat zich dan ook uitdrukken in maanden. We zetten aangepaste onderdelen van de site al live zodra ze beter zijn dan de bestaande. Dit veroorzaakt soms wel een schrikeffect bij de bezoeker, maar zolang het de goede kant op gaat, ervaren ze het wel als positief. De eerste release van de responsive checkout pagina’s was al in april dit jaar. Daarna hebben we er steeds meer pagina’s aan vastgeplakt.” Een nadeel van deze aanpak is dat je soms zonder waarschuwing vanuit een mobiel geoptimaliseerde pagina nog op een full sized pagina terecht komt. Maar dat probleem wordt dus geleidelijk kleiner.

Techniek en methode

Het ontwikkelteam van Coolblue hanteerde bij de realisatie moderne technieken en methoden. “Het was een behoorlijke uitdaging om de mobiele ervaring goed krijgen zonder te veel aan de bestaande website te zitten”, aldus Vincent Vreugdenhil. “We hebben vooral de frontend aangepast. Dat wil zeggen: Javascript, CSS en HTML. We hebben met name de templates aangepast bovenop het bestaande framework. Aan de functionaliteit van de webshop zelf hebben we niet veel veranderd.” Voor de CSS styling gebruikte het team de Sass precompiler. Vincent Vreugdenhil over deze keuze: “Sass heeft ervoor gezorgd dat we een meer consistente stijl konden doorvoeren en dat we sneller konden ontwikkelen.” Ook gebruikte het team de agile ontwikkelmethode. Ze kozen daarbij voor veel korte sprints, om de veranderingen geleidelijk en in kleine stapjes door te voeren. Het voordeel daarvan is dat de impact op de gebruikerservaring telkens klein is, zodat de bezoekers de tijd krijgen om te wennen aan de kleine veranderingen. Ook is het effect van elke verandering op die manier heel goed apart te meten. Veranderingen die verkeerd uitpakken, zijn daardoor makkelijker terug te draaien of snel aan te passen.

Duurzame Website

Bovenstaande aanpak spreekt mij bijzonder aan, omdat hij in lijn is met De Duurzame Website waarover ik al in een eerdere blogpost schreef. Mede daarom was ik dan ook heel benieuwd naar het resultaat. Hieronder mijn bevindingen.

Performance

De website haalt bij de mobiele snelheidstest van Google PageSpeed Insights een score van 70/100. Dat is heel behoorlijk. De test geeft als enige verbeterpunten dat bepaalde JavaScript en CSS codes het laden van de ‘above the fold’ content onnodig vertragen. Ook de server response tijd kan volgens Google PageSpeed Insights beter. Mijn eigen ervaring op een iPhone 4s was wisselend. Meestal vond de site niet storend traag, maar sommige pagina’s deden er toch wel vijf tot zeven seconden over om te laden. “Aan de performance kunnen we nog wel het nodige verbeteren”, legt Vincent Vreugdenhil uit. “Voor de desktop is de site al behoorlijk geoptimaliseerd. Maar voor smartphones hebben we ons vooralsnog beperkt tot zaken als een icon font, zo min mogelijk plaatjes gebruiken en zoveel mogelijk met css opmaken. Het verbeteren van de performance staat nu dan ook hoog op onze roadmap.”

Gebruiksvriendelijkheid

Coolblue smartphone reviewDe website is op het relatief kleine schermpje van mijn iPhone 4s behoorlijk gebruiksvriendelijk. De header is overzichtelijk met een groot zoekveld en een opvallend winkelmandje. Links naast het zoekveld is het icoon van het dropdownmenu. Opvallend is dat Coolblue zich niet helemaal aan de inmiddels breed geaccepteerde conventie van drie horizontale streepjes houdt. Het onderste streepje is vervangen door een naar beneden wijzend driehoekje. Mij persoonlijk stoort het niet, maar uit ervaring weet ik dat veel mensen de standaard van drie horizontale streepjes al niet kennen. Het kan zijn dat dit afwijkende icoontje voor veel mensen niet duidelijk genoeg is. Vincent Vreugendhil over deze keuze: “Het menu-icoontje wijkt inderdaad af. We willen graag beweging aangeven. Als het menu is uitgeklapt, wijst het pijltje weer naar boven. We zien heel weinig dat gebruikers het niet snappen. We hebben er geen A/B test op losgelaten, want we zagen geen problemen tijdens de usability tests.”

Een aanraking van het menu-icoontje klapt het menu uit. Dit is behoorlijk overzichtelijk. Helaas wordt in het menu niet aangegeven wat het actieve onderdeel is waar je je bevindt als je het menu opent. Ook kan het uitklappen op oudere telefoons zorgen voor haperingen, aangezien de gehele content naar beneden wordt geschoven. Coolblue heeft gekozen voor allemaal hoofdletters in de menu-items. Dit wordt vaak gezien als ‘schreeuwerig’ en moeilijker leesbaar. Maar ik moet zeggen dat het mij persoonlijk niet stoort. Ik vind het al met al een prettig menu. De afmetingen van de menu-items zijn ook aangenaam. Je kunt ze heel makkelijk met een wijsvinger of duim bedienen.

Filteren

Coolblue smartphone filter uitgeklaptEen klik verder kom je op de overzichtspagina van de gekozen categorie. Wat hier opvalt is vooral de knop ‘filteren’. Handig wanneer er veel items op de overzichtspagina’s staan. In het voorbeeld van de smartphones zijn het maar liefst 25 pagina’s van tien producten elk. Een gebruiksvriendelijk filter voor zoveel producten is een enorme uitdaging op een klein schermpje. En dat merk je hier ook. Zodra je het filter uitklapt, bedekt het ¾ van het scherm. Wat erachter zit, is moeilijk te zien. Als je een of meer filteropties hebt aangevinkt wordt de pagina achter het filter ververst, maar je ziet niet hoeveel items je totale selectie bevat. Deze informatie wordt alleen per subcategorie getoond. Dat is wel jammer, want het totaal aantal gevonden items is wel zo handig om te bepalen of je nog verder wilt filteren.

Wat verder opvalt aan de filter interface is dat deze zich niet erg intuïtief laat inklappen. Zeker als je wat naar beneden bent gescrold doet dit probleem zich voor. Het zou handig zijn als je het filter met een swipe naar links kan verbergen, zodat je verder kan met je zoekresultaten. In plaats daarvan moet je helemaal naar boven scrollen en op het naar links gerichte pijltje rechtsboven het filter tappen. Als je het eenmaal weet, is het geen groot bezwaar, maar erg intuïtief is het niet. Vincent Vreugdenhil hierover: “Het filter was ook best ingewikkeld. En het is nog steeds niet perfect. Het uitgeklapte filter is voor veel bezoekers inderdaad lastig om weg te krijgen. We werken nog aan verbeteringen.”

Detailpagina

De detailpagina per product is heel duidelijk en overzichtelijk. De afbeelding van het product is aan de grote kant voor het schermpje van de iPhone 4s, maar storend is het niet. Wanneer er meer dan één foto is, kun je op een pijltje naar recht klikken. Het zou mooi zijn als je hier ook kon swipen. Voor veel mensen is dat intuïtiever. Je kunt ook tussen de foto’s navigeren middels een aantal kleine thumbnails eronder, maar die zijn op de iPhone 4s ‘below the fold’ (buiten beeld dus). Als je op het linkje ‘alle afbeeldingen’ klikt, krijg je die functionaliteit wel (behalve het swipen dan).

Video review

Coolblue smartphone video overlayVeel producten hebben ook een video review. Dat is natuurlijk heel prettig. Zeker ook op een smartphone, aangezien het bekijken van een video op een smartphone voor veel mensen fijner is dan het lezen van tekst. De video opent in een overlay. Op zich prima. Op iOS apparaten moet je om de video weer te verlaten op de tekst ‘gereed’ linksboven de video klikken. Maar deze is nogal slecht zichtbaar. Wat ook werkt is met duim en wijsvinger ‘knijpen’. Ik kan me voorstellen dat veel gebruikers dit lastig zullen vinden. Android speelt in browser af via de geïntegreerde player.

Compleet en nuttig

De informatie die verder bij het product staat is, zoals we van Coolblue gewend zijn, zeer compleet en nuttig. Een goede omschrijving, duidelijke plus- en minpunten. Reviews. Specificaties. Alternatieven en andere meer productspecifieke informatie. De presentatie is prettig en helder. De leesbaarheid prima.

Bestelproces

Tijd om te bestellen. Een klik op de zeer duidelijke knop ‘In winkelmandje’ plaatst het product in het winkelmandje. Dit winkelmandje is lekker overzichtelijk opgezet. Het wijzigen en verwijderen van items is intuïtief. Alle opties zijn duidelijk, zoals de bezorgmogelijkheden. Alle overbodige ‘clutter’ is verwijderd. Dit voelt zelfs beter aan dan de desktop site, omdat ik nog minder word afgeleid door zaken als navigatie, advies, winkelvinder en andere randverschijnselen. Die zijn allemaal netjes naar onderen verdwenen. Het zal me niet verbazen als de ervaringen die Coolblue hiermee opdoet, ook leiden tot versimpelingen in de desktop versie. Vreugdenhil: “We zijn al meer ‘mobile first’ gaan denken. Hierdoor kijken we kritisch naar de prioritering en volgorde op de desktop pagina’s. Als gevolg daarvan hebben we het winkelmandje op de desktop al versimpeld. Dit gaat zeker nog veel meer invloed hebben.”

Coolblue checkout responsive

Checkout

Met een tap op de duidelijke knop ‘bestellen’ ga ik naar de checkout. Als ik al een Coolblue-account heb, kan ik hier inloggen met e-mailadres en wachtwoord. Dit hoef je maar één keer te doen. Daarna onthoudt de website je en kun je super makkelijk (voor sommigen wellicht te makkelijk) met je smartphone je bestelling plaatsen. Eenmaal in het bestelproces kan je helaas niet meer terug naar de specifieke winkel waar je vandaan komt, alleen maar naar de coolblue.nl

Betalen

Betalen kan met iDeal, creditcard of vooruitbetaling. Jammer dat de betaalpagina zelf nog niet is geoptimaliseerd voor smartphones. Hier moet je nog wel met je vingers inzoomen om te kunnen zien wat je doet. Maar daar kan Coolblue verder niet veel aan doen.

Link naar full size website

Opmerkelijk vind ik dat Coolblue ervoor heeft gekozen om een duidelijke link te plaatsen naar de full size website. Mobile en responsive aanhangers vinden dit doorgaans een doodzonde. Vincent Vreugdenhil legt uit waarom ze dit toch hebben gedaan: “We merkten tijdens usability onderzoeken dat veel bezoekers minder vertrouwen hadden in de mobiele versie. Ze waren bang dat er minder informatie op zou staan dan op de full size website. Daarom wilden we ze deze uitweg bieden. Maar in de praktijk wordt deze optie maar weinig gebruikt. We hebben wel wat dingen weggelaten, maar geen belangrijke zaken. Dubbele content. Linker menu. Geen 30 producten op de homepage. Maar je kunt wel alle producten kopen.”

Roadmap

Op de vraag hoe de roadmap voor de komende tijd eruit ziet, antwoord Vincent Vreugdenhil: “Performance. Nog sneller krijgen. Optimaliseren van een aantal pagina’s die nog verbeterd kunnen worden. Onze eerste focus lag op het verbeteren van de conversie van smartphones, aangezien die heel erg achterbleef bij die op desktops en tablets. Op dit moment is er daarom nog maar 1 media query op 767 pixels (net onder ipad formaat). Tablets krijgen dan ook de desktop site geserveerd. Maar de conversie op tablets is momenteel minder dan op desktops. Daarom gaat onze aandacht de komende tijd ook uit naar het verbeteren van de conversie op tablets. Denk daarbij aan het verbeteren van touch mogelijkheden, gestures e.d..”

Conclusie

Al met al vind ik de responsive webshop van Coolblue al heel goed werken op een smartphone. Hier en daar is de interface nog niet zo intuïtief als zou kunnen. Het verbaast me dan ook niet dat Coolblue zelf aangeeft dat de conversie op smartphones al met 30% is gestegen. Ik vermoed dat klanten die al redelijk goed weten wat ze willen kopen, steeds makkelijker hun telefoon zullen pakken i.p.v. de laptop of desktop. Wel denk ik dat klanten die meer research willen doen; meer producten onderling willen kunnen vergelijken, toch de voorkeur zullen blijven geven aan tablet of laptop/desktop. Dit vanwege het enorme assortiment dat in de winkels van Coolblue verkrijgbaar is. Ik ben heel benieuwd of mijn verwachtig uit gaat komen dat de ervaringen die de ontwerpers van Coolblue nu opdoen met de smartphonegebruikers gaan leiden tot verbeteringen voor alle gebruikers. Dus ook gebruikers van tablets, laptops en desktops.”

 

Deel dit bericht

Plaats een reactie

Uw e-mailadres wordt niet op de site getoond