Test & Feedback applicatie Onderzoek naar testmethodes en het verzamelen van feedback binnen Studio Stomp
Tim Goosens (500617030) Communication and Multimedia Design HVA Begeleider: Robert van Boeschoten Amsterdam, 9 juni 2014
Voorwoord Voor u ligt mijn afstudeerrapport “Test &
testen en hun professionele input. Als laatst,
Feedback tool”. Een onderzoek naar het
maar zeker niet als minst, gaat mijn dank uit
huidige testproces van Studio Stomp en
aan mijn eerste lezer Robert van Boeschoten
het testen van websites. Dit eindrapport is
en tweede lezer Charlie Mulholland van de
opgesteld in het kader van mijn afstuderen
HVA, die mij altijd weer op het juiste spoor
binnen de opleiding Communication en
kregen als ik was afgedwaald.
Multimedia Design aan de HVA. Tim Goosens Dit onderzoek is tot stand gekomen in
Wormer, 1 juni 2014
samenwerking met Studio Stomp, het bedrijf waar ik nu 1,5 jaar werk en stage heb gelopen. Toen ik bij Studio Stomp binnenkwam teste ik de producten die ik maakte niet tot zelden. Dit is in een jaar tijd omgeslagen van het niet testen naar het schrijven van een onderzoeksrapport over testen en het maken van een feedback en test applicatie. Graag wil ik iedereen bij Studio Stomp bedanken voor de tijd die zij in mij hebben gestoken om mij te helpen met het tot stand komen van dit rapport en mijn eindproduct. Verder gaat mijn dank uit naar Avinash Changa van DSRPT, Dennis Maij van We Are Bold en Bas van Bokhorst van GreenBerry die mij enorm hebben geholpen met interviews,
1
Managementsamenvatting Dit onderzoeksrapport is opgesteld met als
gedaan naar verschillende testmethodes en
doel het huidige test- en feedbackproces van
daaruit is gebleken dat een website op twee
Studio Stomp te optimaliseren door middel
manieren getest dient te worden. Aan de hand
van een online applicatie. Studio Stomp
van mijn onderzoek zijn er eerste schetsen
zou graag een applicatie hebben waarin zij
gemaakt voor de applicatie en is er een paper
een website kunnen testen en waar de klant
prototype uitgevoerd met medewerkers van
feedback achter kan laten.
Studio Stomp.
Probleem
Applicatie
Studio Stomp is een bedrijf dat
Op basis van de paper prototype zijn er
gespecialiseerd is in het ontwikkelen
wireflows en ontwerpen gemaakt. De
van business-to- consumer websites
ontwerpen zijn omgebouwd tot een werkend
en applicaties. Zij werken samen met
prototype waarin alle functies die vooraf
reclamebureaus als Eigen Fabrikaat, Fitzroy
waren opgesteld inzitten. Na het bouwen
en Rapp. Om hoogwaardige kwalitatief
van de applicatie zijn er tests uitgevoerd met
goede websites in de markt te zetten dient er
Studio Stomp en haar klanten.
uitvoerig getest te worden. Het huidige testen feedbackproces is verre van ideaal. Studio
Advies
Stomp omschrijft het huidige proces als
Uit deze tests zijn enkele punten naar boven
onvolledig, tijdrovend en foutgevoelig.
gekomen die de applicatie verbeteren, maar waar onvoldoende tijd voor beschikbaar was
Onderzoek
om te verwerken in de eerste versie van de
Om meer inzicht te krijgen in het huidige
applicatie. De huidige applicatie dient als
proces en waar de knelpunten liggen, zijn er
proof of concept, maar met een paar
interviews gehouden met medewerkers van
verbeteringen en een toevoeging van een
Studio Stomp en de klant. Er is onderzoek
backend systeem heeft de applicatie de
2
potentie om het test- en feedbackproces van Studio Stomp drastisch te verbeteren.
Conclusie De applicatie ondersteunt zowel functionele tests, aan de hand van een checklist, en een usability test door middel van user scenario’s. Door slim in te spelen met de nieuwste technieken is het mogelijk om binnen de applicatie een website te bekijken en daar feedback op te geven met behulp van screenshots en browser gegevens. Zo is het voor Studio Stomp meteen duidelijk waar het probleem zich voordoet. De klant hoeft op zijn beurt niet meer zelf achter de browser gegevens aan en kan altijd terughalen wat er met zijn feedback is gedaan. Alle functionaliteiten binnen de applicatie zorgen ervoor dat het test- en feedback proces binnen Studio Stomp sneller, eenvoudiger en overzichtelijker verloopt.
3
Inhoudsopgaven Inleiding 7
Concurentie analyse
23
1.1 Studio Stomp
7
5.1 Cage App
23
1.2 Probleemstelling
7
5.2 Track Duck
24
1.3 Onderzoeksvraag
8
5.3 Launchlist
25
1.4 Deelvragen
8
5.4 UserTesting
26
1.5 Indeling rapport
8
5.5 Conclusie
27
1.6 Begrippenlijst
9
Waarom testen?
28
Probleemsituatie 10
6.1 Waarom testen belangrijk
2.1 Onvolledig
10
is volgens Steve Krug
2.2 Tijdrovend
10
6.2 Waarom test
2.3 Chaotisch
10
Studio Stomp?
2.4 Doelstelling
11
6.3 Het belang van de
2.5 Oplevering
11
klant en gebruikers
29
De doelgroep
13
6.4 Conclusie
30
Functionele eisen
28 29
32
3.1 Testsituatie Studio Stomp
13
3.2 Testplan
13
7.1 Projecten
32
3.3 Hoe test de klant
14
7.2 Feedback
32
3.4 Knelpunten
14
7.3 Tests
32
3.5 Conclusie
15
7.4 Agenda
32
7.5 Randvoorwaarden
33
Testmethodes 16
Schetsen 34
4.1 Usability testing
16
4.2 User scenario’s
17
8.1 Inspiratie
34
4.3 Functioneel testen
19
8.2 Eerste schetsen
35
4.4 A/B testing
20
8.3 Gedetailleerde schetsen
35
4.5 Prototyping
21
8.4 Paper prototype
36
4.6 Conclusie
22
8.5 Conclusie
37
4
Interactie ontwerp 9.1 Wireflow
Functionele prototype
38 38
39
10.1 Stappen
39
10.2 Prototype
39
10.3 Conclusie
40
Ontwerp 41
A. Interviews
57
Interview Michel Stomp en Jelleke Raats
57
Interview Michel Stomp
59
Interview Avinash Changa (DSRPT, We Make VR)
61
Interview Dennis Maij (We Are Bold)
65
11.1 Dashboard
41
Interview Bas van Brokhorst
11.2 Project pagina
42
(GreenBerry) 67
11.3 Project detail pagina
42
11.4 Bekijk project
42
11.5 Feedback van het project
43
11.6 Test overzicht pagina
43
11.7 Checklist test
43
11.8 User scenario test
44
11.9 Test uitslag
44
11.10 Agenda
45
De applicatie
46
12.1 Tools
46
12.2 Bouwproces
46
12.3 Testresultaten
46
B. Testresultaten
70
Paper prototype testresultaten 70 Testresultaten Studio Stomp
70
Testresultaten Avinash Changa (DSRPT, We Make VR)
70
Testresultaten Dennis Maij (We Are Bold)
71
C. Testplan
72
D. Wireflow
76
E. Scherm ontwerpen
77
Conclusie 49 Advies 51 14.1 Backend
51
14.2 Features
51
Tot slot
53
Bronnenlijst 54
5
Probleemstelling Hoofdstuk 1 - Inleiding Hoofdstuk 2 - Probleemsituatie
Inleiding Mijn afstudeeropdracht is in samenwerking gemaakt met Studio Stomp. De doelstelling van het rapport en product is om het huidige testproces van Studio Stomp te optimaliseren.
1.1 Studio Stomp
1.2 Probleemstelling Bij Studio Stomp kijken ze altijd hoe ze zichzelf kunnen verbeteren en hun marktpositie kunnen versterken. Studio Stomp beschouwt de samenwerking tussen de klant als één van de belangrijkste aspecten
Studio Stomp is een bedrijf dat
van het proces. Echter is dit een
gespecialiseerd is in het ontwikkelen van
tijdrovende en uitdagende klus. Er komt veel
business-to-consumer webapplicaties. Zij
e-mail en belverkeer bij kijken. Op dit
werken samen met reclamebureaus als
moment heeft Studio Stomp geen centrale
Eigen Fabrikaat, Fitzroy en Rapp. Ze leveren
plek waar klanten hun feedback kunnen
professionele webapplicaties die bijdragen
afgeven en testresultaten kunnen delen. Bij
aan sterke cross mediale campagnes. Studio
Studio Stomp wordt er voornamelijk
Stomp is gelegen in Amsterdam aan de
functioneel getest. Ook de klant test in het
Willem de Zwijgerlaan. Opgericht in 2008,
huidige proces alleen functioneel. Studio
door Michel Stomp en Benjamin de Wit,
Stomp omschrijft het huidige testproces als
was Studio Stomp van origine een Flash
onvolledig, tijdrovend en foutgevoelig.
development bureau. Al snel ontdekte Studio Stomp dat Flash werd ingehaald door HTML 5 en CSS 3 en hebben zij Flash development laten vallen. Studio Stomp was één van de eerste webdevelopment bureau’s in Nederland die zich volledig richtte op responsive webdesign. Op dit moment werken er ongeveer tien man bij Studio Stomp.
7
1.3 Onderzoeksvraag
•
applicatie en welk belang hebben zij hierbij?
Aan de hand van de probleemstelling is de volgende onderzoeksvraag gedefinieerd:
Wie heeft er baat bij het testen van een website of (Zie hoofdstuk 6. Waarom testen?)
•
Wat draagt testen bij aan het gewenste resultaat van de klant? (Zie hoofdstuk 6. Waarom testen?)
Hoe kan een online
•
Aan welke eisen moet de testtool voldoen,
testtool bijdragen aan het
zodat het voor Studio Stomp en haar klanten,
optimaliseren van het test- en
(Zie hoofdstuk 7. Functionele eisen)
feedbackproces van Studio Stomp zodat het voor Studio Stomp en haar klanten gemakkelijker wordt te testen en feedback te leveren? 1.4 Deelvragen Om tot een goed onderbouwd antwoord te komen op de onderzoeksvraag zijn de volgende deelvragen opgesteld: •
•
Welke onderdelen van het ontwikkelproces worden
gemakkelijk is feedback te leveren?
1.5 Indeling rapport Het rapport is in drie stukken verdeeld. Het eerste deel gaat over de probleem situatie bij Studio Stomp (Hoofdstuk 1. Inleiding en hoofdstuk 2. Probleemsituatie). Het tweede deel zal uit het onderzoek bestaan welke een antwoord geeft op mijn eerste vijf deelvragen (Hoofdstuk 3. Doelgroep, hoofdstuk 4. Testmethodes, hoofdstuk 5. Concurrentie analyse en hoofdstuk 6. Waarom testen?). Het laatste deel zal antwoord geven op deelvraag 6
getest en feedback opgegeven?
en mijn onderzoeksvraag (Hoofdstuk 7.
(Zie hoofdstuk 3. Doelgroep)
Functionele eisen, hoofdstuk 8. Schetsen,
Waar zitten volgens de medewerkers van Studio
hoofdstuk 9. Interactie ontwerp, hoofdstuk
Stomp de knelpunten bij het huidige test- en
10. Ontwerp & hoofdstuk 11. De applicatie).
feedbackproces? (Zie hoofdstuk 3. Doelgroep) •
Welke testmethodes zijn er om een website of applicatie te testen voordat deze live gaat en welke methodes worden er in andere testtools gebruikt? (Zie hoofdstuk 4. Testmethodes & 5. Concurrentie analyse)
8
1.6 Begrippenlijst Ter verduidelijking worden er hieronder enkele worden en afkortingen uitgelegd die terug komen in mijn rapport: IXO: IXO is een afkorting die door Studio Stomp wordt gebruikt voor interaction design. Front-end: Voorkant van de applicatie, dit is wat de gebruikers zien. Back-end: Achterkant van de applicatie, dit is waar Studio Stomp projecten en tests kan toevoegen aan de applicatie. Iteratief proces: Een iteratief proces is een proces waarbij onderdelen zich stelselmatig herhalen. Scrum: Scrum is een ontwikkel methode waar door middel van korte sprints en in teams, producten worden gemaakt. OS: Afkorting voor operating system, ook wel besturingssysteem genoemd. Dit kan Windows, Mac OSX of Linux zijn.
9
Probleemsituatie Elk product, of dit nou een website,
om alle testresultaten door te nemen. Dit is
webapplicatie, mobiele app of een Facebook
een tijdrovende klus en een testcyclus kan
app is, moet bij Studio Stomp getest worden.
hierdoor een halve tot hele dag duren. Dit is
Helaas is het huidige testproces van Studio
kostbare development tijd die veel beter
Stomp niet optimaal en gaat er veel tijd
gebruikt zou kunnen worden in het
verloren. Tijdens interviews met de creative
verbeteren van het product.
director en project manager bij Studio Stomp zijn er drie knelpunten naar boven
2.3 Chaotisch
gekomen van het huidige proces.
Als Studio Stomp zijn producten laat testen
2.1 Onvolledig
door de klant kunnen de testresultaten op verschillende manieren terug worden
Het huidige testproces is onvolledig. Er
gekoppeld. Sommige klanten sturen een
worden alleen functionele tests uitgevoerd en
e-mail met openstaande punten, andere
vaak worden de test uitgevoerd door de
sturen een Word document door en sommige
developers die ook aan het project hebben
geven alle resultaten door via de telefoon.
gewerkt. Developers die aan het project
Studio Stomp heeft op dit moment geen
hebben gewerkt weten precies wat de website
centraal systeem waar alle testresultaten
moet doen en waar alles staat. Zij kunnen
worden verzameld. Hierdoor is het voor
geen valide gebruiksvriendelijkheid tests
Studio Stomp ook moeilijk om testresultaten
uitvoeren.
terug te halen en tests te baseren op voorgaande tests.
2.2 Tijdrovend Studio Stomp werkt aan de hand van zogeheten testplannen. Deze testplannen worden door alle testgebruikers ingevuld en
De testcyclus kan een halve tot hele dag duren.
na het testen wordt er een meeting gehouden
10
2.4 Doelstelling De doelstelling van mijn tool is om het testen feedbackproces te optimaliseren. Het moet mogelijk zijn om in de tool een project te bekijken, feedback te leveren en verschillende tests uit te voeren. Voor de klant moet het gemakkelijk zijn feedback achter te laten en overzichtelijk zijn wat er met de feedback wordt gedaan. Voor Studio Stomp moet het makkelijk zijn tests uit te voeren en het test- en feedbackproces minder tijd te laten kosten.
2.5 Oplevering Ik zal een product opleveren waarvan alleen de voorkant werkt. Het product dient als proof of concept en moet de belangrijkste functies bevatten (zie hoofdstuk 7). De achterkant van de applicatie valt buiten de scope. Wel is de applicatie zo gebouwd dat het redelijk gemakkelijk is om een achterkant te koppelen aan de voorkant. Er is een interaction design in de vorm van een wireflow gemaakt, design en een volledig werkend prototype.
11
Onderzoek Hoofdstuk 3 - De doelgroep Hoofdstuk 4 - Testmethodes Hoofdstuk 5 - Concurentie analyse Hoofdstuk 6 - Waarom testen?
De doelgroep Het product kent twee doelgroepen. Studio
Iedere fase wordt getest. Volgens de
Stomp, welke websites creëert en de klant
processen van Studio Stomp heeft iedere
waar Studio Stomp de websites voor maakt.
fase een aantal voorwaarden waaraan het
Met beide doelgroepen zijn interviews
deelproduct moet voldoen. Daarnaast worden
gehouden om er zo achter te komen hoe er
uit iedere vorige fase de criteria gesteld voor
door beide doelgroepen worden getest en
de volgende fase. Hoe eerder in het proces
tegen welke problemen zij aanlopen tijdens
een fout wordt gevonden, hoe minder fouten
het testen.
later kunnen worden teruggevonden.
3.1 Testsituatie Studio Stomp
3.2 Testplan
Studio Stomp werkt aan de hand van een
Studio Stomp test zijn producten door middel
iteratief proces met meerdere fases. Deze
van testplannen. Deze testplannen worden
fases kunnen in verschillende
opgesteld door de project manager. In een
samenstellingen één project vormen. Een
testplan wordt vooral de functionaliteit van
project kan bestaan uit één of meerdere fases.
de website of applicatie behandeld.
Studio Stomp kent de volgende fases:
Het testplan is een Word document (Zie bijlage C) waar het voor de tester mogelijk
•
Inceptie: Concept ontwikkeling, briefing / debriefing, vaststellen outer scope
•
Functioneel ontwerp: Keuze medium, vaststellen randvoorwaarden, inner scope
•
Interactieontwerp: Persona’s, user stories, user flow, interaction design, wireframes
•
Visueel ontwerp: Grafisch ontwerp, UX design
•
Development: Technische realisatie van product(en)
•
Implementatie
•
Monitoring en onderhoud
is de vragen met ja of nee te beantwoorden en eventueel een opmerking te plaatsen. Denk hierbij aan vragen als “Linkt het logo terug naar de homepage?”, “Werkt het formulier?” en “Is de navigatie responsive?”. Alle testers krijgen een testplan. Na het invullen van dit testplan levert de tester het testplan weer in bij de project manager.
13
Deze bundelt alle testresultaten en neemt
eindklant voor goedkeuring. Als de klant
deze door. Als alle testplannen zijn verzameld
en eventuele eindklant klaar is met testen
volgt er een zogeheten testresultaten
wordt de lijst met openstaande punten
bespreking. In deze bespreking worden alle
doorgestuurd naar Studio Stomp. Dit wordt
resultaten door genomen en behandeld.
op verschillende manieren gedaan. Meestal via e-mail, maar kan ook via een
Zo wordt er in dit gesprek gefilterd wat echte
telefoongesprek of face-to-face contact.
problemen zijn en wat voor prioriteit deze hebben. Na deze bespreking verwerkt de
3.4 Knelpunten
projectmanager alle problemen in Redmine
De manier van testen binnen Studio Stomp is
(issue tracking systeem).
een tijdrovende klus. Op dit moment zijn er teveel tussenstappen in het testproces.
3.3 Hoe test de klant
Hierdoor kan het testen een halve tot hele
Elke klant test op zijn eigen manier.
dag duren. Studio Stomp geeft aan dat ze
Afhankelijk van het product wordt er getest
hierdoor te weinig tijd en budget hebben om
op de verschillende browsers en diveces.
uitvoerige tests te doen voor elk product.
De producten die Studio Stomp opleveren worden door de klant functioneel getest en de
Studio Stomp geeft tevens aan dat het huidige
designs worden nagekeken, om zo te bepalen
testproces onvolledig is. Er wordt weinig tot
of alles op de juiste plek staat.
geen usabillity tests uitgevoerd en Studio Stomp zou graag willen zien dat functionele
Het noteren van de openstaande punten en
tests aan het begin van het project worden
issues is ook verschillend. De meeste klanten
opgesteld, om zo tijdens het project de test
noteren het in een Excel sheet en sommigen
meerdere malen te kunnen uitvoeren.
noteren het in een project management tool zoals Basecamp. Vaak is de klant van Studio Stomp niet de eindklant van het project. In dat geval wordt het product ook nog doorgestuurd naar de
14
Doordat het verzamelen van feedback van de
waar bepaalde problemen zich voordoen is
klant via verschillende kanalen gaat, raakt
lastig te achterhalen.
Studio Stomp snel het overzicht kwijt. Er is op dit moment geen centrale plek waar alle feedback verzameld en gearchiveerd kan worden. Studio Stomp vind het lastig te achterhalen wat de vorige resultaten waren en wat hiermee gedaan is. Hierdoor zijn op dit moment de tests doorgaans niet gebaseerd op input en resultaten uit voorgaande fases. Klanten van Studio Stomp geven aan dat het lastig is om goede feedback terug te krijgen van eindklanten als zij als tussenpersoon werken. De eindklanten beschikken vaak niet over de technische kennis om op de juiste manier feedback terug te koppelen. De feedback bestaat dan meestal uit punten als “Het werkt niet” en “Ik kan geen tekst copy/ pasten”. Ook is het moeilijk te achterhalen op welke browser, device en context dit probleem zich dan voordoet.
3.5 Conclusie Uit de interviews is naar voren gekomen dat de huidige testsituatie niet ideaal is. De manier van testen is tijdrovend en het verkrijgen van feedback van de klant is te divers. Ook het verkrijgen van de juiste gegevens (zoals browser en browser versie)
15
Testmethodes Er zijn verschillende test methodes om een website te testen. Elke methode kan worden ingezet in één of meerdere fases van een project. In dit hoofdstuk staat een
de mensen die het gebruiken of (b) te bewijzen dat het makkelijk in gebruik is.” (Krug 13)
overzicht van de meest voorkomende methodes, hoe je deze moet inzetten en wanneer deze ingezet dient te worden.
4.1 Usability testing Usability testing is een vorm van testen dat gebruikt maakt van het observeren van een persoon die een website of applicatie gebruikt en richt zich op de gebruiksvriendelijkheid van deze website of applicatie. Steve Krug legt in zijn boek “Rocket Surgery Made Easy” in één zin uit wat usability testing inhoud. Vrij vertaald komt dit neer op:
Het idee achter usability testing is er achter komen wat een gebruiker denkt en doet bij het gebruiken van een website, om zo er achter te komen of de website logisch en simpel in gebruik is. Steve Krug geeft verder aan dat een usability test de volgende elementen bevat. Een testbegeleider, deze notuleert en begeleidt de test. Een testdeelnemer, degene die de website of applicate test. Een computer waar de website of applicatie op wordt getest. Een geluidsrecorder en een schermrecorder. (65)
“Bekijken hoe mensen
Tijdens het testen wordt er aan de
uitproberen wat jij aan het
testdeelnemer gevraagd of hij een opdracht
maken/ontwerpen/bouwen
kan uitvoeren op de website, een zogeheten
bent, met de intentie om (a) het makkelijker te maken voor
user scenario (zie hoofdstuk 4.2 User scenario’s). Er wordt gevraagd of de deelnemer alles wat hij denkt hardop te zeggen.
16
De testbegeleider notuleert alles wat er
Het zogeheten doe-het-zelf usability
wordt gezegd en gebeurt en stuurt de test
testing. Deze tests worden met een normale
aan. Ondertussen wordt er zoveel mogelijk
computer, schermrecorder en geluidsopname
opgenomen. In de uitgebreidste vorm wordt
apparatuur uitgevoerd. De kosten voor dit
zowel de audio, het scherm als het gezicht
soort test zijn vele malen lager dan de tests
van de gebruiker opgenomen. Vaak wordt er
die door professionals worden uitgevoerd.
achter de schermen door de developers mee gekeken met de test.
Usability testing wordt gezien als één van de betere testmethodes om
Usability testing kan in verschillende vormen
gebruiksvriendelijkheid problemen op te
worden ingezet. Zo heb je de professionele
lossen. Ongeacht de vorm en testdeelnemer
manier waar gebruik wordt gemaakt van
worden er altijd problemen gevonden, die
een geoptimaliseerde computer waar het
door de developers over het hoofd worden
scherm en de gebruiker wordt opgenomen
gezien, omdat ze te diep in het project zitten
en een usability expert die de test begeleid.
en er niet meer oprecht naar kunnen
Het komt bij professionele usabilty tests ook
kijken.
voor dat de deelnemer alleen in een kamer zit en de begeleider achter een spiegelruit. De
4.2 User scenario’s
opdrachten worden dan via een microfoon
User scenario’s zijn een belangrijk onderdeel
aan de deelnemer verteld. Het probleem
van usability tests, maar kunnen ook
met professionele usability test is dat deze
losstaand gebruikt worden. Een user scenario
zeer prijzig zijn en het aanbod professionele
is een verhaal van een gebruiker wat
usability tester laag is. Steve Krug geeft in zijn
kan voorkomen op de website die getest
boek “Rocket Surgery Made Easy” aan dat
wordt. Het wordt gebruikt om te kijken of het
er 10.000 usability professionals wereldwijd
voor een potentiële gebruiker makkelijk is
zijn waar maar een fractie van usability tests
om een bepaalde handeling op de website te
uitvoert. (7)
voltooien. Vaak worden user scenario’s verward met user stories en user cases.
Een usability test kan echter ook uitgevoerd worden zonder een professional.
17
Op Cloudforrest Design (http://www.
Een use case beschrijft precies wat een
cloudforrestdesign.com) leggen ze het
gebruiker doet en wat het systeem teruggeeft.
verschil uit aan de hand van voorbeelden.
Het is een soort stappenplan met input van de
Een user scenario is meestal een uitgebreid
gebruiker en mogelijke output, reacties
verhaal over de gebruiker, wat ze willen en
of fouten van het systeem. Vaak wordt een
wat ze al weten. Een user scenario wordt
user case ingezet voor een gedetailleerde
geschreven in een verhalende vorm.
product eisen beschrijving. (Cloudforrest
(Cloudforrest Design)
Design)
Voorbeeld:
Voorbeeld:
John is een 30 jarige manager van een reclame bureau,
•
Klant loopt naar restaurant
nieuw soort bier uitproberen in een trendy locatie.
•
Klant loopt restaurant binnen
Hij gebruikt ook graag verschillende sociale apps op
•
Klant vindt een kruk bij de bar
•
Klant bestudeerd de kaart
•
Klant kiest een biertje
•
Klant besteld een biertje
•
Barman neemt orde aan
•
Barman tapt een biertje
•
Barman levert biertje af
•
Klant drinkt biertje
•
Klant betaald voor het biertje
metroseksueel en een bierliefhebber. Hij wil graag een
zijn smartphone. Hij leest een review op Yelp over een nieuw burger & bier tent in de stad met meer dan 100 verschillende bier op de tap en beslist om na het werk er heen te lopen om te bekijken of het wat is. (Cloudforrest Design)
Een user story is een verkorte versie van een user scenario en wordt gebruikt om de essentie van een gebruikersbehoefte te definiëren. Vaak worden user stories gebruikt bij de Scrum methode en gedefinieerd aan het begin van een development sprint. (Cloudforrest Design)
(Cloudforrest Design)
Zoals je kan lezen zit er wel degelijk een verschil tussen user scenario’s, user stories en user cases. Ze worden ook in verschillende
Voorbeeld: Een gebruiker moet een bar willen vinden en een biertje drinken. (Cloudforrest Design)
situaties ingezet. User scenario’s zijn uitermate handig om tijdens tests te gebruiken. Via een user scenario betreed je in de belevingswereld van een gebruiker en kan
18
je uit hun oogpunt een website testen.
Bij functioneel testen wordt de
Hiermee test je de flow en gebruikersgemak
gebruiksvriendelijkheid van de website
van een website of applicatie.
achterwegen gelaten. Het gaat er hier alleen om of alle functies werken zoals zij horen
De test- en feedback applicatie zal user
te werken. Als voorbeeld kunnen we een
scenario’s ondersteunen. Op dit moment
contactformulier nemen. Bij het invullen
is Studio Stomp aan het overstappen op
van het formulier kunnen er verschillende
de Scrum methode. Zodra dat voltooid is
scenario’s voorkomen. Als alles goed gaat
zal Studio Stomp tijdens de development
zou na het invullen van het formulier een
fase ook user stories gaan gebruiken. User
bevestigingsbericht moeten worden getoond
scenario’s zouden dan gebaseerd kunnen zijn
om zo de gebruiker te informeren dat het
op de user stories en vice versa.
versturen van het formulier is gelukt. Het is echter mogelijk dat een veld van het formulier
4.3 Functioneel testen
wordt vergeten of niet goed is ingevuld.
Bij functioneel testen wordt er door de
Hier moet de gebruiker dan een melding van
testpersonen gekeken of alles op een website
krijgen. Dit wordt bij een functionele test
werkt en goed staat. Deze test wordt meestal
gecontroleerd. Het verschil met functioneel
gedaan door personen die betrokken zijn
testen en usability testen kun je als volgt
bij het project en weten hoe alles moet
omschrijven:
werken. Functioneel testen gebeurt meestal in een vorm van een checklist. In deze checklist staan alle punten waar naar gekeken worden en de punten kunnen beantwoord worden met JA of NEE. Bij Studio Stomp wordt er op dit moment gewerkt met een zogeheten
Functioneel testen kijkt of iets werkt, terwijl usability testing kijkt of iets makkelijk in gebruik is.
testplan. In dit plan staan alle punten en is er ruimte om per punt een extra opmerking te plaatsen. Ook zijn er online alternatieve zoals Launchlist (http://www.launchlist.net/).
Functioneel testen kan in verschillende stadia van het ontwikkelproces worden ingezet, maar wordt vaak aan het einde van een project gebruikt om zo de laatste bugs uit de website of applicatie te halen.
19
4.4 A/B testing
(conversie, verkoop,
A/B testing is het vergelijken van twee
weigeringspercentage, etc.).
ontwerpen, om er zo achter te komen welke
Na de testperiode wordt de
versie het meest succesvol is om de doelen van een website te behalen. Dit kunnen kleine verschillen zijn als de kleur van een
versie gekozen welke het best presteert. (Chopra et al. 6)
button tot een volledig andere layout. Meestal wordt A/B testing ingezet om een
Hoewel A/B testing op zichzelf vrij simpel in
nieuw design te vergelijken met het oude
elkaar steekt moet er toch op bepaalde
design. Het kan echter ook gebruikt worden
dingen worden gelet bij het testen. In het
in de IXO en ontwerpfase, om zo twee
zelfde boek van Smashing Magazine worden
ontwerpvoorstellen uit te testen. In het eBook
er enkele do’s en don’ts vermeld. Zo is het
van Smashing Magazine “A Field Guide To
belangrijk dat beide versies tegelijk worden
Usability Testing” wordt er uitgelegd wat A/B
getest. Test niet eerst versie A en een week
testing in het kort inhoud.
later versie B. Het kan zijn dat de ene week meer bezoekers komen dan de andere. Dit
Bij A/B testing heb je twee ontwerpen voor een website: A en B. Meestal is
kan zorgen voor een vertekend beeld. (8) Verder is het van belang dat je de juiste tijdspan kiest voor je A/B test. Te vroeg
A de bestaande website en
stoppen kan betekenen dat je te weinig
B het nieuwe ontwerp. Het
informatie vergaart voor een zinvol
verkeer van de website wordt verdeeld tussen deze twee
testuitslag. Als je te lang een A/B test doorvoert met een slecht presterende variatie kan je conversie en verkoop mislopen. Voor
versies en er wordt gemeten
het kiezen van de juiste tijd zijn er enkele
welke er beter presteert aan
online applicaties die dit voor je kunnen
de hand van eigenschappen die jij belangrijk vindt
berekenen (http://visualwebsiteoptimizer. nl/ab-split-test-duration/). (9)
20
Een uitgebreide lijst van alle do’s en don’ts
via papier of digitaal. Het is een verzameling
zijn te vinden in het boek op pagina 8 en 9.
van wireframes van verschillende pagina’s en functies en kan doorlopen worden.
4.5 Prototyping Prototypes worden ingezet in het begin van
Paper prototypes worden ingezet in het
een project en worden gebruikt om de
begin van de conceptfase, om zo snel
functionaliteiten en flows van een website of
verschillende ideeën te kunnen uitwerken.
applicatie te testen. Een prototype kan
Tegenwoordig zijn er ook enkele apps die het
verschillende vormen aannemen, maar zijn
mogelijk maken om paper prototypes op een
bijna altijd gebaseerd op wireframes.
smartphone of tablet uit te voeren. Een voorbeeld is POP welke het mogelijk
In een wireframe worden de verschillende
maakt foto’s te maken van je schetsen en aan
blokken en layout elementen in een kader
elkaar te koppelen. Hierdoor kan de gebruiker
neergezet. Ze bestaan meestal uit lijnen,
op zijn mobiel de prototype doorlopen (Afb.
blokken en grijstinten (Afb. 4.5.1).
4.5.2). Een andere vorm van prototyping zijn digitale prototypes. Dit zijn uitgewerkte wireframes en zijn niet zo ruw als de schetsen van een paper prototype. Deze prototypes zijn gemaakt in HTML en CSS en kunnen worden gebruikt in de webbrowser. Ze simuleren een echte website. Deze prototypes worden vaak aan het einde van de concept of IXO fase
Afb 4.5.1 - Wireframe van een Website. Chris Bannister via Dribbble
Het idee van een wireframe is om de layout en flow van een website te definiëren en wordt er nog niet gekeken naar de visuele
gemaakt, om zo de flow en functionaliteit van de website te demonstreren. Een digitale prototype kan gebruikt worden als bewijs dat de website werkt en is meestal de laatste fase voordat er een ontwerp wordt gemaakt.
stijl. Een prototype kan worden uitgevoerd
21
Om een website goed te testen moet je zowel testen op gebruiksvriendelijkheid als functionaliteit.
Afb. 4.5.2 - POP App in actie. POP App
4.6 Conclusie Elke testmethode test iets anders. Zo testen usability tests, user scenario’s en protoypes de gebruiksvriendelijkheid van een website of applicatie. De functionele tests worden uitgevoerd om er achter te komen of bepaalde functionaliteiten werken. Hier wordt niet gekeken of de manier waarop iets werkt het meest gebruiksvriendelijkst is voor de gebruiker. A/B tests worden meestal ingezet na livegang, om er zo achter te komen of een nieuw design meer conversie oplevert.
22
Concurentie analyse Er bevinden zich verschillende tools op
gebruiker, collega’s en klant duidelijk te zien
de markt om websites en applicaties te
is welke stappen er zijn genomen tijdens het
testen. Elke tool heeft zijn eigen sterke en
proces. Zodra de klant tevreden is kan hij
minder sterke punten. Per tool zal er een
binnen de applicatie aangeven dat het design
omschrijving worden gegeven en een lijst met
goedgekeurd is. Het project wordt dan
sterke en minder sterke punten.Voor elke tool
opgeslagen in het archief zodat alle
is er gekeken naar wat voor type test er kan
betrokkenen er later nog bij kunnen mocht
worden gedaan, in welke fase van een project
dat nodig zijn.
de tool kan worden gebruikt en de unieke functies van de tool.
5.1 Cage App http://www.cageapp.com
Cage App is een collaboratie tool die zich richt op designers. Doormiddel van de online applicatie kunnen designers hun ontwerp voorstellen uploaden en kunnen collega’s of
Afb. 5.1.1 - Notitie en discussie op een selectie van het design binnen Cage
klanten feedback en commentaar geven op het geüploade werk. Cage biedt een aantal sterke functies aan voor de gebruiker. Zo is het mogelijk om direct notities te maken en een kleine discussie te starten op een selectie van een design (Afb. 5.1.1). Ook biedt Cage de mogelijkheid aan om revisies bij te houden
Afb 5.1.2 - Overzicht van revisies
(Afb. 5.1.2). Dit houdt in dat het voor de
23
Andere functionaliteiten binnen Cage zijn To-
Duck feedback functie toegevoegd. Met
do lists, mogelijkheid om een team aan te
de functie kan de gebruiker een selectie
maken en een optie om een presentatie van
maken van de sectie waar de gebruiker een
enkele designs aan te maken.
probleem tegenkomt en feedback op wilt geven (Afb. 5.2.1). Dit werkt op dezelfde
Pros:
manier als bij Cage. Waar Cage alleen een
•
Notities en discussies op een selectie van een
screenshot maakt van de selectie, stuurt
design
Track Duck ook de browser gegevens mee
•
Revisies
van de tester. Zo is het snel duidelijk op
•
Archivering van afgeronde projecten
welk systeem en browser het probleem zich
•
Overzicht van lopende projecten
voordoet.
Cons: •
Alleen gericht op design
5.2 Track Duck http://www.trackduck.com
Track Duck is een feedback applicatie die zich richt op de design en development fase van een project. Designs kunnen net als bij Cage worden geüpload in de applicatie, waar de klant feedback op kan geven. Ook is het mogelijk om revisies te bewaren zodat de gebruiker een makkelijk overzicht krijgt van de genomen stappen en de voortgang van het project.
Afb. 5.2.1 - Gebruiker geeft feedback op een deel van de website
Binnen Track Duck is het mogelijk om aan gebruikers rollen te hangen. Dit loopt van reporter tot administrator. Hoe hoger je rol hoe meer functies er tot je beschikking komen binnen de applicatie.
Naast design ondersteunt Track Duck ook live websites. Door een javascript bestand toe te voegen aan de site wordt er een Track
24
Pros:
templates aan te maken. In deze templates
•
Ook geschikt voor live websites
kan er een aantal punten worden gedefinieerd
•
Revisies
die vaak terugkomen in verschillende
•
Gebruikers rollen
projecten (Afb. 5.3.2). Bijvoorbeeld de vraag
•
Te integreren met de bekendere project
“Zijn alle meta-data toegevoegd?”. Ook
management tool
is het mogelijk om in teams tegelijk een checklist te doorlopen. Dit zorgt ervoor dat
Cons: •
•
Testen van live site vereist extra javascript bestand
er snel en gemakkelijk een checklist kan worden uitgevoerd. Verder heeft Launchlist
op de site, hierdoor bevindt zich niet alles in de
een overzichtelijk dashboard waar je al je
applicatie zelf.
projecten kan bekijken en kunt zien wat de
Geen mogelijkheid om teams aan te maken.
status van het project is.
5.3 Launchlist http://www.launchlist.net
Launchlist is een applicatie die kan worden ingezet vlak voor live-gang van een website of applicatie. De applicatie is een checklist in zijn puurste vorm. Door middel van de checklist kan de gebruiker bekijken of alles functioneel werkt. Dit houd in dat er wordt gekeken naar zaken als “Linkt het logo naar de homepage?”, “Werkt het contact formulier?”, “Bevinden er geen spelfouten in de tekst?” en “Zijn alle meta-data
Afb. 5.3.1 - Een checklist wordt ingevuld op Launchlist
toegevoegd?” (Afb. 5.3.1). Launchlist heeft enkele handige functies die het proces van de checklists aanmaken en uitvoeren versnellen. Zo is het mogelijk om
25
achter de applicatie is om jouw product, of het nou een website of Facebook app is, te laten testen door echte gebruikers die in jouw doelgroep passen. Een gebruiker maakt een nieuwe test aan met enkele user scenario’s die doorlopen moeten worden (Afb 5.4.1). Je kiest zelf wat voor gebruikers deze test moeten Afb. 5.3.2 - Overzich van aangemaakte templates per soort website
uitvoeren, bijvoorbeeld een huismoeder met twee kinderen of een computer-expert van middelbare leeftijd. De website belooft in
Pros:
één uur de eerste testresultaten binnen
•
Makkelijk in gebruik
te hebben.
•
Templates aanmaken
•
Met meerdere mensen tegelijk een checklist invullen
•
Overzichtelijk
Cons: •
Sommige punten zouden automatisch door de applicatie gechecked kunnen worden.
•
Alleen functionele tests Afb 5.4.1 - Gebruiker maakt een user scenario aan
5.4 UserTesting http://www.usertesting.com
UserTesting is anders dan de andere test applicaties die hier zijn beschreven. In plaats
De gebruiker krijgt via zijn mail een link naar de video van een testpersoon die zijn website of applicatie gebruikt (Afb. 5.4.2).
dat je zelf de tests uitvoert laat je de tests uitvoeren door andere mensen. Het idee
26
De tester geeft tijdens het gebruiken van de website continu commentaar en vertelt waarom hij of zij bepaalde handelingen doet op de website. De tester voert dus een echte usability test uit.
5.5 Conclusie Op dit moment zijn er verschillende tools in de markt die ingezet kunnen worden om tests uit te voeren in één of meerdere fases van het project. Elke tool heeft zijn eigen sterke punten welke het uniek maakt ten aanzien van hun concurrenten. Er mist op dit moment echter een tool die verschillende soorten tests ondersteund. Studio Stomp zou verschillende tools moeten gebruiken om verschillende tests uit te voeren. Dit loopt aardig op in de kosten en is
Afb 5.4.2 - Een gebruiker bekijkt een video van een testpersoon
ook niet toegankelijk voor klanten om zelf te testen. Alle gegevens zouden hierdoor worden verspreid.
Pros: •
Echte usability tests
•
Snel, binnen een uur test resultaat
•
Voorgedefinieerde user scenario’s templates
•
Grote database aan testers
•
Testen van verschillende soorten websites, applicaties of games
Cons: •
50 dollar per test
•
Niet van te voren weten of een tester betrouwbaar is
27
Waarom testen? Nu het duidelijk is op welke manieren er
Studio Stomp geeft zelf aan dat ze dit nog te
getest kan worden en welke tools hiervoor
weinig doen in hun huidige testproces.
beschikbaar zijn is het ook belangrijk om te weten waarom er getest dient te worden. In dit hoofdstuk zal er eerst worden uitgelegd waarom testen belangrijk is aan de hand
“Het gebeurt te vaak dat wij de producten laten testen door de
van Steve Krug, schrijver van de boeken
mensen die het hebben
“Don’t Make Me Think” en “Rocket Surgery
gemaakt”
Made Easy”. Daarna zal er in worden gegaan waarom Studio Stomp test en welke belangen de klant en gebruikers bij een getest product hebben.
- Michel Stomp (Studio Stomp) Testen met één gebruiker is 100% beter dan helemaal niet testen. Testen werkt altijd, zelfs met de slechts mogelijke tests. Je komt altijd achter problemen die je anders niet zou
6.1 Waarom testen belangrijk is volgens Steve Krug
hebben ontdekt.
Steve Krug legt in zijn boek “Don’t Make Me
Een test uitvoeren aan het begin van het
Think, Revisited” uit waarom testen
project is beter dan vijftig tests uit te voeren
belangrijk is in drie statements.
aan het eind van het project.
(Krug 114)
Het is belangrijk om vroeg in het proces, als er nog
Als je een geweldige website wil, dan moet je testen. Op het moment dat je aan een website werkt, ook al is het maar voor een paar weken, kan je niet meer met een open blik naar de website kijken. Je zit zo in het project dat je precies weet waar je alles kunt vinden op de website. Als je de website laat testen door een persoon die nog niet met de website heeft gewerkt kom je achter problemen die anders niet aan het ligt waren gekomen. (Krug 114)
tijd is om aanpassingen te maken, te testen. Een gebruikelijke aannamen in web development is dat het gemakkelijk is om snelle aanpassingen te maken. Echter, zeker als het om grote veranderingen gaat, is het niet zo makkelijk om veranderingen te maken. Als een website live staat zal een percentage van gebruikers zich tegen de gedane veranderingen keren. Elke fout die je in het begin van het proces kan veranderen zal je een hoop problemen in latere fase schelen. (Krug 115)
28
6.2 Waarom test Studio Stomp? Studio Stomp geeft aan dat zij testen om de kwaliteiten van hun producten te waarborgen. Als een product vol fouten zit is dit slecht voor de naam Studio Stomp
De gebruikers zijn uiteindelijk de gene die het product moeten gebruiken. Op het moment dat een product niet werkt zoals ze verwachten dat het werkt zullen zij snel afhaken.
en slaan de producten die Studio Stomp niet
“Testen herinner je eraan
aan bij de gebruikers. Wie wil er nou een
dat niet iedereen denkt als
product gebruiken wat vol fouten zit? Je wilt
jij, weet wat jij weet en het
fouten zo vroeg mogelijk ontdekken en eruit halen, om zo een zo sterk mogelijk product in de markt te zetten.
internet gebruikt zoals jij doet.” - Steve Krug (Krug 114)
6.3 Het belang van de klant en gebruikers De klant komt bij Studio Stomp om een product te realiseren waarvan zij verwachten dat deze veel zal worden gebruikt. Ze willen een zo’n best mogelijk ervaring bieden aan hun gebruikers. Het product zien zij als hun kindje en die moet zo goed mogelijk presteren. Als er door slecht testen cruciale fouten over het hoofd worden gezien zou het kunnen dat dit product niet aanslaat bij de gebruikers.
In het artikel “How Long Do Users Stay on Web Pages?” van Jakob Nielsen op Nielsen Norman Group (www.nngroup.com) wordt er uitgelegd dat de eerste 30 seconden het belangrijkst zijn voor een gebruiker om te bepalen of zij op de website blijven. Zolang het niet meteen duidelijk is voor de gebruiker wat het doel is van de website haken zij af. (Nielsen Norman Group 2014) Als een website wordt getest op gebruiksvriendelijkheid is de kans vele malen groter dat het doel bij de gebruiker snel
“Zodra er niet goed wordt
overkomt en zal de gebruiker minder snel afhaken.
getest kunnen wij de plank mis slaan” - Bas van Bokhorst (GreenBerry)
29
6.4 Conclusie Testen is belangrijk voor Studio Stomp om de kwaliteit van zijn producten te waarborgen. Voor de klant is het belangrijk omdat zij een product op de markt willen zetten die veel gebruikt wordt en de gebruikers willen een zo makkelijk en gebruiksvriendelijk mogelijke ervaring. Zodra dat er niet is, haken gebruikers snel af.
30
Oplossing Hoofstuk 7 - Functionele eisen Hoofstuk 8 - Schetsen Hoofdstuk 9 - Interactie ontwerp Hoofdstuk 10 - Functionele prototype Hoofdstuk 11 - Ontwerp Hoofdstuk 12 - De applicatie
Functionele eisen Aan de hand van de interviews met
schermafmeting en OS (operating system)
Studio Stomp, haar klanten en de
zich een probleem voordoet. Dit moet
onderzoeksresultaten zijn er enkele
tijdens het plaatsen van het feedback
functionele eisen opgesteld waaraan het
automatisch worden achtergelaten. Hier moet
product moet voldoen. In de eerste versie van
het ook duidelijk zijn wat Studio Stomp met
het product zullen alleen de meest belangrijke
dit feedback gaat doen.
functies zitten. Dit kan later worden uitgebreid met extra functionaliteiten.
7.3 Tests Naast het kunnen bekijken van een project
7.1 Projecten
en daar feedback op te leveren moet het ook
Het moet voor Studio Stomp en haar klanten
mogelijk zijn bepaalde tests uit te voeren.
gemakkelijk zijn om projecten te bekijken.
Om een website goed te testen dient er
Elk project kan meerdere versies bevatten.
zowel een functionele als usability test te
Er wordt na elke test en verbeterronde een
worden uitgevoerd. Voor de functionele test
nieuwe versie geüpload door Studio Stomp
is een checklist bedacht. Een checklist werkt
met daarin punten die zijn opgepakt.
gemakkelijk, snel en is overzichtelijk. Als usability test wordt er een user scenario test
7.2 Feedback
toegevoegd. Dit is een gemakkelijk op te
Op elke versie moet er gemakkelijk feedback
zetten usability test die niet te veel tijd kost
kunnen worden gegeven. De gebruiker
om uit te voeren voor een gebruiker.
zou een screenshot moeten kunnen nemen van een sectie waar een probleem zich
7.4 Agenda
voordoet en daar een aantekening bij
Omdat Studio Stomp vaak een deadline stelt
moeten kunnen maken. Uit de interviews
voor het aanleveren van feedback dient
bleek het voor de klanten lastig te zijn te
het ook mogelijk te zijn bepaalde deadlines te
achterhalen welke browser, browser versie,
stellen voor feedback en het uitvoeren
32
van tests. Deze moeten overzichtelijk worden weergegeven in een agenda.
7.5 Randvoorwaarden Toen het project begon was het eerste idee om het product helemaal uit te werken tot een volledig werkende applicatie met voor en achterkant. Na verloop van tijd en veel onderzoek bleek het project te grootschalig te zijn om door één persoon in een half jaar tijd te bouwen. Daarom is in overleg met Studio Stomp besloten om het project als proof of concept te beschouwen. Dit betekent dat er alleen een voorkant zal worden gemaakt die de belangrijkste functionaliteiten bezit. De applicatie zal geoptimaliseerd worden voor Google Chrome met een minimale schermafmeting van 1280px bij 800px.
33
Schetsen Na het vast stellen van de belangrijkste
navigatie item voor de agenda pagina heeft
functionaliteiten is er begonnen om de eerste
een kalender icoon. Op kleinere schermen
schermen te schetsen. Om inspiratie op te
worden alleen de iconen getoond om zo
doen en een goed beeld te krijgen hoe
optimaal gebruik te maken van de
webapplicaties in elkaar zitten heb ik gekeken
beschikbare ruimte.
naar verschillende ontwerpen van webapplicaties. Deze heb ik gevonden op
Verder is een veel voorkomend patroon een
Dribbble (www.dribbble.com).
balk aan de bovenkant. Hier kan informatie kwijt als de pagina titel, zoekbalk en
Dribbble is een digital designer community.
gebruikersinfo.
Elke dag plaatsen de beste designers en
Enkele voorbeelden die als inspiratie hebben
talenten uit de digitale design industrie hun
gediend van mijn applicatie:
werk. Er wordt zowel werk in uitvoering geplaatst, als werk wat af is. Om in de community te komen moet je worden uitgekozen door leden van Dribbble aan de hand van je werk. Op Dribbble zitten o.a. designers van Google, Spotify en Dropbox.
8.1 Inspiratie Tijdens het zoeken naar inspiratie heb ik gekeken naar patronen die veel voorkomen bij webapplicaties. Een veel voorkomend
Afb. 8.1.1 - My Form UI. Vincent Tantardini via
patroon is de navigatie die aan de zijkant
Dribbble
wordt geplaatst. De navigatie bevat iconen voor extra visuele confirmatie wat er op elke pagina te vinden is. Bijvoorbeeld een
34
beschikbare ruimtes. Het menu en de bovenste balk blijven vrij smal, zodat er genoeg ruimte is om alle informatie kwijt te kunnen.
8.2 Eerste schetsen Na inspiratie opgedaan te hebben, is er begonnen met het schetsen van de eerste schermen. Deze zijn zeer ruw en snel gemaakt, om zo een paar verschillende varianten uit te proberen (Afb.8.2.1). De Afb 8.1.2 - Mixpanel Survery Analytics UI/UX. Mason Yarnell via Dribbble
schermen zijn besproken met de interactie designer bij Studio Stomp en na overleg is er bepaald om gedetailleerder schermen te schetsen.
Afb. 8.1.3 - Aspree. Zulal Ahmed via Dribbble
Wat mij vooral aansprak bij deze voorbeelden zijn het slim kleur gebruik om secties van elkaar te scheiden. Verder zijn deze
Afb. 8.2.1 - Een eerste schets van de applicatie
voorbeelden volgens de flat design stijl
8.3 Gedetailleerde schetsen
en wordt er handig gebruik gemaakt van
Na de eerste schetsen is er gekozen om enkele
steunkleuren om accenten te leggen. Ook
schermen gedetailleerder uit te werken
wordt er slim gebruik gemaakt van de
(Afb. 8.3.1 & Afb. 8.3.2). De schermen bevatten de grote contouren van de applicatie
35
en geven de belangrijkste functionaliteiten aan. De uitgewerkte schetsen zijn gebruikt om een eerste paper prototype te houden binnen Studio Stomp.
8.4 Paper prototype De paper prototype is gehouden met de interaction designer en lead developer bij Studio Stomp. Belangrijkste bevindingen tijdens de paper prototype waren voornamelijk op de dashboard (beginscherm) gericht. Bij de eerste schetsen waren alle projecten te zien, onderverdeeld in open en afgesloten projecten. In de praktijk blijkt dat de meeste projecten nooit afgesloten zijn. Er worden altijd nog bug fixes en verbeteringen na live gang van een project gedaan. Daarom is er besloten om de vier
Afb. 8.3.1 - Gedetailleerde schets van de dashboard (beginscherm)
meest recente projecten te tonen. Een project is recent als er een nieuwe versie is geüpload, nieuwe feedback is geplaats of als er gereageerd is op feedback. Verder werd er op de dashboard een agenda en recente activiteiten getoond. De recente activiteiten zijn op de dashboard geschrapt voor een overzicht van de laatste test. Dit is gedaan omdat je op de dashboard de meest relevante informatie wilt tonen. Recente activiteiten waren tevens overbodig op de dashboard, omdat recente
Afb. 8.3.2 - Gedetailleerde schets van een functionele test
projecten al aangeeft dat er recente activiteit is geweest.
36
8.5 Conclusie De gedetailleerde schetsen hebben de basis gevormd voor de rest van het project. De paper prototype heeft bewezen dat, mits enkele aanpassingen, een goed startpunt zijn voor het beginnen van het interactie ontwerp. De belangrijkste functionaliteiten zijn met de paper prototype uitgewerkt en getest.
37
Interactie ontwerp Om een goed overzicht te krijgen van de applicatie, zijn pagina’s en de functionaliteiten is een goed interactie ontwerp van belang. Robert Reimann, mede
“Een flowchart is een grafische representatie over hoe een proces werkt, welke minstens
auteur van het populaire boek “About Face
de opeenvolging van de
3: The Essentials of Interaction Design”,
stappen volgt.”
omschrijft in zijn blog post op cooper.com (http://www.cooper.com/journal/2001/06/
- Edraw (http://www.edrawsoft.com/Flowchart-Definition. php)
so_you_want_to_be_an_interacti.html) interactie design als volgt: In een wireflow worden micro-wireframes
“Interaction Design is een ontwerp discipline gewijd aan
(kleinschalige wireframes die alleen globaal de vlakindeling bepalen) aan elkaar gekoppeld, om zo de flow van de website
het definiëren van het gedrag
te bepalen. Een wireflow is tijdbesparend,
van voorwerpen, omgevingen
omdat de wireframes niet gedetailleerd
en systemen” - Robert Reimann
Als interactie ontwerp is er tijdens dit project gekozen voor wireflow.
9.1 Wireflow
uitgewerkt te worden. Verder zijn wireflows overzichtelijker dan een flowchart en beter te begrijpen voor mensen die weinig ervaring met flowcharts hebben. Zie bijlage D voor de wireflow van de test- en feedbackapplicatie.
Een wireflow is een combinatie van wireframes (zie hoofdstuk 4.5. Prototype) en een flowchart.
38
Functionele prototype Een belangrijke functie binnen de applicatie is het achterlaten van feedback. Voordat er verder werd gegaan met het ontwerpen van de applicatie is er een prototype van deze functionaliteit gemaakt, om er achter te komen of het manier van feedback achterlaten realiseerbaar was.
10.2 Prototype Het prototype (Afb. 10.2.1) is opgebouwd door middel van HTML 5 en javascript. Door middel van het nieuwe HTML 5 element canvas is het mogelijk html om te zetten naar een afbeelding.
10.1 Stappen Na overleg met Studio Stomp is er besloten om het achterlaten van feedback via de volgende stappen te laten werken: •
De gebruiker bekijkt een website.
•
De gebruiker ziet een fout in de website welke hij
Afb. 10.2.1 - Gebruiker maakt een selectie in het prototype
aan Studio Stomp wil doorgeven. •
De gebruiker drukt op de knop feedback plaatsen
De techniek achter het maken van de
•
De gebruiker maakt een selectie van de website
screenshot is vrijwel identiek aan de manier
waar het probleem zich voordoet.
waarop Google Feedback dat doet (http://
De applicatie maakt een screenshot van de selectie
www.google.com/tools/feedback/intl/nl/).
en haalt de browser, OS (operating system) en
Op het moment dat een gebruiker feedback
schermafmetingen op.
wilt achterlaten wordt de huidige html van
De gebruiker beschrijft de fout en plaatst de
de pagina opnieuw opgebouwd in een canvas
•
•
feedback in de applicatie.
element. Dit kent wel enige limitaties. Het is niet mogelijk om html van een externe website in een canvas element te laden.
39
Dit betekent dat de test- en
feedback achterlaten te bedenken. Dit bleek
feedbackapplicatie op dezelfde server moet
niet nodig te zijn. Uiteindelijk is de code van
draaien als dat de producten van Studio
het prototype gebruikt tijdens het realiseren
Stomp doen. Dit is echter geen probleem
van de applicatie.
aangezien Studio Stomp een eigen testserver heeft. Ook zijn de screenshots die worden gemaakt niet één op één hetzelfde met wat de gebruiker ziet. Het canvas element kan op dit moment nog niet alle nieuwe CSS3 regels even goed presenteren. Na overleg met Studio Stomp is besloten dat dit ook geen obstakel vormt bij het achterlaten van feedback. De screenshot in samenwerking met de omschrijving en de browser gegevens van de gebruiker is voor Studio Stomp voldoende om het probleem te identificeren.
10.3 Conclusie Dankzij het prototype is bewezen dat één van de belangrijkste functionaliteiten van de applicatie realiseerbaar is. De voor en nadelen zijn zorgvuldig overwogen en er is er voor gekozen om de functionaliteit toe te voegen aan de applicatie. Op het moment dat de functionaliteit niet of onvoldoende werkte was er weer terug gegaan naar de tekentafel om een nieuwe manier van
40
Ontwerp Belangrijk tijdens het ontwerpen van de applicatie was om de nieuwe huisstijl van Studio Stomp als basis te gebruiken. Studio Stomp lanceert rond het schrijven van dit rapport zijn nieuwe website. De nieuwe huisstijl is gebaseerd op het flat design principe.
11.1 Dashboard Het dashboard is de eerste pagina die een gebruiker ziet zodra hij is ingelogd. De belangrijkste functionaliteit van een dashboard is het tonen van de meest relevante informatie voor de gebruiker. In het boek “Design Interfaces. 2nd Edition” legt Jennifer Tidwell uit waarom een dashboard
“Flat design is het
goed werkt voor een webapplicatie.
vereenvoudiging van een interface door middel van het verwijderen van extra elementen zoals schaduwen, schuine randen, texturen en gradiënten die een 3D-look creëren.” - Antonio Pratas (http://www.awwwards.com/flat-design-an-in-depthlook.html)
In dit hoofdstuk zullen de belangrijkste schermen in de applicatie aanbod komen. Screenshots van alle pagina’s zijn te vinden in
“Dashboards zijn een vertrouwde en herkenbare stijl van pagina’s. Zij hebben een lange geschiedenis, zowel online als in de fysieke wereld en gebruikers weten hoe dashboards werken. Ze vertonen nuttige informatie en worden vanzelf vernieuwd met nieuwe data.” (Tidwell 168)
bijlage E.
41
Op de dashboard zijn de recente projecten,
van de test- en feedbackapplicatie zou
overzicht van de beschikbare tests en de
dit moeten worden toegevoegd.
agenda met daarin de deadlines te vinden. Meer over het totstandkoming van de
11.4 Bekijk project
dashboard is te vinden in hoofdstuk 8.4
Op het moment dat een versie wordt geopend
Paper prototype.
door een gebruiker wordt de website binnen de applicatie getoond. De gebruiker
11.2 Project pagina
kan de website bekijken en gebruiken
Op de project pagina is een overzicht te
zoals hij normaal ook zou doen. Aan de
vinden van alle projecten die gekoppeld
zijkant van de applicatie is er een paneel. In
zijn aan de gebruiker. Een klant zal alleen zijn
dit paneel zitten verschillende opties. Zo is
eigen projecten kunnen bekijken. Een
het mogelijk om al geplaatste feedback te
medewerker van Studio Stomp zal alle
tonen of te verbergen (de gele bolletjes op de
projecten kunnen bekijken die in de
pagina).
applicatie zijn geplaatst. Om het voor Studio Stomp overzichtelijk te houden is er voor
De gebruiker kan tevens nieuwe feedback
gekozen om projecten te groeperen bij klant.
plaatsen zodra hij of zij een fout of probleem tegen komt op de website. Hoe dit in zijn
11.3 Project detail pagina
werk gaat kunt u lezen in hoofdstuk 10.
Zodra een gebruiker een project opent zal hij
Functionele prototype.
op het project detail pagina komen. Op deze pagina zijn alle versies van het project te
Verder is het mogelijk om te switchen tussen
bekijken. Er wordt een nieuwe versie
drie verschillende weergaven. Door middel
aangemaakt door Studio Stomp op het
van deze functie kan de website worden
moment dat een test- en feedbackronde is
bekeken in de desktop weergave, tablet
afgerond en de punten zijn verbeterd en
weergave en de mobiele weergave.
verwerkt. Tijdens het testen kwam naar boven dat de klant graag een overzicht zou
Door op de gele bolletje in de pagina te
willen zien van welke punten er zijn
klikken kan er reeds geplaatste feedback
opgepakt en verwerkt. In een volgende versie
worden bekeken.
42
Dit voorkomt dat er dubbele feedback wordt geplaatst. Boven aan de pagina is het mogelijk om naar de feedback pagina van het desbetreffende project te navigeren. Komt de gebruiker voor het eerst op deze pagina dan zal er door middel van een tooltip informatie worden getoond over deze functies en hoe deze te gebruiken zijn.
11.5 Feedback van het project
11.6 Test overzicht pagina De testpagina is vrijwel identiek aan de project pagina. Hier zal dan ook niet dieper op in worden gegaan. Zodra de gebruiker een project opent via de test pagina komt hij op de test overzicht pagina van dat project. Op deze pagina staat een overzicht van de open en afgesloten tests. Verder zijn er enkele statistieken te bekijken, om zo een snel overzicht te hebben van het project. De statistieken bestaan uit een weergave van het aantal open tests tegen het totaal aantal tests, aantal tests per testtype en hoeveel tests er reeds zijn ingevuld door gebruikers.
De feedback die is geleverd kan op twee verschillende manieren worden bekeken. Op
Er is gekozen om in de eerste versie twee type
het moment dat de feedback pagina wordt
tests toe te voegen. Een functionele test in de
geopend ziet de gebruiker verschillende
vorm van een checklist en een usabillity test
feedback blokken met daarin een screenshot,
met behulp van user scenario’s. Meer over
browser informatie en reacties. Dit is een
deze type tests is te vinden in hoofdstuk 4.2.
visuele weergaven van al het feedback. Echter
User scenario’s en hoofdstuk 4.3. Functioneel
neemt deze vorm ook veel ruimte in beslag.
testen.
Daarom is het mogelijk om ook over te gaan naar een lijstweergave. De lijstweergave zorgt voor meer overzicht en is handig voor projecten waar veel feedback op is geleverd. In beide gevallen is het mogelijk voor de gebruiker om te reageren op reeds geplaatste feedback.
11.7 Checklist test Zodra een test wordt gestart komt de gebruiker op een vergelijkbare pagina terecht als de bekijk project pagina. Echter is de paneel aan de zijkant anders. Bij een checklist test zal er in het paneel enkele vragen worden gesteld die kijken of de functionaliteiten
43
van de website werken. Door middel van de
Tijdens de user scenario test wordt alles wat
switches aan of uit te schakelen kan de
de gebruiker doet geregistreerd.
gebruiker antwoord geven op de vragen.
Gaat de gebruiker met zijn muis over een
Zodra de gebruiker klaar is met de vragenlijst
navigatie item? Dan zal dit in de test worden
kan hij door op de groene knop te drukken
opgeslagen. Verder registreert de applicatie
verder gaan naar de volgende pagina of de
hoe lang een gebruiker bezig is met het
test beëindigen (afhankelijk van de aantal
uitvoeren van een test. Lange tijden kunnen
pagina’s of secties binnen de website).
betekenen dat het voor de gebruiker te moeilijk is om bepaalde doelen binnen de
De checklist lijkt in zijn functionaliteit veel op
website te voltooien.
die van Launchlist (zie hoofdstuk 5.3. Launchlist). Launchlist is erg makkelijk en
11.9 Test uitslag
vriendelijk in gebruik en daarom is er
Na het voltooien van een test komt de
ook gekozen om binnen de test- en
gebruiker op de test uitslag pagina. Op deze
feedbackapplicatie niets te veranderen aan
pagina is afhankelijk van de type test de
deze functionaliteit en deze over te nemen
uitkomsten te zien.
van Launchlist. Bij een checklist test zal er een overzicht
11.8 User scenario test
worden gegeven van de afgekeurde en
Bij een user scenario test krijgt de gebruiker
goedgekeurde punten per pagina.
een kort verhaaltje over een potentiële gebruiker van de website. De gebruiker heeft
Bij een user scenario is een overzicht te zien
een bepaald doel op de website en het
van alle handelingen die er zijn gedaan tijdens
is aan de tester om dit doel te voltooien. Als
het testen. Zo kan Studio Stomp precies
de gebruiker het doel haalt zal de test
zien waar eventuele gebruiksvriendelijkheid
automatisch stoppen, lukt de gebruiker het
problemen optreden. In een volgende versie
niet om de test te halen kan hij de test
van de test- en feedbackapplicatie zou het
alsnog stoppen door op de rode knop met
toevoegen van heatmaps extra inzicht kunnen
beëindig test te klikken.
leveren in de testresultaten.
44
“Een heatmap is een
e-mail krijgen zodra er een deadline op
visualisatie die wordt gebruikt
komst is.
om drie dimensionale data te visualiseren. Twee dimensies vormen de x en y coordinaten en de derde wordt gebruikt om de intensiteit van een datapunt te visualiseren.” - Patrick Wied (http://www.patrick-wied.at/static/heatmapjs/)
Met de heatmap is het mogelijk om bijvoorbeeld te bekijken waar de gebruiker het meest op geklikt heeft.
11.10 Agenda De agenda pagina is een vergrote versie van de agenda op het dashboard. Een belangrijke toevoeging op deze pagina is de mogelijkheid om de deadlines te exporteren naar de gebruikers favoriete agenda programma zoals iCal of Gmail. Zodra er door Studio Stomp een nieuwe deadline is ingesteld zal de gebruiker een e-mail krijgen met daarin de mededeling dat er een nieuwe deadline is vastgesteld. Tevens zal de gebruiker een reminder via
45
De applicatie Alle ontwerpen zijn uitgewerkt in een
Bij Studio Stomp wordt er gebruik gemaakt
werkend product. In dit hoofdstuk wordt er
van SASS (http://sass-lang.com/) in
beschreven welke tools en talen er gebruikt
combinatie met Compass (http://compass-
zijn om de applicatie te bouwen en hoe het
style.org/). Deze twee libraries zorgen
bouwproces in elkaar zat. Nadat de grootste
ervoor dat je eenvoudiger en sneller css kan
gedeelte van de applicatie gebouwd was
schrijven.
zijn er testmomenten geweest met Studio Stomp en haar klanten.
12.2 Bouwproces Functionaliteit was voor Studio Stomp
12.1 Tools
belangrijker dan het uiterlijk van de
Tijdens het bouwen is er voor gekozen om de
applicatie. Daarom is tijdens het bouwen van
applicatie te bouwen op Backbone.
de applicatie pas op het laatste moment de
js (http://backbonejs.org/). Backbone is een
vormgeving toegevoegd. Tijdens het
javascript library speciaal gemaakt om
bouwproces waren de pagina’s opgebouwd uit
webapplicaties te maken. Door de sterke
wireframes. Er werd per pagina gebouwd en
fundering van Backbone en het niet moeten
pas verder gegaan naar een volgende pagina
refreshen van de pagina’s is de applicatie snel
als alle functionaliteiten binnen de pagina
en gemakkelijk in gebruik.
werkte. Nadat alle pagina’s zo goed als af waren gerond is de vormgeving toegevoegd.
Andere noemenswaardige javascript plugins en libraries die zijn gebruikt om de applicatie
12.3 Testresultaten
te bouwen zijn require.js (http://requirejs.
Nadat de applicatie was gebouwd zijn er
org/) voor het inladen van de verschillende
enkele testmomenten geweest met Studio
javascript bestanden en jQuery (http://
Stomp en haar klanten. De applicatie is
jquery.com/) voor DOM manipulaties.
voorgelegd aan de testpersonen en deze kregen de taak om te omschrijven wat ze op
46
de verschillende pagina’s binnen de applicatie volgens hen konden doen. Verder werd er gevraagd of zij feedback konden achterlaten op een project en een test naar keuze uit te voeren. De grootste problemen kwamen naar voren
Afb 12.1.1 - De tooltip in actie
op de “Bekijk project” pagina. Daar werd gevraagd of zij feedback konden achterlaten
Naast deze grote usability issue kwamen er
op de website die zij bekeken. Allen drukten
vooral veel kleinere bugs naar boven.
ze op de “nieuwe feedback” knop en wachtten
Deze bugs zijn genoteerd en de meest kritieke
ze tot er wat ging gebeuren. Nadat er werd
bugs zijn opgelost en verbeterd in de
uitgelegd dat ze een selectie moesten maken
applicatie.
van de website hadden ze het snel door. Om dit probleem te tackelen zijn er tooltips toegevoegd aan de “Bekijk project”, “Checklist test” en “User scenario test” pagina (Zie afb. 12.1.1). Deze tooltips worden getoond op het moment dat een gebruiker één van deze pagina’s voor het eerst bezoekt. In de tooltips wordt er uitgelegd wat er op de pagina kan worden gedaan en hoe je dat moet doen. Op de “Bekijk project” pagina wordt er bijvoorbeeld uitgelegd dat je een na het klikken van de nieuwe feedback button een selectie moet tekenen op de website.
47
Afronding Hoofdstuk 13 - Conclusie Hoofdstuk 14 - Advies Hoofdstuk 15 - Tot slot Hoofdstuk 16 - Bronnenlijst
Conclusie Aan het begin van het project is als doel
website te testen (zie hoofdstuk 4). Hieruit
gesteld om een applicatie te ontwikkelen
is de conclusie getrokken dat een website
welke het test- en feedbackproces binnen
pas optimaal getest is zodra er zowel op
Studio Stomp optimaliseert, zodat het voor
functionaliteit als op gebruiksvriendelijkheid
Studio Stomp en haar klanten gemakkelijker
tests zijn uitgevoerd. Aan de hand van deze
wordt te testen en feedback te leveren.
criteria en testmethodes is er gekeken naar de concurrenten in de markt (zie hoofdstuk
Om de probleemsituatie te schetsen zijn er
5). Hoewel elke reeds beschikbare tool in
als eerst interviews gehouden met de creative
de markt zijn eigen sterke punten heeft,
director en project manager bij Studio Stomp
bestaat er geen tool waarbij het mogelijk
(zie hoofdstuk 2). Daarin is vastgesteld dat
is om zowel een functionele als een
het huidige proces verre van ideaal is. Er
gebruiksvriendelijkheid tests uit te voeren.
zijn vervolgens verdere interviews gehouden
Er is verder gekeken naar de verschillende
met Studio Stomp en haar klanten om meer
belangen die er spelen bij de doelgroep
te weten te komen over de doelgroep van de
als een product getest dient te worden (zie
applicatie (zie hoofdstuk 3). In dit hoofdstuk
hoofdstuk 6). Aan de hand van interviews
is er dieper op de probleemsituatie ingegaan
is er achterhaald dat de doelgroep om
en is er gekeken naar de huidige manier van
verschillende redenen test. Studio Stomp
testen door Studio Stomp en haar klanten.
vindt het belangrijk om de kwaliteit van het
Daar is naar voren gekomen dat er in het
product te waarborgen, de klant wil graag een
huidige proces enkele knelpunten bevinden.
product op de markt brengen die aanslaat bij de potentiële eindgebruikers en die willen op
Om een applicatie te maken welke het
zijn beurt een product zonder fouten anders
mogelijk maakt websites te testen, moest
haken zij snel af.
er eerst onderzoek worden gedaan naar de verschillende testmethodes die er zijn om een
49
Aan de hand van de onderzoeksresultaten zijn er functionele eisen gesteld aan de applicatie (zie hoofdstuk 7). De applicatie ondersteunt zowel functionele tests, aan de hand van een checklist en een usability test doormiddel van user scenario’s. Door slim in te spelen met de nieuwste technieken is het mogelijk om binnen de applicatie een website te bekijken en daar feedback op te geven met behulp van screenshots en browser gegevens. Zo is het voor Studio Stomp meteen duidelijk waar het probleem zich voordoet. De klant hoeft op zijn beurt niet meer zelf achter de browser gegevens aan en kan altijd terughalen wat er met zijn feedback is gedaan. Alle functionaliteiten binnen de applicatie zorgen ervoor dat het test- en feedback proces binnen Studio Stomp sneller, eenvoudiger en overzichtelijker verloopt.
50
Advies De applicatie heeft de potentie om het test- en feedbackproces van Studio Stomp drastisch te verbeteren. Uit onderzoek, interviews en tests is naar voren gekomen dat het voor zowel Studio Stomp als de klant gemakkelijk in gebruik is en een hoop knelpunten wegneemt. Deze applicatie diende echter als proof of concept en is het nog niet zo ver ontwikkeld dat het nu ingezet kan worden. Om de applicatie gebruiksklaar te maken dienen er enkele toevoegen en aanpassingen gedaan te worden.
14.1 Backend Op dit moment is alleen de front-end (voorkant) van de applicatie gerealiseerd. Echter dient er ook een backend (achterkant) gemaakt te worden. In de backend moet het mogelijk zijn voor Studio Stomp om project toe te voegen, versies te uploaden en tests aan te maken. Of hiervoor een externe applicatie zou moeten worden gebouwd of dat de backend in de huidige applicatie past zou verder onderzocht moeten worden.
14.2 Features Tijdens de laatste test zijn er enkele punten naar boven gekomen die de applicatie sterk zouden verbeteren, maar waar geen tijd meer voor was om te realiseren.
14.2.1 Logboek Bij een project kunnen meerdere versies worden geüpload. Elke versie verschijnt na een test- en feedbackronde. Een versie bevat verschillende bug fixes en verbeteringen. Voor de klant zou het overzichtelijk zijn om bij elke versie een logboek met de fixes en verbeteringen op de kunnen vragen. Zo weet de klant welke problemen er zijn opgepakt en wat er nog open staat.
14.2.2 Jira Uit onderzoek blijkt dat Studio Stomp en de klant graag een koppeling ziet tussen de applicatie en het issue tracking systeem Jira. Met behulp van Jira zou het mogelijk zijn voor Studio Stomp om feedback om te zetten naar een issue. Jira heeft een eigen API, wat het gemakkelijk maakt om via een externe applicatie issues te importeren naar
51
dit systeem. Zo weet de klant wat er met zijn feedback wordt gedaan en scheelt het Studio Stomp tijd om feedback over te zetten naar het issue tracking systeem. De precieze invulling en hoe dit eruit zou zien moet verder onderzocht worden.
52
Tot slot Dit rapport en de bijbehorende applicatie was
Stomp te verbeteren, was dit voor mij ook
nooit tot stand gekomen dankzij de hulp van
niet meer dan een logische vervolgstap.
verschillende mensen. Als eerst wil ik Studio
Dit project heeft mij geleerd dat testen
Stomp bedanken voor hun tijd, creativiteit
nog altijd een moeilijk onderwerp is in het
en technische hulp die zij tijdens het hele
ontwikkelproces. Veel bedrijven hanteren
project beschikbaar stelden. Verder gaat mijn
verschillende methodes en er is geen één
dank uit naar Avinash Changa van DSRPT,
gouden regel voor testen. Het belangrijkste is
Dennis Maij van We Are Bold en Bas van
dat er wordt getest en om de meeste fouten
Bokhorst van GreenBerry voor hun tijd die
eruit te halen moet je zowel op functionaliteit,
zij hebben vrijgemaakt voor interviews en
als op gebruiksvriendelijkheid testen.
testmomenten. Ook wil ik graag Robert van
Verder heb ik tijdens dit project veel nieuwe
Boeschoten en Charlie Mulholland van het
technieken geleerd die mij zullen helpen in de
HVA bedanken voor de begeleiding tijdens
rest van mijn loopbaan als developer.
het project. Als laatst gaat mij dank uit aan u voor het Toen ik bij Studio Stomp bijna twee
lezen van mijn rapport. Ik hoop dat u dit
jaar geleden binnen kwam, teste ik mijn
rapport met plezier heeft gelezen.
producten nooit op de juiste manier. Ik nam vaak aan dat producten werkte en teste het dan ook niet op de verschillende browsers. In de tijd dat ik bij Studio Stomp werkte ben ik steeds meer en meer gaan testen. Dit heeft mij ook doen inzien hoe belangrijk testen is voor een product en toen Studio Stomp met de vraag kwam om mijn afstudeerproject te gaan doen om het testproces van Studio
53
Bronnenlijst “A/B, Split and Multivariate Test Duration Calculator.” Visual Website Optimizer. N.p., n.d. Web. 10 Apr. 2014.
. Ahmad, Zulal. Aspree. Digital image. Dribbble. N.p., 30 Jan. 2014. Web. 11 Mar 2014.
. “A Javascript Module Loader.” RequireJS. N.p., n.d. Web. 04 Apr. 2014. . “Backbone.js.” Backbone.js. N.p., n.d. Web. 04 Apr. 2014. . Bannister, Chris. Desktop. Digital image. Dribbble. N.p., 10 Mar. 2013. Web. 7 Apr. 2014. . Chapman, Cameron., Chopra, Paras., Munroe, Lee., and Gremillion, Ben. A Field Guide to Usability Testing. Freiburg, Germany: Smashing Media GmbH, 2012. eBook. “Compass.” Compass. N.p., n.d. Web. 04 Apr. 2014. . Dribbble. N.p., n.d. Web. 11 Mar. 2014. . “Feedback.” Google. N.p., n.d. Web. 26 May 2014. . “Flow Chart Definition.” Edraw. N.p., n.d. Web. 29 May 2014. “JQuery.” JQuery. N.p., n.d. Web. 04 Apr. 2014. . Krug, Steve. Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability. Berkeley, CA: New Riders Pub., 2014. Print. Krug, Steve. Rocket Surgery Made Easy: The Do-it-yourself Guide to Finding and Fixing Usability Problems. Berkeley, CA: New Riders, 2010. Print. Nadine. “User Stories, Scenarios & Use Cases” Cloudforrest Design. N.p., 25 apr 2011. Web. 7 apr 2014. .
54
Nielsen, Jakob. “How Long Do Users Stay on Web Pages?” Nielsen Norman Group. N.p., 12 Sept. 2011. Web. 03 May 2014. . POP App in actie. Digital image. POP App. N.p., n.d. Web. 7 Apr. 2014. . “Sass: Syntactically Awesome Style Sheets.” Sass: Syntactically Awesome Style Sheets. N.p., n.d. Web. Apr. 2014. . Tantardini, Vincent. Form generator UI. Digital image. Dribbble. N.p., 6 Mar. 2014. Web. 13 Mar 2014. . Tidwell, Jenifer. Designing Interfaces 2e. Sebastopol: O’REILLY MEDIA, INC, USA, 2011. ePub. “User Research Results in 1 Hour.” UserTesting: Remote Usability Testing Software. N.p., n.d. Web. 10 Apr. 2014. . Wied, Patrick. “What Is a Heatmap?” Heatmap.js. N.p., n.d. Web. 28 May 2014. . “Website Checklist Application.” Launchlist Pro. N.p., n.d. Web. 07 Apr. 2014. . Yarnell, Mason. Mixpanel Survey Analytics UI/UX. Digital image. Dribbble. N.p., 23 Jan. 2014. Web. 13 Mar 2014. .
55
Bijlage Bijlage A - Interviews Bijlage B - Testresultaten Bijlage C - Testplan Bijlage D - Wireflow Bijlage E - Schermontwerpen
A. Interviews Interview Michel Stomp en Jelleke Raats
•
Implementatie
•
Monitoring en onderhoud
Dit interview is opgesteld aan de hand van e-mail verkeer met Michel Stomp (Creative
Iedere fase wordt getest. Volgens de
Director) en Jellek Raats (Project Manager)
processen van Studio Stomp heeft iedere
van Studio Stomp.
fase een aantal voorwaarden waaraan het deelproduct moet voldoen. Daarnaast worden
In welke fase’s wordt er getest bij Studio
uit iedere vorige fase de criteria gesteld voor
Stomp?
de volgende fase. Hoe eerder in het proces
Studio Stomp kent binnen een project een
een fout wordt gevonden, hoe minder fouten
iteratief proces met meerdere fases.
later kunnen worden teruggevonden.
Deze fases kunnen in verschillende
Na afronding van iedere fase moet een
samenstellingen één project vormen. Een
checklist worden opgesteld voor de volgende
project kan bestaan uit alle fases of uit één
fase. De checklist bestaat voor een deel
of meerdere fases. Studio Stomp kent de
uit vaste punten en deels uit punten die
volgende fases:
specifiek voor een project gedefinieerd zijn. In een ideale wereld wordt iedere fase door
•
•
Inceptie: Concept ontwikkeling, briefing /
meerdere subjecten getest. Per fase kan
debriefing, vaststellen outer scope
verschillen of meer dan één test nodig is,
Functioneel ontwerp: Keuze medium,
bijvoorbeeld gericht op type gebruiker.
vaststellen randvoorwaarden, innerscope •
Interactieontwerp: Persona’s, user stories, user flow, interaction design, wireframes
•
Visueel ontwerp: Grafisch ontwerp, UX design
•
Development: Technische realisatie van product(en)
Wie zijn de eindverantwoordelijken bij het testen? Het is per fase verschillend wie de eindverantwoordelijke is bij het testen. In 99% van de gevallen zijn de algemeen,
57
technisch of creatief directeur de
en “Is de navigatie responsive?”.
eindverantwoordelijke bij het testen. Bij zeer kleine en korte projecten kan het voorkomen
User Scenarios worden er op dit moment nog
dat de gene die aan het project heeft gewerkt
niet gebruikt tijdens het testen, dit wilt
de eindverantwoordelijke is voor het testen.
Studio Stomp echter wel in de toekomst gaan
Onderstaande lijst geeft aan wie in welke fase
toepassen.
eindverantwoordelijke is: Hoe wordt op dit moment feedback •
Inceptie: Algemeen directeur
verzameld en verwerkt?
•
Interactie: Creatief directeur
Alle testers krijgen een testplan. Na het
•
Visueel: Creatief directeur
invullen van dit testplan levert de tester het
•
Development: Technisch directeur
testplan weer in bij de project manager. Deze
•
Implementatie: Algemeen directeur
bundelt alle testresultaten en neemt deze
•
Monitoring en onderhoud: Algemeen
door. Als alle testplannen zijn verzameld volgt
directeur
er een zo gehete testresultaten bespreking. In deze bespreking worden alle resultaten door
Welke testmethodes worden er op dit
genomen en behandeld. Zo wordt er in dit
moment ingezet bij Studio Stomp?
gesprek gefilterd wat echte problemen zijn en
Studio Stomp test zijn producten doormiddel van testplannen. Deze testplannen worden opgesteld door de project manager. In de testplannen worden vooral de functionaliteit van de website of applicatie behandeld. Het testplan is een Word document waar het voor de tester mogelijk is de vragen met ja of nee te beantwoorden en eventueel een opmerking te plaatsen. Denk hierbij aan vragen als “Linkt het logo terug naar de homepage?”, “Werkt het formulier?”
wat voor prioriteit deze hebben. Na deze bespreking verwerkt de projectmanager alle problemen in Redmine (issue tracking systeem). Nadat elke fase wordt er ook een link of bestand, hangt af van de fase, naar de klant toegestuurd. Deze bekijkt de voortgang en test de website of applicatie voor zichzelf. Zijn bevindingen kunnen dan op erschillende manieren worden teruggekoppeld aan
58
Studio Stomp. De ene klant stuurt een mail,
tussenstappen in het testen en het verzamelen
de ander belt Studio Stomp op of er wordt
en het verwerken van de testresultaten.
een Word document terug gestuurd met
Studio Stomp ziet dit graag geautomatiseerd
feedback en testresultaten.
worden.
Dit alles is een erg tijdrovende klus en is niet
Ook is Studio Stomp niet tevreden met de
naar wens van Studio Stomp. Ook raakt
testplannen die zijn opgemaakt in Word.
Studio Stomp snel het overzicht kwijt. Zeker
Deze zijn moeilijk tot niet doorzoekbaar,
in het geval van feedback van de klant.
slecht geformatteerd en fout gevoelig.
Deze komen via allemaal verschillende manieren binnen en er is op dit moment geen
Interview Michel Stomp
centraal punt waar dit verzameld en
Dit interview is opgesteld om meer te
gearchiveerd kan worden.
weten over jullie testmethodes en de redenen waarom jullie testen. Om te
Welke problemen treden zich op bij de
beginnen, op welke manier testen jullie een
huidige manier van testen?
product?
Studio Stomp geeft aan dat de test vaak
Op dit moment hebben wij geen vaste
onvolledig zijn. Ze missen een generieke
methodes om te testen. Eigenlijk is het
checklist per type project of fase met criteria
een beetje een rommeltje. In het verleden
waaraan alle (deel)producten (van dat
hebben wij wel gebruik gemaakt van
type) moeten voldoen.
testmethodes. Deze werden geleid door de project manager. Die schreef aan de hand
Op dit moment zijn de tests vaak niet
van criteria, waaraan het product moet
gebaseerd op input en resultaten uit
voldoen, user scenario’s en functionele
voorgaande fases. Dit komt mede omdat het
vragen. Dit kwam in een document en deze
al snel onoverzichtelijk wordt wat de vorige
werd verspreid onder een aantal testers.
resultaten waren en wat daar mee is gedaan.
Elke tester kreeg een aantal platformen met bijbehorende browsers. Bijvoorbeeld ik,
Het verzamelen van feedback is daarom erg
Michel, jij moet deze scenario’s doorlopen op
tijdrovend. Er zitten op dit moment teveel
een Mac met de browsers Chrome
59
en Safari. Met vragen als “Zit dit erin?”,
Waarom is het voor Studio Stomp belangrijk
“Werkt alles goed?” en “Staat alles op de
om een product goed te testen?
goede plek?”. Daarnaast heb je developers die
Dit is belangrijk om de kwaliteit van het
gewoon moeten testen wat ze bouwen.
product te waarborgen. Als je niet test kun je
We hebben een aantal keer de focus proberen
alles wel maken. Maar dan weet je dat het vol
te leggen op zelf je browser tests uit te
fouten gaat zitten. Je doet het om fouten
voeren, maar dit is nog niet voldoende in ons
van je product of het nou design of
systeem verankerd. Momenteel benoemen
functionaliteit is, zo vroeg mogelijk eruit
we een aantal testers welke het product op
proberen te halen. Het gebeurt nu nog steeds
verschillende devices en browser proberen.
te vaak dat wij pas aan het eind beginnen met
Dit doen ze zonder dat er een plan of
testen, terwijl dit toch eerder naar voren zou
document of iets dergelijks achter zit. Dit zijn
moeten komen.
ook meestal de mensen die al aan het product werken.
Merken jullie verschil in resultaten met geteste producten tegenover niet geteste
Bevalt deze manier van testen? Kunnen
producten?
jullie op deze manier de grootste gedeelte
Ja, ik denk dat het op het moment wel
van de fouten opsporen?
steeds beter gaat. Dat het bij ons nu echt
De testscenario’s werden meestal aan het
een product af is als wij zeggen dat het af is.
einde van het proces geschreven. Dit
Voorheen zeiden we wel eens dat een product
is eigenlijk niet ideaal. Ze zouden aan het
af was en dan kregen we feedback terug van
begin van het proces moeten worden
de klant of gebruikers met problemen waar
geschreven. Iets als hier en hier moet het aan
wij helemaal geen rekening mee hadden
voldoen en deze criteria tijdens meerdere
gehouden. Door goed te testen loop je hier
testrondes laten terug komen. Als je dit van
minder vaak tegen aan.
tevoren doet kun je ook steeds terugvallen op de testscenario’s en kan je tijdens het
Testen jullie alle producten op dezelfde
developen steeds je product daarop testen.
manier? Nee, dat is heel verschillend. Ik denk dat dit ook altijd verschillend zal blijven.
60
Dit komt omdat wij verschillende soorten
waren, mis je bijvoorbeeld een usabillity
producten bouwen. Zo heb je producten die
test?
specifiek mobile zijn, die kun je bijvoorbeeld
Ja, zeker bij projecten die wij helemaal zelf
niet hetzelfde testen als een desktop product.
maken, waar we zelf bezig zijn met het ontwikkelen van een nieuw concept. Dan zou
Welke problemen heb je door het testen
je wel gebruikerstests willen doen. Om er echt
kunnen achterhalen, die anders niet naar
achter te komen of wat wij hebben gedacht
voren waren gekomen?
goed werkt. Dit hebben we in het verleden
Een voorbeeld is bijvoorbeeld een aanmeld
ook bij sommige projecten niet goed gedaan.
formulier op een website. Je kan je dan
Maar vaak missen wij tijd en budget. Het
aanmelden op drie verschillende manieren.
gebeurt nu ook te vaak dat wij de producten
Met e-mail, Facebook en Twitter. E-mail is
laten testen door de mensen die het hebben
dan vrij gemakkelijk. Je laat je e-mail adres
gemaakt. Je zou willen dat bijvoorbeeld drie
achter, je krijgt een bevestigings mail en
andere mensen van kantoor, die niks met het
dat is dat. Bij Facebook werkt dat anders, je
project gedaan hebben, het product testen.
bent ingelogd of niet ingelogd op Facebook. Als developer ben je vaak ingelogd op je Facebook en dat geeft een heel ander scenario terug als dat je niet ingelogd bent. Als je dat
Interview Avinash Changa (DSRPT, We Make VR) Bedankt dat je tijd wilt vrij nemen om een
niet goed test loop je tegen problemen aan.
interview met mij te houden. Zou je
Dan krijg je feedback van gebruikers terug dat
jezelf kunnen voorstellen?
het niet werkt om in te loggen met Facebook, terwijl wij dan zeggen ja het werkt wel. Maar de fouten die zich voor doen komen dan van gebruikers die nog niet zijn ingelogd in Facebook. Tegen dat soort dingen loop je aan als je niet goed en uitvoerig test.
Mijn naam is Avinash, oprichter en eigenaar van DSRPT Communications. Wij produceren digitale producten in het breedste zin van het woord. Dit loopt uiteen van digitale karakter animaties, after effects voor films, muziekvideo’s, maar ook websites en apps. Daarnaast ben ik eigenaar van
Ik weet dat de testscenario’s die wij
het bedrijf We Make VR. We Make VR
voorheen gebruikte vrij functioneel gericht
specialiseert zich in het maken van virtual
61
reality en wij zijn één van de pioniers op het
gemaakt. Deze commercial wordt gemaakt
gebied van VR en de Oculus Rift. Zo zijn wij
in het engels, maar dat het ook moet worden
bezig met het ontwikkelen van een camera
vertaald naar vijf andere talen. Het vertalen
voor de Oculus Rift waarbij het mogelijk is
ging doorgaans via een excel sheet of power
360 graden te filmen.
points, want klanten hebben daar meestal geen standaarden voor. Toen ben ik met
Hoe zijn jullie in aanraking gekomen met
het idee gekomen om een online systeem
Studio Stomp?
te maken. Het systeem bestond uit online
Ik ken Michel al een langere tijd. Via via zijn
invul formulieren, voor de vertalingen, die
wij in contact gekomen. Michel wou naast
konden worden ingevuld en deze gingen dan
muziek maken leren developen. Hij is Flash
automatisch naar de developer. Dit was één
gaan leren en mensen uit mijn vrienden
van de eerste projecten die ik samen met
kring geef ik altijd een kans. Toen hij net
Studio Stomp heb gedaan. Daarnaast veel
begon heb ik hem wat kleine klusjes gegeven.
nieuwsbrieven, flash banners en promosites.
Dit ging eigenlijk prima. Zodoende heb ik
Op dit moment zijn wij bezig met het
Studio Stomp zien ontwikkelen, later kwam
bedenken en uitwerken voor een app voor de
Benjamin erbij als zakenpartner en zijn ze
kanaal rondvaartboten in Amsterdam.
een paar keer bij mij terecht gekomen als ze zakelijke of juridische vragen hadden. Als er
Hoe test u het product dat Studio Stomp
nu een web gerelateerd project binnenkom
oplevert?
denk ik als eerst aan Studio Stomp.
Via verschillende manieren. Wij testen het intern, afhankelijk van het target platform,
Welke projecten heeft Studio Stomp voor
op verschillende machines en browsers.
jullie gedaan?
Hierbij houden wij ons eigen excel sheets bij
Één van de eerste projecten die wij samen
met bugs en andere zaken die ons opvallen.
hebben gemaakt was een online vertaal
Na het verwerken van de eerste feedback
systeem. Het doel van dit project was om
en bugs wordt er een versie gestuurd naar de
digitale producties gemakkelijker te laten
eindklant. Met de klant maken wij afspraken
verlopen. In onze branche komt het voor dat
dat zij groepen hebben van verschillende
er bijvoorbeeld een tv commercial wordt
gebruikers en deze laten wij bepaalde
62
handelingen en functies uitvoeren. Dus
het uit te werken in een pdf met screenshots
naast functioneel testen wij ook op usability.
en notities. Dit hangt ook van het probleem
Wij proberen van het feedback dat wij
af. Sommige problemen moet je zien om te
terugkrijgen een onderscheid te maken tussen
begrijpen wat er aan de hand is.
technische bugs, usabillity issues en nonissues. Dit is altijd het lastigste, want als je
Doen jullie dit op dezelfde manier voor
een klant laat testen komen ze altijd terug met
projecten die je niet bij Studio Stomp laat
feedback als “Het werkt niet.” of “Ik kan geen
doen?
tekst copy/pasten”, maar in welke situatie dit
Dit hangt heel erg van het soort product af.
zich voordoet, waar dit niet kan en op welke
Veel dingen die wij maken is geanimeerd
platform dat gebeurt is altijd heel erg lastig te
werk en dit testen wij dan vooral op kleur en
achterhalen. Het is voor een klant, die weinig
render kwaliteit. Op het moment dat het
tot geen technische kennis bezit, erg lastig
gaat om de wat complexere zaken.
om aan te geven op welke browser ze werken,
Bijvoorbeeld een project dat wij hebben
welke versie van de browser en welke versie
gedaan voor een nieuwe attractie in een
van bijvoorbeeld Mac OSX. Dat stuk van het
pretpark in Oslo, kan je dat niet goed intern
proces is heel moeilijk te formaliseren. Zelfs
testen. Dan moet je zelf in het vliegtuig
als je ze een heel gestructureerd vragenlijst
stappen, in de karretjes gaan zitten en kijken
en instructies stuurt krijg je nog feedback
of alle projecties kloppen en of de beleving
terug als “Het werkt niet als ik op die knop
is zoals wij bedoeld hebben. Wat wij wel
druk”, maar wat de context is kom je niet
proberen is om de gebruikersbeleving hier te
achter. Je gaat dan toch proberen dingen te
simuleren, maar een exacte test is niet altijd
reproduceren en je in te leven in de gebruiker,
mogelijk.
maar je komt er dan toch niet achter. Is het voor u altijd duidelijk wat er met uw Op welke manier levert u testresultaten en
feedback wordt gedaan?
feedback aan Studio Stomp?
Soms wel, soms niet. Soms, zeker als je dicht
De excel sheets gaan door naar de gene die
tegen de oplever fase zit, dan zijn er veel
het project managet bij Studio Stomp. Als een
dingen die tegelijk lopen. Wat er dan
excel sheet niet voldoende is proberen wij
bijvoorbeeld dgebeurt is dat er nog acht
63
issues openstaan. We hebben dan een
het prettig vinden als dit op een centrale
versie getest waarbij een aantal punten zijn
plek wordt bijgehouden, waar je altijd terug
opgepakt. Dit wordt doorgestuurd naar de
kan kijken wanneer er ook alweer een
klant en komt dan weer feedback op. Dit
deadline is?
sturen wij weer door naar Studio Stomp,
Dit gaat altijd via e-mail. Dit betekent dat er
die op zijn beurt dan weer aangeeft dat deze
aan onze kant de project manager de
punten al opgepakt zijn en geen issues meer
deadline in de agenda zet. Er is op dit
zijn. De versies komen dan niet meer overeen.
moment niet een online systeem hiervoor,
Hierdoor gaat er wel eens feedback verloren
waar je bijvoorbeeld automatisch een e-mail
of loopt er feedback door elkaar.
reminder krijgt met een mededeling dat er een deadline aankomt. Het is op dit moment
Hoe vindt u het huidige testproces gaan bij
niet een echt gestructureerde manier van
Studio Stomp?
deadlines plannen. Meestal zijn het de project
Wisselend. Er is zeker ruimte voor
managers die met elkaar overleggen
verbetering. Er wordt nu een lijst opgesteld
wanneer de deadlines plaatsvinden.
met punten die moeten werken. Dit wordt getest en dan zijn er een paar die werken,
Is het voor jullie duidelijk welke issues er
maar ook een paar niet. Wat je dan eigenlijk
tijdens een project openstaan en aan
wilt is dat bij een volgende versie al deze
welke Studio Stomp werkt?
punten weer mee worden genomen en
Dit gaat via e-mail verkeer. Dit is ook de
opnieuw worden getest. Dit gebeurt op dit
rede dat het soms een beetje scheef loopt.
moment niet. Wat wel een gemis is. Dit zorgt
Wij houden een lijstje bij met welke issues
ervoor dat je niet voort kan bouwen op
uitstaan en het komt dan voor dat er
eerdere test resultaten. Van onze kant
bijvoorbeeld acht van de tien issues zijn
proberen we dat te structureren, maar het zou
opgelost en dat er bij de volgende versie de
makkelijker zijn als Studio Stomp daar een
openstaande niet meer op de lijst staan. Die
systeem voor had.
zijn dan gewoon vergeten. Vaak komt dit omdat er dan een versie wordt afgesloten en
Studio Stomp geeft meestal een deadline
in die versie zouden alle tien de issues zijn
voor het leveren van feedback. Zou je
opgelost, maar dit is dan niet altijd het geval.
64
Dit kan irritatie opwekken bij de klant, omdat die bijvoorbeeld twee maanden geleden het probleem al hebben aangegeven. Dit is doorgegeven aan Studio Stomp en dan een maand later en twee versies verder is dit probleem nog niet opgelost. Dit komt voornamelijk door het e-mail verkeer, mensen die langs elkaar heen werken en het niet inzichtelijk genoeg maken van de issues voor iedereen. Als Studio Stomp een applicatie ontwikkelt waarin het gemakkelijk is een product te bekijken en daar feedback op te leveren, zou je dit dan overwegen om te gebruiken? Ja zeker. Dit zou bijvoorbeeld voor het meest recentelijk project wat wij samen met Studio Stomp hebben gemaakt voor Syngenta zeker een oplossing zijn geweest. Want dan heb je een online omgeving waar je je versies en feedback kan bijhouden. Dit zou helemaal ideaal zijn als het feedback wat wordt geleverd gekoppeld kan worden aan een echt issue tracking systeem. Waarbij het mogelijk is om feedback om te zetten naar echte issues mocht dat nodig zijn.
Interview Dennis Maij (We Are Bold) Bedankt dat je tijd wilt vrij nemen om een interview met mij te houden. Zou je jezelf kunnen voorstellen? Ik ben Dennis Maij en ben eigenaar van We Are Bold. We Are Bold is een web ontwikkel bureau en wij doen alles op het gebied van web. Concept, design, development en advies. Hoe zijn jullie in aanraking gekomen met Studio Stomp? Voordat ik met We Are Bold begon hadden mijn broer Steven en ik een bedrijf dat hete Tera Preta. Dat zat tegenover Studio Stomp in hetzelfde gebouw. Wij kwamen geregeld bij elkaar binnen als één van ons een klusje had voor elkaar. Verder heeft mijn broer regelmatig technische ondersteuning geboden bij projecten van Studio Stomp. Welke projecten heeft Studio Stomp voor jullie gedaan? Wij hebben een tijdje terug een redelijk groot project begeleid bij Studio Stomp waar een externe developer uit de Filipijnen bij betrokken was. Verder hebben wij ook mee geholpen met het opzetten van de Studio Stomp website en hebben wij nog wat
65
kleinere klusjes als banners etc uitgewisseld.
Nee eigenlijk niet. Het is soms moeilijk te achterhalen wat de klant bedoelt. Zeker met
Hoe leveren jullie projecten op aan een
klanten die niet technische kennis hebben is
klant?
dit lastig. Het is dan lastig te achterhalen
Dat verschilt per project. Bij kleinere
waar de problemen zich voordoen,
projecten developen wij direct op de server
bijvoorbeeld op welke browser. Verder mis je
waar de website op gaat draaien, op het
ook visueel feedback. Je probeert dan uit te
moment dat er een versie klaar is die voor
leggen hoe ze dit kunnen achterhalen, maar
acceptatie naar de klant moet delen wij de
dit is verre van ideaal en kost alleen maar tijd.
link met ze. Met grotere projecten developen wij op drie verschillende locaties. De eerste
Hoe test u zelf het gemaakte product?
is onze localhost, waar alleen wij toegang tot
Dit doen we aan de hand van bepaalde user
hebben. Daarnaast hebben wij een testserver
scenario’s. We schrijven een aantal
staan waar steeds afgeronde versies op komen
handelingen uit die een gebruiker moet
en bekeken moeten worden door de klant. Als
kunnen uitvoeren en proberen dit uit te
alles goed is komt het op de server en voeren
voeren. Onderweg proberen wij ons product
wij nog wat kleine aanpassingen door.
zo veel mogelijk te “slopen” zoals we dat noemen. Hier proberen we er achter te komen
Op welke manier levert de klant feedback
of alles echt werkt zoals het zou moeten
terug aan jullie?
en of er geen fouten op treden.
Dat verschilt per project. Soms komt de klant persoonlijk langs en gaan we door de website
Zijn dit soort tests ideaal? Haal je alle fouten
heen. Daaruit rollen dan een aantal punten
eruit?
welke nog opgepakt moeten worden. Bij
Eigenlijk zou je je product moeten laten
andere projecten waar het niet mogelijk is om
testen door gebruikers die het product nog
fysiek af te spreken krijgen wij meestal een
helemaal niet kennen. Als developer zit je een
excel sheet terug.
x aantal maanden in een project en weet je precies wat de website moet doen. Zo weet
Je geeft aan dat je soms een Excel sheet
je al waar je alles kan vinden en kan je
terug krijgt, is dit ideaal?
dus niet goed testen op usabillity.
66
Gebruiken jullie een soort van issue tracking
gebaseerd is op valide data en dergelijke. Ons
systeem om alle feedback te archiveren en
bedrijf bestaat nu uit ongeveer 14 mensen en
heeft de klant hier ook inzicht in?
zijn gelegen in Utrecht. Verder werken we
Ja wij gebruiken BamBam als issue tracking
veel samen met partijen als Studio Stomp
systeem. Het ligt per project eraan of de
voor digitale realisatie.
klant hier inzicht in heeft. Bij kleinere projecten zeker niet. Dan communiceren we
Hoe zijn jullie in aanraking gekomen met
meestal gewoon face to face. Bij grote
Studio Stomp?
projecten heeft de klant eigenlijk altijd
Ik ben benaderd door Benjamin. Hij had ons
toegang tot de openstaande issues.
ontdekt via een reclame prijs die wij hadden gewonnen en niet zo heel lang geleden
Als Studio Stomp een applicatie ontwikkelt
hebben wij ons eerste project gedaan.
waarin het gemakkelijk is een product te bekijken en daar feedback op te leveren,
Welke projecten heeft Studio Stomp voor
zou je dit dan overwegen om te gebruiken?
jullie gedaan?
Dat zou ik dan eerst een keer willen uit
Wij hebben nu twee projecten gedaan en we
proberen. Een soort beta test ermee houden
zijn nu aan het oriënteren voor een derde
en als het me bevalt waarom niet?
project. Het eerste project dat we hebben gedaan was voor Teva. Een campagne waar
Interview Bas van Brokhorst (GreenBerry)
een aantal retailers worden aangesloten en via een win systeem een reis naar de Grand
Bedankt dat je tijd wilt vrij nemen om een
Canyon kunnen winnen. Verder hebben
interview met mij te houden. Zou je
wij onze eigen website bij Studio Stomp
jezelf kunnen voorstellen?
ondergebracht en die hopen wij eerdaags live
Ik ben Bas van Bokhorst. Ik heb sinds 2008
te kunnen zetten.
een online communicatie bureau genaamd GreenBerry. We maken veel online producten
Hoe test u het product dat Studio Stomp
voor diverse klanten. Het geen wat we maken
oplevert?
is gericht op inzichten en feiten. We maken geen werk wat er alleen leuk uitziet, maar niet
Dit gaat via drie stappen. Ik ga als eerst er naar kijken, ik ben eind verantwoordelijke
67
voor de kwaliteit. Dan kijk ik naar de kwaliteit
Doen jullie dit op dezelfde manier voor
en of alle functionaliteiten erin zitten.
projecten die je niet bij Studio Stomp laat
Ik stel dan een lijst op met verschillende
doen?
categorieën. Bugs, features, etc. en aan deze
Ja andere projecten verwerken wij eigenlijk
lijst hang ik dan prioriteiten. Deze lijst zet ik
op dezelfde manier. Het verschil is wel dat
in onze project managementtool genaamd
elk bedrijf andere tools hebben om issues te
Basecamp. Vervolgens stuur ik dit door
noteren. Wij werken met Basecamp en andere
naar de project manager aan de kant van
bijvoorbeeld met Jira of iets anders.
Studio Stomp. We orgineseren wekelijks meetings om deze lijsten door te nemen en
Is het voor u altijd duidelijk wat er met uw
een planning te maken om deze punten op
feedback wordt gedaan?
te pakken. Vervolgens gaan we elke issue
Niet altijd. Dit hangt er van af wie er bij
weer los testen of het is opgelost zodra Studio
betrokken is. Sommige developers zijn er
Stomp dat aangeeft. Naast dat ik er als
goed in het bijhouden van hun takenlijst
technicus naar kijk, kijkt er voor de rest een
en het aangeven van bepaalde keuzes en
designer naar. Die kijkt echt of alles eruit
sommige doen dat eigenlijk niet. Daarom
ziet zo als het is bedoeld. Ook kijkt er nog een
is het belangrijk om veelvuldig contact
interaction designer na om te kijken of de
te houden om zo te achterhalen of alles
flow van de website klopt. Een design is vaak
opgelost is of wordt. Maar over het algemeen
statisch en je kan nog aangeven hoe je iets
geeft Studio Stomp goed aan wat er met
wilt hebben, je merkt pas dat het werkt als je
de feedback is gedaan en wanneer het is
het echt interactief voor je ziet. Daarom is het
opgelost.
ook belangrijk om te testen. Wij willen graag een product op de markt zetten die aansluit
Studio Stomp geeft meestal een deadline
bij de doelgroep en veel wordt gebruikt. Zodra
voor het leveren van feedback. Is dit voor u
er niet goed wordt getest kunnen wij de plank
altijd duidelijk wanneer dit is?
mis slaan.
Dit is voor mij wel duidelijk. Er wordt helder gecommuniceerd wanneer er een deadline is. Er is wel een aspect wat deadlines moeilijk maakt.
68
Verborgen feedback noem ik dat. Stel Studio
Dit wisselt wel eens. Sommige klanten zijn
Stomp meld aan ons dat ze nog een ontwerp
niet gewend om met online tools te werken.
missen voor een pagina, wij leveren dat aan
Die schakelen dan over op Word of Excel. Dit
en al heel snel daarna is een deadline om te
is behoorlijk tijdrovend. Je moet elke issue
testen. Dan is de pagina die is aangeleverd
één voor één uit het document halen en in
nog niet voldoende getest door Studio Stomp
ons systeem zetten. Daarom geven wij vaak
en komen er zo nog een paar kleine puntjes
de klant toegang tot onze Basecamp en leggen
naar voren. Deze overlappen dan als ware de
wij ze uit hoe ze daar hun feedback kunnen
deadlines.
plaatsen.
Als jullie zelf een product maken voor een klant, hoe leveren jullie dan jullie product op en op welke manier krijgen jullie feedback? Wij gebruiken altijd stagingservers en proberen onze producten in versies op te leveren. We willen niet onze klant toegang geven tot onze ontwikkelomgeving. Dit leidt namelijk vaak voor verwarring want dan kan het zomaar zijn dat wij bezig zijn met het ontwikkelen van een functie waardoor de website het even niet doet. Als de klant dan gaat kijken raakt die in paniek, dit tegenover het op een stagingserver zetten waarbij wij een versie uploaden. Daar geven wij duidelijk aan welke zaken wel werken en welke niet. Zo komt de klant niet voor verrassingen te staan. Gaat het feedback dat jullie krijgen van de klant ook via Basecamp, of gebruiken jullie hier bijvoorbeeld Excel sheets voor?
69
B. Testresultaten Paper prototype testresultaten •
“Is recente activiteiten wel het belangrijkste om te zien op het dashboard?”
•
“Duidelijk indeling”
•
“Projecten bij Studio Stomp zijn eigenlijk nooit
pagina” •
•
“Oranje kleur niet nodig, test is of open of
“Voelt al aan als een webapplicatie”
“Overzichtelijke pagina met de belangrijkste informatie direct tot je beschikking”
•
afgesloten” •
“Tooltip zou je opnieuw op willen kunnen vragen”
Testresultaten Avinash Changa (DSRPT, We Make VR)
afgesloten” •
“Uitlijning is niet helemaal lekker op test overview
“Ik zou graag recente projecten willen zien op het dashboard”
•
•
“Goed dat alle informatie relevant is voor de gebruiker die is ingelogd”
•
“Duidelijk onderscheid tussen verschillende elementen en navigatie”
Testresultaten Studio Stomp
•
“Aangeven van klant naam bij elk project misschien een beetje overbodig aangezien dat ook al groot er boven staat, maar kan me voorstellen
•
“Je zou een preloader willen zien op het moment
dat als je meer projecten hebt dat het wel handig
dat de applicatie data aan het ophalen is, maar de
is.”
applicatie werkt nu snel dus misschien niet nodig” •
“Iconen van iCal, Outlook en Gmail zijn hetzelfde?”
•
“Recente activiteiten wordt afgekapt op één regel bij kleinere schermformaten”
•
“Mooi modern design, geeft je het gevoel dat je een echte applicatie gebruikt.
•
“Feedback overlay sluit niet lekker”
•
“Handige tooltips”
•
“Elke versie dezelfde afbeelding?”
•
“Waarom staat er bovenaan development fase?”
•
“Ik snapte niet direct dat je een selectie moest maken om feedback te plaatsen”
•
“De statistieken zijn handig om een snel beeld te krijgen.”
•
“Kunnen twee feedback bolletjes elkaar overlappen?”
70
Testresultaten Dennis Maij (We Are Bold) •
“Ik zou graag een logboek willen zien van de punten die zijn opgepakt bij de nieuwe versies”
•
“Een searchbox op de projecten pagina zou handig kunnen zijn”
•
“Mooi strak design”
•
“Misschien is het een idee om een soort van IOS achte notificatie bolletjes te plaatsen bij projecten waar nieuwe feedback is geplaatst”
•
“De tablet en mobile view zouden meer context kunnen hebben als er een afbeelding van een tablet of telefoon om de iframe wordt geplaatst”
•
“Deze applicatie heeft wel toekomst”
•
“Waarom gebeurt er niks als ik op nieuwe feedback druk?”
•
“Dropdown zou ook weg geklikt moeten worden als je er naast klikt”
•
“Feedback zou afgevinkt moeten kunnen worden als het is opgepakt”
71
C. Testplan TESTPLAN OMDENKEN URL
http://dev.studiostomp.nl/omdenken/
INLOG
stomp
WW
dvstdstmp
Omdenken is de website voor het bedrijf Ja Maar, waarop verschillende verhalen staan om hun theorie Omdenken aan te toetsen. Op de volgende bladzijdes moet alle functionaliteit getest worden op alle pagina’s van de website. HOMEPAGINA Functie In het menu zijn de volgende items opgenomen: Start, Meedenken, Nieuws en Theorie. Klopt? Ga je vanaf daar naar deze betreffende pagina’s toe? Omdenken logo is clickable en gaat naar homepagina? Deel een verhaal knop gaat naar deze pagina? Zoekbalk werkt en gaat naar de zoek resultaten pagina? Laatste Tweet van Omdenken wordt getoond onder de zwarte lijn? Bij filter recent (default aan) worden de posts op datum gesorteerd. Klopt dit? Bij filter Populair worden de posts op basis van aantal stemmen gesorteerd. Klopt dit? Bij filter Uitgelicht worden de posts op basis van uitgelicht (kan ik backend worden aangegeven) getoond. Klopt dit? Er zijn drie soorten posts: video posts, Meedenkers en normale. Deze onderscheiden zich qua design. Klopt dit? Elke post bestaat uit een afbeelding, titel, auteur, datum, stukje tekst, tags en mogelijkheid
Opmerkingen
72
tot stemmen en link naar comments. Klopt dit? (stemmen kan 1 keer per verhaal) (mobiel geen tekst en auteur) Linken alle posts naar een verdiepende pagina? Linken de tags door naar een overzichtspagina waarin die tag staat uitgelicht? Werkt de Laad meer link onderaan? Footer: werkt knop Deel een verhaal? Footer: werkt de link e-‐mail? Footer: werken de links naar de overige websites? Footer: klik op knop toevoegen (nieuwsbrief) zonder je e-‐mailadres in te voeren. Krijg je validatie te zien? Footer: schrijf je in voor de nieuwsbrief. Werkt dit? (nu nog niet functioneel) Footer: werken de links naar Facebook en Twitter? Algemeen: schaalt de pagina goed mee? Overige opmerkingen? PAGINA VERHAAL (klik hiervoor op een van de verhalen op de homepagina) Functie Opmerkingen Een post kan uit meerdere elementen bestaan. In ieder geval een titel en tekst. Klopt dit? Zijn de tags onder een verhaal clickable? Kun je op een verhaal stemmen? (1 keer per ip adres) Kun je een comment schrijven bij het verhaal? Zie je de validatie verschijnen als je geen verhaal hebt getypt? (rest is niet verplicht) Mochten er reacties van andere mensen zijn,
73
kun je op die specifieke reactie een comment schrijven? Kun je op comments stemmen? (1 keer per ip) De comments van Admin (Omdenken) zijn rood. Zie je die terug? Kun je naar het vorige/volgende verhaal? Zie je de gerelateerde artikelen en kun je hierop klikken? Overige opmerkingen? PAGINA MEEDENKEN Functie Er zijn twee soorten meedenkers: Lopend en Afgesloten. Klopt dit? (titel geeft aan of een meedenker is afgelopen) De overige functionaliteit werkt hetzelfde als op de homepagina. Mochten hier nog opmerkingen over zijn dan kun je die hier noteren
Opmerkingen
PAGINA NIEUWS Functie Nieuws zijn posts die als dusdanig aangegeven zijn in de backend. De overige functionaliteit werkt hetzelfde als op de homepagina. Mochten hier nog opmerkingen over zijn dan kun je die hier noteren PAGINA THEORIE Functie
Opmerkingen
Opmerkingen
74
Deze pagina bestaat uit enkel tekst. Overige opmerkingen kunnen hier genoteerd worden:
PAGINA DEEL EEN VERHAAL Functie
Opmerkingen Voor het invullen van een verhaal zijn alle velden verplicht. Zie je validatie op het moment dat je de velden niet voorziet van informatie? Krijg je een succesmelding te zien op het moment dat je een verhaal verzonden hebt? Overige opmerkingen: ZOEKRESULTATEN PAGINA Vul voor de test in de zoekbalk het woord: mee in. Wordt je doorverwezen naar een pagina waarin posts staan met daarin het woord Mee? Nog geen post is gekoppeld aan een strategie. Kun je wel zien dat het werkt? Filter de berichten bijvoorbeeld op de tag Pesten. Werkt dit? Kun je geselecteerde tags ook weer deselecteren? Kun je de geselecteerde berichten sorteren op periode? De overige functionaliteit werkt hetzelfde als op de homepagina. Mochten hier nog opmerkingen over zijn dan kun je die hier noteren Overige opmerkingen:
75
D. Wireflow Wireflow test- en feedbackapplicatie
PASSWORD RESET
LOGIN
TEST OVERVIEW BY PROJECT
AGENDA
4
1
5
MENU DASHBOARD
TESTS 2
4.1
DASHBOARD
6 PROJECTEN
TESTS
PROFIEL
PROJECT OVERVIEW 3
CHECKLIST TEST
USER SCENARIO TEST 4.2.1
WEBSITE PLACEHOLDER
PROJECT DETAIL
WEBSITE PLACEHOLDER
TEST RESULTS 3.1
HEADER
v4
v3
v2
v1
4.3
6
v2
VERSIE LIVE
VERSIE FEEDBACK 3.1.1
Project Titel Live
4.2.2
3.1.2
Feedback
WEBSITE PLACEHOLDER
SIDEPANEL
FEEDBACK BOX
Opties Toon feedback Aan
Plaats feedback
Verander weergave
Tim Goosens Versie 1.0 8 april 2014
76
E. Scherm ontwerpen Dashboard
Project pagina
77
Project detail pagina
Bekijk project
78
Plaats feedback
Verander weergaven
79
Project feedback pagina blokken
80
Project feedback pagina lijst
Feedback overlay
81
Test pagina
Test overzicht pagina
82
Checklist test
User scenario test
83
Checklist uitslag
User scenario uitslag
84
Checklist overzicht
User scenario overzicht
85
Agenda
Profiel
86
