v

BlendItContent Management System

Exploratiedocument

AfstudeerprojectAnne Noteboom

Avans Hogeschool | ACUE

2020 | Afstudeeropdracht

Anne Noteboom

VoorwoordCMS

Sinds een paar jaar hoor ik steeds meer geklaag van webdevelopers en websitehouders over CMS’s. Het gaat de webdevelopers vooral om de slechte performances van websites met CMS’s als WordPress erachter. Ook het coderen in een CMS kan een hele uitdaging worden vanwege de beperkingen en overbodige scripts. De websitehouders hebben moeite met navigeren en vinden wat ze willen veranderen. Maar wat precies het probleem is, weet ik nog niet.

Websites bouwen is mijn passie. Het liefst zou ik na mijn studie hiermee verder gaan. Maar hierbij ontkom je er niet aan om klanten de mogelijkheid te bieden hun website aan te passen.

Langzamerhand begon ik steeds meer te denken aan een eigen CMS. Eén waar je als webdeveloper alle vrijheid hebt en als gebruiker zonder problemen je eigen website kan aanpassen.

Dit verslag dient als exploratiedocument voor het afstudeerproject Communication and Multimedia Design op Avans Hogeschool Breda en laat mijn weg naar het maken van een CMS dat gericht is op de gebruikers zien.

Ik wil Martijn van der Heijden bedanken voor het blijven herinneren aan de rode draad en altijd nuttige feedback. Daarnaast bedank ik alle geÏnterviewden en testpersonen voor het delen van hun meningen en ervaringen. Zonder jullie geen CMS.

3

03

06

10

15

20

30

32

44

50

56

62

71

72

75

Inhoudsopgave

Voorwoord

Samenvatting

Vraagstuk

Desk research

Doelgroep

Design criteria

Concepten

Uitwerking

Proof of concept

Testen

Iteraties

Conclusie

Bronnen

Appendix

The promise of the early web was that everyone

could have a website but there was something missing. Maybe the

technology wasn’t ready.

Matthew Mullenweg,webontwikkelaar

“

Samenvatting

Waarom een nieuw CMS, terwijl het aanbod al zo groot is? Het probleem dat behandeld wordt in dit onderzoek, is dat veel CMS’s niet afgestemd zijn op de gebruiker. Ze zijn meer gericht op het maken van zoveel mogelijk functies. Hoe meer, hoe beter. Helaas zorgt dit ervoor dat veel gebruikers verdwalen in het bos van plug-ins, informatie, instellingen, functies en andere mogelijkheden.

Het doel van dit afstudeerproject is een CMS, dat nu wordt gezien als een frustatie, om te keren tot een motiverend en zelfs winstgevend programma. De hoofdvraag is daarom: Hoe kan de huidige ervaring van het onderhouden van een website in een CMS voor ondernemers verbeterd worden, zodat een website maximaal kan worden geoptimaliseerd?

De stakeholders zijn de webdesigners, webdevelopers en de uiteindelijke gebruikers. Webdesigners worden beperkt in het ontwerpen door de limieten van een CMS. Ook webdevelopers worden beperkt, omdat ze verplicht zijn in een bepaalde omgeving te ontwikkelen. De gebruikers zullen op de lange termijn het meest gebruik maken van het programma. Zij moeten er doorheen navigeren en hebben weinig technische kennis. Daarom ligt de focus op de gebruikers om het hun zo gemakkelijk mogelijk te maken.

Na het vergelijken van open en closed source CMS’s zal het CMS een closed-source CMS

76

worden. Deze beslissing is genomen, omdat hiermee de applicatie het best persoonlijk aanpasbaar kan worden gemaakt.

De doelgroep zijn ondernemers van wie hun website een acquisitietool is. Hun doel is om klanten te werven via de website. Maar uit dit onderzoek blijkt dat weinig closed-source CMS’s rekening houden met SEO. Het kan dus erg voordelig zijn in de Google ranking om de gebruiker te ondersteunen in SEO optimalisatie. Het CMS moet daarin de ondernemer stimuleren om zijn waardevolle kennis te gebruiken.

De vraag ‘Hoe zou je jouw CMS omschrijven?’ resulteerde in positieve woorden als ‘hulpmiddel’ en ‘stuur’, maar ook in termen ‘niet mijn vakgebied’ en ‘frusterend’.

Gevraagden gaven aan dat het een voldoening kan zijn om een website

te zien ‘groeien’. Het plezier wordt echter bedorven wanneer het niet lukt.

Daarom moet er niet per sé gekeken worden naar hoe de gebruiker zo snel mogelijk wijzigingen kan doen, maar hoe makkelijk mogelijk het hem gemaakt kan worden.

Een ander inzicht was dat mensen zonder technische vaardigheden snel bang zijn om iets

‘kapot te maken’. Dit komt omdat ze niet weten waar de fout vandaan komt of hoe die moet worden opgelost.

Daarom moet er een vertrouwen in het CMS komen. Als ze zich als het ware veilig en vertrouwd voelen, zullen ze gaan experimenteren en testen wat het beste werkt voor de website.

Vandaar de design criteria ‘gebruikers moeten vertrouwen in het CMS krijgen’ en ‘intuÏtieve navigatie’ onstaan. Andere design criteria die uit het onderzoek ontstaan zijn: ‘SEO vriendelijk’, ‘geen technische vaardigheden nodig als gebruiker’ en ‘technisch goede werking’.

Met deze informatie in gedachten zijn de eerste ideeën bedacht. Concepten als bijvoorbeeld typend zoeken en direct bewerken hebben het door gebrek aan succes tijdens het testen niet gehaald. Veel testen zijn gedaan door prototypes in Adobe XD te maken en met de gebruiker er door heen te klikken alsof het hun CMS is. De manier waarop de gebruikers door de prototype navigeerden en hun persoonlijke meningen waren de doorslag om het prototype wel of succesvol te verklaren.

Tijdens het conceptenproces werd een belangrijk inzicht gedaan. Wanneer de gebruiker dynamisch kan bewerken, scheelt dat veel tijd en ontstaat er een overzichtelijke interface. De inhoud van de website wordt als het ware in stukjes opgedeeld: werknemers, contactgegevens, vacatures enz.

98

Alleen de noodzakelijke onderdelen worden hierin geladen.

Om de gebruiker te helpen zijn website zo goed mogelijk te optimaliseren, worden er aanbevelingen gegenereerd. Google heeft een geweldige tool gebouwd om inzicht te krijgen in een website: Google Analytics. Maar om dit programma compleet te begrijpen en om waardevolle informatie eruit te halen, is veel tijd en kennis nodig. Daarom worden de data uit dit programma gehaald en omgezet naar begrijpbare tekst.

Het design is gemaakt in Adobe XD. Hierin zijn verschillende opties gemaakt om te kijken welke vanuit de gebruiker gezien het beste werkt.

De uitwerking van de online versie is gedaan met Vue en Laravel. Dit komt door de functies waarin makkelijk losse componenten worden samengevoegd tot één geheel.

Het eindproduct en dus het antwoord op de hoofdvraag is een CMS met een nieuwe gedachtegang erachter; in plaats van dat de website afhankelijk is van het CMS, is het CMS afhankelijk van de website. Hierdoor voelt het als een persoonlijke ervaring. Daarnaast is het CMS op maat gemaakt. Per gebruiker is het CMS in gebruik hetzelfde, maar qua styling aangepast op de verbonden website.

