Stageverslag_versie1

HET BEGINT BIJ

STRUCTUUR

VAN ONGESTRUCTUREERD MAGAZIJN NAAR EEN COMPLETE WEBSHOP!

Stageverslag:

n Thijs van Ude 08-12-2015

Het begint bij structuur | Pagina 1

Titelpagina Auteur Naam: Thijs van Uden Studentnummer: 2189393 E-mailadres: thijs.vanuden@student.fontys.nl Opleidingsinstituut: Fontys Hogeschool Eindhoven Major: ICT & Media Design Stagebegeleiders Naam: Jo-An Kamp E-mailadres: j.kamp@fontys.nl

HET BEGINT BIJ STRUCTUUR AUGUSTUS 2015 - JANUARI 2016

Naam: Erik Heijligers E-mailadres: e.heijligers@fontys.nl Eindopdracht:

www.123ventilatiesysteem.nl

Š 2015 Thijs van Uden

Het begint bij structuur | Pagina 2

Het begint bij structuur | Pagina 3

“Ik kan ken j i k g u r e t zeer n e e r a na ct� e j o r p d geslaag

Voorwoord Van 31 Augustus 2015 t/m 31 Januari 2016 heb ik met veel plezier stage gelopen bij Studio Frisselstein. Studio Frisselstein is een communicatiebureau gevestigd in het hartje van Veghel. Ze richten zich vooral op het bedenken en ontwikkelen van offline en online communicatieoplossingen zodat de klant zijn doel behaalt.

Tijdens mijn stageperiode bij Studio Frisselstein heb ik me voornamelijk bezig gehouden met het realiseren van een complete webshop voor 123ventilatiesysteem.nl.

Samen met Menno en Josine heb ik deze uitdaging met beiden handen aangenomen. De enorme hoeveelheid producten, zonder enige charme maakte het er niet makkelijker. Des te groter de uitdaging op om een mooie webshop te realiseren. Ik kan terugkijken naar een zeer geslaagd project waar beide partijen enorm veel van hebben opgestoken.

Het begint bij structuur | Pagina 4

Samenvatting Dankzij dit project heb ik mijn zelfstandigheid, onderzoeksvaardigheden, designkwaliteiten en kennis van online mogelijkheden (met name Wordpress) in korte periode enorm verbeterd.

Het is een erg leerzame periode geweest waarbij ik al mijn vaardigheden nodig had.

Graag wil ik een bijzonder woord van dank richten aan Josine van Berlo voor al haar waardevolle begeleiding, inspiratie en enthousiasme. Daarnaast wil ik ook graag van de mogelijkheid gebruik maken om Menno Meijer en Stef van der Loo te bedanken voor alle hulp en inzet die zij deze periode mij hebben gegeven. Tenslotte bedank ik uiteraard Thymen Kristen voor zijn vertrouwen dat hij mij deze periode heeft gegeven en alle positieve feedback. Allemaal hartelijk bedankt!

Om een nieuwe webshop te realiseren heb ik eerst de huidige webshop flink onder de loep genomen. De huidige webshop van 123ventilatiesysteem was ongeordend en niet volledig. Er stond veel summy tekst op de site en er stonden maar een paar producten online. Ook paste het huisstijl niet bij de gewenste uitstraling van het bedrijf.

Naar aanleiding hiervan ben ik onderzoek gaan doen naar de doelgroep en concurrentie van 123ventilatiesysteem.

Daarnaast heb ik de gekeken naar de doelgroep waar 123ventilatiesysteem zich op wil richten.

De vijf onderzoeksmethodes die ik heb gebruikt zijn veld, bieb, werkplaats, lab en showroom. Zo heb Zo moesten alle producten geteld en gecategoriseerd worden.

Ik wens u veel leesplezier.

Er moest een duidelijke structuur in de website komen zodat bezoekers zo snel mogelijk producten kunnen vinden. Er moesten betalingssystemen worden toegevoegd, er moest nagedacht worden over verzendmethodes, er moest een inlogsysteem komen en als laatste moest de hele site een nieuwe look and feel krijgen. Ook moest de site volledig responsive worden zodat hij op elk beeldscherm goed weergegeven wordt.Als laatste moest er nagedacht worden over SEO en eventele acties zoals advertenties, brochures of direct mailings om nieuwe bezoekers naar de website te krijgen.

Thijs van Uden

In dit verslag komen al deze onderwerpen uitgebreid aan bod.

Het begint bij structuur | Pagina 5

(Deze samenvatting is nog niet klaar. Hier ben ik nog niet over tevreden)

Verklarende woordenlijst

Inhoudsopgave

8

12

13

17

