Filter
ChatGPT Webshop in 360 dagen (7): Technische en functionele realisatie van een webshop
Hoe kom je van een standaard Magento webshop tot een op maat gemaakte gebruiksvriendelijke webshop die in lijn is met je strategie en marketing? Usability en doelgroepgericht denken waren bij LensBestel.nl de uitgangspunten bij de technische en functionele realisatie van onze webshop. In dit artikel bespreken we hoe het proces van technische realisatie precies verliep en tegen welke punten we daarbij zijn aangelopen.
Technische realisatie van een webshop
Onder technische- en functionele realisatie verstaan we het programmeerwerk dat nodig is om tot de webshop te komen die je voor ogen hebt. Ondanks dat programmeren soms als een weinig uitdagende, simplistische en uitvoerende taak wordt neergezet, heeft het veel invloed op de site en bevat het een aantal strategische keuzes. Uiteraard is het daarbij van belang om altijd je klant in gedachten te houden. Bij LensBestel.nl was de rolverdeling zo dat één van ons het programmeerwerk deed, terwijl de ander constant de belangen van de klant behartigde.
Enkele onderwerpen waarmee we tijdens het programmeren rekening hielden waren:
Usability: Over de ability om vanuit de user te denken is meer dan genoeg gepubliceerd. Hierbij gaat het niet alleen om het zorgen dat de website functioneel aan de behoefte van de klant voldoet, maar ook om het doorvoeren van best practices. Uit onze gebruikersonderzoeken en Google Analytics data blijkt dat er weinig problemen in de gebruiksvriendelijk van onze website zijn. Toch kan het altijd een stuk beter en hebben we plannen voor geavanceerde advies-tools en meer real-time uitleg bij onze formulieren.- Zoekmachine-optimalisatie: Een ander belangrijk onderdeel bij het programmeren is je code optimaliseren voor zoekmachine-optimalisatie. We hebben geprobeerd om onze code zo ‘clean’ mogelijk op te bouwen (vrijwel alles pagina’s zijn 100% W3C-valide) en rekening te houden met de best practices voor SEO (title-tags, opmaak/code scheiden etc.). Alhoewel een tijdrovende taak, zorgt SEO-compatibiliteit voor een optimale opname en vindbaarheid in de zoekmachine.
- Technische eisen: Ook is het van belang om rekening te houden met technische eisen voor browser-compatibility, hosting en koppelingen met externe systemen dan wel te installeren extensies. Met name hier heeft er veel dubbel werk plaatsgevonden voor onze webshop, aangezien de webshop alleen in Firefox getest was en daardoor net vóór live-gang niet compatibel bleek met andere browsers. Een belangrijke les voor ons was om tijdig programmeerwerk in de meest gebruikte browsers te testen. Gebruik hiervoor bijvoorbeeld Browsershots.
- De huisstijl: Zorg dat al je programmeerwerk in lijn is met de online en offline huisstijl die je hebt ontworpen voor je bedrijf.
- Uitvoerbaarheid: De uitvoerbaarheid van het programmeerwerk en met name de tijd die daar voor nodig is speelt ook een belangrijke rol. Zie ook prioritering van programmeerwerk hieronder.
Prioritering van programmeerwerk
Alhoewel we aardig veel kennis hebben van programmeren, zijn we geen programmeurs. Zo hadden we naast programmeren nog veel andere dingen te doen en was het niet onze bedoeling om Magento tot maatwerk te vervormen en hiermee diep in de kern te gaan zitten. Dit had als consequentie dat we besloten een strakke planning aan te houden met het programmeerwerk. De insteek was daarbij dat de website aan onze hoge eisen zou voldoen, maar hadden we een heldere prioritering en afstemming over hoeveel tijd dit in beslag zou mogen nemen.
Gedurende de maanden waarin we programmeerden, zijn veel issues hiermee van prio 1 naar prio 2 verschoven. We hielden daarbij goed bij (in Google Docs) wat er precies moest gebeuren en wat de geschatte tijd was. Na voltooien van de meeste prio 1 klussen, begonnen we aan prio 2. Deze zijn allemaal vóór live-gang opgelost (en dit betekende overigens het tot 5 keer toe verplaatsen van de geplande live-gang). Bij prio 1 klussen kun je denken aan ‘twee ogen in één bestelformulier’ en ‘geen onnodige stappen in het bestelproces’. Prio 2 is bijvoorbeeld ‘logo van fabrikant bij ieder product’ of ‘facturen in huisstijl’. Prio 3 klussen tenslotte zijn de tagcloud, nieuwsbrief en chat-functie op de site.
Op dit moment bevinden zich nog veel nice-to-have functionaliteiten in de Docs, waarbij we het iedere keer weer jammer vinden dat daar te weinig tijd voor is. Wel kunnen we met trots terugkijken op een geslaagde uitvoering van alle prio 1 en 2 klussen, zodat de webshop aan onze hoge eisen kon voldoen. De nice-to-haves worden nu sporadisch opgepakt en langzaam gefaseerd geïmplementeerd.
Uitbesteden
De kennis van programmeren en onze creativiteit zorgden ervoor dat 99% van de issues kon worden opgelost. Er waren echter ook twee diepere problemen waar we geen goede oplossing voor hadden. Na enkele weken bezig te zijn geweest om ook deze issues op te lossen, besloten we (gezien het belang ervan) toch een stuk van het budget in te zetten om een freelancer in te huren die goede kennis had van de kernfunctionaliteiten van Magento.
Allereerst begonnen we te zoeken in onze netwerken. LinkedIn werd daarbij veelvuldig ingezet om iemand uit ons netwerk te vinden. Dit leverde drie resultaten op, waaronder iemand uit de VS en een jonge programmeur. Helaas konden ook zij de issues niet oplossen en zijn we gaan kijken naar professionele uitbesteding. We hadden goede dingen gehoord over programmeurs uit India en Vietnam en besloten op een paar sites een oproep te plaatsen met een heldere uitleg over het op te lossen issue en het bijbehorende budget. We gebruikten hiervoor de volgende twee sites:
Op onze oproep kregen we relatief veel respons, maar het was in alle gevallen moeilijk in te schatten of men ook daadwerkelijk het probleem kon oplossen. De meesten bleken toch meer expert te zijn op het gebied van PHP en niet op het gebied van Magento. Dit heeft er uiteindelijk toe geleid dat we de oplossing toch zelf hebben gebouwd en een verbetering van de oplossing als prio 3 hebben opgeschreven.
Usability
Er zijn al veel artikelen geplaatst over usability. Wij belichten hieronder hoe wij hiermee om zijn gegaan en waar we zijn afgeweken van alle goede adviezen die we hebben gekregen.
Het belangrijkste bij usability
Usability betekende voor ons een aantal zaken:
- de klant moet intuïtief kunnen navigeren
- de site moet qua bestelproces lijken op wat de klant gewend is
- een ‘contact’ optie moet altijd zichtbaar zijn
- er moet één pagina zijn waar de klant informatie over het product krijgt en op ‘bestel’ kan klikken
- informatievoorziening moet overal optimaal en transparant zijn aangezien dit in de huidige setting van de markt nog ontbreekt.
Uren steggelen en verplaatsen in de klant
Onderdeel van het vervolmaken van onze usability waren de urenlange discussies die we hielden. We begonnen vrijwel altijd met een schone lei en een simpele vraag, bijvoorbeeld “als we het bestelproces opnieuw konden uitvinden, hoe zou het ideaal eruit zien?”. Dit bracht vervolgens interessante discussiepunten naar boven zoals “in welke volgorde moeten de velden staan”, “waar en hoe vaak moeten we de klant eraan herinneren dat ze hun ogen moeten controleren”, “wat is het maximum aantal vinkjes dat de klant moet invullen?”.
De brainstormprocessen vonden vrijwel altijd plaats als we fysiek bij elkaar waren. Zo was uittekenen van wat je bedoelde een stuk gemakkelijker dan via internet. Vaak lagen er dan ook tientallen A4tjes met krabbels en nét iets van elkaar verschillende bestelprocessen of productpagina’s. Alhoewel we hier veel tijd aan kwijt waren, heeft het in onze ogen wel een geoptimaliseerd proces opgeleverd waar de klant met een minimaal aantal klikken het product heeft besteld en betaald.
Omdat we niet vanuit de techniek dachten, vreesden we de realisatie. We hebben echter gemerkt dat de wijze woorden van onze omgeving steeds weer waar bleken: “techniek is het probleem niet”.
Conclusie, tips & tricks
De in-house technische- en functionele realisatie van LensBestel.nl heeft er uiteindelijk voor gezorgd dat er een gebruiksvriendelijke webshop staat. Desalniettemin heeft dit proces veel beren op de weg gekend waardoor de uiteindelijke livegang van de site behoorlijke vertraging heeft opgelopen. Aangezien je nooit klaar bent met het bouwen aan je webshop en je continu moet blijven vernieuwen, staan ons waarschijnlijk nog meer uitdagingen te wachten. Het beschreven proces en de aandachtspunten daarbij helpen je om deze uitdagingen aan te gaan!
Tot slot, nog enkele tips voor de development van een webshop:
- Zoals eerder opgemerkt in deze serie, redeneer vanuit je klant en kijk hoe voor hem of haar de ideale webshop eruit zou zien. Gebruik deze informatie voor de keuzes die je maakt tijdens het realiseren van de webshop. Maak hiervoor bijvoorbeeld gebruik van Customer Journeys.
- Probeer een prioritering aan te brengen in de functionaliteiten van de webshop. Focus je daarbij eerst op de meest belangrijke functionaliteiten (must-haves) waarna je deze voorzichtig kunt uitbouwen met minder belangrijke functionaliteiten (nice-to-haves).
- Schrijf alle nice-to-haves op, ze komen later zeker van pas. Als je ze niet nu kunt implementeren, dan komt het misschien later wel.
- Zorg dat je tijdens het ontwikkelproces geregeld feedback krijgt van zowel experts als je toekomstige klanten. Dit zorgt ervoor dat je de juiste beslissingen maakt en voorkomt een hoop onnodig werk.
- Bepaal voor jezelf de ‘cut off point’ wanneer je gaat uitbesteden. Bedenk dat dit relatief veel tijd en geld kost, ook tijd en geld die gaan zitten in coördinatie en aansturing van de personen.
- Leer van je concurrenten! Kijk wat er wel en wat niet werkt en maak gebruik van deze ervaringen!
- Ga altijd uit van de functionaliteit, techniek is het probleem niet.
Volgende week weer een nieuwe aflevering. Lees ook de andere artikelen uit de serie Webshop in 360 dagen.
Update: Kijk voor meer informatie ook op Handleiding Webshop: in 10 stappen je eigen webshop.
Over de auteurs
