Website of webshop (laten) maken?

Hoe maak je een website of webshop?

Er zijn verschillende manieren om een eigen website of webshop te (laten) maken. Zo zou je er zelf een kunnen programmeren met HTML, CSS, JavaScript en/of PHP. Indien je niet weet hoe dat op deze manier werkt, is het aan te raden om een content management systeem (CMS) te gebruiken voor je website of webshop. Dit is een soort controlepaneel waarmee je de inhoud van een website kunt aanpassen naar wens aan de ‘achterkant’ zonder kennis van programmeertaal.

Populaire CMS’en voor websites zijn:

  • WordPress
  • Joomla!
  • TYPO3
  • Drupal

en voor webshops zijn dit de meest populaire CMS’en:

  • Magento
  • Prestashop
  • WooCommerce
  • Zen Cart
  • CubeCart

Bij Comaxx maken wij voor klanten vooral gebruik van WordPress en Magento. Beide zijn een CMS en open source. Open source wil zeggen dat de software vrij beschikbaar is voor iedereen en dat de broncode aangepast kan worden. De software wordt daarnaast snel verbeterd omdat iedereen dit kan leren en kan aanpassen. Zo kun je om hulp vragen in de community van de gebruikte software. Daarnaast worden door andere programmeurs vele plug-ins ontwikkeld die je weer kunt koppelen aan WordPress of Magento om je website/webshop te verrijken met extra functionaliteiten. Zo kun je gebruik maken van de plug-in Yoast SEO, een van de populairste plug-ins voor WordPress. Deze plug-in zorgt ervoor dat jouw website beter gevonden wordt door aan de SEO-eisen te voldoen.

Benodigdheden en kosten om een website of webshop te (laten) maken

Om een website te kunnen beginnen heb je een aantal onderdelen nodig.

  • Hosting
    Je huurt een ruimte op een server zodat jouw website online kan. Hiervoor kies je een van de vele verschillende webhosting providers.
  • Domeinnaam
    Dit is de URL (link) van je website, maak deze niet te lang zodat het makkelijker te onthouden is voor de klanten. Kies ook een extensie die bij jouw organisatie past. Zo kun je bijvoorbeeld kiezen tussen .nl of .com.
  • CMS
  • SSL-certificaat
    Een beveiligde verbinding tussen een webserver en een browser

Bovenstaande onderdelen zijn in het begin de belangrijkste benodigdheden om een website te kunnen beginnen. Uiteraard komt er nog wel wat meer bij kijken, zoals het doel van de website, design/huisstijl, teksten, beeldmateriaal etc. Niet te vergeten: een website maken kost tijd! Daarom kiezen toch veel organisaties ervoor om een bureau in te schakelen die veel van het werk uit handen neemt. Daarnaast beschikt een digitaal bureau over de benodigde kennis van bijvoorbeeld de privacywet, webbeveiliging en de wet van de digitale toegankelijkheid (voor mensen met een beperking).

Wat kost het om een website te laten maken?

Een website laten maken kan afhankelijk van je eisen flink oplopen en verschillen in de kosten. Dit komt omdat er veel werk in een website gaat zitten, zeker voor grotere organisaties. Daarnaast krijg je ook te maken met maandelijkse kosten, je betaalt dus niet eenmalig voor een website. Voor beginnende ondernemers kun je uiteraard beginnen met een goedkopere website die je eventueel zelf maakt. Websites kunnen beginnen bij een paar honderd euro en oplopen tot wel 100.000 euro. Het is verstandig om in gesprek te gaan met een digitaal bureau over je wensen en wat de kosten zullen zijn (offerte aanvragen). Bovendien kun je dan ook aangeven welke koppelingen of andere vereisten toegevoegd moeten worden aan de website of webshop.

Koppeling met systemen voor een WordPress of Magento website/webshop

Een website of webshop moet je naadloos kunnen koppelen met verschillende soorten systemen. Denk hierbij bijvoorbeeld aan recruitment of inbound marketing systemen. Daarnaast kunnen wij voor zorgaanbieders een koppeling maken op WordPress met ZorgkaartNederland. Zij helpen met het kiezen van een passende zorgaanbieder voor patiënten door middel van reviews van anderen.

Een andere koppeling waar we mee werken bij Comaxx is Bullhorn, een systeem voor (moderne) recruitment. Comaxx heeft een plugin gecreëerd voor WordPress websites zodat je vacatures uit Bullhorn of Connexys makkelijk kunt synchroniseren.

Wanneer je WordPress of Magento-sites koppelt met verschillende systemen, kun je de webshop of website helemaal inrichten naar wens voor jouw organisatie. Een digitaal bureau kan daarbij helpen en advies geven. Wil jij jouw organisatie professionaliseren of uitbreiden, is het dus verstandig om de website of webshop niet zelf te maken.

Conclusie

Een website of webshop kan dus op vele verschillende manieren gemaakt worden en uitgebreid worden met verschillende koppelingen en wensen. Wanneer je een bedrijf begint kun je eventueel zelf een site maken. Wil je een professionelere website of webshop, of heb je hulp of advies nodig? Dan is het verstandig om een bureau in te schakelen.

