eindpresentatie

Als laatste hebben wij onze powerpoint presentatie en eindproduct prototype bijgevoegd. De presentatie bevat vooral trefwoorden die de structuur van onze presentatie vormde, het meeste informatie hebben wij erbij uitgelegd. 

link eindproduct prototype

Concept en onderzoeksresultaten

Vandaag is het tijd om af te ronden. De onderzoeken zijn inmiddels gedaan en ook de visuals zijn klaar. Aan mij om het concept nu zo helder mogelijk te formuleren.

Om dit te kunnen doen gebruik ik de kennis die ik heb opgedaan tijdens het vak Content Creation. Hierbij draait het er om dat je zo kort en helder mogelijk zinnen formuleert. Daarnaast lees ik het zelf vaak door en probeer ik alle stijl- en spelfouten er uit te halen. Op deze manier leveren we ons concept zo netjes mogelijk aan.

Voor de onderzoeksresultaten geldt dit ook. Deze heb ik doorgenomen op eventuele fouten en daar waar nodig tekst toegevoegd. Vandaag ga ik dit afronden zodat we morgen heldere en complete onderzoeksresultaten kunnen afleveren aan QwikSense.

Visuals zijn klaar

De visuals zijn nu af. Na weken onderzoek, testen, conceptaanpassingen en feedback is het eindresultaat er.

De belangrijkste punten waarop ik gelet heb zijn:

• geen aannamens: elke overweging is getest of het werkt.
• flatdesign: nauwelijks gebruik gemaakt van perspectief.
• Less is more: een schoon design (persoonlijke leerdoel: geen lief & kinderlijk design maken)
• Datavisualisatie dat in een oogopslag duidelijk is. 

Na mijn idee is dit allemaal gelukt. Ik heb ervoor gezorgd dat ik mij goed heb voorbereid voordat ik begon met de visuals. Het onderzoek heeft zich vooral in de eerste paar weken van het project plaatsgevonden. Daarnaast heb ik gezorgd dat er genoeg evaluatiemomenten waren voor de visuals. Ik heb daarvoor de tussenpresentatie proberen te gebruiken. Dit ging alleen niet zo goed omdat we inhoudelijk nog veel vragen kregen van Rino en ik het lastig vond om te vragen wat hij van de visuals vond. Daarnaast was het heel verwarrrend voor Rino dat we waren begonnen met een mobile versie (een tip die we van een docent hebben gekregen) omdat hij graag een desktop versie wou zien.

Ik heb mijn teamgenoten een paar keer om hun aandacht gevraagd om te kijken naar mijn werk. Daarnaast hebben zij, wanneer we in overleg waren, veel tips meegegeven. Ook heb ik feedback gevraagd van buitenaf. Een jongen van mijn specialisatie heeft mijn werk bekeken en had een paar goede tips! Zoals de tabbladen die Goolge Chrome gebruikt en een website waar ik nog meer inspiratie vandaan kon halen.

En tot slot zijn de laatste usertests mét visuals gedaan, waardoor ik ook feedback kreeg uit de testresultaten. 

Daarnaast heb ik een conclusie geschreven voor mijn visueel onderzoek. Dit staat in het onderzoeksverslag maar ik zal het ook hier zetten.

Conclusies uit visueel onderzoek

QwikSense’s huisstijl ziet er mooi en verzorgd uit. We willen graag vanuit de huidige huisstijl verder werken.

De symbolen hebben we wel veranderd. De meesten zijn een klein beetje aangepast zodat ze allemaal ongeveer dezelfde dikte lijnen hebben. In ons dashboard worden de symbolen naast elkaar gezet. Daarom is het belangrijk dat ze in totaal een eenheid zijn.

De dikke rand om de symbolen heen zijn verdwenen. Hierdoor zijn alleen de contouren van het symbool te zien. Niet alleen is dit minder druk in ons design, het zorgt voor minder verwarring bij de gebruiker. Hoe minder elementen het symbool bevat, hoe minder er gecommuniceerd wordt. Alleen het essentiële blijft over.

We gebruiken de symbolen in de paarse tint, #7c2a34, uit de styleguide van QwikSense. Zodat er geen verband wordt gelegd met de kleuren van het label. De symbolen worden ook gebruikt om aan te geven welk label de parameters hebben. Dan krijgt elke symbool een vakje in de kleur van de label, met daarin het symbool in wit.

Zoals je kan zien worden er gebruik gemaakt van vier kleuren bij het aanduiden van het label per parameter. Deze vier kleuren, de kleuren van QwikSense, zijn gelinked aan een score.

0 - 1 is rood

1,1 – 2 is oranje

2,1 – 3 is turquoise

3,1 – 4 is lichtblauw

