10 tips voor een straffe webshop (deel 1)

In deze nieuwe reeks artikels geven we in het totaal 10 tips voor een zeer goede webshop. Als Marlon hebben we al heel wat webshops bedacht, ontworpen en gebouwd. Geen bandwerk bij ons. We maken van elke shop iets uniek, met een eigen gezicht en het resultaat is altijd van een zeer hoge kwaliteit. Dus we mogen stellen — ok, toegegeven, dit klinkt arrogant — dat we stilaan weten waarover we het hebben.

The money will roll right in

Ga echter niet denken dat deze tips een perfect draaiende en geld binnenrijvende webwinkel garanderen. Zo werkt het helemaal niet!

Een goede webshop heeft om te starten een aantal basisvereisten, die keihard voor zich spreken, maar die we toch even kort opsommen:

  • een reeks straffe producten;
  • aan exact de juiste prijs;
  • ideaal gepromoot;
  • met een fenomenale klantendienst als ondersteuning.

Zonder deze fundering mag je webshop nog zo professioneel gemaakt zijn, zo mooi ogen of zo state-of-the-art zijn, je bereikt er niet zoveel mee. De vier puntjes hierboven, dat is waar je aan moet voldoen voor je ook maar aan de rest begint te denken.

Want dat is waar we het in deze artikels over gaan hebben: the icing on the cake. Die kleine dingen die het af maken. Die eenvoudige zaken die aandacht vergen, werk vereisen, met als resultaat dat jouw webshop nog beter wordt dan die al is.

Tip 1: De ervaring van het online shoppen

Elke winkel die zichzelf respecteert — en we hebben het hier even over echte winkels uit baksteen, met deuren en ramen, en in een straat; je weet wel, dat oud soort winkels — wil ervoor zorgen dat de klant iets ervaart. Sommige winkels zijn zeer praktisch ingericht, denk maar aan de Colruyt warenhuizen. De ervaring en sfeer in die winkels is quasi onbestaand. Maar dat is ook niet erg.

Andere winkels daarentegen gaan ver de andere richting uit: de etalage, de muziek, de belichting, hoe het personeel gekleed is (of niet gekleed is): aan alles wordt aandacht geschonken. En daar eindigt het niet: de verpakking, het prijskaartje, de kapstokken, tot en met de zak die je mee neemt naar buiten: dat allemaal maakt deel uit van een merk, van een ervaring, van een sfeer. Een identiteit.

Bij een webshop is dit niet anders. We hebben vaak het idee dat iemand die online winkelt een vrij praktische actie aan het uitvoeren is. Ah ja! Ze zitten aan een computer, hét saaie en technische werkinstrument bij uitstek! Dat is een foute redenering. Natuurlijk heeft de webshop een aantal zeer praktische voordelen tegenover een gewone winkel, en natuurlijk moet de webshop uitmunten in gebruiksvriendelijkheid. Maar dat betekent niet dat we een webshop mogen herleiden tot een praktische tool. Uw webshop moet op alle vlakken ook nog haar identiteit uitstralen.

De aankoop start vroeger en duurt langer dan je denkt

Als we nadenken over welke stappen doorlopen worden door iemand die in contact komt met je webshop, dan komen we ruwweg tot deze lijst:

  • eerste kennismaking: een artikel lezen, je naam lezen (en al dan niet onthouden; of al dan niet weten hoe je die juist schrijft); of een vriend of vriendin die het er over heeft en zeer eerlijk zal zijn in het delen van zijn of haar ervaring; of een zoekresultaat in Google;
  • je website bezoeken: welke kleuren gebruik je, welke afbeeldingen;
  • nog straffer: welke bewoording hanteer je, hoe beschrijf je jouw producten, hoe praat je tegen je bezoeker;
  • hoe loopt de bestelling: stroef, de ene drempel na de ander; of gaat alles vlot en is alles ongelooflijk duidelijk;

Let op je taal, jongen!