Hulp nodig? Neem contact op met ons via onderstaande knop of de live chat.  

Magento SEO

Vergroot de vindbaarheid van jouw webshop in 10 stappen!

Het is zo ver: je kunt jouw spiksplinternieuwe Magento webshop gaan vullen! Je productassortiment is bekend, alle benodigde functies zijn ingeregeld en je teksten zijn zo goed als af. Hoe zorg je ervoor dat jouw doelgroep je Magento webshop ook daadwerkelijk vindt via zoekmachines als Google? Deze 10 stappen zorgen er in no time voor dat jouw webshop in Magento SEO proof is!

Ontdek de 10 Magento 2 SEO tips

1. Zorg dat de Magento SEO functie aan staat

Zoals bij de meeste andere CMS systemen, vindt een zoekmachine jouw website pas wanneer je de SEO functie in de admin aanzet. Zo ook bij Magento. Ga in Magento naar het menu item “system” en open de “configuration”. In het linker menu ga je vervolgens naar “web” en klik op de tab “search engine optimalization”. Zet “use web server rewriter” op “yes”. De eerste stap om jouw webshop in Magento SEO proof te maken is gezet!

2. Stel in Magento de HTML header in

Blijf in het “system” menu, maar open nu in het linker menu de tab “design”. Voeg bij de tab “HTML head” je favicon toe. Wijs een algemene titel toe (dit is meestal de naam van je webshop) en vul een algemene beschrijving in met daarin de meest belangrijke keywords waarop jij gevonden wilt worden.

3. Vul de productpagina’s van Magento

Nu de algemene instellingen zijn aangepast, is het nu tijd om jouw productpagina’s in Magento SEO proof te maken. Ga hiervoor in het hoofdmenu naar “CMS” en vervolgens naar “pages”.

4. Een goede headeropbouw is het halve werk

Houd in je teksten altijd rekening met de opbouw van jouw headers. Headers zijn belangrijk voor zoekmachines om jouw teksten goed door te “crawlen”. De richtlijnen:

  • H1 gebruik je maar 1x per pagina.
  • H2 gebruik je als subheader.
  • H3 zet je in als extra subheader.

Zorg er voor dat je zoekwoorden terugkomen in de headers, het liefst zo vroeg mogelijk in de zin. Wissel daarnaast voldoende af tussen H2 en H3.

5. Geef je afbeeldingen ALT tags

Om ervoor te zorgen dat de product afbeeldingen ook geïndexeerd worden door zoekmachines, geef je ze alt tags mee. Zorg er voor dat deze alt tags de juiste zoekwoorden bevatten. Dit doe je via: Catalogus -> Afbeeldingen -> Browse files -> Upload files. Zorg ervoor dat de zoekwoorden van de afbeelding die je upload ook terug komen in de bestandsnaam, in plaats van een spatie schrijf je een koppel teken “-“, als je geen “-” toevoegt dan leest Google de woorden als één woord. De alt tag voeg je toe in het label, hieronder is een overzicht van de handelingen weergegeven die je dient door te voeren voor een SEO geoptimaliseerde foto.

Zorg er ook altijd voor dat de bestandsgrootte van een afbeelding zo laag mogelijk is, een grootte bestandsgrootte van een afbeelding zorgt er namelijk voor dat je webshop of website traag wordt. Pas daarvoor de afbeelding aan op de gewenste grootte zodat de afbeelding niet geschaald hoeft te worden als de website ingeladen wordt.

Het is ook mogelijk de bestandsgrootte van een afbeelding te verkleinen via compressor websites. Een goede tool hiervoor is Compressor.io, je verlaagt de bestandsgrootte van een afbeelding tot wel 90% verlagen.

6. Maak je URL’s kort maar krachtig

Je pagina is nu gevuld. De volgende stap is er voor zorgen dat de bijbehorende URL in Magento SEO gericht is. Ga naar de tab “general” en herschrijf de URL zodat deze kort maar krachtig is en past bij je zoekwoorden en pagina inhoud. Gebruik een koppelstreepje (-) als spatie. Wanneer je geen specifieke URL invoegt genegeerd Magento zelf een URL voor de pagina. Hieronder is een overzicht toegevoegd hoe je SEO technisch de algemene informatie toevoegt in Magento.

7. Linkbuilding in Magento

Interne links vergroten de relevantie van de pagina’s voor zoekmachines. Koppel productpagina’s dus aan elkaar (denk bijvoorbeeld aan: dit vind je misschien ook interessant?). Een goede interne linkstructuur is hierbij belangrijk. Ga dus niet zomaar in het wilde weg interne linkjes plaatsen, maar zorg voor relevantie. Externe links van hoogwaardige domeinen voegen nog meer waarde toe aan een pagina, probeer dus ook externe links te creëren. Dit heb je wel minder goed in de hand dan interne linkbuilding.

8. Hoe sneller de webshop, hoe beter

