Themaontwikkeling WordPress - Bachelorproefscriptie

THEMAONTWIKKELING

WORDPRESS BACHELORPROEFSCRIPTIE INIAS VAN INGELGOM 3CMO 2016-2017 GRONDWERKEN SEGRO BVBA ARTESIS PLANTIJN HOGESCHOOL ANTWERPEN

INLEIDING

Als student Crossmedia-Ontwerp krijg ik regelmatig de vraag van familie, vrienden en kennissen of ik snel een logo, flyer of affiche wil ontwerpen voor hen. Meestal maak ik dan snel een ontwerp waar ze best tevreden over zijn. Het onderwerp van mijn Bachelorproef is eveneens ontstaan uit zo’n vraag.

Jonas Segers is een gedreven werker die uit interesse voor kranen, grondverzet en landbouwwerk in 2014 een eigen bedrijf startte, genaamd Grond- en Afspanningswerken Segro. Het bedrijf was een eenmanszaak met veel succes. Al snel kwam Jonas aankloppen bij mij, want hij had een logo nodig. Dit was meteen de eerste vraag die ik kreeg van een echt bedrijf. Ik maakte voor hem een logo, een huisstijl en enkele toepassingen, zoals facturen, promotiemateriaal en het ontwerp van de bedrukking op werkkledij. Dit allemaal deed ik als vriendendienst. Daarnaast had Segro ook een zelfontworpen website die online stond met behulp van het onlineplatform Wix. Nu drie jaar later is de eenmanszaak gegroeid en ontpopt tot een BVBA. Grondwerken Segro BVBA wil nu nog extra cliënteel aantrekken door meer actief in te zetten op online publiciteit. Het abonnement voor hun Wix-site, die helemaal niet bij de huisstijl van het bedrijf paste, was ondertussen verlopen, en de huidige website was offline gehaald. Segro zat dus zonder website, en was op het internet enkel te vinden op Facebook. Aangezien Jonas tevreden was van het werk dat ik reeds voor hem gedaan had, kwam hij naar mij met de vraag om zijn nieuwe website te ontwerpen. De vraag van Jonas kwam net op het moment dat ik op zoek was naar een onderwerp voor deze Bachelorproef. Een beter moment kon er niet zijn. Het was voor mij al snel duidelijk dat deze opdracht ideaal was als eindwerk en eveneens mooi zou staan in mijn portfolio.

Aangezien Jonas zelf dingen wil kunnen aanpassen op zijn website, besloot ik te werken met WordPress. Dit was dan ook de grootste uitdaging van heel mijn Bachelorproef. Zelf was ik een leek op vlak van WordPress. Op enkele kleine kennismakingen tijdens lessen na, was WordPress totaal vreemd voor mij. Om de uitdaging nog groter te maken legde ik de lat voor mezelf nog hoger en besloot ik om een volledig eigen thema te ontwikkelen. Hiervoor kreeg ik de hulp en coaching van mijn expert Mattias Strubbe, een WordPressdeveloper met een eigen bedrijf.

 INLEIDING

5

INHOUD

INHOUDSTAFEL Inleiding

3

1. Abstract

13

2. Onderzoeksfase

17

2.1. Externe analyse 2.1.1. Concurrentieanalyse

2.1.2. Afnemersanalyse

19 19 21

3. Content

3.1. Teksten

3.2. Beeldmateriaal

25 27 27

4. Ontwerp

29

4.1. Kleurenstudie 4.1.1. Blauw 4.1.2. Groen 4.1.3. Oranjebruin

4.1.4. Grijs als steunkleur

31 31 31 32 32

4.2. Fontkeuze

4.2.1. Segoe UI 4.2.2. Roboto 4.2.3. Arial

33 33 33 33

4.3. Wireframing 4.3.1. Afbeeldingen

36 36

37

4.4. Digitale mockups

5. Usability

39

5.1. Opzet

42

42

5.2. Resultaten

 INHOUD

9

6. Uitwerking

45

6.1. Local development

47

6.2. Starter theme

47

6.3. Ontwikkeling 6.3.1. Content

6.3.2. Custom posttypes en taxonomies

6.3.3. Opbouw van het thema

48 48 49 51

7. Conclusie

63

8. Aanbevelingen

69

9. Bibliografie

73

10. Bijlagen

77

10.1. Bijlage I: Concurrentieanalyse

79

10.2. Bijlage II: Enquêteresultaten fnemersanalyse

80

10.3. Bijlage III: Tekstuele content

10.3.1. Teksten per leverbare dienst

10.3.2. Biotekst over het bedrijf

85 85 85

10.4. Bijlage IV: Gebruikte iconen

86

10.5. Bijlage V: Gebruikte beelden

87

10.6. Bijlage VI: Wireframes

91

10.7. Bijlage VII: Digitale mockups

10.7.1. Mockups Versie 1 10.7.2. Mockups Versie 2

92 92 102

10.8. Bijlage VIII: Usabilitytests 10.8.1.Chelsea Bovée

10.8.2. Jochem Maes

10.8.3. Rin Verstraeten

116 116 118 120

 INHOUD

11

ABSTRACT

1

ABSTRACT Titel van de bachelorproef: Themaontwikkeling voor WordPress Begeleidende expert: Mattias Strubbe Wie anno 2017 als bedrijf niet online aanwezig is bestaat gewoonweg niet. De dag van vandaag is een online identiteit cruciaal om te overleven tussen alle concurrentie. Maar wat als je als zaakvoerder veel kent van jouw vakgebied, maar helemaal niets van IT of webtoepassingen? En wat als je als zaakvoerder toch de inhoud van jouw website wil onderhouden zonder al te veel moeilijkheden? Jonas Segers is zo’n zaakvoerder. Als eigenaar van Grondwerken Segro BVBA kent hij alles van zijn vak, maar in de informatietechnologische sector is hij niet thuis. Toch wil hij een zicht houden op de content van zijn nieuwe website en zelf regelmatig projecten toevoegen.

Speciaal voor Jonas ben ik daarom de werking van WordPress dieper gaan bekijken. Omdat de website ook uniek moet zijn, en volledig binnen de huisstijl van het bedrijf moet passen, heb ik besloten om een volledig gepersonaliseerd thema te ontwikkelen.

Hiervoor heb ik me verdiept in WordPress zelf, maar ook in de verschillende programmeertalen die gehanteerd worden binnen het WordPress development-milieu, zijnde PHP, HTML, SCSS en JavaScript. Om dit alles tot een goed einde te leiden heb ik voorafgaand een afnemers- en concurrentieanalyse gemaakt, om zo de wensen en eisen van het potentiële cliënteel in kaart te brengen en hierop in te kunnen spelen.

Mijn hoofddoelstelling was het verbreden van mijn beknopte WordPresskennis. Het eindresultaat van het project is een WordPresswebsite die past binnen de huisstijl van Grondwerken Segro BVBA en voldoet aan de eisen van de zaakvoerder, alsook die van de potentiële klanten.

Hoofdstuk 1: ABSTRACT

15

2

ONDERZOEKSFASE

2. ONDERZOEKSFASE 2.1. Externe analyse 2.1.1. Concurrentieanalyse Om een effectieve website te kunnen ontwikkelen deed ik een vergelijkende studie bij websites van soortgelijke bedrijven. Hiervoor bezocht ik dertig verschillende websites van bedrijven gespecialiseerd in grondwerken. De websites die ik bekeken heb waren gekozen op basis van hun SEO, hun positie op de eerste drie pagina’s van Google bij de zoekterm “grondwerken”. (Zie bijlage I.) Tijdens mijn analyse bekeek ik enkele cruciale aspecten van een goede website, zoals design, content en usability.

Design Bij mijn analyse van het design van de verschillende websites keek ik onder meer naar de typografie en het kleurgebruik. Op vlak van typografie zijn er slechts enkele websites die hier ook effectief op gelet hebben. Veel te vaak kwam ik sites tegen waar geen duidelijk onderscheid was tussen titels en broodtekst of waar er een font gebruikt werd dat totaal niet geschikt is voor dat type website.

Qua kleurgebruik was er geen duidelijke congruentie. De meest voorkomende kleuren waren natuurlijke kleuren zoals bruin, groen en blauw. Daarnaast werd er ook vaak gebruik gemaakt van de kleuren grijs, geel en oranje.

Opvallend is dat grondwerkbedrijven in Klein-Brabant, de regio waar Grondwerken Segro gevestigd is, niet veel aandacht besteden aan een goedwerkende en aantrekkelijke online identiteit. Negentig procent van de bedrijven had een website dat al even stil was blijven staan in de tijd. In de regio Antwerpen werd er meer aandacht besteed aan een professionele website. Hier had 40% van de bezochte websites een professionele uitstraling.

Content Bij mijn contentanalyse heb ik gelet op de tekstuele inhoud, alsook op het gebruik van de gepaste afbeeldingen en call-to-actions. Hieruit blijkt dat heel wat websites te veel tekst gebruiken, waardoor dit niet aantrekkelijk is om te beginnen lezen.

Daarnaast zijn er ook enkele websites die hun content kort en bondig opstellen zodat de bezoeker snel de nodige informatie vindt. Op deze sites is er ook meestal een makkelijk hanteerbare contactpagina.

Hoofdstuk 2: ONDERZOEKSFASE

19

Op gebied van afbeeldinggebruik is er wel duidelijk overeenstemming. De foto’s die gebruikt worden zijn hoofdzakelijk beelden van reeds gerealiseerde werken in combinatie met machinerie in actie. In dit geval zijn dit dus vooral grote graafmachines in bedrijf.

Call-to-actions zoals zinnen die de bezoeker aansporen tot ondernemen of buttons die in het oog springen zijn in de grondwerksector zeer zeldzaam. Aangezien er heel wat bedrijven een verouderde, niet onderhouden website hebben, zijn call-toactions zeer uitzonderlijk. Met het gebruik van een duidelijke call-to-action heb ik dus zeker rekening gehouden tijdens mijn ontwerpfase.

Usability Op vlak van usability was er een groot verschil tussen alle verschillende websites. De bedrijven met een verouderde website hadden vanzelfsprekend geen optimale usability. Bij de bedrijven met een recentere website was de gebruiksvriendelijkheid van de webpagina’s veel beter, hoewel sommige bedrijven hun site net te grafisch wouden maken, waardoor deze onduidelijk wordt voor de bezoeker.

Conclusie Uit deze vergelijkende studie kan ik concluderen dat in de grondwerksector niet veel aandacht wordt besteed aan een professionele website.

Gemiddeld heeft slechts één op de vijf bedrijven een website die de bezoeker aanspreekt. Wat deze kleine groep gemeen heeft met elkaar is dat ze gebruik maken van een duidelijke call-to-action. Dit doen ze door middel van een overtuigende zin die in het oog springt of een button waar je helemaal niet naast kan kijken. Daarnaast hebben ze inhoudelijk heel wat overeenkomende puntjes; een duidelijke opsomming van hun diensten, een straight forward contactpagina en enkele voorbeelden van reeds verrichte werken.

Deze studie heeft me heel erg geholpen in het opbouwen en ontwerpen van de site. Ik heb hieruit geleerd welke elementen ik zeker moet gebruiken op de website van Grondwerken Segro, namelijk: een overtuigende call-to-action, een duidelijke weergave van de diensten, visuele voorbeelden van reeds verrichte werken en een makkelijke contactpagina.

20

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

2.1.2. Afnemersanalyse Naast mijn vergelijkende studie heb ik ook de gebruiker en potentiële klanten betrokken in mijn onderzoek. Door middel van een korte bevraging heb ik gepeild naar hun verwachtingen van een goede website. In totaal heb ik vijftig reacties gekregen. Ik heb bewust niet naar de doelgroep gepeild, aangezien het doelpubliek van een grondwerker zeer ruim is. Dit doelpubliek bevat zowel jonge twintigers, die op zoek zijn naar een grondwerker voor hun jeugdlokalen of hun eerste huis, als dertigers, veertigers, vijftigers, die op zoek zijn naar een grondwerker voor hun nieuwbouw of verbouwingen.