Het bedrijf Informatie over het stagebedrijf Studio Frisselstein uit Veghel waar ik vijf maanden met veel plezier heb mogen stagelopen.

Aanleiding De aanleiding van de opdracht om een complete webshop te realiseren voor 123ventilatiesysteem.

CSV bestand Een bestand dat een tabel omzet in een tekstbestand gescheiden door een komma.

Dummy tekst Een dymmy tekst is een ander woord voor faketekst.

8

10 14

De opdracht Een uitgebreide beschrijving van de huidige situatie en het doel van de opdracht.

Footer Onderste gedeelte van een website waarin bijvoorbeeld verwijzingen en navigatie staat.

Php Een scripttaal om objectgeoriĂŤnteerd te programmeren.

Pixels Elk gekleurd puntje in een scherm. Hoe meer pixels, hoe scherper het beeld.

Werkzaamheden Alle werkzaamheden die verricht zijn om tot het eindresultaat te komen.

34

Evaluatie Een korte evaluatie over mijn project en werkzaamheden bij Studio Frisselstein.

35

Literatuurlijst In deze lijst staan alle bronnen die ik heb gebruikt voor het schrijven van dit verslag.

Het begint bij structuur | Pagina 6

Eyecatcher Een gebruiksvriendelijk systeem dat je gebruikt om online aanpassingen te maken.

Plugin Een aanvulling van WordPress waardoor de site meer mogelijkheden of functies biedt.

15

18

SEO Search engine optimization.

Het actief optimaliseren van een website om het bezoek vanuit zoekmachines te verhogen.

26

WordPress Een gebruiksvriendelijk systeem dat je gebruikt om online aanpassingen te maken.

Het begint bij structuur | Pagina 7

Het bedrijf 2.1 Studio Frisselstein

Studio Frisselstein is een communicatiebureau gevestigd in het Business Centrum Frisselstein in hartje Veghel. Een groot aantal klanten zitten in dit gebouw gevestigd of komen uit de omgeving Veghel.

Ze richten zich vooral op het bedenken en ontwikkelen van communicatieoplossingen waarbij de klant zijn doel behaalt.

Dit doen ze door de sterke en efficiënte combinatie van communicatie, creatie en management. De kracht van Studio Frisselstein is dat ze traditionele communicatie laten samenwerken met moderne communicatie. Denk hierbij aan het doortrekken van brochures, folders en advertenties naar de website of Social Media.

p o e ti a ic n u m ij z “Com k n a maat d elstein” iss r F o i Stud

Bij Studio Frisselstein kun je terecht voor zowel online en offline communicatieproducten: een passende huisstijl, een logo en op maat gemaakt drukwerk.

Verder zijn ze gespecialiseerd in SEO en SEA

2.2 Rollen Josine van Berlo - Art Director

Menno Meijer - Projectmanager

Mathieu Maas - Ontwikkelaar

Josine zorgt voor de goede uitvoering van de opdracht en tegelijkertijd de creatieve kwaliteitsbewaking van de producten die ontworpen zijn naar de wensen van de klant.

Menno bewaakt projecten en het proces. Hij maakt (SMART) doelstellingen voor elk project en zorgt dat deze worden behaald. Daarnaast heeft hij veel contact met de klanten en zorgt voor een duidelijke en strakke planning.

Mathieu is na zijn stageperiode aangenomen als parttime ontwikkelaar en helpt mee met het bouwen van producten. Mathieu heeft veel kennis van Wordpress en is zeer handig met programmeren.

Het begint bij structuur | Pagina 8

Het begint bij structuur | Pagina 9

2.3 Organigram

Om een beter beeld te creëren van de organisatiestructuur van Studio Frisselstein heb ik een organigram gemaakt.

De Gastoudercentrale De Gastoudercentrale is de betrouwbare partner in gastouderopvang.

Ze bieden een compleet ondersteuningspakket met onder andere de gastoudermarktplaats, Opvangapp en een deskundige helpdesk.

Studio Frisselstein maakte een huisstijl en realiseerde een nieuwe website.

Verder verzorgen ze de communciatie, zowel online als offline en zorgen ze voor goede vindbaarheid d.m.v. SEO en SEA.

2.4 Werk

Om te laten zien waar Studio Frisselstein aan werkt heb ik het werk van drie belangrijke klanten uitgelicht.

Mobicel Verhuur Mobicel Verhuur is gespecialiseerd in het leveren, verhuren en installeren van koelcellen en vriescellen. Voor Mobicel Verhuur heeft Studio Frisselstein een nieuwe verfrissende website gemaakt. Ook alle foto’s van de koel- en vriescellen zijn gemaakt door Studio Frisselstein.