De laadtijd van je Magento pagina’s hebben een grote invloed op de vindbaarheid in zoekmachines en op de gebruiksvriendelijkheid voor je bezoekers. Dus om je webshop Magento SEO proof te maken, zorg je voor een zo kort mogelijke laadtijd. Deze blog geeft je 7 tips om de laadtijd te verkorten.

9. Upload je sitemap regelmatig bij zoekmachines 

Regelmatig je sitemap.xml uploaden bij zoekmachines zorgt er voor dat de zoekmachine op de hoogte blijft van wat er op jouw Magento webshop gebeurt qua structuur. Nieuwe pagina’s worden zo sneller geïndexeerd en foutmeldingen bij verwijderde pagina’s worden voorkomen. Bovendien kun je in een sitemap aangeven welke prioriteit een pagina heeft en hoe vaak de inhoud verandert. Zo weet een zoekmachine hoe vaak hij de pagina moet crawlen. Een Magento sitemap maak je aan via het “catalog” onder het menu item “Google sitemap”.

10. Maak een robots.txt bestand aan 

Een robots.txt bestand geeft zoekmachines richtlijnen welke pagina’s zij wel en niet mogen indexeren. Plaats de robot.txt in de root directory van je Magento webshop via FTP. Zorg er ook voor dat de Sitemap is toegevoegd aan de robots.txt, je checkt dit door ‘domeinnaam/sitemap.xml’ te typen in het zoekvenster.

Je Magento webshop / website verder SEO optimaliseren

Een goede manier om je website of webshop nog verder te optimaliseren is door middel van deze website scan je ontvangt binnen twee werkdagen een uitgebreid rapport met specifieke verbeterpunten voor jouwe webshop of website.

Wake-up call: Universal Analytics wordt Google Analytics 4 

Neem contact met ons op!

Waarom wordt de overstap naar Google Analytics 4 gemaakt?

Google Analytics 4 is eind 2020 in het leven geroepen omdat de huidige Analytics-versie niet meer zou voldoen aan de huidige standaarden. Het marketinglandschap verandert continu. Uiteraard gaat Google daarin mee. Universal Analytics draait echter al sinds 2012. Het programma heeft wel meerdere updates gehad, maar na bijna tien jaar is het voor Google ook tijd om echt te gaan vernieuwen. Google Analytics is ooit gebouwd met de gedachte dat alles op een desktop gebeurde. Tegenwoordig draaien veel platformen echter op verschillende devices waardoor dit idee achterhaald is geworden. GA4 is wél gebouwd met cross-device platforms in het achterhoofd.  

Wat zijn de verschillen tussen UA en GA4?

Als je al in Universal Analytics werkte, dan weet je misschien dat UA vooral op sessies gebaseerd is. Dit wil zeggen dat data wordt verzameld op basis van een groep interacties binnen een bepaalde tijd (sessie). Eén sessie kan bijvoorbeeld meerdere interacties bevatten, zoals een paginaweergave, kliks of gebeurtenissen. 

In Google Analytics 4, daarentegen, draait alles om events (gebeurtenissen). Elke interactie wordt als een losse gebeurtenis gezien. Deze gebeurtenis kan dan weer zogenaamde parameters bevatten. Een gebeurtenis kan bijvoorbeeld een paginaweergave zijn, met parameters die de pagina URL en de paginatitel weergeven.  

Daarnaast biedt Google Analytics 4 je meer mogelijkheden wat betreft het analyseren van gegevens. In GA4 heb je de zogenaamde optie “ontdekken”. Hierin bevinden zich vooraf gedefinieerde, geavanceerde rapporten. Deze rapporten laten gedetailleerde informatie zien en zijn ook nog eens vrij aan te passen zodat je precies kunt zien wat jij wilt.  

Verder is GA4 ook in staat om gegevens te voorspellen. De nieuwste versie bevat namelijk machine learning, waardoor het in staat is om gegevens over de waarschijnlijkheid van aankopen en omzet te voorspellen op basis van de data die binnenkomt. Dit is iets wat nog niet eerder mogelijk was binnen Google Analytics.  

Ten slotte is GA4 in veel opzichten eenvoudiger en gebruiksvriendelijker dan UA. Het opzetten van conversiedoelen, het aanmaken van aangepaste doelgroepen en de indeling van de rapporten is een stuk eenvoudiger in de nieuwe versie. Ook zijn Google Ads en Google Big Query geïntegreerd in GA4, waardoor je meer informatie onder één dak hebt. 

Wanneer moet ik overstappen op Google Analytics 4? 

Heel simpel gezegd: zo snel mogelijk. Ondanks het feit dat veel marketeers en bedrijven nog steeds werken in het oude vertrouwde Universal Analytics is het aan te raden om snel de overstap te maken. Als je hier nog niet klaar voor bent, dan is het op zijn minst aan te raden om wel alvast je account dusdanig in te stellen dat er wel data binnenkomt in GA4. Doe je dit namelijk niet op tijd, dan is de kans groot dat je volgend jaar met te weinig data en inzichten zit en je dan tegen problemen aanloopt. Je kunt er in dat geval voor kiezen om nog even in Universal Analytics te blijven werken, maar zorg er dan wel alvast voor dat je data verzamelt in GA4. Zo kun je langzaam aan het nieuwe systeem wennen en zorg je ervoor dat je geen gegevens misloopt. 