Vraagstuk

Waarom?DOEL

Toen de eerste website werd gebouwd in 1991, waren alle website statisch gebouwd in een HTML editor. Inmiddels zijn we zo ver dat websites met een CMS worden gebouwd. Het principe van een CMS:

1.

2.

3.

Maar zo leuk als coderen voor een webdeveloper is, zo frusterend kan het worden om een website te creëeren in een CMS. Dit is als programmeur vervelend, maar voor gebruikers kan het net zo frusterend worden. Als een CMS niet werkt naar behoren, gaat dat ten koste van de kwaliteit van een website. Terwijl een website zelfs een deel van het inkomen kan zijn.

Het doel van dit afstudeerproject is om een CMS, dat nu wordt gezien als een frustatie, om te keren tot een motiverend en zelfs winstgevend programma.

11

Een programmeur maakt een website en verbindt deze met een CMS.De gebruiker kan content veranderen en toevoegen in het CMS.De website haalt via een database de content op zo wordt de website automatisch aangepast.

Hoofd- en deelvragenVRAAGSTUK

Naar aanleiding van het waarom-gedeelte is de hoofdvraag ontstaan: Hoe kan de huidige ervaring van het onderhouden van een website in een CMS oor ondernemers verbeterd worden, zodat een website maximaal kan worden geoptimaliseerd?

Subvragen

1. Waar liggen de moeilijkheden en frustatie tijdens het onderhouden van een website?

Allereerst is meer kennis nodig over de huidige situatie. Waar lopen gebruikers nu tegenaan? Hoe komt dat? Om hierachter te komen worden interviews en gesprekken gehouden over de ervaringen van CMS gebruikers.

2. Hoe wordt een CMS gebruiksvriendelijker?

Met de data uit de vorige vraag kunnen conclusies worden getrokken en verbeterslagen worden gemaakt. Er zullen schetsen en eerste prototypes worden gecreëerd om de conclusies te bevestigen.

3. Hoe kan de website-eigenaar met zijn eigen professionele vakkennis zijn website optimaliseren in een CMS?

12 13

De gebruiker heeft kennis over een bepaald vak. Kennis die de websitebouwer niet heeft, maar wel moet worden gebruikt in de website voor de SEO.De uitdaging is om dit zo in het CMS te verwerken dat de gebruiker wordt gestimuleerd om die handelingen uit te voeren.

4. Hoe kan het ontwerp op technisch vlak worden gerealiseerd?

Niet geheel onbelangrijk is hoe het CMS op technische wijze in elkaar gaat steken. Welke programma’s werken hiervoor het beste? Hoe zit het met deployment? Door vantevoren goed na te denken over de structuur van de techniek, kan dit veel tijd en irritatie besparen.

StakeholdersGEBRUIKERS

WebdesignersOntwerpers moeten kunnen spelen en experimenteren zonder de beperkingen van vooraf ontworpen templates. Volgens webdesigner Hagit Kaufman moeten professionele webdesigners en CMS-platformen elkaar zien als partners, want zo kunnen we allemaal verbeteren en groeien. Hierin is het essentieel dat het CMS dezelfde opties biedt als in het ontwerp zijn gemaakt.

WebdevelopersEen ontwikkelaar heeft de uitdaging om een ontwerp te ontwikkelen met het CMS. Hierin is hij dus gelimiteerd, maar dat hoeft niet negatief te zijn. Als het CMS zo is ingevuld dat het de ontwikkelaar vrijheid geeft, is het goed mogelijk om de website te maken.

GebruikersDe gebruiker heeft op de lange termijn het meeste met een CMS te maken. Elementen als de navigatie en functionaliteiten bepalen de ervaring van de programma.

14

Desk research

Soorten CMSWat is een CMS?PRO’S & CON’SDEFINITIE

1. Open-sourceDit zijn CMS’s waarvan de code openbaar is. Het bekendste

voorbeeld is WordPress.

Voordelen Goedkoop (soms zelfs gratis)

Ontelbaar aantal mogelijkheden door plugins

Steeds meer aandacht voor SEO

Nadelen Onpersoonlijk

Door de vele mogelijkheden wordt het snel een doolhof

Lagere snelheid van de website

Aantrekkelijk voor hackers

2. Closed-sourceDit soort CMS is vaak ontwikkeld door websitebouwers zelf

en wordt uitsluitend gebruikt door hun eigen klanten.

Voordelen Kan makkelijk per klant worden aangepast

De websitebouwer kent het CMS en kan dus snel fouten

opsporen

Nadelen Duurder (het kost meer tijd om te ontwikkelen)

Conclusie: Het ligt aan verschillende factoren welk soort

CMS het best bij de website past. Wil de klant een zo

goedkoop mogelijke webshop bouwen, is een open-source

CMS het beste. Maar een groot project waarvoor veel geld

beschikbaar is, leent zich goed voor de closed-source optie.

16

CMS is een afkorting van content management system en wordt ook wel websitebeheersysteem genoemd.Websitebouwer Arjan Woldring definieert een CMS als “een software toepassing, meestal een webapplicatie die gebruikt wordt om gegevens op internet te kunnen publiceren zonder dat mensen veel technische kennis nodig hebben.”

Een CMS maakt het dus mogelijk voor websitebeheerders om hun website te onderhouden. Eigenlijk is een CMS de ‘achterkant’ van een website.

Wanneer kan een CMS een CMS worden genoemd?- Delen van de website-inhoud moet kunnen worden verwijderd, gewijzigd of aangemaakt.- Het moet mogelijk zijn om media, zoals foto’s en video’s te uploaden en deze vervolgens in te voegen op de website.- Het moet goed beveiligd zijn, zodat alleen de personen met inloggegevens toegang hebben.

17

ConcurrentenDE SPELERS

1,271,920,923 websites gebruiken een CMS. Opvallend is hoe groot het aandeel van WordPress daarin is. Wat maakt dit CMS zo populair?

Volgens William Craig, president van Internet marketing and SEO bedrijf WebFX, Inc., is intuïtiviteit een belangrijke reden. Een goed ontworpen interface bespaart een gebruiker tijd met het beheren van een website. Een andere reden is de rekbaarheid en de hoeveelheid mogelijkheden. Met een oneindig aantal functies is bijna alles mogelijk wat een gebruiker wenst. Maar is dit misschien ook een nadeel voor een gedeelte van de gebruikers? Hoe meer mogelijkheden, hoe onoverzichtelijker het geheel wordt.

WordPress

Wix

Squarespace

Joomla

Shopify

Top 5 meest gebruikte CMS’s

Bron: WebsiteSetup. https://websitesetup.org/popular-cms/

SEO in eenclosed-source CMS

VINDBAARHEID

In het geval van dit project blijkt al gauw dat een closed-source CMS de beste optie is. De belangrijkste reden hiervoor is omdat het de applicatie per website persoonlijker kan worden gemaakt.

Een gevaar van een closed-source CMS is dat het de vindbaarheid van de website in zoekmachines kan verslechteren. Maar als hier aan het begin van het project al rekening mee wordt gehouden, kan het juist voordelen opleveren.

Een aantal aspecten die in een CMS mee kunnen worden genomen, zijn alt en titel tags van afbeeldingen, meta tags en omschrijvingen en een XML sitemap. Hierbij moet de website wel zo gecodeerd zijn dat de data er doorheen wordt geweven.