In deze bevraging vroeg ik onder meer of de potentiële klanten het laatste jaar grondwerken hebben laten uitvoeren en hoe ze hun grondwerker gevonden hebben. Slechts tien procent van de ondervraagden heeft in het afgelopen jaar grondwerken uitgevoerd. Van deze kleine groep heeft maar liefst zes op tien zijn of haar aannemer gevonden via vrienden of familie. Twintig procent vond hun aannemer op het internet en nog eens twintig procent vond deze op een andere manier. Van de overige groep die het afgelopen jaar geen grondwerken hebben laten uitvoeren zou slechts de helft zijn of haar grondwerker zoeken via familie of vrienden. Opvallend is dat hier maar liefst veertig procent zou zoeken op het internet. De rest, zo’n zes percent, zou kiezen voor een lokaal bedrijf.

Bij het kiezen van de aannemer maakt de grootte van het bedrijf niet uit. Slechts vier procent van de ondervraagden geeft aan hier rekening mee te houden. Wat echter wel belangrijk is bij het maken van deze keuze is de kwaliteit van het geleverde werk en de prijs hiervan. Acht op tien ondervraagden zegt rekening te houden met de prijs en de kwaliteit van de grondwerkers. Zeventig procent bekijkt ook grondig de reeds gerealiseerde werken en twintig procent houdt rekening met de vriendelijkheid van de zaakvoerder.

Op de vraag: “Bent u geïnteresseerd in de achtergrond van de zaakvoerder?” antwoordde tachtig procent van de ondervraagden dat ze hierin wel geïnteresseerd zijn. Dit voornamelijk omdat een inkijk in de geschiedenis van het bedrijf en de achtergrond van de zaakvoerder een soort van vertrouwen creëert bij de mogelijke klant.

Naast de algemene vragen onderzocht ik ook de wensen van de potentiële gebruikers op gebied van de effectieve webpagina.

Hieruit blijkt dat de contactgegevens een echte must zijn op de website van een grondwerker. Maar liefst achtennegentig procent gaf aan dit relevant te vinden op de website. Verder zijn ook voorbeelden van reeds gerealiseerde werken geen overbodige luxe. Tweeënnegentig percent van de ondervraagden vindt dat dit zeker niet mag ontbreken. Ook meer dan de helft vindt dat de achtergrondinformatie van het bedrijf relevant is. De diensten die het bedrijf te bieden heeft blijken tot mijn eigen verbazing veel minder noodzakelijk te zijn op een website van een ondernemer.

Hoofdstuk 2: ONDERZOEKSFASE

21

Slechts achtendertig procent gaf aan dit relevant te vinden. Zes procent van de geënquêteerden vindt dat een blog of een social feed nuttig is op een website.

Verder vroeg ik hoe men contact op nam met het bedrijf. Ruim de helft doet dit per mail. Dit omdat het snel is en de mail verstuurd kan worden op ieder moment van de dag, dus ook ’s nachts. Alle vragen kunnen ook mooi opgelijst worden in een mail, zodat het voor beide partijen makkelijker wordt. Daarnaast is de klant ook geruster, aangezien er zwart op wit staat wat er gecommuniceerd is geweest, en er dus geen of minder kans is op miscommunicatie. Eén derde van de ondervraagden neemt telefonisch contact op. Contact opnemen per telefoon zorgt er voor dat je sneller antwoord krijgt op jouw vragen. Een telefonisch contact kan de klant ook meteen een eerste indruk van het bedrijf bezorgen, aangezien hij een echt gesprek heeft kunnen voeren met een medewerker.

Slechts vijftien percent gebruikt het contactformulier op de website. Hoewel dit zeer makkelijk is, aangezien de klant al achter zijn computer zit wanneer hij de website aan het bekijken is, is het soms onduidelijk of de boodschap ook effectief verstuurd is wanneer er geen bevestiging komt.

Wanneer men toch een contactformulier op een website gebruikt, heeft men graag toch de mogelijkheid om meteen een afspraak in te plannen. Ook het categoriseren van de vraag (aangeven waarover de vraag gaat), het toevoegen van bijlagen en het ontvangen van een kopie van het verstuurde bericht zijn functionaliteiten die gebruikers graag bij een contactformulier zouden zien.

Conclusie Uit deze peiling blijkt dat veertig procent van de ondervraagden zijn of haar aannemer via het internet gaat zoeken. Dit betekent dat de website van de grondwerker dus een zeer belangrijk uithangbord moet zijn. Daarnaast kijkt de kandidaat-klant naar de geleverde kwaliteit, de prijs en de reeds gerealiseerde werken. Hieruit kan ik dus afleiden dat hier sterk op ingespeeld moet worden door deze drie factoren goed uit te lichten op de website. Verder blijkt dat maar liefst tachtig procent van de ondervraagden geïnteresseerd is in de achtergrond van de zaakvoerder. De achtergrond van een bedrijf, en specifieker de zaakvoerder, kan vertrouwen genereren.

Dit is dus ook een van de belangrijke factoren waar ik rekening mee heb gehouden tijdens het ontwikkelen van de website voor Grondwerken Segro. De resultaten van de enquête zijn terug te vinden in bijlage II.

22

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Figuur 1: Resultaten digitale enquête - 2017 © Inias Van Ingelgom

Hoofdstuk 2: ONDERZOEKSFASE

23

CONTENT

3

Figuur 2: Kraan tijdens nivelleringswerken - 2017 © Inias Van Ingelgom

D e inho ud van de website is onde r ve rde eld in t we e categorie ë n: tek sten en af b e eldingen. Alle content is o ok gehe el zelfgemaak t, zo is de site volledig uniek .

Teksten

Beeldmateriaal

De gebruikte teksten zijn geschreven door het bedrijf zelf. Deze teksten heb ik licht aangepast in functie van duidelijkheid. Alle gebruikte teksten zijn terug te vinden onder bijlage III.

Al het beeldmateriaal op de website is exclusief gemaakt voor Grondwerken Segro. Het fotomateriaal heb ik volledig zelf verzorgd.

Hiervoor heb ik enkele projecten van het bedrijf bezocht en enkele honderden foto’s genomen.

Alle beelden zijn dus exclusief en nergens anders terug te vinden. Alle gebruikte foto’s zijn terug te vinden in bijlage IV. Ook de iconen die gebruikt worden op de website zijn volledig op maat gemaakt voor het bedrijf.

Deze iconen heb ik eigenhandig getekend in de stijl van het bedrijf. De gebruikte iconen zijn te bekijken in bijlage V.

Hoofdstuk 3: CONTENT

27

ONTWERP

4

4.1. Kleurenstudie Qua kleur waren er drie verschillende opties voor de website: blauw, groen of (oranje)bruin. Deze kleuren zijn gekozen op basis van de kleurenpsychologie. Afgaand op de boodschap die de site en het bedrijf willen uitstralen ben ik bij deze drie kleuren terecht gekomen. Daarnaast zal ik gebruik maken van de steunkleur grijs.

4.1.1. Blauw Blauw is een koude kleur die geassocieerd wordt met vrede, kalmte en sereniteit. De kleur straalt vertrouwen, verantwoordelijkheid en veiligheid uit en wordt het meest geapprecieerd door mannen.

Het feit dat blauw staat voor vertrouwen en verantwoordelijkheid zou ervoor zorgen dat Grondwerken Segro als een betrouwbaar bedrijf naar voor komt. Daarnaast is grondwerken een stiel waar voornamelijk mannen tewerkgesteld zijn en waar ook voornamelijk mannelijke klanten komen aankloppen. Aangezien blauw erg geapprecieerd wordt bij mannen kan dit hen over de streep trekken om contact op te nemen met het bedrijf.

Uiteindelijk is blauw een kleur die echter niet zo goed bij het logo en de activiteiten van het bedrijf past. Vooral gecombineerd met grijs wordt blauw voornamelijk gebruikt in de financiĂŤle en IT sectoren.

4.1.2. Groen Groen is een zuivere frisse kleur die rust brengt. De kleur wordt geassocieerd met vrede, herstel en zuurstof. Aangezien groen de meest voorkomende kleur in de natuur is, zijn onze ogen hier op ingesteld en voorziet groen ons van rust en veiligheid.

De kleur groen is dus een natuurkleur en zou passen bij een bedrijf dat in de natuur werkt.

Hoofdstuk 4: ONTWERP

31

4.1.3. Oranjebruin Bruin verwijst naar moeder aarde en heeft een uitstekende betrouwbaarheid en echtheid in zich. Bruin heeft een warme verwijzing naar de natuur in zich die rust uitstraalt. Hoewel bruin een gebrek aan humor en afwerking uitstraalt en vaak zwaar overkomt is het een stabiele en standvastige kleur. Dit gecombineerd met een oranjetint zorgt ervoor dat er een call-toaction gecreëerd wordt.

De kleur oranjebruin zou in het geval van Grondwerken Segro heel toepasselijk zijn. De kleur verwijst direct naar de activiteiten waar het bedrijf mee bezig is, namelijk grond. Daarnaast zorgt de kleur voor een zekere betrouwbaarheid en echtheid, wat goede eigenschappen zijn. Het feit dat het logo van het bedrijf ook deels bruin is zorgt ervoor dat de kleur bruin de meest toepasselijke kleur is voor de site.

4.1.4. Grijs als steunkleur De kleur grijs is een neutrale kleur die heel wat autoriteit uitstraalt. De kleur staat voor wijsheid, betrouwbaarheid, luxe en gedegenheid. Grijs is daarnaast ook eenvoudig te combineren en kan de nodige ernst toevoegen aan frivole kleuren. Het gebruik van grijs zal zorgen voor meer evenwicht en degelijkheid.

Uiteindelijke kleurenschema

32

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

4.2. Fontkeuze 4.2.1. Segoe UI Als font voor de website van Grondwerken Segro heb ik gekozen voor Segoe UI. Dit is een stijlvol schreefloos lettertype dat goed leesbaar is. Het lettertype is beschikbaar in verschillende varianten, zoals: Light, Semilight, Regular, Semibold, Bold en Black. Daarnaast is er van elke versie ook een Italic-variant beschikbaar.

Het font Segoe UI straalt een zekere rust uit, wat de bezoeker tot rust moet brengen. Daarnaast heeft het ook nog iets dynamisch, wat zeker past bij het jonge dynamische grondwerkbedrijf. Ook de extra dunne variant van het font zorgt ervoor dat dit zeker in het oog springt bij de bezoeker, aangezien het contrast tussen het dunne lettertype en het normale font vrij groot is. Door deze dunne variant te gebruiken voor titels, is het mogelijk om Segoe UI voor zowel titels als bodytekst te gebruiken.

Kortom, Segoe UI is een font waarmee je veel richtingen uit kan.

Naar mijn mening uiterst geschikt voor deze opdracht.

Hoewel Segoe UI geen standaard font is, en ook niet te vinden is onder Google Fonts, lijkt het mij toch het meest geschikte lettertype. Het font zal dus mee in de website zitten, wat wel enige vertraging in de laadtijd met zich mee zal brengen. Toch vind ik dat Segoe UI het beste past in de stijl van Grondwerken Segro en dus gebruikt moet worden als hoofdlettertype. Daarnaast zullen er wel enkele backup-fonts voorzien worden indien er problemen zouden zijn met het inladen van dit lettertype.

4.2.2. Roboto Als backup-font kies ik voor Roboto. Roboto is een schreefloos font dat dicht in de buurt komt van Segoe UI. Hoewel het minder mogelijkheden biedt is Roboto wel een standaardlettertype dat op Google Fonts terug te vinden is. Wanneer er dus problemen zijn met het inladen van Segoe UI zal Roboto in de plaats verschijnen.