WordPress 5.5 ‘Eckstine’

Editor

Inmiddels zijn we gewend dat er bij een nieuwe release van WordPress veel nieuwe dingen zijn toegevoegd aan de editor. WordPress 5.5 is hier zeker geen uitzondering op. Wat is er dan allemaal toegevoegd aan de editor? Hieronder kun je een aantal belangrijke vernieuwingen terugvinden die wij het vernoemen waard vinden: 

  • Blokpatronen: nieuwe blokpatronen maken het simpel en leuk om complexe en mooie lay-outs te maken. De patronen stellen je instaat een combinatie van tekst en media te mixen en matchen bij jouw content. Je kunt ze ook terugvinden in een grote variëteit van plug-ins en thema’s.  
  • De nieuwe blok directory: het is nu gemakkelijker dan ooit om het blok te vinden dat je nodig hebt. De nieuwe blok directory is rechtstreeks gebouwd in de blok editor. Hierdoor kan je de nieuwe blok types installeren op je website zonder dat je de editor hoeft te verlaten. 
  • Inline afbeeldingen editen: het is nu mogelijk om jouw foto’s direct vanuit het afbeeldingsblok te draaien, te zoomen en bij te snijden. Als je veel tijd besteed aan afbeeldingen dan kan je dit uren besparen! 

Snelheid

WordPress 5.5 heeft nog meer in huis dan alleen nieuwigheden op het gebied van de editor. Ook qua snelheid zijn er stappen gemaakt dankzij ‘lazy-loaded images’.  
 
Afbeeldingen geven jouw content veel impact, maar kunnen er wel voor zorgen dat jouw website langzamer wordt. In WordPress 5.5 wachten afbeeldingen met laden totdat ze bijna visueel zichtbaar worden tijdens het scrollen. De technische term hiervoor is ‘lazy loading’, oftewel ‘lui laden’. 
 
Op een mobiel apparaat kan het ‘lazy loading’ ervoor zorgen dat browsers geen bestanden gaan downloaden die bedoeld zijn voor een laptop of tablet. Dat kan bezoekers van jouw website dus geld besparen qua dataverbruik en tevens helpen om de batterijduur van hun mobiele apparaat niet nadelig te beïnvloeden. Dit zullen jouw bezoekers zeker als prettig ervaren! 
 

Zoeken  

In WordPress 5.5 is een nieuwe sitemap geïntroduceerd. Standaard bevat WordPress nu een XML sitemap die zoekmachines helpt de pagina’s van jouw website te ontdekken zodra je live gaat met een nieuwe pagina, website of release. 
 
Op deze manier zullen meer mensen jouw website sneller vinden. Hierdoor heb je meer mogelijkheden om ervoor te zorgen dat jouw bezoekers gaan doen wat jij graag wilt dat ze doen (inschrijven voor een nieuwsbrief, kopen van jouw producten, contact opnemen, etc.). 

Veiligheid 

Met de update naar WordPress versie 5.5 kun je nu kiezen om plug-ins en thema’s automatisch te laten updaten. Voor de release van WordPress 5.5 kon je alleen de kern van WordPress (core) automatisch updaten en nu dus ook thema’s & plug-ins. Het is wel belangrijk om na een update te controleren of alles goed is gegaan. Voor een complexe(re) website blijft het inschakelen van een WordPress specialist die handmatig jouw website update wel de beste optie. 
 
Auto-updates kun je aan- of uitzetten voor elke plug-in of thema dat je hebt geïnstalleerd.  Zet je de auto-update aan dan weet je dat jouw website gebruik maakt van de nieuwste beschikbare code. Als je graag alles handmatig update dan is dat nu ook gemakkelijker geworden door simpelweg een ZIP file uploaden. 

Geavanceerde A/B-testen in Magento 2

Next level A/B-testen

In systemen als VWO en Google Optimize voer je eenvoudig simpele A/B-testen uit. Het testen van een kleur- of tekstaanpassing is met deze programma’s een fluitje van een cent. Geavanceerdere A/B-testen, zoals het testen van productprijzen of check-out modules, is in deze systemen echter lastig of zelfs volledig onmogelijk.

Voor A/B-testen in Magento 2 shops biedt de Advanced A/B Tests Extension oplossing. Deze volledig geïntegreerde module biedt de mogelijkheid A/B-testen uit te voeren door winkelaanzichten in Magento volledig van elkaar te splitten. Een nieuw design? Zet een test op waarmee je de helft van je bezoekers de nieuwe variant toont en de andere helft de oude variant laat zien. Op deze manier onderzoek je of het nieuwe design de juiste resultaten behaalt. Of test bijvoorbeeld wat het wel of niet rekenen van verzendkosten doet met je conversies!

Volledig geïntegreerde extensie

Groot voordeel van deze volledig geïntegreerde A/B-testmodule is dat het geen nadelige gevolgen heeft op de laadtijd van je pagina’s. Content wordt niet aangepast door externe systemen (zoals bij VWO en Google Optimize) waardoor flikkeringen of vertragingen worden voorkomen.

