has increased by 75% from 2009 ¹”
3.2 Visueel onderzoek Met behulp van de gegevens die verzameld zijn tijdens de paper prototyping kan een visuele stijl
ontworpen worden op de wireframes, hierbij wordt dus rekening gehouden met de doelgroep om zo een goed en doeltreffend ontwerp neer te zetten.
Voor het design wordt ook gekeken naar wat de doelgroep heeft ingevuld bij de mindmap. Belangrijkste punten die uit de mindmap kwamen:
! Mensen met idee willen graag rust, strak, modern en houden van creatieve impulsen.
! De andere doelgroep vind het belangrijker om gelijk de content te vinden door het gebruik van
! filtersystemen, waarbij overzicht belangrijk is.
Testpersonen werd ook gevraagd of zij voorbeelden konden noemen bij punten wat zij belangrijk vinden. Één van de meest genoemde websites is WeTransfer. Met zijn simpele interface en moderne, rustig en strakke design, was dit één van de meest genoemde voorbeelden.
Waarom wordt deze website als modern, rustig en strak gezien?
De website bestaat eigenlijk uit twee elementen, de achtergrond en een klein interface paneel. De interface is erg opgeruimd en bevat niet meer dan de nodige informatie. Voor de interface wordt bijna geen kleur gebruikt, maar grijstinten. Er zijn geen flashy banners of andere aandacht trekkende reclame borden. Er wordt wel gebruik gemaakt van reclame op de website, om toch winstgevend te blijven. De achtergrond, het tweede element, bestaat uit één grote wallpaper die om de tijd wordt afgewisseld. Deze wallpaper dient als reclamebillboard voor bedrijven. De wallpapers zijn van hoge kwaliteit en bevatten mooie illustraties of fotoʼs, vaak bijna kunstzinnig.
Wat maakt de interface simpel?
Het gehele proces wat de gebruik doorloopt kost niet veel tijd en bevat maar een paar handelingen. Als gebruiker hoef je niet in te loggen, omdat het gebruik volledig gratis is. Als eerste kies je het bestand wat je wil verzenden, daarna vul je in naar wie je het wil versturen, daarna je eigen adres, deze blijft vaak staan als je het al eerder gebruikt heb, wat vervolgens een handeling scheelt. Onder je eigen adres kan je een bericht invullen, waarna de volgende stap het versturen van het bestand is. Het uploaden kan je vervolgens in de achtergrond laten lopen en iets anders doen. De website heeft alle nodige gegevens al verzameld, waardoor je niet hoeft te wachten tot dat het bestand is geüpload. Als het uploaden klaar is wordt het bestand direct verstuurd en krijg je een melding te zien dat het gelukt is.
Ghoshal, Abhimanyu. “Share Files Elegantly with WeTransfer”. 30 April. 2012.
Web. <http://web.appstorm.net/reviews/file-management/share-files-elegantly-with-wetransfer/>.
Rogers, Matthew. “WeTransfer makes file transfers not just painless... but kind of enjoyable”. 7 Mei. 2010.
Logo en naam
Vanuit een lijst met zes potentiële namen is aan mensen gevraagd om één naam te kiezen waarvan zij vinden dat het beste staat voor mijn project. Mensen konden kiezen uit de volgende namen: “Id-starter”, “idea market”, “idea scoot”, “idea shoote”, “idea connector” en “Idea-list”. De meeste stemmen gingen uit naar Idea-list, wat bij deze dus ook de naam voor de website geworden is.
Bij de naam hoort ook een logo. In het logo komen twee elementen naar vorgen, het idee in de vorm van een gloeilamp en een lijst.
Promotie video
Om het idee van het project uit te leggen, is een promotie video gemaakt. In deze animatie video wordt een herkenbaar beeld geschetst van het hebben van een goed idee en hoe lastig het kan zijn om deze uit te werken. Het kan zijn dat het je niet lukt om zelf uit te werken en dat naar een bedrijf toe gaan met je idee ook lastig is. De website van mijn afstudeerproject kan jouw helpen om toch je idee bij een bedrijf te krijgen. Er is gekozen om de uitleg in de vorm van een animatie te doen om zo een duidelijk beeld te schetsen bij de uitleg. De keuzen om de voice-over gelijk in het Engels te doen, is in overleg gegaan met meerdere mensen uit het vakgebied, waaronder Joanna Devlin marketing en commercial producer, om het filmpje gelijk
internationaal te maken en daarmee ook serieuzer over te komen. Onder de vocie-over ligt een Nederlandse ondertiteling om het voor de niet Engelssprekende ook toegankelijk te maken. Deze ondertiteling ligt niet één op één met de voice-over, maar is aangepast om in het Nederlands ook een duidelijk en helder beeld bij de animatie te geven.
Moodboard
Dit moodboard is gebaseerd op meningen van de doelgroep, waarbij gevraagd is naar wat zij zelf belangrijk vinden in een design en of zij ook voorbeelden konden geven. De resoluten zijn terug te vinden in de bijlage bij de paper prototype resultaten. Daarnaast is natuurlijk ook gekeken naar eenheid in stijl om zo wel tot een duidelijk moodboard te komen.
Design
Voor het design is gekozen voor een kleurenpalet met veel grijstinten en twee vele kleuren. De grijstinten zullen gebruik worden is menuʼs en opties. De twee vele kleuren worden gebruikt om opvallende accenten te geven aan belangrijke content.
In het design is gekozen om elementen aan te passen aan de grote van de browser. Er wordt meer of minder content getoond afhankelijk van de grote van de browser, het design is dus dynamisch. De keuzen hiervoor is zodat je niet afhankelijk bent van je browser grote. Mensen met een klein scherm krijgen minder content te zien en hoeven dan niet naar links of rechts te scrollen. Mensen met een groot scherm krijgen meer content te zien en zijn dus niet afhankelijk van een design dat voor een basis scherm is ontworpen. Google afbeeldingen is een site die zijn content ook aanpast aan de grote van de browser.
Het hoofdmenu blijft standaard boven in staan, waarbij de menuknoppen naar links zijn uitgelijnd en de zoekbalk naar rechts is uitgelijnd.
De content blijft altijd even groot, alleen de hoeveelheid die getoond wordt is afhankelijk van de breedte van de browser. Horizontaal is de hoeveelheid content afhankelijk, maar verticaal is de hoeveelheid content niet afhankelijk. Verticaal kan er gescrolld worden door de content totdat er een einde is bereikt van de selectie. De informatie die bij het idee hoort is verwerkt is een hover-functie. Dit betekend dat de extra informatie over het idee niet direct zichtbaar is, maar waneer de muis op het idee valt wordt de extra informatie getoond. De reden hiervoor is, om de extra informatie te verbergen om zo een rustigere uitstraling te geven.
Prototype test
Om het design te testen wordt er gebruik gemaakt van een klickable protype, dit prototype wordt op de zelfde manie getest als de paper prototype test. Omdat het prototype digitaal is kan er gebruik gemaakt worden van een opnamen van het scherm, hierdoor zijn achteraf de muisbewegingen nog goed te analyseren en hoeft er ook niet direct genotuleerd te worden.
Belangrijke tijdens de test is om te zien of het design de beleving van de website positief ondersteund. Ondersteund het design de functionaliteit van de website, ziet een knop er ook uit als een knop en valt hij voldoende op. Past de uitstraling van het design ook bij het idee van de website.
Tijdens de test word er gebruik gemaakt van de techniek beschreven in het boek van Raymond Klompsma en Stefan Wobben, “Zo kan het ook”. Zo staat in het boek onder andere beschreven dat het belangrijk is om tijdens de test te vragen aan de testpersonen om hardop hun gedachten en handelingen te vertellen. Aan de testpersonen wordt al gelijk gevraagd om dit aan het begin bij het oplezen van de vragen al te doen.
Opvallende punten tijdens het testen worden genoteerd, zoals: struikelpunten, verwachtingspatronen, zoekgedrag, opmerkingen, etc.
Testpersonen krijgen een demo website te zien en krijgen vervolgens een opdracht die zij dienen te voltooien. De testpersonen bij dit onderzoek zullen variëren van nationaliteit, om de website ook internationaal te testen. Met de resultaten zal ik vervolgens verbeteringen uitbrengen op mijn design. In de bijlagen is het document te zien wat gebruikt wordt tijdens de test van het prototype. In dit document zijn twee senarioʼs beschreven die de testpersonen doorlopen, de mening van de gebruik wordt vooral en achteraf vastgelegd. Alle handelingen worden opgenomen en zijn als video bestand terug te vinden.
Klompsma, Raymond en Wobben, Stefan. “Zo kan het ook, websites ontwerp je voor mensen”. Concept 7. 2010
Testpersonen
Naam Leeftijd Geslacht Functie Opleiding Nationalite
it
Digitale kennis
Internet gebruik
Twan --- 25 Man Software engineer
HBO informatica Nederlands Hoog Hoog
Chelsea
--- 26 Vrouw
Judge associate
Intern opgeleid
Australisch Gemiddeld Gemiddeld Tom
--- 28 Man
Docent LO ALO en sport
management Nederlands boven Gemiddeld Hoog Carlos --- --- 30 Man IT Technical
engineering Portugees Heel hoog Heel hoog
Florin
--- 23 Vrouw
Verloskundige HBO
Verloskunde Nederlands Laag Gemiddeld Marisol
--- ---
32 Vrouw
Gids en Sales Communicatie
Mexicaans Gemiddeld Gemiddeld
Ton --- --- 56 Man Eigenaar openhaarden- centrum Geen
Nederlands Gemiddeld Gemiddeld
Joanna
--- 38 Vrouw
Projectmanager marketing
University of
performing arts Engels Hoog Hoog
Resultaten Prototype test
Tijdens het testen van het prototype kwamen een aantal punten naar boven, deze punten worden per pagina behandeld. Bepaalde animaties en functies zijn niet in het klickable protype opgenomen, de reden hiervoor is dat het prototype dan te complex zou worden. Om alle functies en animaties te integreren zou er meer tijd en energie in het programmeer werk moeten worden gestoken, hiervoor is ook een bepaalde hogere kennis van programmeren voor nodig. Voor het testen van het klickable protype is dit niet al te relevant, alle knoppen en functies zijn aanwezig en kunnen aangeklikt worden.
Uit de test kwam dat sommige testpersonen niet direct de hoofdmenubalk als onderdeel van de website zagen. Testpersonen gaven aan dat ze dachten dat het onderdeel was van de browser. Dit probleem hoeft niet direct aan de menubalk te liggen. De computer waarop getest is is niet hun eigen computer en
waarschijnlijk ziet hun eigen browser er ook anders uit. Dit zijn factoren die mee kunnen wegen in dit probleem.
Om de menubalk te verduidelijken kan er boven in de menubalk een extra rand worden geplaatst als afscheiding tussen de browser en de website. Het blauw kleuren van de inlog tekst kan hier ook bij helpen, om het menu meer op te laten vallen.
Het Vimeo-logo in het introductie filmpje zorgde bij één gebruiker voor verwarring over de upload mogelijkheden. De testpersoon dacht dat het namelijk ook mogelijk moest zijn om filmpje via vimeo te uploaden.
Het introductie filmpje is via Vimeo ge-embed, omdat er geen gebruik wordt gemaakt van een pro-account op Vimeo, is het niet mogelijk om deze player direct te customise zonder reclame. Door de video direct op de website te plaatsen en via een eigen player te laten lopen kan dit probleem worden opgelost.
Tijdens de test kwam ik er achter dat een aantal internationale testpersonen moeite hadden met het begrijpen van de verschillende categorieën, dit kwam omdat deze nog in het Nederlands stonden inplaats van het engels.
Ondanks dat de content niet direct door het filtersysteem aangepast werd, begrepen de testpersonen wel dat dit zou gebeuren, het lag ook direct in hun verwachtingspatroon.
Standaard staat er nu één categorie geselecteerd, dit hoort niet. Dit probleem zit hem in het programmeer werk en zou relatief eenvoudig opgelost kunnen worden.
De tips In het uploadsysteem staan ook nog in het Nederlands en moeten naar het Engels vertaald worden. Het input-veld voor de beschrijving hoort zinnen af te breken als ze langer dan het veld worden, nu worden ze niet afgebroken en loopt de zin als maar door. Dit is een programmeer foutje en zou zonder het design aan te passen opgelost kunnen worden.
Standaart staat er één categorie geselecteerd, hier moet “choose a category” komen te staan. Dit zou via wat programmeer werk opgelost kunnen worden.
Niet voor iedereen is het duidelijk wat Tags zijn, hiervoor moet er een informatie knop bij komen te staan, waarin er uitleg wordt gegeven over Tags.
Na het uploaden van het filmpje wordt er een link naar het filmpje gegeven. De link die gegeven wordt kom in een invulveld te staan, dit zorgt voor verwarring. De link moet er gewoon als tekst komen te staan en als deze nog niet gegenereerd is moet dit worden aangegeven.
De knop voor het opnemen van contact kan duidelijker, zodat deze er direct uitspringt. De Like-knop zal meer gebruikt worden dan de contact-knop. Door de Like-knop blauw te maken valt deze meer op en zal zijn buurman, de contact-knop, ook meer opvallen.
De contact pagina zorgde niet voor problemen en was voor de testpersonen duidelijk.
De achtergrond die voor de hele website gebruikt wordt, werd door vele als leuk gezien en door sommige iets minder. De gene die de achtergrond minder vinden zijden er wel gelijk bij dat ze persoonlijk niet van de kleur houden maar dat het wel fris overkwam.
In het algemeen werd het design voor de website pusitief ontvangen en het gebruik als duidelijk en makkelijk.
!
!
!
!
!
H4 - Slot
! ! ! ! ! 4.1 Aanbevelingen
! ! ! ! ! 4.2 Conclusie