Roboto heeft ook net zoals Segoe UI een zeer dunne variant, waardoor dezelfde titelstijl dus behouden kan blijven.

4.2.3. Arial wWanneer het helemaal fout loopt, en geen van beide fonts geladen kan worden, dan zal er teruggevallen worden op Arial.

Arial is een standaardfont dat op alle computers terug te vinden is.

Het lettertype zou dan normaal gezien zonder problemen geladen moeten kunnen worden.

Hoofdstuk 4: ONTWERP

33

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Segoe UI Light, Light Italic, Semilight, Semilight Italic, Regular, Italic, Semibold, Semibold Italic, Bold, Bold Italic, Black en Black Italic

34

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Roboto Thin, Thin Italic, Light, Light Italic, Regular, Italic, Medium, Medium Italic, Bold, Bold Italic en Black

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Arial Narrow, Narrow Italic, Narrow Bold, Narrow Bold Italic, Regular, Italic, Bold, Bold Italic, Black

Hoofdstuk 4: ONTWERP

35

Figuur 6: Wireframeschetsen - 2017 © Inias Van Ingelgom

Figuur 3: Wireframeschetsen - 2017 © Inias Van Ingelgom Figuur 4: Wireframeschetsen - 2017 © Inias Van Ingelgom Figuur 5: Wireframeschetsen - 2017 © Inias Van Ingelgom

36

4.3. Wireframing Als basis voor mijn ontwerp heb ik enkele wireframes (zie bijlage VI) uitgetekend. Hiervoor ben ik begonnen met schetsen, waarna ik mijn uitgekozen schets heb uitgewerkt tot een netjes uitgetekende versie van mijn website.

Bij het tekenen heb ik rekening gehouden met de vereiste elementen die zeker aanwezig moesten zijn op de website, namelijk: een call-to-action, een weergave van de verschillende diensten, een duidelijke contactpagina en een korte bio van de zaakvoerder.

Ik heb tijdens het ontwerpen meteen mijn ontwerpen proberen omzetten in een mobile design, aangezien responsiveness de dag van vandaag zeer belangrijk is.

4.3.1. Afbeeldingen Hoewel de inhoud van een website het belangrijkst is, is het visuele toch het eerste wat de bezoeker te zien krijgt qua inhoud.

Tegenwoordig maakt de uitstraling van een website of een bezoeker op jouw website blijft of gewoon doorklikt naar de volgende. Door gebruik te maken van grotere afbeeldingen die in het oog springen van de gebruiker wil ik de bezoeker triggeren om toch verder te klikken en te ontdekken wat Grondwerken Segro te bieden heeft.

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

4.4. Digitale mockups Na het uittekenen van mijn wireframes ben ik deze digitaal beginnen uitwerken. (Bijlage VII) Tijdens het uitwerken heb ik nog enkele aanpassingen gedaan aan het uitgetekende design.

Het uitwerken van mijn digitale ontwerp deed ik in Adobe Experience Design, een programma van adobe dat gemaakt is om websites en applicaties te ontwerpen. Het voordeel aan Experience Design is dat je de ontwerpen meteen interactief kan maken, zodat ze direct uitgetest kunnen worden.

Alle digitale mockups zijn te vinden in bijlage VI.

Figuur 7: Digitale mockup realisatiepagina - 2017 Š Inias Van Ingelgom

Hoofdstuk 4: ONTWERP

37

USABILITY

5

Figuur 8: Usabilitytesting - 2017 © Inias Van Ingelgom

Om mijn uitgewerkt design te testen op gebruiksvriendelijkheid heb ik enkele usabilitytests opgezet. Ik heb hiervoor vijf testen afgenomen, waarvan ik er drie heb gefilmd om nadien te kunnen analyseren.

Deze testen heb ik afgenomen bij twee collegastudenten, Jochem Maes en Chelsea Bovée. Zij konden mijn ontwerp testen vanuit het standpunt van grafici. Hun feedback kon me voornamelijk verder helpen op vlak van usability, maar ook op vlak van design.

Daarnaast nam ik ook een test af bij een universiteitsstudente communicatiewetenschappen, Rin Verstraeten. Haar respons hielp me vooral op gebied van usability en duidelijkheid van het design. Als communicatie expert kon zij mij zeggen welke dingen er duidelijk waren en welke dingen zeker nog verduidelijking nodig hadden.

Verder nam ik ook een test af bij Maaike Van Ackerbroeck. Haar commentaar was belangrijk op vlak van usability. Als leerkracht lager onderwijs weet zij als geen ander wat logisch en makkelijk hanteerbaar is en wat niet.

Mijn laatste test nam ik af bij Tom Lambrechts, een veertiger met een kritisch oog en heel wat saleservaring. Zijn opinie kan me zeggen wat wel en wat niet verkoopt. Zijn mening was dus zeer nuttig op vlak van usability.

De tests duurden gemiddeld zo’n vijftien à twintig minuten per test.

Hoofdstuk 5: USABILITY

41

5.1. Opzet De bedoeling van deze usabilitytests was dat de gebruikers de website voor zich kregen en hier hun weg door moesten zoeken. Aan de hand van hun reacties en commentaar kon ik zien of de website duidelijk genoeg was.

Belangrijk tijdens deze tests was dat ze volledig zelf de website moesten ontdekken. Het stellen van vragen was absoluut verboden, aangezien dit de test ongeldig zou maken. Wanneer een potentiële klant op de website terecht komt heeft hij ook de mogelijkheid niet om de maker ervan vragen te stellen.

Nadien stelde ik nog enkele specifiekere gerichte vragen omtrent het ontwerp om te peilen naar hun mening. Zo vroeg ik of het ontwerp hen persoonlijk aansprak en of ze zouden overwegen om het bedrijf te contacteren. Op deze vragen kreeg ik altijd hetzelfde antwoord; het ontwerp sprak hen aan en de ondervraagden zouden zeker overwegen om contact op te nemen met het bedrijf.

5.2. Resultaten Uit deze tests is gebleken dat de kleuren nog lichtjes aangepast moeten worden. Daarnaast moeten er enkele iconen opnieuw getekend worden, aangezien deze nog niet duidelijk genoeg zijn. Verder bevatte de homepage te veel gedetailleerde informatie. Dit heb ik aangepast zodat enkel de hoogstnoodzakelijke info meteen te zien is. Indien de gebruiker meer gedetailleerdere info wenst kan hij doorklikken vanop de startpagina.

Figuur 9: Usabilitytesting - 2017 © Inias Van Ingelgom

42

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Figuur 11: Usabilitytesting - 2017 Š Inias Van Ingelgom

5.3. Mobile menu Bij mijn mobile design heb ik specifiek naar de plaatsing van het hamburgermenu gepolst. In mijn ontwerp staat dit rechts onderaan, wat niet standaard is voor een menuknop die normaal rechts of links bovenaan staat. Ik heb deze knop onderaan gezet omdat dit voor mensen met grote smartphones, korte vingers of een combinatie van beide makkelijker zou moeten zijn. Uit mijn usabilitytests blijkt dat sommigen dit als raar aanschouwen, en er heel erg aan moeten wennen. Anderen vinden dit net gemakkelijk of hadden het nog niet opgemerkt.

Na extra onderzoek te verrichten omtrent de plaatsing van dit menu heb ik besloten om de standaardplaats te behouden. Dit omdat de doelgroep van mijn website zeer groot is en er dus heel wat personen zijn die niet zo goed met een smartphone kunnen werken. Het verplaatsen van het menu naar een positie die niet standaard is kan zorgen voor veel verwarring en onduidelijkheid.

Figuur 10: Usabilitytesting - 2017 Š Inias Van Ingelgom

Hoofdstuk 5: USABILITY

43

6

UITWERKING

UITWERKING Aangezien Jonas, zaakvoerder van Grondwerken Segro BVBA, zelf realisaties wil kunnen toevoegen en indien nodig informatie wil kunnen aanpassen, wordt de website gemaakt in WordPress. Ik heb gekozen voor WordPress omdat dit CMS-platform het meest gebruiksvriendelijk is, en dus makkelijker is voor de eindgebruiker.

Om de website toch uniek te maken heb ik ervoor gekozen om zelf een thema te ontwikkelen.

6.1. Local development

6.2. Starter theme

Om dit thema te ontwikkelen heb ik lokaal op mijn computer WordPress geĂŻnstalleerd.

Hierdoor kan ik mijn thema overal ontwikkelen, zelfs indien ik geen internetverbinding heb.

Daarnaast is het nu ook niet nodig om constant een nieuwe versie van mijn thema te uploaden vooraleer ik het resultaat kan bekijken.

Omdat een WordPress-thema van scratch opbouwen net te hoog gegrepen is voor mij, besloot ik om te starten vanaf een starter theme.

Op school hebben we een korte introductie van _Underscores gezien. _Underscores is een WordPress starter theme die de basisbestanden voor een WordPress-thema al bevat. Ik heb besloten om te werken met Sage, een starter theme gebouwd op _Underscores.

Het lokaal installeren van mijn WordPress-server heb ik gedaan met behulp van Bitnami. Met Bitnami heb ik mijn lokale WAMP-stack kunnen opbouwen. Deze stack bevat naast mijn Windows een Apache server, MySQL database en PHP.

Hoewel het waarschijnlijk makkelijker was om vanaf een bestaand thema te vertrekken en een child-theme te bouwen, koos ik toch om een volledig eigen thema te ontwikkelen. Deze keuze maakte ik omdat ik mijn eigen kennis omtrent WordPress-development zo veel mogelijk wou uitbreiden. Dit kon het best door een volledig eigen thema te schrijven. Daarnaast wou ik ook een volledig unieke website voor Grondwerken Segro, die volledig ontwikkeld was naar de wensen van het bedrijf.

Aangezien de site dus gebruik maakt van een volledig eigen thema, zal ik in de toekomst de taak op mij nemen om dit thema te onderhouden.

Hoofdstuk 6: UITWERKING

47

2017 © Inias Van Ingelgom

Figuur 13: Screenshot WordPress editor met PageBuilder -

Figuur 12: Screenshot WordPress editor met PageBuilder - 2017 © Inias Van Ingelgom

6.3. Ontwikkeling 6.3.1. Content Tijdens het ontwikkelen van mijn WordPress-thema ben ik begonnen met het invoegen van de content van de website.

Hiervoor maakte ik alle pagina’s aan en zorgde ervoor dat alle content op de juiste pagina stond. Elke pagina kreeg ook een featured image die getoond zou worden.

Bij het invoegen van de content maakte ik gebruik van de SiteOrigin Pagebuilder plugin. Deze plugin hielp me bij het onderverdelen van de content in kolommen. Zo was het makkelijker om verschillende stukken in verschillende kolommen te plaatsen.

48

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Figuur 14: Screenshot Custom taxonomies - 2017 © Inias Van Ingelgom

6.3.2. Custom post types en taxonomies De reden waarom ik met WordPress gewerkt heb is omdat de zaakvoerder van Grondwerken Segro graag de mogelijkheid wil om regelmatig foto’s van recente werken toe te voegen. WordPress biedt hiervoor de mogelijkheid om berichten of posts te creëren. Aangezien dit voor de gebruiker van het CMS-platform niet altijd even duidelijk is, heb ik speciaal voor zijn realisaties een custom posttype aangemaakt, genaamd ‘Realisaties’.

Het tabblad ‘Berichten’ heb ik dan ook verwijderd om verwarring te vermijden.

Door een custom posttype aan te maken met de naam ‘Realisaties’ is het voor de gebruiker makkelijker om te weten waar hij zijn realisaties kan aanmaken.