Deze kleuren worden alleen nog maar gebruikt om deze labels aan te geven. Op één uitzondering na: het logo van QwikSense links in de boven hoek.

De paarse tint wordt samen met een lichtere variant: #aa536a gebruikt . Daarnaast wordt er gebruikt gemaakt van lichte grijstinten en wit. Deze kleuren zullen geen verwarring scheppen in het design. Daarnaast zorgt het voor een ‘schone’ uitstraling die lijkt op Apple. Een van de inspiratiebronnen van QwikSense.

Om de vriendelijke en betrokken uitstraling van QwikSense te behouden hebben we ervoor gekozen om een ‘Less is more’ uitstraling aan de site te geven, ondersteund met symbolen en de kleuren van het label. Het dashboard moet niet te veel lastige informatie bevatten. Het richt zich inhoudelijk en visueel alleen op het aller noodzakelijkste. Daardoor ziet het er vriendelijk uit. Dit laat zien hoe betrokken QwikSense bij zijn gebruiker is; QwikSense wil er voor zorgen dat de Faliciteits manager direct ziet welke parameters goed zijn op dit moment, conclusie kan trekken uit een weergave van afgelopen tijd en hoe hij het kan verbeteren.

En hier zijn de uiteindelijke visuals (zonder interactie versies die bij het testen gebruikt zijn).

Testresultaten prototypen

We hebben vier tests uitgevoerd met het prototype wat we maakten van de visuals, klik daarvoor hier.

Hieruit kwamen de volgende resultaten:
Test 1

Mark Verhoeven – 27 jaar (bedrijfsleider Gras van de Buren)

Stap 1

Zoek op hoe de CO2 stand was van het afgelopen jaar.

Hij wilde op C02 drukken, vervolgens scrolde hij wel gelijk naar beneden en zag hij een grafiek. Die symbolen moeten een soort van guide hebben, zodat ze weten wat het betekend.

Stap 2

Print het jaaroverzicht van de CO2 en de luchtvochtigheidsstand uit.

Prima

Stap 3

Vertel hoe je de geluildstoestand van dit moment kan worden verbeterd.

Hij wilde bij de parameter geluid drukken op de boxjes. Hij moet bij het advies kijken. Daar moet meer duidelijkheid in.

Stap 4

Bekijk de sensor die in de kantine staat.

Prima

Stap 5

Verander de naam van de marketingsensor.

Hij zag geen instellingen menu, we moeten dat menu veranderen en ergens bovenin zetten. Hij stelde voor zo’n ‘instellingen cirkeltje bovenin.

Stap 6

Verander de taalinstellingen.

Toen hij wist dat het menu ondering zat ging hij naar account en daar vond hij de taalinstellingen.

Stap 7

Hoe gaat het met de luchtdruk op dit moment.

Dat las hij af van de grafiek. Hij was wel aan het twijfelen of hij dat bij de parameters moest aanklikken. Misschien moet dit wel gewenning worden? Misschien toch het advies onder de grafieken? Zodat de grafieken duidelijker naar boven komen?

Test 2

Jelle Derkcx 30 jaar, Acteur en zelfstandig blogschrijver schrijver met een eigen bedrijf.

Stap 1

Zoek op hoe de CO2 stand was van het afgelopen jaar.

Hij scrolde eerst de hele pagina waardoor hij de grafiek zag. Hierdoor kwam hij op het juiste uit. We vroegenhem gevraagd waarom hij dit deed. Als antwoord kregen wij: Ik vind het logisch dat ik eerst alles even zelf doorloop. Dan is het duidelijker voor hem. Hierdoor merkte we wel dat hij alle stappen beter doorging dan de rest.

Stap 2

Print het jaaroverzicht van de CO2 en de luchtvochtigheidsstand uit.

Prima

Stap 3

Vertel hoe je de geluildstoestand van dit moment kan worden verbeterd.

Hij zag het advies al staan, maar wist niet direct dat het gekoppeld was aan de parameters. Hij scrollde de pagina een aantal keer op en neer. Daar moeten we de connectie beter leggen.

Stap 4

Bekijk de sensor die in de kantine staat.

Prima

Stap 5

Verander de naam van de marketingsensor.

Hij had de instellingen gezien, maar toch moest hij even nadenken.  Het duurde even voordat hij het doorhad. Dat menu onderin is dus niet ideaal.

Stap 6

Verander de taalinstellingen.

Prima

Stap 7

Hoe gaat het met de luchtdruk op dit moment.

Dit las hij van de grafiek af. Hij snapte het systeem best wel snel en misschien dat hij daarom gelijk wist te antwoorden en te zoeken waar hij moest zoeken. Dit is redelijk positief. Hij begon deze test wel door zelf eerst een beetje rond te klikken.