De input van SEO komt van de gebruiker die kennis heeft over zijn vak en daarom de juiste content kan leveren. Het CMS moet hem ondersteunen om het hem zo makkelijk mogelijk te maken.

18 19

Doelgroep

Geef me werk wat bij me past en ik hoef nooit meer te werken.

- Confucius

OndernemersFRUSTRATIE & ONMACHT

De doelgroep zijn ondernemers van wie hun website een inkomstenbron maar geen webshop is. Het gaat daarbij om de acquisitie.

Een reden hiervoor is omdat hier een kans ligt: dit soort websites hebben heel veel aan SEO. Zoekt iemand in Google: ‘schilder rotterdam’, dan wil je als schilder in Rotterdam bovenaan komen. Volgens digital marketing expert Bart Brager heeft de bovenste organische zoekresultaat een doorklikpercentage van maar liefst 24,78%. Door websitebeheerders te motiveren om zijn CMS goed bij te houden en rekening met SEO te houden, kan dit in het voordeel van de ranking zijn.

Daarnaast is er een praktische reden om voor ondernemers te kiezen: zij zullen sneller voor een kwalitatieve optie kiezen. Dit inzicht kwam na een gesprek met een student die de prijs boven kwaliteit koos voor zijn website. Ondernemers zullen sneller investeren in een duurder closed-source CMS dan een gratis do-it-yourself-tool.

De ondernemer zelf weet vaak het meest van zijn vak af. Op zijn website wil hij dat overbrengen om potentiële klanten te overtuigen. Hierbij zal hij via een CMS zijn website moeten wijzigen. Als het CMS frustatie oplevert, wordt hij snel gedemotiveerd om in het CMS te werken.

21

Roos, 29Eigenaar BloemBoom

GeslachtJob StadStatusKinderenInkomen

VrouwEigenaar BloemBoomDordrechtGetrouwd1Modaal

GepassioneerdZorgzaam

�In mijn werk ben ik er altijd op gericht om het beste in ieder kind naar boven te halen.

Doelen Frustaties

Bio

Technologie

Persoonlijkheid

Merken Software & Apps

Kinderen laten ontwikkelen

Angsten

Tekort aan klanten voor haar bedrijf

Bedrijf laten groeien

Niet de website er laten uit zien als ze wilt

Contactformulier wordt niet ingevuld

Desktop

Smartphone

Social Media

Introvert Extravert

Analytisch Creatief

Loyaal Wispelturig

Ik geef kindercoaching en/of onderwijsbegeleiding aan kinderen waar de ontwikkeling niet lekker loopt. Op mijn website, gemaakt in WordPress, breng ik mensen hiervan op de hoogte. Ik wil bepaalde wijzigingen maken op mijn website, maar dit lukt mij niet zelf.

Customer journiesFIELD RESEARCH

Het doel van de customer journies is om inzicht te krijgen in het huidige gedrag van CMS gebruikers. Waar lopen zij vast? Waar liggen de frustaties? Hiervoor heeft een aantal proefpersonen in verschillende CMS’s een doel gekregen, bijvoorbeeld het toevoegen van een nieuwsbericht, om deze uit te voeren.

Een aantal punten waarop mensen vastlopen of die beter kunnen, zijn:

BlueCMS- Afbeeldingen toevoegen mogelijk maken op de pagina waarop een nieuwsbericht toegevoegd kan worden.

WordPress- Alles wat gewijzigd kan worden op één plek. Soms kun je elementen wijzigen in de paginabeheer, maar voor andere elementen moet de gebruiker weer naar een specifieke plugin.- Alle woorden in één taal: vaak zweven er Engelse termen door het CMS heen, ook al is het Nederlands ingesteld.- Bij een gemiddelde website reikt het aantal menu items al snel boven de 15.

23

Een goed voorbeeld van iemand uit de doelgroep is de eigenares van de website www.bloemboom.nl. Deze website is voor ouders om in te lichten wat Rosalinde van BloemBoom voor hun kind kan betekenen als kindercoach. Door een contactformulier in te vullen, kunnen ze zich aanmelden.

Toen ze deze website in WordPress met behulp van een thema maakte, had ze sterke ideeën over hoe ze wilde dat het eruit zou zien. Toen dit niet lukte heeft ze alsnog iemand inschakelt om haar website op te pimpen zoals zij wil.

Maar waar komt die frustatie vandaan? Ligt het aan de navigatie? De hoeveelheid functies? Het ontbreken van technische vaardigheden? Om hier achter te komen, is het onderzoek begonnen met het samenstellen van persona’s en het maken van customer journies.

22

BlueCMSDoel: nieuwsbericht schrijven

Doel: Stad in Google Maps wijzigen

Doel: blog schrijven

WordPress

Site-abbonnement

Knop“Modules”

Knop“Pagina’s”

Opslaan

Knop“Blogs”

Teksttypen

Knop“Plugins”

Knop“Google Maps”

Knop“Manage locations”

Knop“Edit”

Stadintypen

Knop“Opslaan”

Knop“Pagina’s”

Knop“Nieuws”

Knop“+ nieuw”

Knop“Artikelen”

Knop“Zichtbaar maken”

Inhoudtypen

Knop“Opslaan”

Knop“Media”

Fotokiezen

Tijdslengte

Site-abbonement- Voor je media kunt toevoegen, moet de gebruiker opslaan. Dit is een overbodige stap.- De optie ‘zichtbaar maken’ mogelijk maken in de de pagina van toevoegen zelf in plaats van alleen bij overzicht.

Hieruit blijkt dat bij verschillende CMS’s de structuur in de weg ligt. Onderdelen die bij elkaar horen, staan op verschillende plaatsen.

Toch zijn dit nog vrij oppervlakkige inzichten die relatief makkelijk op te lossen zijn. Ik wil meer weten over de dieper liggende redenen. De manier om daar achter te komen is om de gebruikers te bevragen en te betrekken in het proces. Dit is voornamelijk gedaan door gesprekken te voeren met potentiële gebruikers en developers.

24

Hoe beschrijf je je huidige CMS?

Stuur van de websiteHulpmiddel

Niet mijn vakgebiedAfhankelijk

Veel zoeken Beperkt

ERVARING

De vraag ‘Hoe beschrijf je je huidige CMS?’ is gesteld aan meerdere personen in de doelgroep. Een opvallend antwoord was ‘niet mijn vakgebied’. Het antwoord kwam van iemand met met een webshop, die ze met veel moeite bijhoudt in WordPress. Ze omschrijft de werkzaamheden in een CMS als een bepaald vakgebied. Een vakgebied waar zij niet in zit.

De vraag is: hoe zorg ik ervoor dat een CMS niet meer voelt als iets wat je eerst moet leren, maar als iets dat automatisch gaat en waarvan de handelingen voor zich spreken?

Inloggen met eeneigen gekozen code i.p.veen gebruikersnaam met

wachtwoord.

Statistieken & cijfersDILEMMA’S

100% 0%voor tegen

90% 10%positief negatief

Website wijzigen perdynamisch onderdeel i.p.v

per pagina.

Tijdens het onderzoek, maar ook tijdens het prototype proces, zijn specifiek aan de doelgroep de volgende stellingen voorgelegd.

Ik vind dat mijn huidige CMS te veel aan functies en

plugins heeft.

70% 30%eens oneens

55% 45%eens oneens