Kortom, stap één is je eigen stijl ontwikkelen. En dat is niet enkel visueel. Ook je taalgebruik is van belang. Het grootste gevaar is dat je webshop als een machine gaat klinken. Een aanvang als ‘Gelieve een… ‘ of een beschrijving als ‘Kurkentrekker die er uit ziet als een stier’ geeft niets van je persoonlijkheid of stijl weer.

Dus het start al met de productomschrijving. Webshop Lisa Mille schrijft bij elk product een haast persoonlijke beschrijving. Zelfs een eikokertje krijgt een mooi zelf geschreven en persoonlijke beschrijving. Zomaar de tekst van de leverancier overnemen is echt uit den boze.

Lisa Mille webshop: zelfs een eikokertje krijgt een persoonlijke beschrijving

Lisa Mille webshop: zelfs een eikokertje krijgt een persoonlijke beschrijving

Bij De Kleine Zebra trekken ze dit door in de manier waarop ze hun categorieën noemen, net als Monsters with an Attitude. Hier geen ‘Badkamer’ maar ‘splish splash‘ of geen ‘Speelgoed’ maar ‘Ravot’ en ‘Kot op stelten’

De namen van een categorie bij Monsters with an Attitude zijn allesbehalve gewoontjes.

De naam van een categorie bij Monsters with an Attitude is allesbehalve gewoontjes.

Bedanken en bevestigen, maar niet als een machine

En dan? Wat na de bestelling? Dan denken veel webshops dat het is afgelopen. Dan begint het pas! Weet de klant wanneer het pakje komt? Kan de klant het pakje volgen? Stuur je een degelijk bevestigingsmail uit? Wat staat daar in? Spreek je de klant persoonlijk aan of klinkt alles zeer technisch? Het geld is binnen en het lijkt er op dat alles beklonken is: de bestelling is namelijk geplaatst. Ook vlak na die stap moet je in contact blijven, de ervaring moet blijvend zijn. Je mag niet verzanden in formeel en technisch de bestelling af te handelen. Zo hebben we voor de website van Fuchsia-kwekerij Katrien Michiels een bevestigingsmail ontworpen waar een collage staat van de foto’s van de bloemen die je besteld hebt. Zo krijg je na je bestelling een mooi visueel overzicht van wat je kocht. Voor haar klanten — die echt gepassioneerde fuchsia-fans zijn — is het belangrijk dat ze na hun bestelling een visuele bevestiging hebben, waarmee ze bijvoorbeeld aan vrienden of familie in één oogopslag hun mooie bestelling kunnen tonen.

Verpakking, verpakking, verpakking

Is het dan afgelopen, eenmaal je mooi en persoonlijk bevestigd hebt? Neen, nog steeds niet. Want wat is allesbepalend bij het online kopen: het ontvangen van het product zelf. Is de doos een saaie bruine kartonnen ding vol gaten en blutsen, die ook nog eens lelijk is dicht gekleefd? Of is het een doos met een eigen grafiek? De Kleine Zebra levert aan in mooi bedrukte dozen. Zelf de sticker met het adres is ontworpen. De aankoop van een product bij hen blijft dus doorlopen tot het openen van het pakje. Het is zelfs zo dat we die dozen meermaals bij mensen thuis zien staan. Ze gooien die niet weg of gebruiken die niet om oude kranten in te verzamelen. Sommige klanten gebruiken die als volwaardige opbergdozen die mogen gezien worden.

De mooie verpakkingen van De Kleine Zebra

De mooie verpakkingen van De Kleine Zebra

Verrassing!

Zit er een verrassing in de doos? Een klein extraatje die de klant blij maakt? Vraag je achteraf om feedback, op een zeer persoonlijke manier? Monsters with an Attitude legt in al haar pakjes die ze opsturen een cadeautje: een klein stoffen popje. Een kleine attentie die bij vele klanten een leuke extra is en mensen een positief beeld geeft van de webshop en het online bestellen.

Monsters with an Attitude stopt een extra popje in elke verpakking

Monsters with an Attitude stopt een extra popje in elke verpakking