Test 3

Daniëlle Vlasman, 43 jaar, Directiesecretaresse BAM Utiliteitsbouw

Stap 1

Zoek op hoe de CO2 stand was van het afgelopen jaar.

De testpersoon probeerde eerst op het parametersymbool voor CO2 te klikken, maar dit was niet mogelijk. Ze zei dat ze niet wist waar het dan moest staan. De grafiek vond ze onduidelijk.

Stap 2

Print het jaaroverzicht van de CO2 en de luchtvochtigheidsstand uit.

Dat lukt gemakkelijk.

Stap 3

Vertel hoe je de geluildstoestand van dit moment kan worden verbeterd.

Ze ziet het advies staan, maar ze zou graag zien dat dit wat meer wordt betrokken bij de parameters waar het over gaat. Nu staat het er zo ver weg van.

Stap 4

Bekijk de sensor die in de kantine staat.

Dit lukt goed.

Stap 5

Verander de naam van de marketingsensor.

De testpersoon probeert met de rechtermuisknop op het tabblad ‘marketing’ te klikken. Dat werkt niet, na enig aansporen tot verder zoeken vind ze dan toch het sensorbeheer onderin.

Stap 6

Verander de taalinstellingen.

Het lukt na een tijdje zoeken, ze geeft als tip dat ‘account’ misschien beter kan worden veranderd in ‘accountinstellingen’.

Stap 7

Hoe gaat het met de luchtdruk op dit moment?

De symbolen zijn niet duidelijk voor de testpersoon. Ze denkt dat een hover-vakje met meer info een goede oplossing hiervoor zou zijn.

Test 4

Jorn ter Braak, 35 jaar, Coördinator operations

Stap 1

Zoek op hoe de CO2 stand was van het afgelopen jaar.

De parameter is een logische eerste stap voor de testpersoon, maar omdat die niet klikbaar is, zoekt hij verder. Onderin ziet hij wat hij zocht.

Stap 2

Print het jaaroverzicht van de CO2 en de luchtvochtigheidsstand uit.

Eerst klikt hij op ‘jaar’ boven de grafiek en daarna op ‘print overzicht’.

Stap 3

Vertel hoe je de geluildstoestand van dit moment kan worden verbeterd.

Hij probeert op het symbool te klikken en daarna ziet hij het advies staan.

Stap 4

Bekijk de sensor die in de kantine staat.

De testpersoon probeert eerst op het fijnstofsymbool te klikken. Die valt er een beetje buiten volgens hem, het symbool lijkt op sensoren volgens hem. Daarna klikt hij op het juiste tabblad

Stap 5

Verander de naam van de marketingsensor.

Hij probeerde eerst met de rechtermuisknop op het tabblad te klikken. Zijn commentaar: “Ik krijg hier een erg excel-gevoel bij, waarschijnlijk door die tabbladen. Daar werkt het ook door met je rechter muisknop te klikken.” Hierna gaat hij naar account, waar hij het ook niet vindt. Uiteindelijk komt hij bij de juiste pagina terecht.

Stap 6

Verander de taalinstellingen.

Dit gaat goed, hij heeft het zelf over ‘accountinstellingen’ waar hij in werkt.

Stap 7

Hoe gaat het met de luchtdruk op dit moment.

Het symbool van luchtdruk vindt de testpersoon lastig om te herkennen. Hij zit wel op de juiste plek te zoeken, maar snapt de symbolen niet. Wanneer ik vertel over ons idee om een informatiekader te laten verschijnen, is hij enthousiast. Dat lijkt hem een goede oplossing.

De volgende dingen gaan we nu aanpassen in onze uitwerking:

• De balk onderin gaat weg. De aparte sensoren kun je een nieuwe naam geven in het tabblad zelf.
• De accountinstellingen krijgen een knop rechtsbovenin, aangezien de balk onderin wegvalt.
• Het advies komt dichter bij de parameters te staan, het wordt beter gelinkt met elkaar.

Met de nieuwe versie gaan we dan nog eens testen.

Visuals eerste dashboard voor testfase

Update

Dit zijn de visuals die we zijn gaan testen voor ons Dashboard. De testresultaten zullen binnenkort ook op het blog komen te staan. Vervolgens gaat Eva de visuals nog aanpassen en gaan we het verbeterde prototype in elkaar zetten.

Account pagina

Hoofdpagina (Sensoren in de kantine)

Hoofdpagina (1 grafiek)

Hoofdpagina (2 grafieken)

Hoofdpagina (2 grafieken, andere parameter)

Hoofdpagina (2 grafieken per week)

Hoofdpagina (2 grafieken per dag)

Sensorbeheer