breedte van > 901px (Tablet in landscape
4. Draai de telefoon weer terug en
navigeer naar het volgende artikel met behulp van de onderste knoppenbalk
Boven: Tabel 8.5.2 – ‘Tabel met user needs en gerelateerde feedback’
“In enquêtevraag 11 heb ik gevraagd aan de testpersonen wat zij nog voor verbetering vatbaar vinden. Hieruit kwam dat ze graag de mogelijkheid zien om:
- Horizontaal te swipen tussen artikelen
- Dat de content niet zo erg opvalt wanneer het menu uitschuift - De knop rechtsboven is onduidelijk
- De back-to-top knop is onduidelijk
- Functionaliteiten van social media zijn niet op een intuïtieve locatie gepositioneerd
Ook zijn er veel positieve geluiden gekomen van de testpersonen. Ik heb hier met de enquêtevraag: “Wat zijn volgens jou sterke punten van het NXT platform?” veel feedback gekregen. Hieruit kwam namelijk een bevredigend lijstje:
- Prima - Overzichtelijk
- Eenvoudig in gebruik - Helder
- Werkt platform onafhankelijk - Gestructureerd
- Easy to learn - Responsive - Logische navigatie - Vlot met inladen content - Snel
- KISS (Keep It Short & Simple)
Hieruit blijkt dat eigenlijk alle user needs worden behaald, zoals is te zien in tabel 8.5.2.
User need Resultaten testgegevens
Zo min mogelijk stappen tot uiteindelijk doel Eenvoudig in gebruik, logische navigatie, snel, gestructureerd
Eenvoudige en directe User Interaction Helder, easy to learn, vlot met inladen content, KISS Duidelijke en aantrekkelijke User Interface Prima, overzichtelijk
Ook op mobiele apparaten beschikbaar Werkt platform onafhankelijk, responsive Functionaliteiten om content te delen op sociale
media
Is aanwezig
Dit is een erg positief resultaat en zeker bevredigend. Na deze analyse heb ik afgesloten met een conclusie om nog een korte en heldere samenvatting te krijgen van de actiepunten.
Conclusie
Uit het testrapport zijn interessante gegevens gekomen. Een lijstje met feedback welke in de tweede versie van het prototype verwerkt moet worden:
- Horizontaal swipen tussen artikelen
- Content valt teveel op wanneer het menu uitschuift - De knop rechtsboven is onduidelijk
- De back-to-top knop is onduidelijk
- Functionaliteiten van social media zijn niet op een intuïtieve locatie gepositioneerd
Daarnaast blijkt dat de user needs vrijwel allen worden behaald. Het lijstje met positieve feedback: - Prima
- Overzichtelijk
- Eenvoudig in gebruik - Helder
- Werkt platform onafhankelijk - Gestructureerd
- Easy to learn - Responsive - Logische navigatie - Vlot met inladen content - Snel
RESPONSIVE DESIGN NXT: AFSTUDEERVERSLAG
Onder: Afbeelding 8.6.1 – ‘Fractie uit de HTML, CSS en javascript code’
Boven: Afbeelding 8.6.2 – ‘Feedback aan gebruiker na het swipen’ Boven: Afbeelding 8.6.3 – ‘Knoppenbalk helemaal bovenaan het
scherm’
Onder: ‘Knoppenbalk na 50px scrollen’
Rechts: Afbeelding 8.6.4 – ‘Social media functionaliteiten aan het einde van het artikel’
Welke elementen worden aangepast en geïntegreerd in de tweede versie van het prototype wordt in de volgende paragraaf beschreven.
8.6 Prototype aanpassen
De resultaten uit de usability tests zijn gerapporteerd en geanalyseerd in het testrapport. Alle concrete actiepunten op een rijtje:
- Horizontaal swipen tussen artikelen moet toegevoegd worden - Meer feedback aan back-to-top knop toevoegen
- Abrupt einde artikel
- Knop rechtsboven aanpassen of verwijderen - Functionaliteiten van social media verplaatsen
Als eerste ben ik aan de slag gegaan om het horizontaal swipen tussen artikelen toe te voegen. Dit heb ik door middel van een kort stukje HTML, CSS en javascript toegepast. De plug-in is afkomstig van Dmitry Sheiko en is toegevoegd aan de JQuery library. Om deze plugin op te roepen zijn er een aantal toevoegingen nodig aan de code. Een fractie uit de HTML, CSS en javascript bestanden (afbeelding 8.6.1):
Afbeelding 8.6.2 laat zien welke feedback de gebruiker krijgt na het swipen.
Nu dit actiepunt is verwerkt in het prototype, is het zaak om meer feedback toe te voegen aan de back-to-top knop. Ik heb gekozen om deze knop ‘grijs’ te maken wanneer het scherm zich helemaal aan het begin bevindt. Wanneer de gebruiker dan naar beneden scrolled, wordt deze als het ware ‘actief’ na 50px. Dit geeft het volgende resultaat (zie afbeelding 8.6.3):
Ik heb ervoor gekozen om deze oplossing te gebruiken omdat ik vanuit mijn ervaring kan beredeneren dat dit voor extra feedback zorgt aan de gebruiker en deze zo eerder de functionaliteit van de knop kan begrijpen.
Onder: Afbeelding 8.6.5 – ‘Uitschuifbare menu’s van m.fcupdate.nl
Onder: Afbeelding 8.6.6 – ‘Uitschuifbare menu’s van het prototype
Het abrupte einde van het artikel heb ik opgevangen door nogmaals social media functionaliteiten toe te voegen aan het einde van het artikel (zie afbeelding 8.6.4).
Nu deze aanpassingen zijn doorgevoerd kunnen de laatste twee actiepunten worden verwerkt. Het blijkt dus dat de functionaliteit van de pijl rechtsboven niet geheel duidelijk is en dat de functionaliteiten van social media een ‘directere’ benadering moeten krijgen. Om dit op te lossen heb ik besloten om de functionaliteiten van social media te verplaatsen vanuit de inhoudsopgave naar de rechterbovenhoek, waar eerst het pijltje stond. Ik weet uit mijn eigen ervaring dat de mobiele site van fcupdate.nl twee uitschuifbare menu’s hanteert, één aan de linkerkant en één aan de rechterkant (zie afbeelding 8.6.5). Dit heb ik geprobeerd na te maken in het prototype (zie afbeelding 8.6.6).
Uit de eerste usability test kwam namelijk dat eigenlijk maar één testpersoon het pijltje rechtsboven gebruikte om te navigeren. Deze kan dus vervangen worden. Op deze manier pak ik twee actiepunten in één keer aan. Het zal interessant zijn om te testen of deze oplossing wél duidelijk is voor de
testpersonen. Dit zal dan ook in de tweede usability test aan bod komen. Conclusie
Uit de testresultaten is een lijstje gekomen met actiepunten welke verbeterd moeten worden in het prototype:
- Horizontaal swipen tussen artikelen moet toegevoegd worden - Meer feedback aan back-to-top knop toevoegen
- Abrupt einde artikel
- Knop rechtsboven aanpassen of verwijderen - Functionaliteiten van social media verplaatsen
Het horizontaal swipen tussen artikelen heb ik toegepast door middel van een JQuery plug-in van Dmitry Sheiko. Daarna heb ik de back-to-top knop extra feedback gegeven door deze grijs te maken wanneer het scherm zich helemaal aan het begin bevindt. Aan het einde van het artikel heb ik wederom social media functionaliteiten geplaatst, zodat er een logischer eind wordt gecreëerd.
RESPONSIVE DESIGN NXT: AFSTUDEERVERSLAG
Onder: Afbeelding 8.7.1 – ‘Opname van usability test met tablet’
Onder: Afbeelding 8.7.2– ‘Stellingen gebaseerd op SUS’
De laatste twee actiepunten heb ik aangepast door middel van de social media functionaliteiten naar de rechterbovenhoek van het scherm te verplaatsen. Deze zijn toegankelijk via eenzelfde soort uitschuif-menu als die bij de inhoudsopgave is toegepast.
8.7 Usability test B uitvoeren
Nu alle feedback uit de eerste usability tests is verwerkt en het prototype is aangepast, is het zaak om te bekijken of de testpersonen daadwerkelijk tevreden zijn met de aanpassingen. Dit zal ik doen in de tweede ronde van de usability tests.
Om de tweede usability test uit te kunnen voeren, had ik het aangepaste prototype online beschikbaar nodig. Ik heb wederom gevraagd aan mijn bedrijfsmentor om het prototype te uploaden naar de server zodat deze weer beschikbaar kwam op http://www.p.nxtmagazine.nl. Ik heb in deze test dezelfde testpersonen als in de eerste test benaderd met de vraag of ze weer mee wilden werken. Ze waren allen positief waardoor ik direct weer vijf testpersonen had.
Omdat ik de eerste usability test heb uitgevoerd met een smartphone, wilde ik dit keer de
testpersonen het prototype laten testen op de tablet. Op deze manier kan ik direct het verschil tussen de smartphone en tablet weergave vergelijken. Dit heb ik gedaan om te bekijken of het prototype zich consistent gedraagt op verschillende mobiele apparaten. Ook kon ik hen op deze wijze een vraag stellen over de consistentie tussen de smartphone en de tablet weergave van het prototype. Deze keer hebben we gezamenlijk besloten om de locatie bij de testpersonen op kantoor te houden. Dit kon in alle kantoren op een afgesloten vergaderzaal, waardoor de ruimte erg geluidsdicht was, kortom een geschikte locatie.
De testopstelling was wederom hetzelfde als in de eerste test. Dit zorgde voor duidelijke opnamen (zie afbeelding 8.7.1). Bij de initiatie van de test heb ik ze wederom een korte uitleg gegeven om het geheugen te verfrissen. Daarna heb ik ze direct hun gang laten gaan met de test, daar het testformulier uitleg geeft over het verdere verloop.
Voor deze test heb ik ietwat andere vragen gesteld als bij de eerste. Een voorbeeld van vragen die ik heb toegevoegd aan het formulier: “Welke vorm van navigatie geniet uw voorkeur? Kunt u hier uitleg bij geven?” en “Hoe zou u het platform beschrijven in drie steekwoorden?”. Deze vragen heb ik gesteld om erachter te komen of het gedrag in navigeren veranderd naarmate de gebruiker meer ervaring heeft in het
gebruik van mobiele apparaten en aan welke begrippen zij denken wanneer ze het prototype in gebruik hebben. Tevens heb ik een achttal ordinale enquetevragen opgesteld die deels zijn gebaseerd op ‘The System Usability Scale (SUS)’ (Brooke, 1996). Dit is één van de meest populaire gestandaardiseerde usability vragenlijsten welke zeer betrouwbare resultaten kan opleveren (.91). Ik heb een beetje rondgesnuffeld op internet om te bekijken hoe bedrijven een vragenlijst gebaseerd op usability gebruiken. Hierbij stuitte ik op de SUS vragenlijst. Omdat niet alle stellingen betrekking hadden op dit project, heb ik er een aantal geschrapt (zie tabel 7.6.2). Door middel van de test heb ik weer feedback verzameld. De resultaten heb ik gerapporteerd in Testrapport B, externe bijlage E. Deze activiteit zal ik beschrijven in het volgende hoofdstuk.
Onder: Tabel 8.8.1– Resultaten enquete ´SUS´
Conclusie
Nu het prototype is aangepast met de resultaten uit de eerste usability test, is het zaak om deze aanpassingen testen in de tweede usability tests. Deze keer werd de test uitgevoerd bij de testpersonen op locatie en was het mobiele apparaat dit keer een tablet in plaats van een
smartphone. Voor deze test heb ik ietwat andere vragen gesteld, zodat ik extra concrete feedback kon verzamelen over het prototype. Een voorbeeld van een vraag die ik heb gesteld is: “Welke vorm van navigatie geniet uw voorkeur? Kunt u hier uitleg bij geven?” Daarnaast heb ik ook een aantal ordinale enquetevragen opgesteld die deels zijn gebaseerd op ‘The System Usability Scale (SUS)’ (Brooke, 1996). De resultaten van de usability tests hebben een zeer positieve insteek. Deze zal ik verder toelichten in het volgende hoofdstuk.
8.8 Testgegevens rapporteren
Uit de drie testtaken die ik in deze test heb opgesteld, blijkt dat het systeem erg doeltreffend werkt. Alle testtaken werden door alle testpersonen goed voltooid (Testrapport B, externe bijlage E). Gemiddeld deden de testpersonen er ongeveer drie seconden over om de testtaken te voltooien, waarbij ik in de operationalistatie vooraf maximaal tien seconden had bepaald voor voltooiing. Nu de locatie van de social media functionaliteiten is aangepast, zijn de testpersonen een stuk positiever over het design. Deze locatie sluit veel meer aan bij de verwachting van de testpersoon, waardoor ze nu direct snappen dat ze het artikel delen in plaats van de inhoudsopgave.
De enquêtevragen leveren tevens positieve feedback op. Ik heb ze gevraagd om het platform wederom te beschrijven in drie steekwoorden. Dit heeft alleen maar positieve resultaten opgeleverd. Het lijstje met antwoorden:
- Overzichtelijk
- Makkelijk / vriendelijk in gebruik - Snel
- Responsive
- Duidelijke navigatie - Mooi
Dit zijn mooie resultaten om naast de resultaten uit de vorige usability test te leggen. Daarnaast was ik erg benieuwd naar de resultaten uit de enquêtevragen die ik heb gebaseerd op ‘The System Usability Scale (SUS)’. Zoals te zien in tabel 8.8.1 zijn ook deze resultaten erg positief.
Sterk mee oneens - Sterk mee eens
Stelling 1 2 3 4 5 n.v.t.
1. In het algemeen ben ik erg