Verder verzorgd Studio Frisselstein de nieuwsbrieven, werken ze met Google Adwords en gebruiken SEO om beter in Google gevonden te worden.

Het begint bij structuur | Pagina 10

Visspecialiteiten Beekwilder Visspecialiteiten Beekwilder is dé visspeciaalzaak van Veghel en omstreken en zijn verkozen tot derde beste viswinkel van Nederland. Studio Frisselstein heeft een complete nieuwe website voor Beekwilder gemaakt. Daarnaast zorgen ze voor het ontwerp en drukwerk van alle binnen- en buitenreclame, visitekaartjes, menukaarten en verspreiden ze aanbiedingen via social media.

Het begint bij structuur | Pagina 11

123ventilatiesysteem 123ventilatiesysteem is een jong bedrijf in het hartje van Veghel. Het bedrijf zit in de bouwbranche en levert kwaliteitsproducten op het gebied van luchtventilatie en luchtcirculatie. Door het ruime assortiment en de lage verkoopprijs willen ze zich onderscheiden van de concurrentie. Het assortiment variëert van bochten, zadelstukken, kleppen, roosters, dempers tot beugels en nog veel meer.

Doelgroep De doelgroep van 123ventilatiesysteem bestaat uit installateurs, doe-het-zelvers en zzp’ers.

Installateur

Zij zorgen voor het inrichten en in stand houden van technische installaties in gebouwen.

Naast elektrische installaties werken ze ook vaak aan leidingen, sanitair, riolering en verwarming.

Doe-het-zelf Doe-het-zelvers zijn handige consumenten die een klus of opdracht liever zelf doen in plaats van hem uit te besteden aan een professional. Vaak om te besparen in de kosten of omdat ze het gewoon leuk vinden om te doen.

Zzp’er Een zzp’er werkt voor eigen risico als zelfstandige, heeft geen personeel in loondienst en vaak ook geen zakelijke partners. Uit onderzoek (“Zelfstandigen zonder personeel (zzp), z.j.) blijkt dat 1 op de 10 van de werkzame beroepsbevolking zzp’er is en dit aantal blijft groeien.

Het begint bij structuur | Pagina 12

Concurrentie Om een overzichtelijk beeld te creëren heb ik de concurrentie verdeeld in de groepen: groot, midden en klein. Hierbij heb ik gekeken naar: - - - -

De productgroepen en producten De algemene indruk van de website Het aantal vestigingen De bezorgkosten

Groot Wasco, Bergschenhoek en Wildkamp.

Deze bedrijven hebben een zeer uitgebreid assortiment (meer dan 10.000 producten), verzorgde websites en meerdere vestigingen. Producten worden pas bij een afname van rond de 950 euro gratis thuis bezorgd.

Midden Ventilatieweb en Ventilatieshop.

Deze bedrijven hebben een minder uitgebreid assortiment dan de grote concurrenten en hebben maar een vestiging.

Klein Ventilatorkopen en Ventilatieland. Dit zijn de kleinste concurrenten met het minste assortiment. Ze verkopen de meest standaard maten tot ø250 millimeter.

De producten worden al gratis geleverd bij afname vanaf 50 euro. Hierdoor geven ze een stukje service wat het lage assortiment compenseert. dan de grote concurrenten en hebben maar 450 een vestiging.

“W .000 asco” en 3 p 1 ve roduc te stig inge n n!

Het begint bij structuur | Pagina 13

De opdracht Huidige situatie

Om een beter beeld te krijgen van 123ventilatiesysteem heb ik eerst de huidige situatie flink onder de loep genomen.

Website Aan de huidige webshop zijn een hoop verbeterpunten die meteen opvallen.

Als eerste heeft de hele site een donkere uistraling. Vooral het menu en de header wat de eyecatchers van de website moeten zijn bevatten veel donker kleuren en hebben niet de uitstraling die een webshop zou moeten hebben.

Aanleiding van de opdracht

Onder het menu en de header staan een aantal producten weergegeven. Deze producten staan op willekeurig volgorde door elkaar zonder categorie of structuur. Ook is duidelijk te zien dat alle afbeeldingen een verschillend formaat hebben waardoor het een hele chaotische uitstraling heeft.

Hoe maak je een webshop?

De oude webshop van 123ventilatiesysteem was erg onoverzichtelijk en het was onmogelijk om op een geordende manier producten toe te voegen. Ook stond de site vol met dummy tekst.

Het was dus van groot belang dat er een nieuwe webshop kwam die een overzicht biedt van alle producten en categorieĂŤn die zij bieden.

Samen met Josine en Menno ben ik de uitdaging aangegaan om een nieuwe webshop voor 123ventilatiesysteem te realiseren. Ik had geen idee wat ik allemaal moest verwachten bij het maken van een webshop maar ik was ervan overtuigd dat dit me ging lukken.