In de extensie kun je daarnaast gemakkelijk aangeven in welk deel van de website je een aanpassing wilt doen om te testen. Op deze manier blijft de rest van het gesplitte winkelaanzicht hetzelfde en voorkom je dubbel onderhoud. Wil je liever niet een vast percentage van je bezoekers naar de B-variant sturen? Het is tevens mogelijk om de B-variant enkel aan je pilot-klanten aan te bieden. Zo kun je de B-variant bijvoorbeeld enkel tonen aan je A-klanten. 😉

Door de extensie te koppelen met Google Analytics meet je welke variant het best presteert. Data van de A en B variant zijn in de verschillende Analytics rapporten daarnaast goed van elkaar te onderscheiden. Hierdoor kun je niet alleen zien welke versie het best presteert, maar bijvoorbeeld ook of dit per apparaat, kanaal of gebruikersgroep verschilt.

Hypotheses staven

A/B-testen zijn een krachtig middel om hypotheses te staven. Hoewel data in Google Analytics je veel vertelt over het gedrag van bezoekers op je platform, vertelt het je niet waarom mensen bepaalde keuzes maken. Door continu te testen ontdek je welke elementen invloed hebben op het succes van je pagina(‘s) en verhoog je stap voor stap het resultaat.

Belangrijke kanttekening: het is essentieel dat je jouw tests goed opzet en evalueert. Stel een duidelijke hypothese op en omschrijf wat je gaat testen, waar de test wordt geïmplementeerd, op welke apparaten de test wordt getoond, wie er aan de test wordt onderworpen en aan de hand van welke KPI je het succes van de varianten gaat bepalen. Evalueer na afloop van de test de resultaten en bepaal of je de B-variant wilt implementeren of niet. Natuurlijk helpen onze online specialisten je graag met het opzetten van een testplan en het implementeren van de test.

Weet jij al wat je gaat testen? Wij helpen je graag. Neem gerust vrijblijvend contact met ons op.

Magento Progressive Web App’s (PWA)

De voordelen van PWA’s

PWA’s laten zich vanuit een browser opslaan op een apparaat. Belangrijk is dat een PWA, net als een reguliere app, beschikt over offline functionaliteiten. Dit mogen beperkte functionaliteiten zijn, zolang er maar iets beschikbaar is als je niet over een verbinding met het internet beschikt. Een PWA zal hiervoor informatie opslaan op je smartphone. Ideaal hieraan is dat een PWA vaak sneller is dan bestaande website- of shop.

Een ander voordeel van PWA’s is dat ze losstaan van de back-end. Veel back-end systemen (zoals Magento) kennen standaarden waar niet of moeilijk van kan worden afgeweken. Met een PWA kun je restricties van het back-end systeem omzeilen. Dit maakt het mogelijk de laatste front-end technieken toe te passen en het front-end systeem in zijn volledigheid af te stemmen op behoeftes van bezoekers.

Tom: “Bij traditionele systemen zitten zowel back-end als front-end in hetzelfde systeem. Gebruikers van de front-end en gebruikers van de back-end hebben andere wensen en behoeften. Doordat dit in één systeem moet worden afgevangen kunnen we niet altijd een oplossing aanbieden die voor beide gebruikersgroepen optimaal functioneert.

Zoals je in onderstaand schema kunt zien, worden back-end en front-end volledig van elkaar losgetrokken met de komst van PWA’s. Dit maakt het in de toekomst mogelijk om de voorkant van een website (het PWA-deel waarmee de bezoeker interacteert) te behouden, maar het back-end systeem te vervangen en vice versa.

Huidige situatie
Magento PWA
Situatie wanneer er gebruik wordt gemaakt van een PWA

Let op: IE11 ondersteund geen progressive web apps. Deze laatste versie van Internet Explorer wordt niet meer geüpdatet.

Headless software

Als de front-end losgetrokken wordt van de back-end, wordt het back-end systeem ook wel ‘headless software’ genoemd. Tom: “Dit houdt in dat een systeem kan draaien zonder dat een gebruiksinterface in dezelfde applicatie zit. In Magento 2 zit standaard een front-end ‘ingebakken’, maar met behulp van een API is het wel mogelijk er een losse PWA ‘voor’ te zetten. React en Vue zijn bekende front-end frameworks die voor het creëren van een PWA kunnen worden ingezet.”

Door te werken met een los back-end en los front-end systeem die afzonderlijk van elkaar kunnen draaien, kun je er niet alleen voor zorgen dat functionaliteiten voor de bezoeker offline nog werken, maar ook dat de front-end blijft werken terwijl de back-end (tijdelijk) offline is, bijvoorbeeld voor het live zetten van wijzigingen. Dit betekent dat de bezoeker de progessive web app altijd kan blijven gebruiken. Calls worden door de front-end opgespaard en doorgezet zodra de back-end weer beschikbaar is.

Voorbeelden van PWA’s:

Klik op onderstaande links en ervaar de voordelen van een PWA:

Meer PWA’s ontdek je hier.