Daarnaast behoort elk project ook tot een specifieke categorie. De verschillende categorieën zijn allemaal verschillende diensten die het bedrijf levert. Om ook hierover verwarring te vermijden heb ik een custom taxonomy aangemaakt, genaamd ‘Diensten’. Bij het aanmaken van een nieuwe realisatie moet de gebruiker een of meerdere diensten aangeven waartoe de realisatie behoort.

Zo biedt het thema de mogelijkheid om op de realisatiespagina de verschillende realisaties te filteren op de verschillende diensten.

Het gebruiken van de standaard taxonomy “Categorieën” zou in het geval van Grondwerken Segro niet bepaald voor een extreme verwarring gezorgd hebben. Desondanks heb ik er toch voor gekozen om een eigen taxonomy aan te maken om mogelijke verwarring toch te vermijden en om het helemaal in de grondwerkstijl te brengen.

Dit alles heb ik voorzien in een plugin die ik zelf geschreven heb. Het feit dat ik dit in een aparte plugin heb gestopt in plaats van mee rechtstreeks te integreren in het thema heeft een specifieke reden. Indien Grondwerken Segro op termijn zou beslissen om over te stappen op een ander thema zouden alle ingevoegde realisaties verloren gaan en niet meer te zien zijn op de website. Aangezien deze realisaties nu opgeroepen worden door middel van een plugin, en dus apart staan van het thema, is het mogelijk om deze custom posttype terug op te roepen in een ander thema, zonder hier opnieuw een custom post type te moeten definiëren.

Hoofdstuk 6: UITWERKING

49

Figuur 15: Screenshot Custom posttypes - 2017 © Inias Van Ingelgom

50

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

6.3.3. Opbouw van het thema 6.3.3.1. Terugkerende elementen Navigatie De navigatie van de site is opgebouwd in de header.php. Dit element wordt op elke pagina ingeladen, waardoor er slechts één template nodig is. Links in de navigatiebalk staat de naam van het bedrijf; “Grondwerken Segro”. De naam die hier weergegeven wordt is een variabele die aangepast kan worden in het Content Management Systeem. Deze variabele wordt via php opgeroepen. Zo moet, indien het bedrijf van naam zou veranderen, er niets in de code aangepast worden.

Wanneer je met je muis over de naam gaat wordt de tekst wit en de achtergrond bruin. Ik heb gekozen om hier de naam van het bedrijf weer te geven in plaats van het logo. Eerst en vooral zorgt het gebruiken van tekst voor een betere SEO, waardoor de website dus sneller gevonden zal worden. Daarnaast bevat het logo te veel fijne elementen en tekstelementen, waardoor het onduidelijk zou worden wanneer het zo klein geplaatst zou worden.

Aan de rechterkant van de navigatiebalk wordt het menu weergegeven. Ook dit menu is een variabele die in het CMS aangepast kan worden. Het menu wordt opgeroepen volgens da standaardformule van WordPress.

Zowel de brand (bedrijfsnaam) als het menu zitten samen in een containerdiv met de class max-width. Deze div zorgt ervoor dat beide elementen niet eindeloos aan de zijkanten van het beeldscherm gekleefd blijven bij gebruik van grotere beeldschermen.

Header De header is een variabel terugkerend element.

Dit element komt terug op sommige pagina’s in verschillende vormen. Om uit te maken waar de header getoond moet worden en op welke manier, maakte ik gebruik van een if-elseloop.

In deze loop wordt er gecheckt op welke pagina de gebruiker zich bevindt. Aan de hand van deze informatie wordt er een bepaalde header weergegeven.

Als eerste wordt er nagegaan ofde gebruiker zich op de contactpagina bevindt. Wanneer dit zo is wordt er een header weergegeven met de standaardafmetingen van alle headers. Enig verschil is dat er in plaats van een hoofdafbeelding gebruik wordt gemaakt van een Google Map. Wanneer de gebruiker zich niet op de contactpagina bevindt, wordt er gekeken of de gebruiker op de aboutpage of een onbestaande pagina aan het surfen is. Wanneer dit het geval is, wordt er geen header teruggegeven. Dit aangezien er op deze pagina’s geen gebruik wordt gemaakt van een hoofdafbeelding.

about- of een onbestaande pagina bevindt, wordt er gecheckt of de homepage geladen is. Is dit het geval, dan wordt er allereerst een variabele gemaakt die de featured image van deze pagina opvraagt. Aan de hand van deze variabele wordt de featured image hierna ingesteld als background van de header. De header van de homepage heeft een speciale class, zo kan er via deze class in css de grootte van de header aangepast worden. De grootte van de homepageheader is standaard groter dan die van de andere pagina’s. Daarnaast bevat deze header het logo van het bedrijf en een callto-actionbutton.

Wanneer er geen enkele van de voorafgaande pagina’s geladen is, is er nog maar een optie, en dat zijn de gewone pagina’s. net zoals bij de homepage wordt er bij de gewone pagina’s een variabele opgesteld die de featured image opvraagt en deze instelt als background van de header. Verder heeft deze header de standaard afmetingen die voor alle headers gebruikt worden.

Wanneer de gebruiker zich niet op de contact-,

Hoofdstuk 6: UITWERKING

51

Figuur 16: header.php - 2017 © Inias Van Ingelgom

Figuur 17: page-header.php - 2017 © Inias Van Ingelgom

52

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Footer Net zoals de header is de footer een terugkerend element die verschillende vormen kan aannemen. Ook hier wordt in de footer.php door middel van een if-elseloop gekeken op welke pagina de bezoeker zich bevindt. Wanneer de bezoeker de contactpagina heeft open geklikt wordt er een minder uitgebreide versie van de footer getoond. Deze versie bevat een grijze balk met de copyright gegevens, he BTW-nummer van het bedrijf en een naamsvermelding.

Wanneer de gebruiker een andere pagina opent komt er een uitgebreide versie van de footer tevoorschijn. Deze versie bevat eveneens de grijze balk met copyrightgegevens, BTWnummer en naamsvermelding. Boven deze balk is er op deze pagina’s ook nog een bruine callto-actionbalk. In deze balk zit een call-to-action in de vorm van de zin: “Maak nu uw afspraak! Wij komen vrijblijvend ter plaatse.” Naast deze callto-action staan er ook twee contactknoppen waarmee de bezoeker direct het bedrijf kan bellen of mailen. Deze knoppen zijn iconen in de stijl van het bedrijf en de rest van de site in de vorm van svg’s.

De reden waarom dit uitgebreide gedeelte niet op de contactpagina staat is omdat dit deel aanzet om contact op te nemen met het bedrijf.

Ik ga er van uit dat wanneer de gebruiker de contactpagina opent, hij van plan is om contact op te nemen met Grondwerken Segro, en deze extra call-to-action dus overbodig is. Daarnaast bevat de contactpagina al enkele CTA’s in de inhoud.

Figuur 18: footer.php - 2017 © Inias Van Ingelgom

Hoofdstuk 6: UITWERKING

53

Figuur 19: footer.php - 2017 © Inias Van Ingelgom

Figuur 20: footer.php - 2017 © Inias Van Ingelgom

54

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Figuur 21: Homepage in WordPress met PageBuilder - 2017 Š Inias Van Ingelgom

6.3.3.2. Homepage De homepage, en alle andere pagina’s, zijn qua inhoud opgebouwd volgens de WordPress-standaard. Dit wil zeggen dat er tussen de page-header en de footer de content wordt opgehaald. Deze content is de content die via het CMS is ingevoegd.

Om deze content al in verschillende kolommen te plaatsen heb ik gebruik gemaakt van de Pagebuilder plug-in van SiteOrigin.

Het handige aan deze plugin is dat de kolommen in percentages verdeeld kunnen worden. Deze percentages komen overeen met de percentages binnen de maximale breedte van de parent-div.

Door middel van de styling van deze parent-div aan te passen en het aantal kolommen goed in te geven is het mogelijk om snel tot een goed resultaat te komen. Daarnaast zijn deze kolommen makkelijk op te roepen in css, waardoor de elementen in deze kolom makkelijk te stylen zijn.

In de toekomst zal ik deze pagina omzetten naar een loop die doorheen de verschillende diensten loopt. zo zullen de nieuwe diensten die het bedrijf te bieden heeft automatisch mee op de dienstenpagina verschijnen, zonder dat deze pagina constant aangepast moet worden.

Hoofdstuk 6: UITWERKING

55

Figuur 22: Homepage - 2017 © Inias Van Ingelgom

56

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

6.3.3.3.Dienst detailpagina De dienst detailpagina’s werden, net zoals de homepage en alle andere pagina’s, opgebouwd volgens de WordPress-standaard. Ook deze pagina’s werden opgebouwd met behulp van de SiteOrigin Pagebuilder plug-in.

Figuur 23: Dienst detailpagina in WordPress met PageBuilder - 2017 © Inias Van Ingelgom

6.3.3.4. Aboutpage In tegenstelling tot alle andere pagina’s heeft de about-pagina geen hoofdingsafbeelding. In plaats van een afbeelding wordt er op deze pagina gebruik gemaakt van een quote die zeer goed in het oog springt.

Ook deze pagina is volledig opgebouwd met behulp van de Pagebuilder plug-in. Tijdens het opbouwen van deze pagina heb ik rekening moeten houden met het instellen van de class-names, aangezien hier enkele aanpassingen moeten gebeuren in css. Zo is er een bepaalde klasse-naam gegeven aan de quote zelf, omdat deze een speciale paragraafstijl heeft. Ook de verschillende secties, de quote-sectie en de tekst-sectie, hebben elks een unieke klassenaam gekregen. Dit omdat zij een verschillende achtergrondkleur hebben, om de pagina toch wat te breken.

Figuur 24: Aboutpagina in WordPress met PageBuilder - 2017 © Inias Van Ingelgom

Hoofdstuk 6: UITWERKING

57

Figuur 25: Filter voor realisatiepagina in PHP - 2017 © Inias Van Ingelgom

58

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

6.3.3.5. Realisaties Bij het opbouwen van de realisatiepagina ben ik wel enkele problemen tegengekomen. Eerst had ik deze pagina ingesteld als de posts-pagina, waar dus alle posts terecht zouden komen.

Aangezien ik werkte met custom post-types werden deze posts hier dus niet weergegeven. Om dit probleem op te lossen maakte ik een unieke archive-pagina waar deze posts op weergegeven werden. Dit deed ik door in PHP een nieuwe realisaties-archive. php aan te maken. Door deze naamgeving weet WordPress wanneer deze pagina opgeroepen wordt. Deze oplossing werkte, de verschillende posts werden weergegeven zoal gewenst. Enige bijwerking was dat de hoofdafbeelding van de pagina nu telkens vervangen werd door de hoofdafbeelding van de meest recente realisatie.

Om dit laatste probleem op te lossen heb ik een nieuwe lege pagina-template ingesteld. Wanneer er nu naar deze pagina gesurft werd kwam er enkel de navigatiebalk, de header en de footer tevoorschijn. Om de content te tonen heb ik in mijn custompost plug-in een nieuwe shortcode aangemaakt die loopt doorheen alle realisaties. Deze shortcode moest ik dan gewoon oproepen in de content van mijn pagina.

Naast het weergeven van de verschillende realisaties wou ik de gebruiker ook de mogelijkheid geven om te filteren op de verschillende diensten die het bedrijf te bieden heeft. Ook hiervoor heb ik een shortcode gecreëerd. Deze shortcode bevat een functie de verschillende diensten oplijst in de vorm van de bijhorende iconen. Wanneer er op deze iconen geklikt wordt kijkt de functie naar de slug van deze specifieke dienst.

Deze slug wordt dan naar de adresbalk gepusht in de vorm van “/realisaties?dienst=naamvandedienst”. Tijdens het opladen van deze pagina wordt er in de loop van de custom posts door middel van een $_GET gekeken welke dienst er opgevraagd wordt. Aan de hand van deze informatie worden dan enkel de posts die bij de opgevraagde dienst horen weegegeven.