Hoofdstuk 3 geeft alle details over de opdracht. Ook worden hier de doelen van de opdracht beschreven. In hoofdstuk 4 worden al mijn werkzaamheden beschreven. Dit gaat zowel over de hele look and feel als over de gebruiksvriendelijkheid en functies van de webshop.

Het begint bij structuur | Pagina 14

Het begint bij structuur | Pagina 15

De winkelwagen van de website is een duidelijke weerspiegeling van de rest van de pagina’s. De donkergroene kleuren komen ook hier weer terug.

Alle tekst is in het Nederlands terwijl de pagina zelf “shoppingCart” in het Engels is. Ook staat het blokje “winkelmand-totalen” twee keer onder elkaar wat onprofessioneel overkomt.

Ook op de FAQ pagina komen dezelfde onderwerpen weer aan bod. Hier worden zelfs nog donkerdere kleuren gebruikt wat een erg donkere en zware uitstraling geeft.

Sommige tekst in het Nederlands en de rest in het Engels. Ook bestaat deze pagina voor een groot deel uit dummy tekst.

Er zijn een aantal categorieën aangemaakt. Maar deze bevatten geen sub-categorieën dus in een categorie staan alle producten door elkaar. Een duidelijk voorbeeld hiervan is bij de categorie “bochten”.

Het is goed te zien dat de producten door elkaar staan zonder enige structuur.

Ook bevatten de producten een zeer korte productomschrijving en het is onmogelijk om meerdere aantallen in de winkelmand te doen. Ook komt de groene kleur weer terug in dit scherm.

Het begint bij structuur | Pagina 16

Magazijn Om een beter beeld te krijgen van alle producten en onderdelen van 123ventilatiesysteem ben ik een kijkje aan nemen in het magazijn. Het magazijn dat gevestigd is op het industrieterrein van Uden heeft een oppervlakte van zo’n 300m2. Toen ik binnenkwam besefte ik pas hoeveel en hoe groot de producten waren. Alle producten lagen netjes per categorie bij elkaar in grote dozen maar toch leek het alsof er totaal geen structuur in zat.

Het begint bij structuur | Pagina 17

Probleemstelling Uit mijn analyse zijn de volgende probleemstellingen gekomen:

Werkzaamheden

- - - - -

Voordat ik ben begonnen met het maken van de webshop heb ik samen met Thymen gekeken naar de nieuwe structuur. We hebben een aantal concurrenten bekeken en per website gekeken wat we mooi en vooral wat we bruikbaar vonden voor de nieuwe site voor 123ventilatiesysteem.

Dit hebben we samengevoegd en daar zijn een aantal schetsen uitgekomen die ik vervolgens heb gedigitaliseerd.

De huidige huisstijl komt niet overeen met wat 123ventilatiesysteem uit wil stralen.

Het is onmogelijk om subcategorieën te maken en alle producten staan door elkaar.

Alle productafbeeldingen variëren van formaat.

Het is onmogelijk om een aantal producten tegelijkertijd in te laden.

Er staat veel dummy tekst op de website.

3.2 Doel Het doel van mijn stageopodracht is om binnen een half jaar voor 123ventilatiesysteem een complete webshop te realiseren. De website moet minimaal voorzien zijn van de volgende punten: - Bezoekers kunnen snel producten vinden die onderverdeeld zijn in categorieën en

sub-categorieën.

- De webshop moet helemaal volledig zijn. Er staat nergens dummy tekst, er staan

betalings- en inlogsystemen op en alle producten zijn op de site te vinden.

- De producten kunnen in één keer worden ingeladen.

- De site heeft een vernieuwde huisstijl wat aansluit bij de gewenste uitstraling van

123ventilatiesysteem.

- Er moet goed gekeken worden naar SEO zodat de webshop makkelijker te vinden is via zoekmachines.

Een belangrijk onderdeel is dat de gebruiker snel een overzicht heeft van de producten die op de site staan. Al snel kwamen we tot de conclusie dat de belangrijkste categorieën op de hoofdpagina staan vermeldt. Als eyecatcher hebben we ervoor gekozen om de pagina te beginnen met een grote slider. Hierop kunnen we aanbiedingen plaatsen die de pagina compleet maken.

Wanneer je een categorie kiest krijg je de sub-categorieën te zien. Heeft deze categorie geen sub-categorieën dan worden alle producten van deze categorie getoond.

Het begint bij structuur | Pagina 18

Het begint bij structuur | Pagina 19

4.1 Huisstijl