Maar hou het sober

Belangrijk is wel dat die ervaring niks in de weg staat. Een achtergrondmuziekje lijkt iets te zijn dat de sfeer van een webwinkel versterkt, maar werkt voor de overgrote meerderheid van de mensen eerder irritatie op. Een splash-pagina, een soort homepage voor de homepage, waar je in één beeld je sfeer wil oproepen: nutteloos en een drempel vol goede bedoelingen maar met een tegengesteld effect.

Tip 2: Persoonlijkheid: ge zijt wie ge zijt

We hebben het hiernet al vaak gezegd, en ik heb zelfs al 7 maal het woord ‘persoonlijk’ of een variant gebruikt: hoe technische een website ook lijkt (een stuk code, bekeken op een scherm, aan een computer), je webwinkel moet persoonlijkheid uitstralen in elke stap.

Je zal merken dat elk van de webshops die we gebouwd hebben dat doet. Of de meeste toch.

Geef je webshop een gezicht

De Kleine Zebra maakt elk jaar opnieuw een foto van de drie zussen die de winkel hebben opgestart, samen het hun kinderen. Wij vinden dit zo’n mooi voorbeeld. Deze dames zeggen en tonen dat ze echt zijn, dat ze net dezelfde personen zijn als hun klanten: mama’s op zoek naar mooie spullen voor hun kinderen. Ze maken ook werk van een jaarlijks aangepaste beschrijving van hun verhaal.

De jaarlijkse aangepaste 'Wie zijn we' pagina van De Kleine Zebra.

De jaarlijkse aangepaste 'Wie zijn we' pagina van De Kleine Zebra.

Lisa Mille spreekt de bezoeker ook zeer persoonlijk aan. Om te beginnen in de manier waarop ze de producten op een eigen manier beschrijft (zie hierboven), maar ook door een kleine foto met haar kinderen op elke pagina van de website te zetten. Op haar Facebook pagina geeft ze ook een eerlijke inkijk op haar werk als mama die een webshop runt.

Persoonlijkheid is je klanten ook inkijk geven op wat er zich achter de schermen afspeelt.

Persoonlijkheid is je klanten ook inkijk geven op wat er zich achter de schermen afspeelt.

Ook voor de kwekerij Fuchsia Michiels maakten we een punt van dat principe: Katrien Michiels, die de kwekerij van haar vader overnam, is in haar sector een naam en een gezicht. Het is daarom essentieel dat ze onmiddellijk op de homepagina staat. Iedereen in die sector kent haar. En op die manier geeft ze ook aan hoe authentiek de website is.

Katrien Michiels spreekt haar klanten rechtstreeks aan. Iedereen in haar sector kent haar. Persoonlijkheid ten top!

Katrien Michiels spreekt haar klanten rechtstreeks aan. Iedereen in haar sector kent haar. Persoonlijkheid ten top!

Vriendelijk ‘dank u’ zeggen

Maar persoonlijkheid kan ook schuilen in een klein hoekje. Zo leerden we van Plan België het belang van eenvoudigweg ‘bedankt’ te zeggen. Na een bestelling je klant bedanken, daar heel eerlijk en persoonlijk in zijn, geeft je webshop heel wat authenticiteit. Of je kan een eigen persoonlijkheid weergeven door een bepaalde filosofie te hanteren, zoals de bio, eco & fair-trade webshop Villa Kakelbont dat doet.

Villa Kakelbont, een webwinkel met een 'Onze filosofie' pagina.

Villa Kakelbont, een webwinkel met een 'Onze filosofie' pagina.

Giveaways

Wat te onthouden?

  1. Get the basics right: product, prijs, promoten, customer service; die moeten allemaal top-notch zijn;
  2. Zorg voor een echte ervaring: van copywriting (de lange teksten & de short-copy), tot stijl, tot verpakking; verras je klanten; maak hen blij; wees speciaal;
  3. Zeg ‘Dank u’, wees vriendelijk en persoonlijk; maak van je webshop iets met een gezicht en kleef er zelfs letterlijk je eigen gezicht op; zorg voor een kijk achter de schermen. Wees dus levensecht;
  4. En overdrijf niet, hou het subtiel;