Figuur 26: Realisatiespagina in WordPress met PageBuilder - 2017 © Inias Van Ingelgom

Hoofdstuk 6: UITWERKING

59

Figuur 27: Contactpagina - 2017 © Inias Van Ingelgom

6.3.3.6. Contactpagina Net zoals de over ons-pagina heeft de contactpagina geen gewone afbeelding als header. De contactpagina heeft een map als header. Deze map wordt in de header. php ingevoegd door middel van een iframe, gecreëerd door Google Maps.

Onder deze map wordt de meest voor de hand liggende contactinformatie weergegeven. Deze informatie is, net zoals op alle andere pagina’s, geplaatst met behulp van de Pagebuilder plug-in. De iconen die worden weergegeven bevatten een link zodat er bij het klikken op de iconen meteen gebeld of gemaild kan worden naar het bedrijf.

Onder deze contactgegevens staat een contactformulier. Dit formulier is gebouwd met de Contact Form 7 plug-in. Tijdens het opbouwen van dit formulier heb ik gelet op het ingeven van de juiste klassenamen. Zo kon ik aan de hand van deze klassenamen nadien het formulier nog volledig een eigen stijl geven in css.

60

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Hoofdstuk 6: UITWERKING

61

Figuur 29: Contactform in WordPress met Contact Form 7 - 2017 © Inias Van Ingelgom

Figuur 28: Contactpagina in WordPress met PageBuilder - 2017 © Inias Van Ingelgom

CONCLUSIE

7

CONCLUSIE Het uiteindelijke doel van dit project was Grondwerken Segro BVBA weer een online identiteit bezorgen. Aangezien het bedrijf zelf de content wil kunnen beheren en regelmatig foto’s van reeds gerealiseerde werken wil kunnen plaatsen, moest de nieuwe website van het bedrijf voorzien zijn van een gebruiksvriendelijk content managamentsysteem. Hierbij was het kiezen van het juiste platform de eerste opdracht. Aangezien ikzelf reeds een kleine kennis van Joomla en WordPress heb, werd mijn keuze al beperkt tot deze twee platformen. De uiteindelijke keuze voor WordPress was de meest logische, aangezien dit platform de meeste gebruikers heeft, en hierover dus veel meer te vinden is op het internet dan over Joomla. Daarnaast is de gebruikersinterface van WordPress veel gebruiksvriendelijker dan die van Joomla.

In het algemeen is het opbouwen van een WordPress-site door middel van een eigen ontwikkeld thema vrij vlot verlopen voor iemand met een kleine basiskennis WordPress. Door de tips van Mattias, mijn begeleidende expert, goed op te volgen is het mij gelukt om een eigen thema op te bouwen in amper zes weken tijd.

Natuurlijk zijn er tijdens het opbouwen van dit thema ook enkele tegenslagen en problemen geweest die ik heb moeten oplossen.

WordPress-kennis Toen ik begon met het realiseren van dit project, beschikte ik slechts over een basiskennis WordPress. Net genoeg om te weten hoe het platform in elkaar zat, hoe je verschillende pagina’s en posts toevoegd en deze onderverdeeld in categorieën. Een thema en een plug-in installeren was ook geen probleem, maar daar stopte mijn kennis dan ook.

Vooraleer ik dus effectief kon beginnen met het ontwikkelen van mijn thema, moest ik weten welke mogelijkheden WordPress allemaal te bieden had. Hiervoor ben ik verdere research gaan doen in de WordPress Codex. Daarnaast heb ik ook enkele online cursussen gevolgd om mijn kennis nog extra uit te breiden. Deze research heeft me geholpen om de werking van WordPress nog meer te begrijpen. Op deze manier ben ik ook te weten gekomen welke extra mogelijkheden het platform nog allemaal te bieden heeft.

Hoofdstuk 7: CONCLUSIE

65

Content Het ontbreken van goede content was tijdens het ontwerpen en ontwikkelen van de site ook een van de struikelblokken. Het was zeer moeilijk om in te schatten hoeveel content er effectief op de site zou belanden. Om dit probleem op te lossen heb ik samengezeten met Jonas. Hij ging mij in de loop van de week die daarop volgde alle tekstuele content doormailen. Deze content kon ik dan al gebruiken tijdens mijn ontwerpfase. Hoewel de verkregen content nog vrij beperkt was, heb ik Jonas aangespoord om nog iets uitgebreidere teksten op te stellen. Deze heb ik dan op het einde van het project kunnen invoegen in de site.

Op vlak van beelden had Jonas ook een groot aanbod van zelfgemaakte foto’s. de kwaliteit van deze foto’s was echter niet optimaal. De foto’s waren getrokken met een gsm en de onderwerpen van de foto’s waren niet zeer duidelijk. In overleg met Jonas kreeg ik de kans om enkele dagen met hem mee te gaan en zelf voor fotomateriaal te zorgen.

PHP in WordPress Eenmaal de ontwikkelfase bereikt struikelde ik soms over de blokken PHP die gebruikt werden in het starter theme Sage. Het doel van sommige functies die gebruikt werden begreep ik niet altijd even goed. Hiervoor heb ik de WordPress Codex bekroond tot nieuwe beste vriend. Deze pagina heeft tijdens mijn ontwikkelfase zijn plaatsje tussen mijn bookmarks zeker verdiend.

Naast het begrijpen van bestaande functies was het schrijven van eigen functies voor gevorderdere toepassingen ook iets waar ik geregeld moeilijkheden mee had. Ook hier was de WordPress Codex mijn lichtje in de duisternis. Hoewel ik de meeste antwoorden op mijn vragen vond op Stackoverflow, werden de gebruikte stukken code veel duidelijker wanneer ik deze in de Codex terugvond.

Wanneer ik een probleem echt niet opgelost kreeg met behulp van mijn goede vriend Google, kon Mattias mij altijd wel helpen.

Hij kon me zeggen wat ik fout deed en stelde een stappenplan op om de juiste oplossing te bereiken. Aangezien dit stappenplan niet leidde naar de juiste oplossing, maar naar de juiste manier om de oplossing te vinden, hielp dit me heel wat vooruit. Hierdoor begreep ik de fouten en, nog belangrijker, begreep ik hoe de code in elkaar zat.

66

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Planning Hoewel het me goed lukte om me aan mijn reeds vooropgestelde planning te houden, waren er omtrent mijn planning wel enkele werkpunten. Tijdens het opstellen van mijn planning heb ik alle stappen van mijn proces mooi ingepland. Hierbij heb ik rekening gehouden met de nodige researchtijd en mijn eigen privĂŠ-agenda.

Dit bleek echter niet voldoende. Tijdens het opstellen heb ik geen tijd ingepland voor andere opdrachten. Zo heeft het maken van mijn stageverslag heel wat tijd ingenomen die ik niet op voorhand had ingepland. Aangezien ik al wat voor zat op mijn schema, zorgde deze vertraging ervoor dat ik nu net op mijn schema zat.

Hoewel ik hiermee dus geluk gehad heb, kon dit ook heel anders uitgedraaid zijn.

Naast de fout om andere dingen niet in te plannen, heb ik ook heel wat zaken verkeerd ingepland. Zo was mijn onderzoeks- en ontwerpfase veel te ruim gerekend, en werd het naargelang het project vorderde zeer krap om mijn deadlines te halen. Om dit probleem op te lossen heb ik mijn planning volledig genegeerd en mijn werktempo verhoogd. Daarnaast heb ik keuzes moeten maken en sommige dingen niet kunnen uitwerken. De diaslider wanneer er op een project geklikt wordt is bijvoorbeeld een element dat ik niet heb kunnen uitwerken, maar dat wel nog uitgewerkt zal worden.

Focus Naargelang het project vorderde, en het weer beterde, werd het alsmaar moeilijker om mijn focus er volledig bij te houden. Om mij toch voldoende te kunnen concentreren, zonder afgeleid te worden, besloot ik om een extensie te installeren in mijn browser.

Deze extensie zorgde ervoor dat alle websites die voor mogelijke afleiding konden zorgen geblokkeerd werden, en ik me dus volledig kon concentreren. Naast het blokkeren van afleidende websites, plande ik ook dagelijks een ontspanmoment in. Tijdens dat moment deed ik een wandeling en genoot ik van het mooie weer. Ideaal om even te ontspannen en mijn batterijen weer op te laden om er nadien weer volop in te vliegen.

Hoofdstuk 7: CONCLUSIE

67

8

AANBEVELINGEN

AANBEVELINGEN Niets is perfect, en er is altijd mogelijkheid tot verbetering, alsook bij deze bachelorproef. Daarom zou ik ook enkele tips en aanbevelingen willen meegeven aan mezelf en anderen die van plan zijn om een WordPress-thema te bouwen met beperkte kennis van WordPress en PHP. Indien je, net zoals ik, slechts over een basiskennis van WordPress beschikt, raad ik aan om al op voorhand research te doen over de werking van het platform. Het bekijken van enkele tutorials of online lessen of het lezen van enkele artikels kan je al een beter inzicht geven van hoe het systeem werkt. Daarnaast maakt WordPress gebruik van zeer specifieke PHP-functies die door WordPress vooraf gedeclareerd werden. Het bekijken van de verschillende functies kan ik dus ten zeerste aanraden. Zo weet je nog voor je begint te coderen wat welke functie juist inhoudt.

Ook het op voorhand researchen van handige plug-ins is iets wat ik alleen maar kan toejuichen. Zo kan je sommige dingen overlaten aan plug-ins die reeds bestaan en hoef je hiervoor niet speciaal extra lijnen code te typen. Bekijk ook op voorhand je design, en codeer enkel wat je nodig hebt. Tenzij je een thema bouwt dat je vrij te downloaden aanbiedt of dat voor andere sites relevant kan of hoeft te zijn is het onnodig om alle verschillende functionaliteiten te voorzien in je thema.

Klaar met ontwerpen? Test je design! Door je ontwerp meteen te laten testen door anderen kan je veel moeilijkheden die je zelf niet ziet blootleggen. Door deze knelpunten in je design op voorhand in kaart te brengen is het makkelijker om deze aan te passen dan wanneer je al in je ontwikkelfase zit.

Als laatste raad ik ook zeker aan om de gebruiker van het content managementsysteem een korte introductie of cursus WordPress te geven. Zo weet de gebruiker hoe hij verschillende handelingen kan doen en is hij niet volledig afhankelijk van jou of iemand die iets van WordPress kent.

Hoofdstuk 8: AANBEVELINGEN

71

9

BIBLIOGRAFIE

BIBLIOGRAFIE Ertaç, E. (z.j.). WordPress Cheat Sheet [Illustratie]. Geraadpleegd van http://xavi.ivars.me/arxius/manuals/wordpress/wordpresscheat-sheet.pdf Hoe kleuren ons beïnvloeden. (z.j.). Geraadpleegd van https:// www.kleurenpsychologie.be/home.html Kleurenpsychologie in marketing [Infographic] [Blogpost]. (2013, 22 april). Geraadpleegd van http://www.belgiancowboys. be/mar keting/k leurenpsychologie -in-mar ketinginfographic Prusty, N. (2015, 27 mei). Exploring the WordPress get_posts Function. Geraadpleegd van https://www.sitepoint.com/ exploring-the-wordpress-get_posts-function/ Rand-Hendriksen, M. (z.j.). WordPress: Building Themes from Scratch Using Underscores [Video]. Geraadpleegd van https:// www.lynda.com/WordPress-tutorials/WordPress-BuildingThemes-from-Scratch-Using-Underscores/491704-2.html Rand-Hendriksen, M. (2014, 5 september). WordPress: Custom Post Types and Taxonomies [Video]. Geraadpleegd van https:// www.lynda.com/WordPress-tutorials/WordPress-CustomPost-Types-Taxonomies/163113-2.html WordPress Codex. (z.j.). Geraadpleegd van https://codex. wordpress.org/