Om de site een nieuw en fris uiterlijk te geven heb ik de huidige huisstijl van 123ventilatiesysteem aangepast. Ik ben begonnen met het zoeken van nieuwe kleuren. Dit nieuwe kleurgebruik heb ik doorgevoerd naar de website, het logo en vervolgens ook naar het briefpapier.

Wanneer alle producten worden getoond krijg je per product een beschrijving te zien. Ook kan je een aantal selecteren wanneer je meerdere producten wilt bestellen.

Kleurgebruik Samen met Thymen hebben we gekeken naar de gewenste uitstraling. We vonden het belangrijk dat de nieuwe webshop professionaliteit en betrouwbaarheid uitstraalt.

Ik ben gaan kijken naar de betekenis van kleuren en al snel werd mij duidelijk dat de combinatie van blauw en wit goed past bij de gewenste uitstraling van 123ventilatiesysteem (Thuijs, L, 2015) . Vervolgens ben ik gaan kijken naar de concurrentie (Wildkamp, Wasco, Ventilatieshop, Bergschenhoek). Deze sites gebruiken allemaal als basiskleuren blauw en wit. Mijn gevoel werd hier dus sterk bevestigd.

Vervolgens ben ik gaan zoeken naar de juiste kleur blauw. Na veel kleuren testen ben ik uitgekomen op #00A3EO (RGB 0, 163, 224).

Dit is een heldere, frisse kleur blauw wat mooi te combineren is met zwart en wit. In de volgende afbeeldingen is duidelijk het verschil te zien tussen het oude en de nieuwe kleuren van de website.

Oud kleurgebruik

Nieuw kleurgebruik

Het begint bij structuur | Pagina 20

Het begint bij structuur | Pagina 21

Het Logo Om de hele site een nieuwe look and feel te geven heb ik ook het logo aangepast. Ik heb het nieuwe kleurgebruik toegepast in het nieuwe logo wat nu veel beter past bij de website.

Slider De slider is de eyecatcher van de website en bepalend voor het eindresultaat. Samen met Thymen en Josine hebben we drie onderwerpen samengesteld die we belangrijk vonden om op te laten vallen op de homepagina.

Onderwerp 1 Het verkopen van SAFE producten Onderwerp 2 Alle klanten krijgen 10% korting bij de eerste bestelling Onderwerp 3 Alle prijzen op de site zijn excl. 21% BTW

In het begin was Thymen nog niet overtuigd over het nieuwe logo. Hij vond het oude logo prima en zag geen reden voor een nieuwe. Toen heb ik met Thymen rond de tafel gezeten en uitgelegd dat de site nu mooier wordt en dat hij met het nieuwe design veel meer betrouwbaarheid uitstraalt en dat de site daar een stuk professioneler van wordt. Gelukkig heb ik hem daarmee overtuigd om het nieuwe logo te gebruiken. Als aanpassing vroeg hij of ik “.nl�kon toevoegen aan het logo zodat er nog meer naar de site verwezen wordt.

Briefpapier Om nog zakelijker over te komen heb ik nieuw briefpapier ontworpen.

Het briefpapier wordt voornamelijk gebruikt voor de facturen en als pakbon.

Ik heb eerst wat voorbeelden bekenen online om inspiratie op te doen. Ik besloot om het papier rustig te houden en natuurlijk heb ik de nieuwe huisstijl doorgevoerd in het briefpapier.

Thymen was erg tevreden en het nieuwe design werd meteen goedgekeurd.

Het begint bij structuur | Pagina 22

We hebben ervoor gekozen om onderwerp 3 in een banner te plaatsen omdat het belangrijk is dat de bezoekers dit zien en de banner blijft altijd in beeld. Om deze banner te maken heb ik eerst wat voorbeelden gezocht. Vervolgens heb ik via Photoshop een design gemaakt. Ik heb ervoor gekozen om alleen de kleuren wit en blauw te gebruiken omdat de slider de echte eyecatcher van de site moet zijn.

De huidige slider was donker, had weinig inhoud en werd bedekt door een watermerk.

Het was nodig dat deze vervangen moest worden zodat de site een nieuwe uitstraling kreeg.

Het begint bij structuur | Pagina 23

Allereerst ben ik begonnen met het ontwerpen van twee nieuwe sliders.

Samen met Josine heb ik opnieuw naar de sliders gekeken en weer twee nieuwe ontwerpen gemaakt. Josine heeft mij hierbij geholpen en tips gegeven om ondanks deze producten toch een mooi design te maken. Deze sliders zien er een stuk beter uit en zijn echte eyecatchers voor de webshop. Het was een hele uitdaging maar het was zeker de moeite waard. Ik heb hier veel van geleerd en ben zeer tevreden met het eindresultaat.