Ik zie mijn CMS als een positief hulpmiddel om mijn

website aan te passen.

In 9 van de 10gevallen belt de

klant alsnog met de vraag of wij de wijzigingen willen

doorvoeren.

Menno Tempelaar,allround developer

“Belangrijkste inzichten uit doelgroeponderzoek

KWALITATIEF ONDERZOEK

In eerste instantie was een aanname dat gebruikers zo snel mogelijk wijzigingen willen doorvoeren, omdat ze er geen plezier aan hebben. Dit is niet altijd waar. Vaak is het juist een voldoening om een website te zien ‘groeien’. Het plezier wordt echter bedorven wanneer het niet lukt.

Daarom moet er niet per sé gekeken worden naar hoe de gebruiker zo snel mogelijk wijzigingen kan doen, maar hoe makkelijk mogelijk het hem gemaakt kan worden.

Een ander inzicht was dat mensen zonder technische vaardigheden snel bang zijn om iets ‘kapot te maken’. Dit komt omdat ze niet weten waar de fout vandaan komt of hoe die moet worden opgelost.

Daarom moet er een vertrouwen in het CMS komen. Als de gebruikers zich als het ware veilig en vertrouwd voelen, zullen ze gaan experimenteren en testen wat het beste werkt voor de website.

28

Design criteria

345

1 IntuÏtieve navigatie

Technischgoede prestaties

SEO vriendelijk

De gebruiker moet op logische en intuÏtieve wijze door het CMS kunnen klikken.

Gebruikers moeten vertrouwen in het CMS krijgenHet moet voelen als hun persoonlijke hulpmiddel die hun website kan verbeteren.

Geen overbodige functies, scripts, enz. Dit zorgt voor een snel en clean CMS.

Het blijkt dat in veelclosed-source CMS’s weinig

aandacht voor SEO is.

Waar moet het CMS minimaal aan voldoen?

CONVERGEREN

2Het CMS is toegankelijk

voor iedereen.

Geen technische vaardigheden nodig

als gebruiker

Naar aanleiding van het voorgaande onderzoek en inzichten zijn de volgende design criteria vastgesteld:

Concepten

AanbevelingenIDEE 1

Waargebeurde situatie: een marketing professional is ingehuurd om de SEO te verbeteren voor een bouwbedrijf. Hij heeft veel verstand van marketing, maar niet van prefab elementen, houtskeletgebouwen, enz. Daarom leest hij zich in en probeert met die kennis de webresultaten te verhogen. Hierbij wordt de waardevolle kennis over de bouw van de ondernemer zelf verloren.

Wat als een niet-marketeer toch SEO handelingen kan uitvoeren die zorgen voor verbetering op zijn website? Door iemand precies te vertellen wat hij moet doen, wordt hem makkelijker gemaakt. De aanbevelingen worden automatisch gegenereerd met behulp van Google Analytics data.

Maar hoe motiveer je een gebruiker om de verbeteringen uit te voeren? Door het een soort spelelement te geven, wordt het doel bereikt dat mensen bijna verslaafd worden blijven verbeteren. Martijn van der Heijden merkte op dat mensen met bijvoorbeeld zonnepanelen het liefst elke minuut kijken op een display checken hoeveel ze al bespaard hebben aan energie. Met dat principe in gedachte zijn er schetsen gemaakt. Uiteindelijk is gekozen voor de simpelste oplossing die het beste werkt: een vooruitgangsbalk met de kleuren rood, oranje en groen die meteen duidelijk maken wat de staat is. Bij de kleur rood worden mensen meteen gealarmeerd en bij groen gekalmeerd.

33

De platte data van Google Analytics worden omgezet in een duidelijke en waardevolle boodschap.

Een voorbeeld is wanneer de bounce rate van de website te hoog ligt. Niet iedereen weet wat daarvan de oorzaken kunnen zijn. Wat als een code langs alle mogelijke oorzaken gaat en checkt of de website daaraan voldoet? Lange laadtijden, grootte van de afbeeldingen, te lange teksten, aantal call-to-actions enz. Gebaseerd op die data genereert hij een aanbevelingen die leesbaar voor de gebruiker zijn.

34

Schetsen voor aanbevelingen

Beste schetsen uitgewerkt

36

Direct bewerkenIDEE 2

Een vraag die onstond doordat verschillende personen aangaven moeite te hebben met de interface, was: wat als er geen tussenpartij, zoals een dashboard, in het proces van onderhouden zit? De websitebeheerder zou dan, zoals hiernaast te zien is (blz. 33), direct in de website kunnen bewerken.

Het proces zou als volgt zijn:

1. De website staat online3. De beheerder logt in4. De website staat nu op een bewerkingsmodus5. De beheerder kan direct bewerken

De belangrijkste reden dat dit idee niet door gegaan is, is dat de website alleen statisch kan worden ingevuld. Wel bracht dit prototype een gedachtegang op over een CMS waarin er meer geautomatiseerd wordt.

1

2 3

4

Prototype

38

Dynamische contentIDEE 3

Veel CMS’s zorgen ervoor dat de gebruiker per pagina kan bewerken. Bekende voorbeelden zijn WordPress, Wix en Magento. Hierdoor wordt soms op verschillende pagina dezelfde soort content gewijzigd.

Een idee kwam van een advocatenkantoor waar een gepensioneerde advocaat van de website werd verwijderd. Op minstens 5 pagina’s moest de foto en tekst van deze advocaat worden weggehaald. Een week later vonden ze zijn gezicht alsnog op een zesde pagina.

Wat als er in plaats van per pagina per element kan worden gewijzigd? Een element zou ‘advocaten’ of ‘werknemers’ kunnen zijn. Zodra er een advocaat weggehaald wordt, wordt overal op de website die advocaat automatisch verwijderd.

Dit idee is in een vrij vroeg stadium van het project getest op gebruikers. Met behulp van een Adobe XD prototype hebben testpersonen erdoorheen geklikt en hun mening gegeven. Het prototype is te zien op https://xd.adobe.com/view/6c08a9f8-877c-43e5-6445-d0add361b5f7-1a39/grid.

Door de positieve reacties van de proefpersonen die onstonden uit de test, wordt dit concept verwerkt in de eerste versie van het CMS.

Opties van dynamische dashboard items

Mogelijke uitwerking voor de website van Zorba de Griek

A/B testing

Ilia Boshinov is naast DJ ook copywriting student. Hij vertelde dat één van de meest waardevolle methodes om content te testen A/B testing is. Toen hij een website voor zijn bedrijf in Wix maakte, miste hij een mogelijkheid om makkelijk verschillende opties te testen en te kijken wat de beste resultaten oplevert.

Dit gesprek zorgde voor het idee om een testmogelijkheid in te bouwen. De gebruiker kan een bepaalde tijd content online zetten en de resultaten vergelijken met nieuwe content die hij daarna online zet.

IDEE 4

40

“As a user I want to be

able to..

I wish to be to able to switch between templates and test

the results

Ilia Boshinov,Wix gebruiker

“

Einddoelen vanwebsite instellen

Iedere website heeft een ander doel en daarom een andere aanpak nodig. Door doelen te stellen, kan daarop worden ingespeeld in het CMS en bij de aanbevelingen.

Kiest de gebruiker bijvoorbeeld als doel veel bezoekers en de website bevat meer dan 5000 woorden? Dan zullen de aanbevelingen zich vooral richten op content optimalisatie, zoals zoekwoorden.