Hoofdstuk 9: BIBLIOGRAFIE

75

10

BIJLAGEN

BIJLAGEN 10.1. Bijlage I Lijst van websites gebruikt voor de concurrentieanalyse.

De Saegher & Zn BVBA http://www. grondwerkendesaegher.be/ Monseré https://www.monsere.be/

Croes BVBA http://croesbvba.be/nl Livios http://www.livios.be/nl/

GLK Grondwerken http://www.glk.be/

Grondwerken J&N BVBA http://www.grondwerkenj-n. be/

Grondwerken De Mol BVBA http://grondwerkendemol.be/

Smets BVBA http://www.smetsbvba.be/

T. Daems Transport http://www.t-daems.be/

Grondwerken Lauwers http://www. grondwerkenlauwers.be/

Kermans BVBA http://www.kermans.be/ Grondwerken Heylen Paul http://www. grondwerkenheylen.be/ Containers Etienne http://containersetienne.be/nl De Kock http://www.dekock.info/ home/ J&T Projects http://www.jtprojects.be/ VATRO https://www.vatro.be/

Grondwerken Willemsen BVBA https://www.grondwerkenwillemsen.com/ Grondwerken Huys http://grondwerkenhuys.be/ Bernaerts Grondwerken BVBA http://bernaertsgrondwerken. be/ Lippens Grondwerken http://www. lippensgrondwerken.be/

Verhelst aannemingen http://www. verhelstaannemingen.be/ Grondwerken Maes NV http://www. grondwerkenmaes.be/ Willy Naessens Group http://www.willynaessens.be/ nl/sectoren/grondwerken/ Adams Polendam NV http://www.adams-polendam. be/ Detrez Grondwerken http://detrez-grondwerken.be RTS Zedelgem www.rts-zedelgem.be/ Vanigro Grondwerken Van Nieuwenhuyse http://vanigro.be/ Grondwerken Declercq http://www.gdq.be/ Godts BVBA http://www.godts.be/

Graaf- en Grondwerken Breugelmans Walter & Zoon BVBA http://www. grondwerkenbreugelmans.be/

Hoofdstuk 10: BIJLAGEN

79

10.2. Bijlage II

Hebt u het afgelopen jaar

Resultaten afnemersanalyse.

grondwerken laten doen?

10%

90%

Hoe hebt u uw aannemer gevonden?

Nee: 45 Via internet: 1 Via familie/vrienden: 3

20%

20%

Via de krant: 0 60%

Een lokaal bedrijf: 0 De werken moesten verplicht uitgevoerd worden door de gemeente, hierdoor moesten we een vaste aannemer kiezen : 1

Hoe zou u uw aannemer zoeken indien u van plan bent grondwerken te laten doen?

6.7%

Via internet: 18 Via familie/vrienden: 24 Via de krant: 0 Een lokaal bedrijf: 3

80

Ja: 5

40%

53.3%

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Waar let u op bij het kiezen van uw aannemer?

70%

Reeds gerealiseerde werken: 35

80%

Prijs: 40

84%

Kwaliteit: 42

4%

Grootte van het bedrijf: 2

40%

Vriendelijke zaakvoerder: 20

2%

Ervaring met archeologie: 1

2%

Website: 1

2%

Betrouwbaarheid, als je het via vrienden hoort: 1

2%

Is veiligheid een belangrijk topic voor het bedrijf?: 1

2%

Vriend of kennis: 1

Door welke site wordt u het meest aangesproken?

10% 26% 14%

12% 38%

Hoofdstuk 10: BIJLAGEN

81

20%

Bent u geïnteresseerd in de achtergrond van het bedrijf en/of de zaakvoerder?

Ja: 40

80%

Het draait rond het werk dat ze liever niet hun achtergrond.

Kleine toelichting is interessant, maar ben meer geïnteresseerd in wat ze NU realiseren.

Dat heeft geen belang bij het realiseren van de grondwerken vind ik.

Omdat er voorlopig geen grondwerken moeten gedaan worden .

Heeft normaal geen invloed op da zaken.

Niet van belang.

De kwaliteit die ze leveren staat apart van de mensen die er werken.

Heb daar geen zaken mee.

Zien wel.

DIt heeft geen extra betekenis. Indien het een pedolfiel of een verkrachter is gaat deze persoon geen grondwerken doen.

Indien die grondwerken doet zal hij zijn leven verbeterd hebben. Ik geloof in een 2de kans... (?)

Nee: 10

Gewoon om te weten waar het bedrijf staat en of ze wel goed in de markt liggen met kwaliteit ze leveren Zo weet ik hoe hij in het verleden met taken/klanten is omgegaan.

Imago Dan weet je of het iets of wat deftig is Toch enigzins belangrijk om te weten of het om een jong/oud bedrijf gaat/ wie de zaakvoerder is.

Beetje extra info over bedrijf is altijd leuk.

Ervaring in het werk.

Dit kan vertrouwen scheppen.

Ik wil weten met wie ik in zee ga.

Historiek, hoe lang bedrijf al bezig is.

82

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Gaat erom wat ze al aan ervaring hebben.

Zo kom je al veel te weten.

Dan heb je al een idee met wie je zou samenwerken.

Geeft info over de persoon die je werk zal doen.

Referenties.

Hoe lang ze bestaan.

Een biografie duidt vaak op een lange expertise in het vak.

Altijd fijn om een beetje van de motivatie/ interesse te weten te komen .

Tuurlijk. Je moet toch weten of het een stabiel bedrijf is.

Ik vind het professioneler dat je ook de geschiedenis van het bedrijf kan lezen.

Krijg je ook een beter zicht van het bedrijf.

Hij moet goed werk hebben afgeleverd.

Altijd leuk om te weten te komen met wie je samenwerkt, dit geeft een extra boost om voor deze persoon te kiezen.

Het lijkt mij een degelijk bedrijf.

Je kan hier soms afleiden van hoe de veiligheid nageleefd wordt en de omgang met klanten is.

Leer je het bedrijf wat kennen.

De zaakvoerder is belangrijk dat die vriendelijk is. Als die kort antwoord of lang op een antwoord laat wachten, ga ik al eerder geneigd zijn om op een ander te gaan.

Trust nobody.

Niet perse, maar altijd een goeie extra motivatie om er voor te kiezen

Ter referentie.

Om te weten hoe het bedrijf in elkaar zit .

Kan helpen met de keuze voor het bedrijf.

Schept een vertrouwensband.

Handig qua ervaring, uitbreiding, hoelang ze al werken, e.d.

Het is altijd fijn om te weten met wie je te maken hebt.

Kan invloed hebben op de werken.

Belangrijk voor vertrouwen.

Zo krijg je een een beetje meer vertrouwen in.

Vertrouwen

Betrouwbaarheid.

/

Hoofdstuk 10: BIJLAGEN

83

92%

Gerealiseerde werken: 46

98%

Contactgegevens: 49

60%

Achtergrondinformatie: 30

6%

Blog: 3

6%

Social feed: 3

38%

Activiteiten: 19

Wat is volgens u relevante info op de website van een grondwerker?

14%

Telefonisch: 16

8%

Per mail: 23 Contactformulier op de website: 7

46%

Hoe neemt u het eerste contact op met het

32%

Ter plaatse langsgaan: 4

bedrijf?

Welke extra functies vindt u noodzakelijk in een contactformulier?

84

74%

Mogelijkheid om een afspraak te maken: 37

60%

Aangeven waarover de vraag gaat: 30

62%

Kopie van het contactformulier per mail ontvangen: 31

58%

Foto’s of bijlagen opsturen: 29

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

10.3. Bijlage III 10.3.1. Teksten per leverbare dienst: Graaf- en grondwerken Verscheidene graaf- en grondwerken zoals: • • • • • • • • •

Uitgraven en aanleggen van gazon, opritten, terrassen en parkings Uitgraven van kelders, zwembaden, (zwem) vijvers, funderingen en greppels voor nutsvoorzieningen Nivelleren van grond en verhardingen Leveren en plaatsen van water- en septische putten Reinigen van sloten, grachten en vijvers Bouwrijp maken of nivelleren van terreinen Ploegen, frezen en afschrapen van braakliggende gronden en akkers en/of weilanden Vellen en verwijderen van bomen, stronken en wortels Kleine rioleringswerken

Verkoop en levering van alle soorten verhardingen: Verkoop en leveren van alle soorten verhardingen zoals: stabilisé, rijnzand, Siergrind en dolomiet, teelaarde, opvulgrond en compost.

Afspanningswerken Leveren en plaatsen van allerhande afspanningen in hout, beton, Bekaert, …, poorten en schanskorven. Indien gewenst volledig op maat gemaakt voor uw project.

Aanleg van paardenpistes Aanleggen van op maat gemaakte paardenpistes.

Afbraakwerken Afbreken van kleine en vrijstaande gebouwen, achterbouwen, kleine industrie en loodsen.

Containerdienst Plaatsen van afvalcontainers van 8 tot 20 kuub voor onder meer steenpuin, gemengd afval, houtafval, groenafval,...

Transport in onderaanneming Vervoer van goederen per tractor met container of dieplader.

Spreiden van meststoffen en kalk.

Openspreiden van meststoffen en kalk op akkers en weilanden en inwerken van meststoffen (frezen en ploegen).

10.3.2. Biotekst over het bedrijf Quote

Biotekst

“De tevredenheid van onze klanten is onze grootste beloning.”

Grondwerken Segro uit Puurs is in 2014 opgericht door Jonas Segers. Het bedrijf is ontstaan uit grote interesse voor kranen, grondverzet en landbouwwerk. Deze “uit de hand gelopen hobby” is ondertussen uitgegroeid tot een bloeiende onderneming die steeds voor u klaar staat. Wij garanderen een kwalitatieve afwerking van uw project met een persoonlijke aanpak.

Grondwerken Segro is vooral actief in KleinBrabant en omliggende regio’s, maar niets houdt ons tegen om ook een stapje “verder van huis” te gaan.

Hoofdstuk 10: BIJLAGEN

85

10.4. Bijlage IV Gebruikte iconen

86

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

10.5. Bijlage V Gebruikt beeldmateriaal.

Hoofdstuk 10: BIJLAGEN

87

88

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Hoofdstuk 10: BIJLAGEN

89

90

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

10.6. Bijlage VI Ontwerp: wireframes

Hoofdstuk 10: BIJLAGEN

91

10.7. Bijlage VII Ontwerp: digitale mockups

10.7.1. Mockups Versie 1

92

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Hoofdstuk 10: BIJLAGEN

93

94

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Hoofdstuk 10: BIJLAGEN

95

96

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Hoofdstuk 10: BIJLAGEN

97

98

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Hoofdstuk 10: BIJLAGEN

99

100

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Hoofdstuk 10: BIJLAGEN

101

10.7.2. Mockups Versie 2

102

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Hoofdstuk 10: BIJLAGEN

103

104

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Hoofdstuk 10: BIJLAGEN

105

106

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Hoofdstuk 10: BIJLAGEN

107

108

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Hoofdstuk 10: BIJLAGEN

109

110

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Hoofdstuk 10: BIJLAGEN

111

112

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Hoofdstuk 10: BIJLAGEN

113

114

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

Hoofdstuk 10: BIJLAGEN

115

10.8. Bijlage VIII Volledig uitgetypte versie van de gefilmde usabilitytests.

10.8.1.Chelsea Bovée Site: C: Oké!

I: Dus, ik ga al op voorhand zeggen; niet alle content staat er in en nog niet alles is aanklikbaar. Dus de dingen die je gaat kunnen aanklikken, die komen in het blauw als je ergens willekeurig klikt.