Dit is al een hele verbetering ten opzichte van (t.o.v.) de eerste slider maar toch was ik hier nog niet helemaal over tevreden. Ik vond het lastig om een mooie slider te maken omdat de ventilatieproducten totaal geen charme hebben.

Het begint bij structuur | Pagina 24

Het begint bij structuur | Pagina 25

Lettertype Een lettertype stijl helpt om de layout van de website te verbeteren en bij te dragen aan de algehele stijl van de website. Het lettertype van een website is erg bepalend voor de algemene stijl. Een juist lettertype in combinatie met een juiste layout zorgt ervoor dat de leesbaarheid sterk vergroot wordt.

Het lettertype dat ik heb gekozen is "Lato”. Lato is een schreefloos lettertype ontworpen in 2010.

Het is een makkelijk leesbaar lettertype dat vooral online veel gebruikt wordt. Uit onderzoek (Awwwards-team, 2013) blijkt dat Lato in de top 20 online lettertypes staat.

“ WEB DESIGN IS

95%

Productprijs 123ventilatiesysteem zit zo’n 30-40% onder de verkoopprijs van de concurrentie. Dit kunnen ze realiseren vanwege het grote magazijn en de hoeveelheid waarmee ze inkopen. Omdat ventilatiesystemen bij elk bedrijf van dezelfde kwaliteit is sta je sterk wanneer je goedkoper bent dan je concurrentie. Hierdoor hebben we ervoor gekozen om dit voordeel ook uit te stralen op de website. Een goed voorbeeld hiervan is dat alle producten op de website in de aanbieding zijn. Elk product heeft een doorgestreepte oude prijs en een duidelijkere nieuwe prijs.

Om dit te realiseren ben ik diep in de php code gedoken. Ik moest zorgen dat over elke afbeelding de oude en nieuwe prijs verscheen. Vervolgens heb ik dit in een blauw rondje gezet zodat het de aandacht trekt van de bezoeker. In het voorbeeld hieronder is duidelijk te zien welke stappen ik heb doorlopen. Het heeft flink wat tijd gekost maar ik er ook veel van geleerd.

TYPOGRAPHY “ (Michael, 2014)

Productafmeting Om alle afbeeldingen netjes naast elkaar te zetten is het belangrijk dat alle productfoto’s even groot zijn. Ik heb gekozen om alle afbeeldingen vierkant te maken met een hoogte en breedte van 300 pixels.

Om alle afbeeldingen nog mooier te krijgen heb ik de afbeeldingen voorzien van witte achtergrond.

Dit oogt mooier en geeft de pagina meer rust.

Het begint bij structuur | Pagina 26

Het begint bij structuur | Pagina 27

et i z e t i s b e “De w n e k j i l e g e er d ” t i u r a a b w betrou

4.2 Gebruiksvriendelijkheid

Om de bezoekers het zo makkelijk en duidelijk mogelijk te maken heb ik veel aandacht besteedt aan de gebruiksvriendelijkheid van de website. Om de gebruiksvriendelijkheid te testen heb ik een gebruikerstest gehouden met Roy Koolen. Roy Koolen is 25 jaar en sinds 4 jaar runt hij samen met zijn vader een installatiebedrijf. Regelmatig moet hij ook ventilatiesystemen monteren die hij online besteldt. Om te kijken hoe bezoekers door de website navigeren heb ik Roy een aantal opdrachten gegeven die hij op de site moest uitvoeren.

Uit dit onderzoek (Bijlage 1) kwamen een aantal resultaten naar voren die ik vervolgens heb aangepast om de gebruiksvriendelijkheid van de website te optimaliseren. Roy had een paar tips en verbeterpunten maar over het algemeen was hij zeer positief over de website. “De website ziet er degelijk en betrouwbaar uit”.

Aantal Om makkelijk grote aantallen te bestellen heb ik ervoor gezorgd dat de bezoeker meerdere producten in een keer kan toevoegen in de winkelwagen. Het aantal staat standaard op 1 en kan met een druk op de knop worden aangepast. Het product wordt pas in de winkelwagen toegevoegd wanneer er op “bestellen” wordt gedrukt. Deze functie kijkt ook naar het aantal producten op voorraad zodat er nooit producten worden besteld die niet op voorraad zijn. Ook uit de gebruikerstest met Roy is duidelijk te zien dat bezoekers dit ook verwachten en gebruiken op een website

Betalingen De bezoekers kunnen kiezen om de producten contant te betalen bij afhalen of te betalen met Ideal. Om Ideal te implementeren hebben we contact opgenomen met Sisow.

Sisow is gespecialiseerd in digitale betaalmogelijkheden en met een paar simpele handelingen was Ideal geïmplementeerd op de website.