Aan de slag met PWA

Kun je gemakkelijk starten met een PWA? Het antwoord is: ja! Heb je nu een Magento 2 webshop (versie 2.3 of hoger) dan hoef je hier niets in aan te passen. Je bestaande webshop kan blijven werken met een losse front-end (PWA) waarmee je middels een API communiceert. De ingebouwde Magento front-end kun je simpelweg negeren. Vanzelfsprekend zal je wel een heel front-end systeem moeten bouwen. Desalniettemin is dit volgens onze technisch specialist Tom een investering voor de toekomst. “Naar mijn idee zal het steeds lastiger worden om één systeem optimaal in te richten voor zowel front-end als back-end.”

WhatsApp share button

Wat is het voordeel van de WhatsApp share button op jouw website? WhatsApp is met ruim 12 miljoen gebruikers het grootste sociale platform in Nederland. Meer dan 90% van alle smartphonebezitters heeft de app geïnstalleerd, en bijna 10 miljoen Nederlanders gebruiken de app dagelijks.

Ook voor jouw website zijn dit interessante gegevens. Met het plaatsen van de button geef je mobiele gebruikers op jouw website de mogelijkheid om een artikel te delen via Whatsapp. Bij het klikken op de button kan de gebruiker de link van het artikel delen met een persoon of groep naar keuze op WhatsApp.

De WhatsApp share button zal bij een goede implementatie alleen te zien zijn op de mobiele versie van jouw website. Hierdoor zie je hem niet wanneer je de website bekijkt via een desktop.

Waarom de WhatsApp share button gebruiken?

  • De voornaamste reden om de button te gebruiken op jouw website is dat het delen ‘privé’ verloopt. In tegenstelling tot andere bekende share buttons, zoals Facebook en Twitter, is het delen via WhatsApp alleen te zien voor de personen naar wie je iets stuurt. De kans dat iemand de gedeelde link opent in een privé bericht is natuurlijk vele malen groter dan wanneer iemand iets deelt onder volgers op Facebook of Twitter
  • Behalve dat mensen de doorgestuurde link hoogstwaarschijnlijk vaker zullen openen, zal de traffic naar jouw website ook een stuk relevanter zijn.
  • De persoon die het artikel deelt zal namelijk weten dat degene die de link ontvangt ook daadwerkelijk geïnteresseerd is in het onderwerp.
  • Het laatste grote voordeel van de WhatsApp share button is dat mensen de link veel vaker zullen zien. Een post op social media zoals Facebook en Twitter zal niet altijd door alle volgers gezien worden, een berichtje op WhatsApp daarentegen wel.

A/B testing: haal meer uit e-mailmarketing!

Veel e-mailmarketeers weten ervan, maar gebruiken het nog veel te weinig binnen hun e-mailcampagnes: A/B testing. Een gemiste kans, e-mailmarketing is juist hét medium voor het commercieel testen van je marketingcampagne. Het resultaat van je online nieuwsbrief is namelijk in de meeste gevallen al binnen enkele uren bekend!

Nog belangrijker: uit ervaring weet ik dat het testen van e-mailcampagnes bijdraagt aan een verbeterde ROI. Natuurlijk, soms doe je weleens een test die niet het gewenste effect heeft. Maar als je via een vaste structuur je mails test, verhoog je op termijn je respons. In dit blog vertel ik je hoe je dit doet.

A/B testing: een verademing

Vanwege de korte productie- en responsetijd is het testen van je e-mailcampagnes via A/B testing een verademing. Binnen no-time heb je een goed beeld van het responsgedrag van je ontvangers. Wist je dat vaak binnen 24 uur al meer dan 80 procent van de respons bekend is?

Snel optimaliseren voor een nog effectievere campagne

Met de juiste instrumenten heb je binnen de kortste keren inzicht in je opens, clicks en conversie: zowel online als realtime. Zo kun je snel op basis van de eerste bevindingen je campagne optimaliseren, waardoor je op zeer korte termijn een nóg effectievere e-mail verstuurd! A/B testing leent zich ook heel goed om variabelen te testen die je overweegt in andere campagnes door te voeren. Denk aan onderwerp regels, ontwerpen, producten, prijsproposities, incentives of andere elementen van je aanbod.

Zo werkt A/B testing

A/B testing is de meest gebruikte vorm voor het testen van e-mailcampagnes. Hierbij test je telkens één variabele. Het idee achter A/B testing is namelijk dat je niet meerdere variabelen tegelijkertijd kunt testen, omdat je dan niet kunt meten welke invloed de variabelen op elkaar hebben. De stijging of daling in respons is dan niet meer goed toe te wijzen aan de ene of de andere variabele.

Bij A/B testing test je vaak op een deel van je e-mailbestand, zodat je de best scorende variant naar het resterende deel kunt e-mailen en daarmee overall de hoogste respons genereert. Binnen de E-mail Service Provider ‘MailChimp’ ziet het opzetten van een A/B test er als volgt uit:

A/B testing e-mailmarketing mailchimp