Naarmate het proces van dit project vorderde, werd de doelgroep specifieker. De focus ligt nu op websites die dienen als acquisitietool. Omdat dit al een doel op zich is, zijn verschillende einddoelen per website uiteindelijk niet nodig.

IDEE 6

42

Typend zoeken

Elke minuut wordt er 3,8 miljoen keer in Google Search gezocht. Mensen snappen hoe deze handelingen werken: je typt, er verschijnen zoekresultaten en je klikt één van de resultaten aan of drukt op enter. Dit principe is ook gebruikt in dit concept. In plaats van dat de navigatie vantevoren vastligt, bepaalt de gebruiker wat zijn scherm vult en krijgt hij de volledige controle. Als de gebruiker niet de gewenste resultaten krijgt, moet wel er een “achteruitgangfunctie” zijn om toch alle mogelijkheden te zien.

Tijdens het testen van dit concept bleek dat het idee niet 100% werkt. De gebruikers weten namelijk niet welke mogelijkheden er zijn. Hierdoor duurt het zoeken een stuk langer.

IDEE 7

43

Uitwerking

De code van een website wordt gemixt met de content uit het CMS. Zo ontstond de naam BlendIt. De keuze voor het uiteindelijke logo, is de logo die het beste deze naam representateert.

Het kleurenpalet had de criteria om een donkere, een lichte en minstens één accentkleur om voor knoppen en call-to-actions te gebruiken.

45

BrandingDESIGN

BlenditBlendit

Logo opties

DesignSURFACE

46

De laatste laag van het design, de surface, is vooral uitgevoerd door meerdere opties te maken. De optimale keuze is gemaakt door de gebruiker centraal te stellen. Het voorbeeld hieronder is de uitwerking van de acties op een overzichtsitem. Er is gekozen voor de tweede optie omdat deze minimalistisch is, maar de functie toch duidelijk is. Om de gebruikers feedback te geven op hun handelingen is de vijfde optie als hover gekozen.

Het programma dat gebruikt is om het design uit te werken, is Adobe XD. Dit programma is speciaal gemaakt om websites en andere interfaces te ontwerpen en het is een goede tool om ontwerpen snel te testen met de functie om prototypes te creëeren.

47

Technisch plan

Door vantevoren goed na te denken over de structuur en manier van coderen, wordt tijd bespaard tijdens de uitwerking.

Een mogelijk optie die is overwogen, is Laravel API. De reden dat hiervoor niet is gekozen, is omdat het technisch lastiger is en meer tijd kost.

Ook ReactJS was een optie tegenover VueJS. In beide talen kun je makkelijk componenten maken, waardoor je de code in kleine stukjes kan opdelen. Maar VueJS heeft een makkelijkere en duidelijkere structuur. In een grote applicatie, zoals het CMS wordt, is dit één van de grootste afwegingen die het zwaarst telt.

CODEREN

48

Ook moet er data worden opgehaald uit Google Analytics. Die data moetenworden omgezet en weergegeven in het CMS. Hiervoor zijn verschillende API’s beschikbaar. De beste optie in dit geval is Google Analytics API v4, omdat deze API speciaal is gemaakt om dashboards te creëeren met de data van een website.

De programmeertalen die ik uiteindelijk wel wil gebruiken zijn:

Opbouw HTML 5 en Laravel 5.7

JavaScript Vue.js

Stijling CSS 3 en Sass

Back-end SQL

Deployment

Deployment is het klaarmaken van de code voor het online maken. Door vantevoren een logische hiërarchie te maken, scheelt online zetten tijd en is het later ook nog makkeijk om bestanden te wijzigen of toe te voegen.

Het programma waarin het CMS en de websites online zet, is FileZilla. Dit is puur door eerdere positieve ervaringen hiermee.

HOSTING

Achterkant(beveiligd)

Voorkant

Public folder

JavaScriptCSS

Database Website bestandenCMS bestanden

Index

49

Proof of concept

Persoonlijk CMS

Tijdens het ontwerpen ontstond een soort opbouwende lijn in de pagina’s. Uiteindelijk is dit de hoofdnavigatie geworden en de ‘formule’ achter het CMS: Updaten > Verbeteren > Resultaten. De gebruiker kan dit als een vicueuze cirkel gebruiken, waarin hij zelf de websiteprestaties kan blijven verhogen.

RESULTAAT

51

De pagina Updaten laat alleen zien wat nodig is. Als er werknemers op de website staan, zijn deze aanpasbaar in het CMS en anders niet.

Om het overzichtelijk te maken, is er een onderverdeling gemaakt in dynamische onderdelen en overige onderdelen. Onder overige onderdelen staan blokken die weinig worden gewijzigd, zoals foutpagina’s en sitemaps.

UpdatenDYNAMISCH

52

Onder de pagina Verbeteren vallen de subpagina’s Testen en Aanbevelingen.

De aanbevelingen worden automatisch gegenereerd door de data van Google Analytics om te zetten naar leesbare aanbevelingen.

De testen worden door de gebruiker uitgevoerd. Zij kunnen een test aanmaken en intypen wat het doel van de test is. Ze kunnen bijvoorbeeld testen welke tekst de meeste conversies oplevert. Vervolgens start fase 1 die twee weken duurt. Aan het einde van die weken worden de resultaten opgeslagen. De gebruiker wordt eraan herinnerd dat fase 1 voorbij is en kan de wijzigingen doen voor fase 2. Nadat deze fase ook voorbij is, kan de gebruiker de resulaten zien van fase 1 en 2 en daaruit zijn conclusies trekken.

VerbeterenOPTIMALISEREN

53

Het doel van de resultatenpagina is om zo overzichtelijk mogelijk zoveel mogelijk inzichten te geven aan de gebruiker. Wat voor hem belangrijk is, is het leren kennen van de klanten. Op die manier kan hij daarop inspelen op zijn website. Daarom geeft het CMS vooral informatie over de conversies en de doelgroep die voor de conversies zorgt.

ResultatenINZICHTELIJKE DATA

54

Het is de bedoeling dat dit afstudeerproject een compleet product wordt en daarom is het zo ver mogelijk uitgewerkt.

Het CMS-gedeelte waarin de gebruiker kan toevoegen, wijzigen en verwijderen is werkend gemaakt en getest op gebruikersvriendelijkheid.

De code hiervan is te zien op https://github.com/annenootje/cms

Het verbetergedeelte met testen en aanbevelingen en de resultatenpagina zijn een grotere uitdaging. Deze zijn daarom voor nu nog statisch opgebouwd, maar hebben uiteindelijk het doel werkend te zijn

WerkingTECHNISCHE

De code wordt bewaard in GitHub

55

Testen

Eén van de design criteria is een navigatie waarin elke pagina binnen drie klikken te bereiken is. Om dit te testen is er een websitestructuur gemaakt. Dit is één van de elementen van Jesse James Garrett’s model. De structuur laat de organisatie van de website zien. Ook wordt duidelijk welke pagina’s prioriteit hebben.

Volgens Medium schrijver Alexander Handley zijn user flows de nieuwe wireframes. De flows zijn om te testen welke stappen een gebruiker doet om een zinvol doel te bereiken.

User flows & skeletons

NAVIGATIE

57

Doel: Blog toevoegen

Doel: Vacature wijzigen

Doel: Resulaten bekijken

