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

Content test

Vandaag (woensdag 26 maart) heb ik samen met Eva afgesproken om de visuals door te nemen.
Aan de hand van deze visuals hebben we gekeken waar we tekst voor nodig hebben. Uiteindelijk heb ik deze tekst geschreven om ervoor te zorgen dat alles duidelijk is.

Bij dit soort teksten moet je denken aan: titels, omschrijvingen, advies etc. Kortom alle tekst die gebruikt wordt in de visuals.

Resultaten Card Sorting

Vandaag heb ik de Card Sorting test afgerond. Er zijn nu Hieronder vind je het overzicht met alle resultaten, van zowel de off- als online test.

De gekleurde vlakken laten de meest gekozen pagina zien. Zo zie je dat de de elementen onder de instellingen redelijk unaniem gekozen zijn. Op 'beslissen welke parameters je wilt zien' na, dit nemen wij dan ook mee in onze afweging.

Opvallend is dat de testers niet echt weten wat ze met het delen op social media moeten doen. Veel plaatsen het op de homepage, maar ze geven aan dat dit ook niet helemaal klopt voor hun gevoel. In het team hebben we het er even over gehad, en het ziet er nu naar uit dat we het delen van statistieken weg halen uit het dashboard en vervangen voor een jaaroverzicht.

Verder zijn er natuurlijk nog meer conclusies die ik kan trekken uit deze cijfers. Dit ga ik verwerken in ons onderzoeksrapport.

Sitemap

Hieronder de sitemap, vanuit deze opzet worden de prototypeschermen ontworpen.

Op het hoofdscherm komen de volgende onderdelen:
- Sensorenkeuze (al de onderstaande onderdelen staan in verbinding met de hier gekozen sensor)
- Label huidige situatie
- Kostenbesparing
- Parametersymbolen (met indicatie van de stand van de parameters en informatiebalk bij een hover over de symbolen)
- Advies voor het verbeteren van de huidige situatie
- Grafiek met inzicht parameters (dagelijks/wekelijks/maandelijks/jaarlijks)
- Label situatie van de dagelijkse/wekelijkse/maandelijkse/jaarlijkse periode

Op de accountpagina komen de volgende onderdelen:
- Gebruikersnaam en wachtwoord (ook daar te wijzigen)
- Taalinstellingen
- Regio-instellingen
- Eenheden-instellingen

Op de sensorenpagina komen de volgende onderdelen:
- Overzicht met de toegevoegde sensoren (ook daar toe te voegen en te verwijderen)
- Per sensor mogelijkheid tot naamwijziging (bijvoorbeeld: Sensor Marketingkantoor)

Reactie op reflectie van tussentijdse leerdoelenevaluatie

Geertje: Volgens mij vergeet je in de reflectie het onderzoek van je wireframes. Je deliverable is niet alleen de wireframe, maar daarna ook het onderzoek dat je er naar doet en daarna weer de evaluatie ervan. 

Anne: Het wireframe-testverslag staan inmiddels op de blog. De wireframes hebben we volgens het concept (meteen een overzicht van de huidige situatie in één oogopslag) en de logica die we hebben ontwikkeld binnen onze specialisatie samengesteld. Omdat we hierna toch in een itererend proces terecht zouden komen, volgde hieruit de uiteindelijke versie van de wireframe.

Geertje: Je schrijft dat jullie elkaar wekelijks op de blog evalueren. Dat is voor mij niet zichtbaar (note: nog geen enkele bijdrage van jouw hand op de blog). 

Anne: We schrijven om de beurt een blog; die week was het mijn beurt dus daar is ook het één en ander van online gekomen net na deze reflectie van mijn leerdoelen.

Geertje: Hoe ga je het evalueren (waar je meer op moet letten van jezelf) beter laten verlopen?

Anne: We hebben afgelopen dinsdag na de presentatie een evaluerend gesprek gehad over hoe iedereen tot nu toe heeft gewerkt als teamlid en waar het beter kon. Dit heeft ons allemaal weer een goede richtlijn gegeven voor de komende twee weken.

Leerdoelen antwoord Joeri

Waarom schrijf je bij deliverables 'Onderzoeken&Begrijpen: "Het belangrijkste was toch de wireframes maken"? 

Waarom 'toch'? Had je iets anders verwacht en/of gewild?

Antwoord: Toch kan worden weggelaten.

- Wat vind je ervan dat jij de visuals niet maakt, terwijl dat wel 1 van je eerdere leerdoelen was?

Antwoord: Ik wil graag de visuals doen, of laten zien hoe ik het zou doen. Maar voorlopig geef ik alleen feedback. Dat vind ik prima, ik blijf visuals maken toch wel het leukste vinden.

- Minder kritisch zijn, klinkt niet als een gewenste ontwikkeling. Zeker niet als het door tijdsdruk komt. Kritisch zijn is altijd goed, dit is niet hetzelfde als het niet durven besluiten. 

- Blijf bij je groepsgenoten checken of jouw inbreng voldoende is, of je voldoende praat tijdens jullie bijeenkomsten.

Antwoord: Ik heb vandaag meer mijn woordje gedaan tijdens het nabespreken van de tussenpresentatie.

Update

Vandaag hebben we onze tussenpresentatie gehad met de klant. De gekregen feedback hebben we genoteerd en zijn we gelijk mee aan de slag gegaan. Punt voor punt zijn we ze af gegaan en zo hebben we alle feedback verwerkt. Toen kwamen we op het punt dat we nog redelijk wat moesten doen om de deliverables volledig op te leveren. We hebben een planning gemaakt voor de komende 3 weken tot de eindpresentatie en daarin staat wie wat moet doen.

Planning

-       Blog schrijven + deliverables erop

-       Concept aanpassen

-       Wireframmes Skelet

-       Look and feel testen af

-       Onderzoeksresultaten verwerken

-       Wireframes nieuwe internet browser

-       Bedrijven zoeken Rijnsweerd

-       Uitzoeken hoe het testen werkt

     Testen

     Iconen verbeteren

     Uitzoeken hoe we het best de prototype kunnen maken

Groen = deadline

	17-3 maandag	18-3 dinsdag	19-3 woensdag	20-3 donderdag	21-3 vrijdag	22-3 zaterdag	23-3 zondag
Wat?	Blog update	Bedrijven rijnsweerd + nummer	Skelet + Wireframes			Testen hoe? Uitgezocht!
		Concept af	Concept + Skelet
			Visuals maken
Wie?	Joeri	Joeri + Anne	Joeri + Anne			Anne
		Dianne	Anne + Dianne
			Eva

	24-3 maandag	25-3 dinsdag	26-3 woensdag	27-3 donderdag	28-3 vrijdag	29-3 zaterdag	30-3 zondag
Wat?	Wireframes af	Look and feel vullen	Look and feel vullen
		Iconen verbeteren	Testable maken
Wie?	Joeri + Anne	Eva + Dianne	Eva + Dianne
		Eva	Joeri + Anne
			Eva

	31-3 maandag	1-4 dinsdag	2-4 woensdag	3-4  donderdag (Einde)	4-4 vrijdag	5-4 zaterdag	6-4 zondag
Wat?	TESTEN!	TESTEN!	x	Visuals
			x	Concept
			x	Resultaten onderzoek
Wie?	Allen	Allen		Eva
				Dianne
				Joeri + Anne