Volgende keer…

In deel 2 zullen we het hebben over meer praktische zaken zoals ‘Duidelijkheid’ en ‘Bereikbaarheid’. Want naast een gevoel en sfeer moet je webshop vooral ook vertrouwen uitstralen.

Presentatie: random webshop ideeën, trends & design voorbeelden

Bij Marlon hechten we al sinds het begin veel belang aan het delen van kennis. Iemand die naar een conferentie of opleiding gaat, moet voor alle collega’s een presentatie geven over de opgedane ideeën en kennis. Ook tijdens de lunchpauze op vrijdag worden intern presentaties gegeven over allerhande onderwerpen (onder de vrij klassieke noemer Lunch ‘n Learn). Deze presentatie geeft een ongestructureerde reeks ideeën, trends en leuke features voor webshops of e-commerce sites.

Random e-commerce ideas & trends
View more presentations from Vincent Mouton

Online betalen voor e-commerce sites voor dummies

Iedereen die een e-commerce website wil opstarten heeft dezelfde vragen. Hoe beheer ik producten? Hoe beheer ik klanten en bestellingen? Hoe gaat mijn site er uit zien? Hoe krijg ik klanten naar mijn webshop? Hoe zorg ik ervoor dat klanten terugkeren? Welke prijszetting moet ik hanteren?

Er zijn echter twee zaken waar niemand vragen over stelt: stock en online betalen. Omdat ze beiden evident lijken. Die heb je nodig, als je een webwinkel lanceert, toch? Gewoon. Online betalen. Gewoon toevoegen. Toch?

Over dat online betalen (met VISA, MasterCard, PC Banking, etc) weet dus niemand wat het exact inhoudt. Moet je gewoon een bankrekening hebben? En als je al een winkel hebt en daar staat zo’n Banksys bakje, dat is toch voldoende? En wat zal het kosten?

We proberen aan antwoord te bieden op deze vragen:

Wie en wat heb ik nodig

online_betalingHet komt hierop neer: de bezoeker van uw webshop betaalt, en dat geld moet bij u terechtkomen. In deze ketting zijn er 3 schakels: de website, de aanbieder van de betaaldiensten (een tussenpartij, wordt soms ook gateway genoemd) en een transactieverwerkende instelling, wat een mondvol is voor een bank of acquirer.

En eigenlijk kan je dit perfect vergelijken met de offline wereld. Stel, je gaat uit eten in een restaurant. Betaal je met je credit card, dan zijn er daar ook 3 schakels: het restaurant (is hetzelfde als jouw website, de plek waar er gekocht wordt), het creditcardapparaat (is hetzelfde als de betaaldienst) en – laten we nog éénmaal die term gebruiken – de transactieverwerkende instelling (uw bank of uw acquirer). Het creditcardapparaat maakt een verbinding met de bank/acquirer van het restaurant, die dan de creditcard controleert en het geld overmaakt van jouw rekening naar die van het restaurant.

Bij een webshop is het dus net zo:

  1. je zal in je website een soort creditcardapparaat moeten integreren, dat is de betaaldienst, de tussenpartij die de verbinding zal leggen met de bank/acquirer.
  2. om het geld te kunnen laten overmaken van de rekening van de betaler naar de rekening van je e-commerce site, moet je ook een contract hebben met een bank/acquirer, je weet wel, die van die transactiever…dinges.

Met wie moet ik dan een contract aangaan?

Om te beschikken over de betaaldienst – het creditcardapparaat van je website – ga je een contract aangaan met iemand die zo’n dienst aanbiedt. Dat is één. Hieronder vind je wat meer uitleg.