Stap 1
Je bepaalt welke variabele je in je mail wil testen en op welk gedeelte van jouw mailinglijst je de test wil uitvoeren. Nadat je dit gedaan hebt, kies je een tijdslimiet waarna de winnaar van jouw test bepaald wordt.

Winnaar a/b test e-mailmarketing

Stap 2
Je test dient natuurlijk ook te worden ontworpen. Voor iedere variant maak je dus een nieuwe opzet. In deze mailing wordt er gevarieerd met de inhoud van de e-mail.

A/B testing variabelen e-mailmarketing

Stap 3
Uiteindelijk heb je de campagne ontworpen en is hij klaar om verstuurd te worden!

Zoals je ziet is het écht geen rocket science!

Maar, A/B testing heeft wél wetenschappelijke trekjes. Het gaat om planmatig werken, goed meten en vergelijken en het gaat om cijfers. Je test om vast te stellen wat het effect is van het gebruik van bepaalde variabelen, op een specifieke wijze.

7 conversie quick wins: geef je website een boost!

Conversie optimalisatie is van groot belang voor iedere website of webshop. Het is een continue proces waar je nooit klaar mee bent. Door steeds te optimaliseren behaalt iedere website of webshop uiteindelijk meer rendement. En dat is toch wat we allemaal willen? Je hoeft geen inhoudelijke expert te zijn om je conversies een boost te geven. Daarom stelden we deze lijst met 7 conversie quick-wins op.

1. Zorg dat de basis goed is

Zorg altijd dat de spelling en grammatica goed zijn. Spelfouten en een slechte zinsbouw zijn funest. Je wil de bezoeker op zijn gemak stellen en zijn vertrouwen winnen. Slechte spelling en grammatica ondermijnen het vertrouwen en hebben een negatieve impact op conversies. Dus pak het woordenboek erbij, het Groene Boekje of laat de teksten checken of zelfs schrijven door iemand die daar goed in is. Verder zijn er ook veel gratis spellingscheckers beschikbaar.

2. Zorg dat je call-to-actions opvallen

Er is al veel gezegd en geschreven over call-to-actions (CTA) en andere knoppen of buttons op websites. Er is jarenlang onderzoek gedaan naar de beste kleur, grootte, lettertype en positie. De eeuwige obsessie of een knop groen of rood moet zijn is verkeerd. Uiteindelijk komt het er allemaal op neer dat je call-to-action moet opvallen ten opzichte van de rest van de pagina. Ze moeten lijken op knoppen. Dus, kom in actie als je call-to-actions gecamoufleerd of verstopt zijn. Geef het design een update zodat ze luid en duidelijk aanwezig zijn. Gebruik contrasterende kleuren en zet de juiste boodschap op de CTA

3. Maak gebruik van sociale bewijskracht

70% van de consumenten geeft aan dat ze eerst reviews van andere gebruikers lezen voordat ze een aankoop doen. Mensen zijn geprogrammeerd om de groep te volgen en te doen wat anderen ook doen. Zeker als het gaat om gerespecteerde bekenden of mensen die bekend staan als expert op hun gebied. Of het nu testimonials, product reviews, klantbeoordelingen, social likes of case studies zijn, sociaal bewijs geeft onmiddellijk een positieve boost aan het conversieratio’s. Verzamel dus sociale bewijzen en overtuig je bezoekers tot het doen van aankopen.

4. Weerhoud mensen niet van aankopen

Dit is een open deur, maar het gebeurt nog veel te vaak dat mensen in weg worden gestaan bij het doen van aankopen. Vaak moeten bezoekers een account aanmaken voordat ze aankoop kunnen afronden. Dit heeft een negatieve invloed op de conversies. Sommige mensen willen helemaal geen account aanmaken, anderen hebben wel een account maar zijn hun wachtwoord vergeten. Wat de redenen ook zijn, respecteer de klant. Zorg ervoor dat hij zich niet hoeft te registreren maar ook aankopen als ‘gast’ kan doen. Waarom zou je een aankoop in de weg willen staan als dat helemaal niet hoeft?

5. Kort de formulieren in

Formulieren zijn vaak te lang, kort ze dus in! Het is simpel: elk extra veld reduceert de kans op de conversie. Vraag jezelf af, wil je echt iemands functie weten als hij een horloge koopt? Of zijn geboortedatum als hij geïnteresseerd is een softwarepakket? Schrap alle overbodige velden in je formulieren. Wil je echt veel informatie achterhalen, verdeel dan de stappen van het check-out proces. In de eerste stap bijvoorbeeld alleen de naam en het emailadres en de overige gegevens pas bij het betalen. Als mensen verderop in het proces zijn, haken ze minder snel af.

6. Red begraven call-to-actions

Gebruik heatmaps om te achterhalen of belangrijke CTA’s niet buiten het zicht van bezoekers begraven zijn. Het is een simpele regel dat als de CTA’s en andere belangrijke content buiten zicht liggen, ze niet effectief zijn. Zorg er dus voor dat je CTA’s en key content binnen het blikveld liggen en opvallen.

7. Verwijder afleidingen