C: Oké! Ik ga eerst alles bekijken he.

C: Het eerste wat me opvalt is dat dit wel groot staat, maar mij stoort dat wel niet hoor.

I: Oké.

C: Het is gewoon opvallend, maar niet per se slecht.

C: Dat vind ik ook wel goed dat die foto’s in het groot komen.

C: Nu heb ik eigenlijk alles aangeklikt, toch?

I: Ja. C: Ik vind het eigenlijk wel goed. Alles is er hé, van uitleg en al. Dus, ik weet het niet.

Ik vind het nu toch niet slecht eigenlijk hoor.

I: Stel dat je nu op Google zou zoeken naar “grondwerken”, je klikt door en je komt terecht op die vorige pagina (realisaties).

C: De homepage?

I: Nee, die andere, realisaties.

C: Ah! I: Stel je komt daar terecht. Is het dan voor u duidelijk waar je ergens zit op de website en waarover de website gaat?

C: Dat misschien wel niet eigenlijk. Je ziet die buttons wel staan, maar je weet eigenlijk niet… Allez, je ziet wel wat er op staat, maar je weet ni echt de betekenis.

I: Ja. C: Maar… Als je hier op komt? JA, je kan wel van de dingen die je ziet afleiden dat dat gerealiseerde werken zijn vind ik. De foto’s maken veel duidelijk vind ik!

I: Is het duidelijk waarvoor die buttons bovenaan dienen?

116

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

C: Nee, dat wel niet. Ik snap niet wat ze hier momenteel nu doen? Op de vorige pagina (homepage) wel he! Want waarschijnlijk als je daarop klikt, dan kom je waarschijnlijk bij dat andere terecht, of niet? Maar, waarvoor staan ze hier (realisatiespagina)? Of is dat gewoon versiering?

I: Dat zijn eigenlijk filterknoppen.

C: Ah, oke!

I: Maar dat is dus nog niet duidelijk.

C: Op zich, nu je dat zegt wel hoor. Maar misschien kan je daar in het klein een woordje uitleg bijzetten? Want ja, bijvoorbeeld dat is een hek, maar die tractor en die …, dat snap ik niet zo goed. Maar ik ken nu ook niet veel van opritten en toestanden he. Maar door die alles-knop maakt dat het wel duidelijker dat het filterknoppen zijn. Voor de rest vind ik het allemaal wel goed.

I: Spreekt de website u aan om het bedrijf te contacteren?

C: Ja, ik vind hem wel leuk, ’t ziet er wel tof uit. Het is niet zo druk en bombastisch.

Ja, ik zou een offerte aanvragen. Dat is ook goed dat dat op elke pagina staat vind ik (over call-to-action).

I: Verder nog iets van opmerkingen?

C: Niet direct. Moest er nog iets ‘oppoppen’ zal ik het wel zeggen. Het kleurgebruik vind ik ook leuk. Da’s zo fris.

Mobile: I: Gewoon nog is hetzelfde als daarjuist.

C: En ook een aantal dingen aanklikbaar, maar sommigen ook nog niet?

I: Ja, inderdaad.

C: Da’s misschien wel groot. (Over map op contactpagina) Dat je hier zo… Dat neemt zo een heel scherm in beslag.

C: Da’s wel leuk, zo. (Over menu) Vind ik. En dat is ook beter dat er filter boven staat, want volgens mij op de andere versie staat dat niet. Dat maakt het duidelijk dat er gefilterd kan worden.

C: Dat vind ik ook wel mooi en duidelijk. Het enige wat ik zou veranderen is dan het plannetje bij contact. Maar voor de rest vind ik het wel duidelijk.

I: En het menu? Was dat duidelijk?

C: Je ziet het eerst niet staan, maar dan zie je dat hamburgertje. Dat is wel duidelijk dat dat de menu is he. Wel makkelijk voor grote formaatjes.

I: En het feit dat dat onderaan staat?

Hoofdstuk 10: BIJLAGEN

117

C: Het menuutje?

I: Ja, is dat verwarrend of is dat direct duidelijk?

C: Het is wel direct duidelijk. Eventjes wennen misschien, voor sommigen, maar ’t is wel duidelijk dat je daar moet klikken om bij de andere pagina’s te komen vind ik.

I: Oke. Nog opmerkingen of…?

C: Maar normaal past dat zichzelf aan uw scherm aan he, toch?

I: Ja, normaal wel.

C: Dus normaal zou dat mooi zo passen? En dan moet ik niet… Dan valt het al helemaal op. Nu heb ik het gewoon eerst niet gezien, omdat ik het niet zag staan.

(Over menuknop) Ja, ik vind het wel goed.

10.8.2. Jochem Maes Site: I: Spreekt de website u aan om te contacteren?

J: De site wel, maar na drie seconden klik ik weg.

I: Ja, dat ligt nu gewoon aan het internet.

J: Ja, als die site hopelijk sneller werkt, dan zou ik ze wel contacteren.

J: Ze hebben ook duidelijke foto’s. Wat ze gedaan hebben is duidelijk. Ze hebben niet te veel … Hoe ze dat gedaan hebben is misschien ook wel handig voor mensen. Maar de site nu, de snelheid is echt verschrikkelijk.

I: Die icoontjes die daar staan, is dat duidelijk waarvoor die dienen? Ze werken nog niet, maar waarvoor denk je dat ze dienen?

J: Ja, graafwerken. Een omheining. Afval, euhm, een container waar je afval kan indoen. Een tractor. Dat zou mij eerlijk gezegd niets zeggen. Enkel deze twee zijn redelijk onduidelijk. (Over transport en bemesting) I: En is het duidelijk wat ze allemaal exact doen?

J: Ja ze laten ook wel heel duidelijk zien in wat ze gespecialiseerd zijn. En bij contact is het ook redelijk duidelijk waar ze gelegen zijn. Je kan ook makkelijk hun gegevens terugvinden.

J: Alleen ook, uw lettertype. Dat is veel te licht. Da zou ik echt wel donkerder maken.

Het is niet moeilijk om te lezen, maar het is ongemakkelijk om te lezen. Toen het donker was omdat het licht was uitgevallen was dat een stuk makkelijker, maar nu het licht terug aan is is dat … Ik zou het toch iets donkerder maken.

118

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

I: Zijn er nog opmerkingen? Op de startpagina misschien?

J: De tekst mag misschien iets groter, die kleine info. Voor de rest is de homepage duidelijk. Je kan ook direct uw offerte aanvragen als je dat wenst. De gegevens zijn ook heel duidelijk.

I: En opmerkingen over het design in het algemeen?

J: Ja, de beelden passen echt bij de uitleg. Als er staat… De titel is oprit, dan zie je ook wel duidelijk een oprit. Bij de nivelleerwerken ook, en als ze grond afhalen, dan zie je ook dat ze dat doen.

J: Ja, het design is goed, enkel uw lettertype qua kleur en op de homepage zou ik dat nog een stuk groter zetten. En uw tractor en mestkar, daar zou ik wel iets anders voor verzinnen. Dat is raar voor transport.

I: Stel dat je wanneer je naar die site zoekt, je op die pagina terecht komt (realisaties), heb je dan direct door op welke pagina van de website dat je bent?

J: Ja. Ze laten duidelijk zien wat ze gedaan hebben, of wat ze verricht hebben van opdrachten, voor wie en waar vooral. Zo krijgen ze ook een idee in welke buurt ze vooral werken. En met die icoontjes kan je zelf al selecteren naar wat je aan het zoeken bent. Bijvoorbeeld grondwerken of graafwerken, dan kan je effectief op een kraan klikken en krijg je opdrachten of realisaties waar ze graafwerken gedaan hebben. En ook onderaan heb je dan nog eens bijgezet “Maak nu uw afspraak”. Uw call-to-action zit ook al goed. Het is ook belangrijk dat dat op de pagina met al uw werk staat. Als mensen geïnteresseerd zijn kunnen ze meteen op de call-to-action klikken.

I: Nog opmerkingen?

J: Nee. De kwaliteit van de foto’s is ook goed. Ja. Nee, eigenlijk geen opmerkingen.

Het is ook redelijk straight forward zoals ze zeggen.

Mobile: J: Hier is de tekst wel veel beter dan op uw algemene website. De kleur vooral. Het is niet zo licht.

J: Gaat dat werken, die button, zodat je belt?

I: Ja, dat gaat werken.

J: Algemeen, zoals bij uw algemene website; het is allemaal duidelijk en je hebt overal ook hun gegevens dat je kan bellen of mailen. En als je er op drukt dat je zelfs een offerte kan aanvragen en heel het contactformulier krijgt. De tekst is veel aangenamer hier dan op uw algemene site. Het is ook goed geordend, zoals ik van een website zou verwachten. Ik zou misschien wel ergens een homeknop zetten met echt een icoontje. In plaats van dat je altijd naar dat hamburgermenu moet gaan en dan op home klikken. Ik weet niet wat er nog gaat veranderen, maar voor uw map een maps plug-in, als je dat echt zou doen.

I: Ja, maar dat is nu ook gewoon omdat dit nog niet gecodeerd is he.

Hoofdstuk 10: BIJLAGEN

119

J: Voor de rest algemeen hetzelfde, enkel de tekst is hier wel beter. De foto’s ook.

Het zijn dezelfde foto’s en de kwaliteit is heel goed. Je vindt ook duidelijk terug wat ze doen en waar ze vooral werken. Bij ‘Over ons’, die beschrijving heb ik eens kort doorgelezen en dat is ook wel duidelijk hoe ze tewerk gaan en hoe ze begonnen zijn. De call-to-action op elke pagina staat er ook weeral. Da’s ook wel zeker handig.

I: En het menu, wat vind je daar van?

J: Ik vind het nog altijd raar dat dat onderaan is. Ik ben het ook gewoon dat dat vanboven staat he. Dus dat hangt af van meerderen. Ik zou dat bij meerdere mensen zeker eens vragen.

I: En voor de rest?

J: Voor de rest geen … Het design is hetzelfde en ook straight forward, zoals ik daarnet had gezegd bij uw website. Het is ook allemaal in dezelfde lijn en dezelfde stijl, wat ook al heel goed is.

10.8.3. Rin Verstraeten Site: R: Hier zeg je: “Maak nu een afspraak!” en als je dan klikt heb je eerst een offerte of een vraag stellen. Dus misschien zou je iets kunnen toevoegen om echt een afspraak te maken. Bijvoorbeeld een kalendertje of zo. Iets specifieker voor de afspraak.

R: Ik vermoed dat je hierop gaat kunnen klikken? (Over buttons op de startpagina) I: Nee, normaal niet. Maar de content is nog niet volledig he, er komt nog info bij.

R: Het zou eventueel kunnen, maar ja, dat heb je hier bij realisaties. Maar dat je eventueel hier (button) op kan klikken om de realisaties per onderdeel te zien.

Dat is misschien ook wel interessant. Omdat dat nu vrij klein staat, dat je iets meer de focus legt op die realisaties.

R: Hmmm, over ons. Haha, die foto! Dat is wel een goede quote. Een beetje cliché, maar wel goed.

R: Het is goed dat er een beetje persoonlijke uitleg wordt gegeven. En niet te lang, anders lezen mensen dat ook niet. Dus, dat is wel goed.

R: Ah, hier heb je realisaties. Wordt dat gesorteerd onder die verschillende koppen dan?

I: Ja, dus als je daar op klikt wordt dat gefilterd, maar dat werkt nu nog niet.

R: Dat zou je eigenlijk ook op die beginpagina kunnen doen, dat je op die icoontjes op zich al kan klikken ook, eventueel. Dat je bij die realisaties eerder een ‘alles’funtie hebt en dat je bij die icoontjes meer specifiek…, want als ik bijvoorbeeld

120

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