En het geld moet nog op je rekening komen, en vooral, je moet het betaalmiddel (kaart, pc-banking) waarmee je klant betaalt kunnen controleren. En dat kan alleen een bank of acquirer. Dus: wil je mensen laten betalen met VISA, dan moet je een contract aangaan met een acquirer die VISA aanbiedt. Wil je mensen laten betalen via de KBC knop, dan moet je een contract aangaan met KBC. Wil je beide, dan moet je een contract aangaan met beide.

Voor elk betaalmiddel dat je aanbiedt moet je een contract aangaan met een acquirer of bank. Sommige banken of acquirers bieden wel meer dan één betaalmiddel aan. Hieronder vind je meer uitleg.

Dat is dus minimum een contract aangaan met twee partijen.

Wat is eigenlijk een acquirer, en is dat niet mijn bank?

Een acquirer is een financiële instelling die jou als webwinkel de toestemming geeft betalingen te aanvaarden van een welbepaalde kaart of pc-banking. De acquirer vraagt het geld aan de bank (of kaartuitgever) van de persoon die koopt en zorgt dat het geld op jouw bankrekening terechtkomt.

Moet een acquirer dezelfde bank zijn als de bank waar mijn klant zijn creditcard van heeft gekregen? Neen, absoluut niet. Ik zit zelf bij Argenta. Ik heb een VISA kaart van Argenta (mijn kaartuitgever dus). Dat betekent niet dat ik enkel kan winkelen bij websites die met Argenta samenwerken (als acquirer). Argenta is zelfs helemaal geen acquirer.

Welke acquirer helpt me bij welk betaalmiddel?

Er zijn verschillende acquirers of banken waar je mee kan samenwerken.

Wil je Visa en/of MasterCard aanbieden (beiden gaan meestal samen), dan kan je o.a. terecht bij Elavon (de acquirer van Monsters with an Attitude), Europabank, Atos Worldline (eigenaar van Banksys en Bank Card Company (BCC)), PaySquare, EMS card, etc.

Voor Maestro vind je een paar van dezelfde spelers terug: Europabank, Atos Worldonline, PaySquare, EMS card, etc.

Bancontact/Mister Cash wordt enkel door Atos Worldonline aangeboden. Zie hier voor meer info over Bancontact/Mister Cash. Vergeet niet dat dit betaalmiddel hoort te verdwijnen in de nabije toekomst.

Daarnaast heb je ook nog 4 banken die hun eigen betaalmiddel aanbieden. Zo kan een bezoeker van je website bij jou kopen, en betalen via zijn eigen pc-banking. Zo biedt KBC/CBC betalingen aan via KBC online/CBC online; Dexia voor haar Dexia Direct Net; ING voor ING’HomePay; en Centea voor Centea Online. Ook ping.ping (het vroegere Tunz) is een acquirer voor zijn eigen betaalmiddel.

Er zijn natuurlijk nog tal van andere betaalmiddelen waarvoor je met andere acquirers een contract moet aangaan. We hebben hier enkel de betaalmiddelen opgelijst die het meest in gebruik zijn.

Wat kost dat?

Dit hangt volledig af van de acquirer of bank, welk type contract je hebt, en hoe goed je kan onderhandelen. Acquirers en banken vragen meestal een transactiekost, dit in de vorm van een percentage (het meest voorkomend, en vaak 3%) of een vast bedrag.

De betaaldienst (tussenpartij of gateway)

De betaaldienst is dus het equivalent van het creditcardapparaat in het restaurant. Belangrijk is dat je een betaaldienst kiest die jouw betaalmiddel aanbiedt. De betaaldienst moet namelijk in staat zijn de nummers en gegevens die je ingeeft naar de correcte acquirer te sturen, en die daar te laten controleren, en in staat zijn daar een antwoord van te ontvangen. Een betaaldienst is puur een doorgeefluik. Vandaar dat soms de naam gateway valt.

Waarom heb ik die nodig als ik al een contract heb met mijn bank?

Wel de reden is eenvoudig: de betaaldienst, een goeie betaaldienst althans, biedt veel betaalmiddelen aan. Stel dat je rechtstreeks zou werken met een acquirer.