GebruikerstestenGOOGLE FORMS

Om de eerste versie van het CMS te testen is de website www.restaurant-van-der-ree.nl gemaakt met www.restaurant-van-der-ree.nl/cms (code 12345) erachter. Het doel was er achter te komen of de testpersonen de functies van het CMS snapten. Dit werd bereikt door hen aan te moedigen elementen te wijzigen en toe te voegen.

Een voorbeeld van een situatie die ontstond, is hieronder te zien. Nadat een aantal testers vacatures had toegevoegd, waren verschillen in het aangeven van het aantal uur. Hierin moet in het CMS duidelijker worden gecommuniceerd in welke vorm of welke waarde het exact moet worden ingevuld.

59

60

Meer inzichten

1.

2.

3.

4.

De Resultaten pagina kan inzichtelijker gemaakt worden: de cijfers moeten excact te zien zijn, in plaats van een lijntje.

Een aantal gebruikers heeft moeite om de knoppen te vinden van items die op de hover tevoorschijn komen. Deze moeten direct in beeld zijn.

Het is niet voor iedereen duidelijk dat onder de kop ‘Media’ o.a. het uploaden en wijzigen van foto’s mogelijk is.

Bepaalde termen zijn onbekend voor de gebruikers, zoals alt tag of meta data. Hierin moet een vertaalslag worden gemaakt naar meer begrijpelijke woorden.

Uitspraken van testpersonen

Voeg een element toe, zoals een gerecht of vacature. Hoe

vond je dit op te doen?

Supermakkelijk

Niet makkelijk, niet moeilijk

Makkelijk

Onmogelijk

Moeilijk

Voeg een omschrijving toe aan een foto is geüpload. Hoe moeilijk

vond je het om dit te vinden?

Supermakkelijk

Niet makkelijk, niet moeilijk

Makkelijk

Onmogelijk

Moeilijk

clean duidelijkuitvoerbaar

minder opties afhankelijk hoeveel vrijheid de gebruiker wilt hebben

makkelijk in gebruikwijzigt snel

duidelijk gecommuniceerd zonder al te veel onnodige afleiding.Ik wist niet direct hoe ik

de foto moest wijzigen

makkelijk

soepel

looks nice geen standaard CMS

Ik zou dezeCMS kiezen

Ik zou meer met zwart doen

passend

Na lang zoeken kom ik er achter dat je het zo als favoriet aanklikt.

het prullebakje is leuk

toegankelijker

ingebouwde analytics nog niet in depth genoeg

Iteraties

Favorieten

Bij grote websites kan het zo zijn dat de updatepagina veel modules bevat. Daarnaast is er altijd content die vaker wordt gewijzigd dan andere content, zoals blogs tegenover openingstijden.

Wat als de gebruiker een element favoriet kan maken? Deze elementen worden bovenin de pagina geladen en sneller bereikt. De gebruiker creëert nu ook zelf een omgeving die persoonlijker is en wat hij fijn vindt.

Tijdens de gebruikerstesten bleek helaas dat niet iedereen direct begreep waarvoor de sterren zijn. Dit gold voornamelijk voor personen met een leeftijd hoger dan 40 jaar. Bekijk de oplossing hiervoor bij iteratie 4.

ITERATIE 1

63

Feedback aande gebruiker

Tijdens het testen van het CMS bleek een belangrijke design principe te missen: feedback. Wanneer de gebruiker bijvoorbeeld iets opslaat, wil hij zeker weten dat het is gelukt. Dit kan door een bericht te geven waarin de status wordt weergegeven.

ITERATIE 2

64

Personal assistent

Hoe maak ik de applicatie persoonlijker? Hoe creëer ik emotionele waarde? Het CMS heeft nu een eigen branding design en is verschillend van de website. Maar het moet het gevoel aan de gebruiker geven dat het een persoonlijk hulpmiddel is om zijn website te wijzigen. Daarom is de branding van de applicatie losgelaten en vernieuwd.

Zodra het CMS dezelfde styling als de website krijgt, wordt het een eenheid. Dat was de veronderstelling die getest moest worden. Het gaat dan vooral om de fonts en kleuren. In dat geval zou elke gebruiker een verschillend design van zijn CMS hebben wat het persoonlijker maakt.

ITERATIE 3

65

Het voelt aan alsof het volledig hierbij past (geen

standaard CMS).

“

66

Door de positieve reacties in de vraagformulieren, wordt dit idee doorgezet in het eindresultaat.

Hieronder staan een antaal voorbeelden hoe het CMS eruit zou zien bij de bijstaande websites.

Introductie voornieuwelingen

De bedoeling is dat het CMS zichzelf wijst en de gebruiker op intuÏtieve wijze er doorheen kan klikken. Maar om de gebruiker even op weg te helpen kan geen kwaad. Uit de test blijkt dat bijvoorbeeld niet altijd duidelijk is waar de sterren voor zijn.

Vervolgens heeft de gebruiker twee opties. Als hij alles begrijpt, drukt hij de introductie weg. De andere optie is om door te klikken op één van tekstballonnen om er meer over te weten.

ITERATIE 4

67

Optie 1: Doorgaan

Optie 2: Meer weten

Standaard waardenin input velden

ContinuÏteit is belangrijk voor een website. Niet alleen voor een strak design, maar het is ook fijn voor de bezoekers als er één lijn wordt getrokken. Het kan zo zijn dat er verschillende mensen in het CMS werken. Om ervoor te zorgen dat alles in dezelfde vorm blijft, zijn er vaste waarden in de input velden toegevoegd.

Hieronder is bijvoorbeeld te zien dat bij het toevoegen van een prijs het euroteken al staat ingevuld.

In de testen bleek dat bij het toevoegen van een aantal uur bij vacatures de ene persoon alleen een cijfer invulde. Iemand anders vulde juist een cijfer met ‘uur per week’ erachter. Daarom is nu ‘uur per week’ een vaste waarde, waardoor de gebruiker alleen nog een cijfer hoeft in te vullen.

ITERATIE 5

69

“As a user I want to be

able to..

In plaats van dat de website

afhankelijk is van het CMS, is het

CMS afhankelijk van de website.

“ Conclusie

Tijdens dit afstudeerproject was de hoofdvraag: Hoe kan de huidige ervaring van het onderhouden van een website in een CMS voor ondernemers verbeterd worden, zodat een website maximaal kan worden geoptimaliseerd?

Allereerst denk ik niet dat er één antwoord voor deze vraag bestaat. Er zijn meerdere manieren om het proces van een website-onderhoud te verbeteren. Het eindproduct en het antwoord op de hoofdvraag is een CMS met een nieuwe gedachtegang erachter; in plaats van dat de website afhankelijk is van het CMS, is het CMS afhankelijk van de website. Hierdoor voelt het een persoonlijke ervaring. Daarnaast is het een CMS op maat. Per gebruiker is het CMS in gebruik hetzelfde, maar qua styling aangepast aan de verbonden website.

Er kunnen duizenden woorden aan worden gewijd, maar de uiteindelijke ervaring spreekt voor zich. Daarom is mijn antwoord op deze vraag: www.restaurant-van-der-ree.nl/cms met de code 12345. Bekijk het platte design op https://xd.adobe.com/view/a2509c7e-5fb6-4d63-4e48-9121c9320bc4-d461/grid

