BlendIt - Avans CMD
Transcript of BlendIt - Avans CMD
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