Je beslists pc-banking van KBC aan te bieden, en VISA. Jouw website bouwer moet dan jouw website zodanig programmeren dat die met twee compleet verschillende systemen kan communiceren. En telkens als je een nieuw betaalmiddel zou kiezen, moet je opnieuw de programmatie laten aanpassen.

Een betaaldienst is dus een noodzaak. Deze dienst is het centrale doorgeefluik dat voor verschillende betaalmiddelen werkt. Je moet enkel je website met die ene betaaldienst laten communiceren. De betaaldienst zorgt voor de communicatie met de acquirer/bank.

En eenmaal een goede betaaldienst gekozen, is het een eenvoudig om extra betaalmiddelen toe te voegen, wanneer je dat wil. Telkens moet je dan enkel nog een nieuwe acquirer zoeken en bij de betaaldienst de nodige instellingen bepalen.

Welke betaaldienst kan me helpen?

In België is de meest bekende Ogone. Ogone is het bedrijf waar ook Monsters with an Attitude, Poncha, Codima en Tele Atlas mee samenwerken. Ze zijn marktleider in België, zijn actief in heel wat andere Europese landen, en bieden naast de hierboven genoemde klassieke betaalmiddelen ook meer exotische betaalmiddelen aan.

Je hebt ook Neos Solutions, van Fortis. Maar eigenlijk is dit Ogone met een ander kleurtje. De technologie, het platform, de servers, alles is van Ogone, maar dus met een andere merknaam. Wie klant is bij Fortis kan bij Neos Solutions aankloppen, en in sommige gevallen daar zelfs een goede deal mee afsluiten.

Wat kost dat?

Ook hier weer hangt alles af van het type product en contract je aangaat. Meestal betaal je naast een eenmalige setup-kost en een maandelijkse vaste kost ook nog eens een transactiekost. Ook hier weer in de vorm van een percentage of vaste kost per transactie.

Is er een link tussen de betaaldienst en de acquirer?

Eigenlijk niet, maar ook weer wel. Er zijn weinig betaaldiensten die ook acquirer zijn, en ook omgekeerd komt dit zelden voor. Nu, banken ruiken altijd geld en daarom starten sommige banken hun eigen betaaldienst op.

Je hebt onder andere het eerder vermelde Neos Solutions, opgericht door Fortis. Maar zoals gezegd, dit is eigenlijk Ogone met een ander kleurtje.

Zijn er nog andere manieren om online te betalen?

iDEAL is in Nederland stilaan het standaard betaalmiddel geworden. iDEAL, onder andere beschikbaar bij De Kleine Zebra, is een initiatief van ING, ABN Amro, Rabobank en Postbank. iDEAL is geen bankkaart, maar is op zich een doorgeefluik naar de pc-banking omgeving van de klant.

iDEAL is een betaalmiddel, en wordt ook aangeboden door Ogone.

Je hebt natuurlijk ook PayPal, een online betaaldienst die je kan integreren om via die weg alle betalingen te verzorgen en te ontvangen. PayPal is eigenlijk acquirer en betaaldienst tegelijk. Je kan via PayPal betalen met je PayPal rekening, maar ook met Visa, etc.

En Ogone biedt zelfs de mogelijkheid aan om via hun betaaldienst te betalen met je virtuele PayPal rekening.

Conclusie

  • je gaat een contract aan met een acquirer of bank, en dat voor elk betaalmiddel dat je wil aanbieden (sommige acquirers beiden verschillende betaalmiddelen aan)
  • je gaat een contract aan met een betaaldienst
  • je integreert je website met die betaaldienst (er is natuurlijk nog ietwat programmeer werk om alles mooi te doen samenwerken)

De Kleine Zebra tweede in publieksprijs Thuiswinkel awards

Donderdagavond vond in Noordwijk de uitreiking plaats van de Thuiswinkel Awards.  Deze awards zijn een initiatief van Thuiswinkel.org, een keurmerk voor bedrijven die diensten of producten aanbieden via het Internet.