op zoek ben naar een oprit, dan zou ik eigenlijk alleen maar klikken op dat dingetje dat voor mij relevant is, dan hoef ik die bomen en al niet te zien. Maar dat is dan een detail misschien he. Het is maar een voorstelletje.

R: Contact… Misschien op het kaartje iets duidelijker aangeven waar ze gesitueerd zijn, want het is vrij klein. Misschien het logootje of zo, ik weet niet. Ik zie het wel staan omdat ik hem ook weet wonen, maar het mag misschien iets opvallender lijkt mij. Maar dat zijn echt wel details waar ik nu over begin.

R: Wel wat lastig dat dat altijd naar beneden gaat, maar dat is misschien omdat dat in deze weergave is. (Over slideshow) Mooie foto’s. Persoonlijke foto’s ook. Ik vind het wel goed dat mensen een beetje een voorbeeld krijgen van het gedane werk. Dat is zeker een meerwaarde. En als je dat dan kan categoriseren, dan lijkt mij dat wel goed dat je zo verschillende voorbeelden krijgt van de dingen die jij wenst in de toekomst. Dat lijkt mij wel interessant.

R: Dat is de beginpagina zeker he? Ja, dat je op de icoontjes kan klikken en dat je dan ook meteen naar realisaties of zo gaat.

I: Kan je nog eens naar die pagina van realisaties gaan?

R: Ja, direct se. Misschien mag het logootje ook iets groter, omdat je het adres…

Maar dat kan misschien ook aan mij liggen, want ik heb niet zo’n goede ogen.

Maar dat het adres misschien iets groter uitkomt.

I: Stel dat je nu op Google zou zoeken naar “grondwerken” en je klikt door en komt op die pagina, is het dan voor u duidelijk waar je op de site ergens bent?

R: Goh, ja het is wel vrij klein hier he. (over menu) Het is wel logisch dat het voorbeelden zijn van dit bedrijf, wat hij allemaal heeft gedaan in het verleden.

Dat is wel duidelijk. Het zijn allemaal foto’s en er staat telkens bij wat er werd gedaan en waar. En een heel korte uitleg, meer inhoudelijk dus. Ik zou hier wel het verband leggen dat het gaat om werken die al gebeurd zijn. Ik vind het wel overzichtelijk op deze manier ook. En de foto op zich die altijd staat voor het album, laat ik maar zeggen, daar zie je wel duidelijk wat er aan het gebeuren is, waarvoor de werken staan. In principe vind ik dat wel goed. Ik denk dat het dan ook interessant is dat je dan hierop kan klikken, dat je kan selecteren wat je wel wil zien en wat niet per se nodig is. Ik ben nu wel even aan het zien, wacht he. Dat is met die kraan, dat snap ik. Dat is een omheining. Dat is containers. Dat is iets met een tractor. Dat zal van die bomen uitdoen zijn, maar dat, dat weet ik niet zo goed, maar dat kan echt aan mij liggen. Ik ga even terug naar die eerste pagina.

Verhardingen! Dat vind ik niet zo’n superduidelijk logootje vind ik. Dat is allemaal duidelijk. Transport, ah ja. Dat vind ik iets minder duidelijk, maar ik weet ook niet wat ik mij bij verhardingen specifiek moet voorstellen. Ja, dat logootje is voor mij iets minder duidelijk. Maar voor de rest, de andere logo’s wel.

I: Oké, verder nog iets van opmerkingen of bedenkingen?

R: Misschien, maar dat is dan misschien puur visueel, is dat hier de uitleg, in tegenstelling tot de rest, vrij lang is. Maar dat is puur visueel dan he. Maar ik zou dan misschien een soort van suggestie doen dat als je dan zou kunnen doorklikken daarop, dat er dan iets meer uitleg staat over het specifieke thema, boven uw foto’s bijvoorbeeld. En dat hier de uitleg dan iets beknopter is, omdat dit een overzichtje geeft van wat je allemaal biedt. Als je dan bijvoorbeeld zegt: “Ik wil een afspanning plaatsen,” dat je dan daarop doorklikt, er even een korte

Hoofdstuk 10: BIJLAGEN

121

uitleg komt. Hier mag een zin of twee staan he, maar dat de grotere uitleg daar komt en dan daar onder uw realisaties ofzo, denk ik. Als klant ga je wel specifiek op zoek naar een bepaalde dienst. Dus ik denk dat je die uitleg in een volgende stap wel kan geven. Want ik denk dat mensen die op deze site terecht komen, dat is waarschijnlijk ook met de intentie om iets van de diensten natuurlijk te willen, niet gewoon om de site te bekijken. Maar ik vind hem wel overzichtelijk, dat wel.

Op de eerste pagina wordt direct duidelijk wat Segro heeft te bieden, het staat er ook letterlijk, maar dat is heel visueel duidelijk en echt met kernwoorden. En je kan direct een contact zoeken met het bedrijf. Alleen juist de afspraak maken mag misschien nog iets anders. Want je hebt hier een offerte, en een vraag stellen kan je hier ook nog doen, maar echt een apart ding maken voor een afspraak.

Misschien moet dat via telefoon, dat weet ik niet zo goed. Ik zou persoonlijk niet weten als ik bijvoorbeeld wil zeggen: “Zou je eens willen komen kijken?” hoe ik dat dan zou doen. Zou ik dat dan via een online vraag doen? Zou ik dat mailen?

Dat weet ik niet zo goed. Als klant zal je wel een oplossing bedenken he, maar misschien daar ook iets duidelijker of zo mee doen. Maar voor de rest… Ja en hier ietsje groter (over locatiepin op map) denk ik, of iets duidelijker aangeven.

Voor de rest vind ik het wel een duidelijke site. Absoluut.

Mobile: R: Dus als ik het goed voor heb, dan klik je ergens op en ga je naar een volgende…

Het is geen applicatie he?

I: Nee, het is gewoon een mobiele website.

R: Maar dat staat dan niet zo ondereen waarschijnlijk? Of wel?

I: Hoe bedoel je?

R: Nu scroll ik naar beneden he. Dat klopt he?

I: Dat klopt.

R: Ja hier terug, nu wordt die tekst een heel scherm zal ik maar zeggen lang. Ik vind dat precies iets te veel. Als ik nu op die website zou klikken zou ik willen weten wat hij allemaal doet. En dan kom ik hier en krijg ik direct zo’n gigantische uitleg.

De tekstjes mogen misschien wat korter.

R: Als je hierop zou duwen, zou dat dan direct beginnen bellen, ja?

I: Ja, da’s de bedoeling.

R: Da’s wel goed. En hier direct naar uw mail. Dat zou praktisch zijn. Ja, hier zou opnieuw zo dat ding van die afspraak kunnen komen. Misschien een soort link naar uw agendaatje. Dat je een voorstel kan doen of een vraag van “Kan ik dan komen? Suggesties voor data bijvoorbeeld.

R: Het is wel goed dat dat contactgegeven altijd blijft staan. Dan is het zo precies op elk moment dat je denkt “Ja, nu ga ik hem contacteren,” dat je direct die link hebt en je niet meer moet gaan zoeken. Dat is wel strategisch slim gezien.

R: Realisaties. Ah ja, nu staat filter erboven. Oei, nu mis ik er eentje, kan dat?

122

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS

I: Ja, het is de bedoelingdat je bij de uiteindelijke versie kan scrollen.

R: Ah oke, ja. Ik zou die filters ook op de eerste pagina zetten denk ik. En ik vermoed dat je dan op dat kaartje kan klikken voor Google Maps?

R: Was dat nu daarnet een andere foto? (Over header homepage) Ja het leent zich wel beter dat hier een verticale foto komt natuurlijk. Ja ik vind het wel duidelijk, ik vind mijn weg wel. Ik denk dat het wel praktisch is, zeker hier, dat je gewoon kan doorklikken. (Over icons homepage) Anders moet ik helemaal terug naar boven scrollen om dan hier naar realisaties te gaan. Maar als ik nu meer info wil over de specifieke deelaspectjes, dan is het misschien duidelijker dat je hier direct kan klikken, in plaats van dat je naar realisaties eerst moet gaan. Dat je eerst wat meer uitleg krijgt over dat stukje, voor je naar de realisaties gaat. Dat is misschien hier wel praktisch, omdat je hier minder dat groot overzicht hebt dan op een computerscherm he. Iets gebruiksvriendelijker dat je meteen kan aanklikken. Ja, ik vind het wel duidelijk. Ik heb voor de rest geen specifieke opmerkingen.

I: En wat vind je van het menu? Is dat duidelijk?

R: Wacht he. Ik vind het wel, dat is dezelfde als op de desktopversie. Ik vraag me alleen af waarom die “Menu” hier staat? Dat is waarschijnlijk als je gewoon terug wilt? Dat snap ik niet zo goed. Home dat is logisch. Dat is ook logisch. (Over over ons) Contact, dan kom ik hier. Dat ding is misschien wel heel groot om vanboven mee te beginnen. (Over map) Ik zou precies als ik op contact kom eerst, hier dan he, niet per se voor op de website, maar hier, dat hier eerst het telefoonnummer en de mail staan. En dat je meer vanonder… Nu neemt dat zo een kaart in, en als je bijvoorbeeld niet de neiging zou hebben zoals ik om naar beneden te scrollen, omdat ik weet dat er iets komt, dan lijkt dat precies of je moet er sowieso naartoe rijden. Maar ja, dat zou nu echt niet zo slim zijn, maar bon, het kan wel. Dus dat je misschien zo dit als eerste zicht krijgt als je dat opent, die contactpagina.

I: En de plaatsing van het hamburgermenu? In de uiteindelijke versie zal dat menuutje altijd op dezelfde plaats blijven staan onderaan. Wat vind je van die plaatsing?

R: Het is sowieso goed dat je dat altijd op dezelfde plek zet. Ik heb het nu wel snel gevonden, dus ik heb niet de indruk dat dat een probleem is. Maar dat hangt er ook wel vanaf wat het formaat is van uw gsm. Want bij mij zou dat van mijn scherm vallen.

I: Dat past zich automatisch aan aan het scherm.

R: Ja, maar hier valt het er ook net onder, daarmee.

I: Dat is omdat dit nu geen echte site is.

R: Ah, oké. Ik vond het wel duidelijk. Ik had dat wel door. Ik vraag me alleen af of iedereen weet of zo’n icoontje voor menu staat. Ik vind van wel, maar dat is dan weer wat muggenzifterij. Maar misschien iets meer vanboven, dat het iets meer in het oog springt misschien? Ik weet het niet. Ik vind dat best wel duidelijk om eerlijk te zijn.

I: En het feit dat dat onderaan staat? Want normaal gezien staat dat altijd bovenaan.

R: Ja, daarmee dat ik dacht dat als het bovenaan staat, dat het iets meer in de kijker

Hoofdstuk 10: BIJLAGEN

123

staat. Dat je het iets sneller vindt. Nu staat het ook onder offerte. Als je niet echt door hebt dat dat een menu moet voorstellen. Ja misschien is het logischer dat dat hier (linksboven) of zo staat. Ik heb er in ieder geval geen probleem mee, maar ik kan me inbeelden dat dat logischer kan zijn. Ik heb er geen probleem mee, ik zal het zo zeggen.

I: Nog opmerkingen?

R: Niet echt nee.

De volledige gefilmde usabilitytests zijn terug te vinden via volgende links: Test met Chelsea Bovée: Site: https://youtu.be/Hj87SqbOkb0 Mobile: https://youtu.be/NLi-HZW2O-0 Test met Jochem Maes: Site: https://youtu.be/KH0-ycCB7oQ Mobile: https://youtu.be/M7dcqeJTJak Test met Rin Verstraeten: Site: Mobile: https://youtu.be/O8jd4NphDJA

124

INIAS VAN INGELGOM - THEMAONTWIKKELING WORDPRESS