Maar het stopt hier niet. De bedoeling is dat het doorontwikkelen van dit CMS blijft doorgaan met behulp van input van gebruikers.

EINDE

71

Bronnen

Boskova, B., & Pavlik, V. (2020, January 10). On-Page SEO in 2020. Opgehaald van Mangools: https://mangools.com/blog/on-page-seo/

Brager, B. (2018, 28 maart). Bovenaan in Google? Het verschil tussen topposities en de rest. Geraadpleegd van https://teamnijhuis.com/nl/blog/google-verschil-topposities-en-rest/

Chaffey, D., & Ellis-Chadwick, F. (2019). Digital Marketing (7th Edition) (7de editie). Amsterdam, Nederland: Pearson Benelux.

Dwars, P. (2019, November 29). SEO trends die in 2020 onmisbaar zijn. Opgehaald van Team Nijhuis: https://teamnijhuis.com/nl/blog/seo-trends/

Elgabry, O. (2016, 15 september). UX — A quick glance about The 5 Elements of User Experience (Part 2). Geraadpleegd van https://medium.com/omarelgabrys-blog/ux-a-quick-glance-about-the-5-elements-of-user-experience-part-2-a0da8798cd52

Garrett, J. J. (2010). The Elements of User Experience: User-Centered Design for the Web and Beyond (2nd Edition) (Voices That Matter) (2de editie). Indianapolis, USA: New Riders.

72

Hicks, K. (2018, November 18). 7 Marketing Goals for Your E-commerce Website in 2019. Opgehaald van Hostgator: https://www.hostgator.com/blog/marketing-goals-ecommerce-website/

Kassenaar, P. (2019). Web Development Library Vue.s (1ste editie). Culemborg, Nederland: Van Duuren Media.

Kassenaar, P., van Rijswijk, O., Haspel, J., van Rijswijk, O., & van den Haspel, J. (2003). Handboek website usability. Amsterdam, Nederland: Academic Service.

Kaufman, H. (2019, 10 februari). CMS platforms and web designers should be partners, not competitors. Geraadpleegd van https://thenextweb.com/contributors/2019/02/10/cms-platforms-and-web-designers-should-be-partners-not-competitors/

Klein, R. (2016). Ontwerpstrategieën voor user experience design (1ste editie). Culemborg, Nederland: Van Duuren Media.

Kuipers, D. (2019). On Page SEO: complete uitleg om hoog te scoren in Google. Opgehaald van Online marketing agency: https://onlinemarketingagency.nl/seo/on-page-seo-complete-uitleg-om-hoog-te-scoren-in-google/

73

Laravel. (2020). Installation - Laravel - The PHP Framework For Web Artisans. Geraadpleegd van https://laravel.com/docs/7.x

LLC, B. (2020). On-page SEO: The Definitive Guide. Retrieved from Backlinko: https://backlinko.com/on-page-seo

Reuser, E. (2017, November 1). Wat zijn de voor- en nadelen van WordPress. Opgehaald van Kwaaijongens: https://www.kwaaijongens.nl/blog/wat-zijn-de-voor-en-nadelen-van-wordpress/

Schäferhoff, N. (2019, 17 december). Popular CMS by Market Share. Geraadpleegd van https://websitesetup.org/popular-cms/Spencer, S., Enge, E., & Stricchiola, J. (2015). The Art of SEO. In S. Spencer, The Art of SEO. California: O’Reilly.

Vandervieren, E. (2010). Succesvolle en gebruiksvriendelijke websites. In E. Vandervieren, Succe svolle en gebruiksvriendelijke websites. Brugge: Die Keure Publishing Group.

Alle foto’s gebruikt in dit document zijn gratis te gebruiken foto’s en rechtenvrij of zelf gemaakt.

74

Appendix

75

BIJLAGEN

76

77

83

85

88

91

95

100

101

Casus

Interviews

Aantekeningen

Doelgroep

Marketing plannen

Testuitslagen

Schetsen

Eerste prototype

Tryouts

76

Interviews

77

12/03/2020Willianne TreurnietEigenaar Huis van MijnWebsite op http://beminefotografie.nl/, gemaakt in WordPress

Je hebt een website voor je bruidsfotografie. Heb je die zelf gemaakt of laten maken?Soort van zelf gemaakt. Ik heb een thema gekocht en met heel veel hulp van anderen is hij gemaakt.

En is het geworden wat je vantevoren wilde?Ik had niet specifiek een ontwerp of iets in gedachten, maar wel ideëen hoe het ongeveer moest worden. Hoe verder we kwamen hoe meer ideëen ik los heb gelaten. Het lukte gewoon niet. Ik weet hier echt helemaal niks van af.

Wat is er volgens jou dan zo moeilijk aan WordPress?Ten eerste is mijne in het Engels. Dat hielp niet bepaald mee. Ik ben niet zo goed met taal en dit is niet mijn vakgebied. Daardoor is het vaak zoeken en ik snap niet wat alles betekent.Ik kom er gewoon niet uit. Ik wilde iets aanpassen in een bericht en toen moest ik opeens iets met plugins doen. Geen idee.

Ik besteed het nu uit aan iemand die er veel meer van weet dan ik. Het scheelt me zoveel tijd. En

stress. Dat vooral.

En wat miste je in WordPress?Er is niet per sé iets wat ik mis. Er is juist super veel wat kan. Echt heel veel. Het probleem is dat ik het niet werkend krijg zoals ik wil.

Gebruik je een programma om de resultaten van jouw website te meten?Bedoel je verkoopresultaten of hoeveel bezoekers de website heeft?

De bezoekers.Ik gebruik geen programma. Als ik inlog bij WordPress zie ik wel hoeveel bezoekers de website had. Volgens mij heeft iemand dat ooit ingesteld.

Ken je Google Analytics?Ik weet wat het is, maar ik gebruik het niet. Mijn nicht liet er ooit iets van zien, maar ik zag vooral heel veel cijfers.

Stel dat WordPress liet zien wat er op marketing gebied verbeterd kan worden. Zou je dat als iets positiefs zien?Als het in het Nederlands is... Nou, ik ben ik wel benieuwd wat voor berichten daar op komen. Het moet in elk geval niet iets technisch zijn.

Het zou bijvoorbeeld een bericht zijn als: de afbeeldingen zijn te groot. Hierdoor is de website langzamer.

78

Oh, dat zou wel handig zijn. Ik zou dat soort dingen zelf nooit weten.

Laatste vraag: kun je jouw CMS in één of een paar woorden omschrijven wat het voor jou is?Uhm... Ik denk wat ik eerder al zei: niet mijn vakgebied.

79

01/03/2020Ilia BoshinovMaker en eigenaar van www.noktrnl.worldWix-gebruiker

Hi Iliya, I know you have made your website for you as DJ. How did you made it?I used Wix. At first I wanted to use WordPress because people told it was a really good CMS but then I found out Wix is actually cheaper.

So, you chose price above quality when you chose this CMS?To be honest: yes, that is true. I am just a poor student, haha.

Was there something you missed or would improve when you where using Wix?It would be making my own template. So I can A/B test different versions of my site. And not have to start from scratch.

Did you made different versions of your website and tested which one worked the best?I tried, but it was costing too much time.I am not experienced with making websites. But I am experienced with tools like Google Analytics and Hotjar because of the marketing minor. I wanted you use this skills in my website, but unfortunalety I wasn’t really able to.