Tegenwoordig kennen we veel afleidingen. Een rustige site is een must, verwijder elementen die bezoekers afleiden van het doel. In lijn met wat we eerder aangaven moeten de CTA’s en key content opvallen. De rest is bijzaak. Als bijzaken te veel opvallen, pas ze dan aan of verwijder ze.

Direct aan de slag met deze conversie quick wins!

Ga snel aan de slag, voer bovenstaande conversie quick wins door op jouw website en geef je conversieratio een boost! Hiermee behaal je laagdrempelig, snel en eenvoudig betere resultaten. Benieuwd wat funest is voor je conversieratio?

Fitts’ law en UX design: één team!

Lang voordat we allemaal tablets in huis hadden en kleine kinderen op tv-schermen probeerden te swipen, dachten we al na over usability. Zo werden er aan lopende banden en in telefooncentrales veelal dezelfde handelingen gedaan (zoals het handmatig doorverbinden van telefoongesprekken met een koord). De bazen op deze werkvloeren vroegen zich af: ‘’Hoe maken we dit proces efficiënter? ‘’

In 1954 kwam gaf Paul Fitts het antwoord met zijn theorie van ergonomie. Door testpersonen met een stylus, steeds een punt (target) aan te laten tikken, ontdekte hij wat iets een makkelijke taak maakt en wat een moeilijke. Aan de hand van dit onderzoek schreef hij de volgende formule:

{\displaystyle T=a+b\log _{2}\left({\frac {D}{W}}+1\right)}

Wat houdt de Fitts’ law formule in?

De T staat voor tijd die het kost om het punt of target succesvol aan te tikken. Bij makkelijke taken kost het minder tijd en bij moeilijke taken is het meer. Vervolgens verwijzen a en b naar de manier van invoer. Doen we de taak met een lange stok? Een ruitenwisser? Een Muis?

De belangrijkste variabelen in deze formule zijn A en W.

A staat voor ‘Amplitude’, dit betekent de afstand tussen twee targets. Iets van de ene kant van de kamer naar de andere kant brengen, duurt langer dan een bestand naar de prullenbak slepen. W staat voor ‘Width’, dit staat voor de grootte van het object waar we naartoe willen. Kleine objecten zijn moeilijk aan te tikken, grote zijn juist makkelijk. Waarom denk je dat Call To Action buttons zo groot zijn?

Wat betekent Fitts’ law voor UX design?

Willen we prettig te bedienen producten maken, dan zijn er een paar manieren waarop we te werk gaan. Houdt de ‘Amplitude’ zo laag mogelijk door bijvoorbeeld gebruik te maken van de rechtermuisknop. Hiermee heb je een scala aan mogelijkheden zonder dat je ver met de muis hoeft te bewegen. Aan de andere kant maak je het target makkelijker in gebruik door de ‘Width’ op te schroeven. Wanneer je een plaatje in Gmail wil toevoegen, wordt het hele mailtje een grote landingsbaan voor je bestand. Bijlages toevoegen maakt het dan ook veel soepeler.

Lang leve de rand!

Nu is de ruimte op een scherm beperkt. En wanneer je als producent alleen grote koeien van knoppen of alle functies onder je rechtermuisknop plaatst, zet dit de hoeveelheid functies in je aanbod sterk onder druk. Daarom wijken we uit naar de aller makkelijkste plek op het scherm om te bereiken; de rand.

Ooit afgevraagd waarom het kruisje rechts bovenin zit? Of je startknop links onderin? Dat is omdat de moeilijkheidsgraad om dit te bereiken oneindig makkelijk is. Nee echt! Wanneer je met je cursor de rand van het scherm bereikt, kun je niet verder. Dit betekent dat het target vrijwel niet te missen is zonder opnieuw te scrollen. Daarom zitten er veel functies boven- of onderin in programma’s. ’Maar wacht’’ hoor ik je zeggen. ‘’Hoe zit het dan met tablets en mobiles?’’. Daar gaat de wet van de oneindige ‘Width’ niet op, omdat je duimen verder dan de rand komen.

Hoe lossen we dat bij mobile devices op?

Sommige producten gebruiken een ‘long press’ om bepaalde opties te krijgen, dit zie je veel wanneer je een App verwijdert Andere manieren zijn een radial menu waarin alle opties op dezelfde afstand staan.
Microsoft

Zowel Apple als Android hebben standaarden wanneer het op de plaatsing van knoppen aankomt. Daarom lijken veel Apps qua interface op elkaar. Dit is omdat fabrikanten er rekening mee houden waar jouw (rechter) duim tijdens gebruik ongeveer heen gaat.
Justin Smith – Tutsplus

Hoe verbetert Fitts’ law de usability van jouw online applicatie?

Wanneer je  de volgende keer overweegt om de save knop naast de delete knop te plaatsen en ze allebei heel klein te maken, denk dan even aan meneer Fitts en hoe het bijdraagt aan een verbeterde usability voor jouw business. Naast de bovengenoemde tips, zijn er nog veel meer handigheidjes om producten zo prettig mogelijk te bedienen. Wij helpen graag mee om de usability van jouw online applicatie of website zo efficiënt mogelijk te maken.