Het begint bij structuur | Pagina 29

Bezorging Omdat PostNL werkt met maximum lengte van 176cm en veel producten een stuk groter zijn heeft Thymen ervoor gekozen zijn pakketten zelf te gaan bezorgen. Om alle kosten te berekenen heeft Thymen aan de hand van postcodes zijn bezorgtarief opgesteld die ik heb doorgevoerd in de site.

Responsive design A.d.h.v. de postcode van de gebruiker weet de site hoeveel de besteller extra moet betalen om de producten te laten bezorgen. De klant kan er ook voor kiezen om de producten gratis op te halen. Vanaf 400 euro bezorgd Thymen de producten gratis. Ook dit wordt automatisch berekend en weergegeven in het afrekenscherm.

Van Thymen kreeg ik de vraag of het mogelijk was dat de gebruiker aan kon geven wanneer het product bezorgd kan worden. Dit heb ik gerealiseerd d.m.v. de “order delivery date� plugin. Hierin heb ik aangegeven dat er alleen maandag t/m vrijdag bezorgd wordt. Ook wordt deze informatie meegestuurd in de mail zodat zowel Thymen als de klant hiervan op de hoogte wordt gebracht.

Het begint bij structuur | Pagina 30

Responsive Hoogstwaarschijnlijk (moet nog blijken uit onderzoek) wordt de website merendeel bezocht via een pc of laptop . Toch is het belangrijk dat de site volledig responsive is. Elke gebruiker moet de site zo optimaal mogelijk te zien krijgen voor de beste beleving en gebruiksgemak.

Het begint bij structuur | Pagina 31

Producten uploaden Omdat het enorm veel werk is om alle producten één voor één op de site te plaatsen ben ik gaan zoeken of het mogelijk is om deze producten per categorie te uploaden. Er zijn een aantal plugins die beweren deze optie makkelijk te kunnen maar dit bleek een stuk ingewikkelder dan verwacht. Na een aantal plugins te hebben geprobeerd kwam ik uiteindelijk op “All import”. Met deze plugin was dit eindelijk mogelijk maar ook hier kwam ik flink wat problemen tegen. Ik heb eerst testbestanden geupload om te begrijpen hoe deze plugin werkte en waar ik alle velden moest plaatsen. Al snel kwam ik erachter dat ik alleen maar .CSV bestanden kon gebruiken en wanneer ik afbeeldingen ging uploaden moest ik eerst in broncode zoeken waar de producten kwamen te staan zodat ik de juiste afbeeldingen aan kon roepen.

Toen dit eindelijk perfect was gelukt heb ik voor Thymen een opzet gemaakt hoe zijn bestand eruit moest komen te zien en dit heeft hij keurig per categorie aangeleverd in een Excel bestand.

Dit Excel bestand kon ik vervolgens exporteren naar een .CSV bestand zodat ik hem kon uploaden op de site.

In het Excel bestand stond de volgende informatie - Categorie - Sub categorie - Sub sub categorie (optioneel) - Productnaam - Aantal (voorraad) - Productomschrijving - Doorgestreepte prijs - Prijs

In totaal staan er 531 verschillende producten op de site onderverdeeld in 54 categorieën, 8 hoofdcategorieën en 46 subcategorieën.

Deze bestanden heb ik per hoofdcategorie geupload op de site. Vervolgens heb ik alle categoerieën voorzien van bepaalde instellingen en de juiste afbeeldingen. Elk product is voorzien van een naam, oude prijs, nieuwe prijs, afbeelding en een uitgebreide beschrijving.

Het begint bij structuur | Pagina 32

Het begint bij structuur | Pagina 33

Evaluatie

Literatuurlijst Awwwards-team. (2013, 19 juni). 20 Best Web Fonts from Google Web Fonts and font-face [Blogpost]. Geraadpleegd van http://www.awwwards.com/20-best-web-fonts-from-googleweb-fonts-and-font-face.html Michael, S. (2014, 26 februari). Web Design Typography & Why it IS a Big Deal [Blogpost]. Geraadpleegd van http://webdesignledger.com/web-design-typography-why-it-is-a-big-deal Thuijs, L. (2015, 15 augustus). Betekenis van kleuren in je huisstijl.

Geraadpleegd van http://lindathuijs.nl/betekenis-van-kleuren-in-je-huisstijl/ Zelfstandigen zonder personeel (zzp). (z.j.). Geraadpleegd van https://www.rijksoverheid.nl/onderwerpen/zelfstandigen-zonder-personeel-zzp

Het begint bij structuur | Pagina 34

Het begint bij structuur | Pagina 35