So, what would be the perfect scenario for youSay you have three totally different versions of your website that are custom to me or ready

80

templates. Ideally I can just switch between those templates and see how they look in the preview.Without re-aranging everything myself.

Are you happy with the endresult of the website?Kind of. I asked a lot of people what they think of the website and if they see any improvements. The reactions where positive. There where some parts I impoved, like shortening some texts. People told me they where really bored on the about page because it contained a lot of words and just one visual. If you look at it now you will just see a few sentences and a picture of me. I think they learn more about me if they listen to my music. So, to answer your question. I am happy with it becuase I can show who I am and people can book me for their events. But there are some little things I still like to improve some day.

Like what?Have you seen the website?

YesHave you also seen the bar at the top?

With the text about how the website is made with Wix or something like that?Yes, that one. I really hate it. But also, Wix is the company which made it possible for me to make this website. So, it kind of makes sense there name is on the website. It’s just really big and in evidence.

81

If you would make another website, would do it this way again?Definitely. Look, of course it’s better to code and host it myself, but I just don’t have enough experience for that. I can code a little bit but a whole website is a stap further. And if I had more money, I would hire somebody.Wix is the solution for somebody who wants a quick and cheap website.It is actually a great program. You can drag elements wherever you want. It is really easy to understand.

Last question: how would you describe your CMS in one or a few words?That would be the steering of the website. The website depends on the CMS.

82

Aantekeningen

83

Fase 1 start

84 85

Ges

prek

Men

no T

empe

llar

Dynam

siche content uitwerking

Midterm

beoordeling

Roos, 29Eigenaar BloemBoom

GeslachtJob StadStatusKinderenInkomen

VrouwEigenaar BloemBoomDordrechtGetrouwd1Modaal

GepassioneerdZorgzaam

�In mijn werk ben ik er altijd op gericht om het beste in ieder kind naar boven te halen.

Doelen Frustaties

Bio

Technologie

Persoonlijkheid

Merken Software & Apps

Kinderen laten ontwikkelen

Angsten

Tekort aan klanten voor haar bedrijf

Bedrijf laten groeien

Niet de website er laten uit zien als ze wilt

Contactformulier wordt niet ingevuld

Desktop

Smartphone

Social Media

Introvert Extravert

Analytisch Creatief

Loyaal Wispelturig

Ik geef kindercoaching en/of onderwijsbegeleiding aan kinderen waar de ontwikkeling niet lekker loopt. Op mijn website, gemaakt in WordPress, breng ik mensen hiervan op de hoogte. Ik wil bepaalde wijzigingen maken op mijn website, maar dit lukt mij niet zelf.

Zorba de GriekOndernemer

GeslachtBeroep

CityStatusKinderenInkomen

ManEigenaar van GrieksafhaalrestaurantDordrechtGetrouwd2€2500

�Familie gaat hoe dan ook altijd voor.

Doelen Frustaties

Bio

Technologieën

Persoonlijkheid

Merken Software & Apps

Bedrijf online zichtbaar maken

Producten online verkopen

Zorba wil meer klanten krijgen doorop zijn website de mogelijkheid tecreeeren om online een bestelling teplaatsen. Helaas heeft dit niet hetgewenste resultaat en blijven deklanten tot zover nog uit. Hij weet niethoe hij dit moet oplossen.

Niet het gewenste resultaat behalen.

Geen kennis om website te verbeteren

Desktop

Smartphone

Social Media

Introvert Extravert

Analytical Creative

Loyal Fickle

LoyaalHard werkend

AngstenNiet genoeg klanten om zijn gezin teonderhouden

Zijn restaurant verliezen en terechtkomen bij een saaie kantoorbaan

86

Doelgroep

Nadja, 32Bloemen verkoopster

GeslachtJob StadStatusKinderenInkomen

VrouwBloemen verkoopsterRotterdamSingle0Modaal

NatuurliefhebberGepassioneerd

�Bloemen zijn altijd het antwoord

Goals Frustaties

Bio

Technology

Personality

Brands Software & Apps

Mensen inspireren met haar blog

Angsten

Haar grootste passie moeten verlaten

Meer bezoekers krijgen op haar blog

Nadja heeft een passie voor bloemen. Niet lang geleden is ze een blog gestartop WordPress waar ze haar passie deelt.Dit is ook ter ondersteuning van haarbedrijf. Helaas krijgt ze niet zoveelbezoekers op haar website als ze zouwillen.

Moeilijke en technische systemen.

Laag aantal bezoekers op haar website

Desktop

Smartphone

Social Media

Introvert Extravert

Analytical Creative

Loyal Fickle

Pim, 32Schilder

GenderBeroepStadStatusKidsInkomen

ManSchilderAmsterdamGetrouwd0Modaal

�Vrijheid maakt een mens echt blij

Goals Frustaties

Bio

Technology

Personality

Brands Software & Apps

Genoeg klanten behouden

Angsten

Niet genoeg inkomen hebben om zijn

vriendin en hem te onderhouden.

Economische veiligheid voor hem en

zijn vriendin.

Pim is een vrolijke schilder die zijnberoep door weer en wind beoefend.Door een groot aantal opdrachten wilhij zo min mogelijk tijd aan zijn websitebesteden.

Negatieve mensen

Mensen niet kunnen bereiken

Desktop

Smartphone

Social Media

Introvert Extravert

Analytical Creative

Loyal Fickle

SociaalHandig

87

88

Marketing plan

Welke data kan de gebruiker van het CMS zelf aanpassen?

Onderwerp Waar aanpassen in CMS———————————————————————————————

SEO

Afbeeldingen- Alt-tags (specifiek en omschrijvend) Blok “Foto’s & Video’s”- Titel tags (gebruik van kenwords) Blok “Foto’s & Video’s”- Afbeelding naam Blok “Foto’s & Video’s”

Pagina snelheid- Home pagina onder 800kB Blokken die op home pagina staan- Elke pagina laadtijd < 2s Testen waar het vandaan komt

Keywords- Belangrijkste key word binnen Blokken met veel tekst 100 woorden- Key word frequency Blokken met veel tekst

Tekst pagina’s- Titel in H1 Blokken met veel tekst- Gebruik van <br> tags Blokken met veel tekst- Spelfouten Blokken met veel tekst

Links- Gebruik van externe links Blokken met veel tekst- Gebruik van interne links (2-5 keer) Blokken met veel tekst- Anchor teksten Blokken met veel tekst

URL's- Leesbare links Algemeen- Key words in links Algemeen

Meta-data- Titel tags (max. 58 kar.) Elke pagina- Pagina omschrijving (120 en 155 kar.) Elke pagina

Contact- Telefoonnummer Blok “Contact”- E-mail adres Blok “Contact”- Adres Blok “Contact”

Overig- XML sitemap Blok “Sitemaps”- Pagina sitemap Blok “Sitemaps”- 404 pagina Blok “Error pagina’s”

Mogelijke oplossingen

Lage CTR- Vragen in titel Blok “Nieuws”, “Blog”, “Over” enz.

91

Testuitslagen

92 93

94

Bijhouden inlogvoorkeurenin Tally

95

Schetsen

Testen Resultaten pagina

Aanbevelingen

Editor

98

Eerste prototype

Losse modules

99

Editor

100

Prototype uitwerking

101

Tryouts

Aanbevelingen

Overzichten

102 103

Inloggen

Foto uploads

Editor

Exploratiedocument 2020