De Kleine Zebra was opgenomen in de categorie “sport, speelgoed, hobby & cadeau” en werd uit een lange lijst door het publiek bij de drie beste verkozen.

Deze selectie webwinkels werd daarna aan de hand van een uitgebreid evaluatieformulier terug beoordeeld door hetzelfde publiek. Zo werd De Kleine Zebra uiteindelijk tweede, na YourSurprise.com, een dienst die originele cadeaus aanbiedt.

Het is hoopgevend dat de organisatie achter de Thuiswinkel Awards zich nu ook schaart achter een gelijkaardig initiatief in België en zo een onafhankelijke, professionele award en bijhorende erkenning brengt. De communicatie naar het brede publiek over online betalen en e-commerce kan bij ons wel een duwtje in de rug gebruiken om het vertrouwen een boost te geven. Dan hoeft De Kleine Zebra niet over de landsgrens te gaan om als “enige belg” erkenning te zoeken en krijgen.

Monsterlijke case study

Eind januari lanceerden we de nieuwe webshop voor de babyspeciaalzaak Monsters With An Attitude. Deze webshop is, net zoals alle andere webshops & projecten die we afleveren, “tailor made” naar de noden en wensen van de klant.

Zowel de look&feel als de functionaliteit werden vastgelegd na enkele rondes feedback en aanpassingen samen met de klant. Een goed inlevingsvermogen in de business en werkwijze van de klant laat toe om het aantal iteraties tot een minimum te houden terwijl we naar een maximum aan klantentevredenheid streven.

Wie de vorige posts op deze blog gelezen heeft weet dat we bepaalde ontwikkelings- en functionaliteitsprincipes hanteren. We kunnen ze gerust “web industry best practices” noemen. Wat nu volgt is een mix van een case study en whitepaper voor een webshop.

Analyse: analyse this

PrototypingEerst en vooral hebben we de analysefase. De eerste sessies met de klant zijn eerder brainstormsessies. Alle mogelijke functionaliteiten, inclusief de toeters en bellen, die relevant kunnen zijn voor dit type project worden uitvoerig besproken. Op het einde van de analysefase leggen we samen met de klant vast wat er zal worden uitgewerkt, hoeveel dat zal kosten en hoe lang dat zal duren. Vaak wordt er op dit ogenblik beslist om bepaalde opties al dan niet meteen te nemen of te verschuiven naar een volgende fase. Dankzij deze gefaseerde aanpak kan een project geleidelijk groeien.

Heel belangrijk is dat, naast de functionaliteit, ook de business processes van de klant mee onder de loupe worden genomen.  In overleg worden scenario’s opgesteld voor de verschillende types van gebruikers (doelpubliek) die de website gaan gebruiken. Een gebruikerscenario identificeert handelingen met stappen en acties die moeten gebeuren om bepaalde doelen te kunnen bereiken.
Tijdens de analysefase staan deze gebruikerscenario’s centraal. Enerzijds bepalen ze de functionaliteit en logica. Anderzijds kunnen ze worden gebruikt ter controle of alle afgesproken functionaliteiten zijn verwerkt, maar ook of de website gebruiksvriendelijk en logisch is opgebouwd.
Uit de hele analyse vloeit uiteindelijke een prototype. Vincent had enkele posts terug over dit punt al een interessante uiteenzetting online geplaatst.

Design: het uithangbord

Tijdens de analysefase kan ook al aandacht worden besteed aan de look&feel van de webshop. Onderschat het belang hiervan niet. Een shop moet niet alleen functioneel goed werken, het moet er ook professioneel uitzien en vertrouwen wekken. Bovendien wordt de webshop het uithangbord voor de winkel. Een reden te meer om een knap en origineel design af te leveren. De klant weet op dit vlak meestal wel heel duidelijk waar hij naartoe wil. Onze designer Gert wist, zoals altijd, enkele verbluffende, toepasselijke designs uit zijn mouw te schudden.

mwaa-design-2mwaa-design-3
mwaa-design-4