Bijlage 1 Roy Koolen is 25 jaar en komt uit Keldonk.

Sinds 4 jaar runt hij samen met zijn vader een eigen installatiebedrijf in Erp. Regelmatig moet hij ventilatiesystemen monteren die hij online besteld.

Roy past daarom perfect bij de doelgroep.

Met Roy heb ik een gebruikerstest uitgevoerd. Ik heb hem de website voorgelegd en hem een aantal opdrachten laten uitvoeren. Het beeldscherm is hierbij gefilmd zodat de test makkelijker te analyseren is.

Opdrachten 1.

Stop één koppelstuk diameter 200mm in je winkelwagen en reken deze af.

2.

Maak een account aan.

3.

Stop de volgende producten in je winkelwagen

- Één SAFE T-stuk 90º diameter 150-150mm

- Éen Spirobuis diameter 500mm Lengte=3000mm

- Drie SAFE ophangbeugels diameter 315 4.

Reken deze producten af en gebruik je persoonlijke kortingscode. Geef aan dat je de producten zelf wilt afhalen.

5.

Je hebt een vraag over een bepaald product. Neem contact op met 123ventilatiesysteem.

De test is te bekijken op: https://www.youtube.com/watch?v=pgq7epjz120&feature=youtu.be

Het begint bij structuur | Pagina 36

Vragenlijst 1.

Wat is je algemene indruk van de website?

De website ziet er heel netjes en overzichtelijk uit. Er zitten mooie afbeeldingen in en het kleurgebruik past goed bij de producten.

2.

Vind je de website betrouwbaar overkomen? Waarom wel en/of niet?

Ja, hij ziet er professioneel uit. Rustig qua kleur en de site is een mooi geheel.

3.

Vind je het makkelijk om producten te bestellen? Waarom wel en/of niet?

Ja, omdat er duidelijke afbeeldingen bijstaan. Zo weet je precies dat je het goede product hebt. Ook is het fijn dat rechtsboven je winkelwagen wordt getoond met alle producten die hierin zitten.

4.

Vind je dat je makkelijk een account aan kan maken? Waarom wel en/of niet?

Ja. In de manubalk staat duidelijk de account link. Ook een account aanmaken werkt goed en is erg duidelijk.

5.

Zou je op deze site zelf producten kopen? Waarom wel en/of niet?

Ja, ik zou hier gerust producten durven kopen. De website ziet er degelijk en betrouwbaar uit.

6.

Wat vind je van het kleurgebruik?

Rustig, dus goed.

7.

Heb je verder nog opmerkingen?

Misschien is het een idee om bovenin de website “welkom R. Koolen” te laten zien wanneer ik ben ingelogd. Dan weet de gebruiker zeker dat hij is ingelogd en dit maakt de site nog persoonlijker.

Resultaten Uit het onderzoek zijn de volgende resultaten naar voren gekomen.

1.

Er zijn nog een aantal links die doorverwijzen naar de test-site. Op het filmpje (1.27min.) is duidelijk te zien wanneer Roy op verbindingsstukken klikt (1.27 min.) hij doorverwezen wordt naar de andere site. Gelukkig heeft Roy dit zelf niet in de gaten maar dit moet niet kunnen. Deze fout heb ik meteen aangepast zodat dit niet meer kan gebeuren.

2.

Toen Roy de opdracht kreeg om een koppelstuk te bestellen zocht hij naar “sok”. Omdat sok nergens beschreven staat kreeg hij geen zoekresultaten. Gelukkig kon hij het product daarna wel makkelijk vinden maar als uit meerdere onderzoeken blijkt dat er meer naar deze zoektermen wordt gezocht moet dit worden aangepast.

3.

De opdracht was om bepaalde producten te bestellen en aan te geven dat hij de producten zelf gratis wil afhalen. Echter kon Roy nergens vinden waar dit moest.

Hij was op de goede pagina maar keek telkens over de dropdown balk heen. Het is een kwalijke zaak wanneer de bezoeker een functie niet kan vinden. Daarom heb ik dit meteen aangepast en de dropdown balk veranderdt in keuze rondjes.

4.

Het viel Roy niet meteen op dat sommige product-pagina’s uit meerdere pagina’s bestaan.

Dit moet wel duidelijk zijn dus ook dit is inmiddels aangepast. Ik heb de pagina-nummering blauw gemaakt zodat ze duidelijker te zien zijn.

Het begint bij structuur | Pagina 37

Het begint bij structuur | Pagina 38

Het begint bij structuur | Pagina 39

Het begint bij structuur | Pagina 40

Het begint bij structuur | Pagina 41

Het begint bij structuur | Pagina 42

Het begint bij structuur | Pagina 43