Ontwikkeling: goede afspraken

Na deze eerste fases, die meestal wel parallel verlopen, start de technische ontwikkeling van de webshop. Tijdens de interne, technische kick-off meeting worden heel wat zaken besproken. We spreken goed af hoe de zaken technisch geïmplementeerd zullen worden. Doorgaans volgen nu 3 grote brokken in de ontwikkeling:

  • Back-end development: dit houdt in dat de functionaliteit en bedrijfsprocessen die eigen zijn aan de webshop in code worden vertaald. Daarbij moet er ook communicatie naar een databank of externe systemen zijn.
  • Front-end development: de design templates worden opgeknipt en vertaald naar XHTML, CSS en Javascript. Onderschat het belang van deze taak niet want hier leggen we de basis voor de Search Engine Optimalization (SEO).
  • De laatste brok is de integratie van de back-end-ontwikkeling met de front-end-ontwikkeling.

Fasering, iteratie en klantfeedback

De ontwikkeling wordt opgedeeld in fases op basis van functionaliteit. Iedere fase wordt ontwikkeld en getest voor men naar de volgende fase overstapt. Veelal steunt een latere fase op eerder ontwikkelde fases dus is het van extreem belang dat men iedere fase goed test. Unit testing is hierbij een grote hulp.

Een belangrijk voordeel van fasering is dat men op het einde van iedere fase feedback kan vragen van de klant. Zo vermijdt je eventuele “verrassingen” op het einde van de complete ontwikkelingscyclus. Betrek je klant zo snel mogelijk bij de ontwikkeling. Iedere fase waarbij men binnen een korte periode een bepaalde functionaliteit ontwikkelt, test en ter goedkeuring voorlegt aan de klant noemt men een sprint.

Best practices

Er zijn een aantal best-practices die we in de kijker willen zetten:

  • CSS sprites: we voegen een aantal afbeeldingen samen tot één afbeelding. (voorbeeld)
  • Custom fonts door gebruik te maken van Adobe Flash.
  • Search Engine Optimized (SEO) url’s & content.
  • Gebruik van Ajaxvoor het winkelmandje met als doel een betere user experience.
  • Meertaligheid. Je kunt argumenteren dat dit een functionaliteit is en geen “best practice”. Je kunt je echter geen Europese webshop inbeelden zonder. Meertaligheid is een “must”. Momenteel is de webshop van Monsters With An Attitude beschikbaar in één taal. De shop is zo ontwikkeld dat het toevoegen van extra talen slechts een administratieve kwestie is. Het leuke aan de meertaligheidsfunctie is dat wanneer men van taal verandert men op dezelfde pagina in de andere taal terecht komt. De meeste sites gaan bij het switchen van taal naar de hoofdpagina waardoor men de gebruiker verplicht om opnieuw een product of pagina te zoeken. Bij good practices hoeft dit niet. “It’s what separates the men from the boys”

Beheermodule: geen dubbel werk

Als laatste willen we je ook even laten meekijken achter de schermen want de publieke webshop is slecht de helft van de webapplicatie.

Deze beheersmodule laat toe de gegevens van klanten, producten, bestellingen en stock te beheren. Daarnaast is er ook nog volledige synchronisatie voorzien tussen de database voor de webapplicatie en de Filemaker-software in de winkel zodat de klant geen dubbel beheer moet doen voor de fysische winkel en de webshop.

De beheersmodule laat o.a. de volgende zaken toe:

  • Beheer klanten, producten, bestellingen en stockindicatie;
  • Printen BTW-listings, verkooplijsten;
  • Printen van facturen, inhoudsdocumenten, plakbonnen & transportdocumenten;
  • Printbare facturen en creditnota’s zijn PDF-documenten die dynamisch worden gegenereerd.
  • Verzenden van betalingsherinneringen.

Beheersmodule

Oh ja, de ontwikkeling gebeurde in ASP.NET. Maar dit is slechts een triviaal gegeven.

Verdere informatie over dit project kan je terugvinden op de projectpagina