Gebruikersonderzoek en Iteraties

Voor mijn selfieweek project ben ik begonnen met het schetsen van een zelfportret. Toen dit lukte kleurde ik deze in. Ik hou heel erg veel van verschillende vrolijke kleuren dus wou ik veel verschillende kleuren testen. Zoals je hieronder in mijn iteraties ziet heb ik meerdere malen mijn gezicht geschetst om deze kleuren te testen. Voor het gebruiksonderzoek heb ik deze schetsen rond laten gaan bij mijn groepsgenoten, familie en snapchat vrienden. Ik heb vervolgens de meest gekozen schets in Illustrator gemaakt.

Vervolgens heb ik in Illustrator ook nog verschillende kleuren getest. Eerst heb ik verschillende kleur versies van mijn hoofd gemaakt en deze weer rond laten gaan. Uiteindelijk was de vorige winnaar alweer het meest gekozen.

Ook moest ik nog een achtergrondkleur hebben voor mijn project. Ik heb meerdere achtergond kleuren gekozen en achter de winnaar gezet, hier kwamen veel verschillende antwoorden uit. Omdat ik zoveel van verschillende kleuren houd heb ik dus besloten om meerdere achtergrondkleuren te kiezen.

Toen ik wist welke kleuren ik ging gebruiken kon ik mijn project verder afmaken met Html, Css en Javascript. Mijn eerste idee was om elke kleur hoverbaar te maken. Wanneer je met je muis over een kleur hoverde veranderde deze kleur, werd dit gedeelte van mijn hoofd groter en verscheen er text in beeld.

Toen ik dit prototype door mijn groepsgenoten liet testen werkte het niet erg goed. Wanneer een svg groter word en je muis op het randje staat, word de svg ook meteen weer kleiner waardoor je een flikker effect kreeg. Ook was het in eerste instantie niet duidelijk wat precies de bedoeling was. Door deze testen besloot ik om de kleuren klikbaar te maken en een kleine tekst onderin toe te voegen die uitlegde dat je meer over mij te weten kon komen door op een kleur te klikken.

Ook wisten mensen soms niet op welke kleur ze hadden geklikt en welke kleur bij welke tekst hoorde. Dit heb ik opgelost door maar achtergrond kleuren te gebruiken in plaats van 6. Iedere kleur is een lichtere versie van de kleur op mijn gezicht. Als je dus op het blauwe gedeelte klikt komt de tekst op de lichtblauwe achtergrond tevoorschijn.

Om mensen nog meer het gevoel te geven dat de kleuren klikbaar waren had ik een animatie toegevoegd. Deze animatie verandert constant de opacity van het gedeelte waar je muis overheen hovert zodat je meer het gevoel kreeg dat het een klibaar element is.

Vergelijking met professionele voorbeelden

Voor deze leeruitkomst moet ik mijn project vergelijken met voorbeelden uit het werkveld. Er waren weinig voorbeelden te vinden die op mijn project leken. Er zijn veel wel illustratie portretten te vinden maar geen van deze zijn interactief, ik heb een paar van deze portretten hieronder neergezet.

Ook heb ik een interactief portret gevonden die gebruik maakt van een camera, de gebruiker kan via deze camera interacties uitvoeren met het portret. Ook zijn er veel voorbeelden van illustraties waar je op kan klikken. Omdat Discord erg populair is onder gamers heb ik hun homepage als voorbeeld gepakt, wanneer je op het vraagtekendoojes klikt verschijnen er random voorwerpen uit games. Al deze drie kenmerken komen voor in mijn project maar er zijn geen bekende voorbeelden die hetzelfde zijn als mijn project, dit idee voor mijn sprint-x project was dus een origineel idee.

Vergelijking met professionele voorbeelden

Voor deze leeruitkomst moet ik mijn project vergelijken met voorbeelden uit het werkveld. Er zijn enorm veel clicker games op de markt maar één van de bekendste is de originele cookie clicker. Ook Realm Grinder is een clicker game, deze maakt meer gebruik van het verhaal achter de game. Zo zijn er enorm veel clicker games die enorm simpel kunnen zijn omdat je alleen maar 100 keer op een ei moet klikken om hem uit te laten komen maar ook enorm complex kunnen zijn door honderden verschillende upgrades en combo's

Gebruikersonderzoek en Iteraties

Voor de website ben ik begonnen met het kijken naar andere websites. Ik heb alleen websites gepakt van andere bands of artiesten die Milo als inspiratie gebruikt en die in hetzelfde genre vallen omdat deze dus ook grotendeels dezelfde doelgroep hebben. Voor een andere doelgroep zou een ander soort website misschien het handigst zijn.

Met deze inspiratie en milo's wensen ben ik gaan schetsen. Milo wou een minimalistische website en veel van haar inspiraties hadden ook een simpele one scroll page. Ik had één schets gemaakt van een simpele one scroll page met alle essentiële informatie en één schets waarin je een foto van een bos ziet. In dit donkere bos zouden dierenoogjes verstopt zitten die je muis volgde.

Milo gaf aan dat ze de one scroll page een erg gaaf idee vond. Ook heb ik deze schetsen voorgelegd aan mensen die bij de doelgroep hoorde. Wat jongeren mensen dus. Ik legde deze schets voor en vroeg of dit duidelijk was en daarna wat zij de belangrijkste dingen vonden op de website van een artiest.

Iedereen zij meteen dat tourdates erin moesten, dit is erg belangrijk voor een artiest zodat zijn/haar fans weten wanner er een tour is. Ook werd er gezegd dat de muziek van de artiest, foto's en het laatste nieuws van deze artiest op de website moest komen. Met deze informatie begon ik aan mijn wireframes in Adobe XD.

Dit zijn de wireframes die ik als eerste heb gemaakt. Deze heb ik aan de opdrachtgever laten zien én uitgetest bij vrienden die meer geïnteresseerd zijn in muziek en vaker naar een website van een artiest gaan. Ik kreeg te horen dat de navigatie duidelijk was maar dat ik het logo niet te groot moest maken zodat de verhouding goed blijft. Ook kon ik het laatste nieuws gedeelte beter bovenaan zetten zodat fans meteen de nieuwste informatie hebben. Verder kreeg ik de opmerking dat de linkjes naar haar social media miste. Deze heb ik hierna nog toegevoegd door icoontjes te gebuiken.

Social Media Icons toegevoegd en Logo kleiner gemaakt

Vergelijking met professionele voorbeelden

Voor deze leeruitkomst moet ik mijn project vergelijken met voorbeelden uit het werkveld. Hiervoor heb ik naar de websites gekeken die Milo als inspiratie ziet of die hetzelfde genre hebben als Milo. Je ziet dat veel artiesten ook een one scroll page hebben met dezelfde onderdelen als Milo's prototype. Ook maken veel artiesten gebruik van één grote foto als header in het begin van hun website.

Portfolio review

Voor mijn eerste portfolio review had ik nog weinig content en ervaring met coderen. Ik begon dus met een concept van mijn website en presenteerde dit. Ik had nagedacht over de inhoud en had wat vragen over hoe ik het beste mijn website in kon delen. Ik wou op mijn website een about me gedeelte, een gedeelte over de proftaak en een gedeelte over mijn werk. Ik wist nog niet goed hoe ik mijn website in kon delen en had twee ideeën. Een tijdlijn maken van al mijn werk zodat je goed mijn proces ziet of verschillende pages maken per leeruitkomst.

Ik kreeg de feedback dat het tijdlijn idee erg leuk was maar ik wel na moest denken hoe ik dit kon ordenen. Ik kreeg als tip dat ik bijvoorbeeld hsatags kon gebruiken om per leerdoen te catagoriseren. Ook vonden ze de foto heel erg gaaf omdat deze mijn persoonlijkheid als media designer liet zien.

Na het vragen aan docenten en leerlingen heb ik er uiteindelijk voor gekozen om geen tijdlijn te doen maar mijn werk op te delen over de 6 leeruitkomsten en deze apart op mijn website te zetten. Ik begon met het uitwerken van mijn concept in Adobe XD. Hierdoor kon ik makkelijk concepten laten testen zonder dat ik te veel tijd stopte in het coderen.

Ik vroeg om feedback over het onderstaande prototype en er werd gezegd dat dit een duidelijk en goed overzicht is, alleen was het jammer dat ik niet meer mijn foto erop had staan. Deze heb ik later dus weer toegevoegd, ook was de beschrijving in het kleine vakje zoveel dat het chaotisch werd. Ik heb daarom elk leeruitdoel over de homepage verspreid en daaronder heb ik de vierkantjes met de inhoud geplaatst.

Side Menu

Ik had nu dus alle leeruitkomsten verspreid over mijn website zoals de foto hieronder. Toen ik dit liet testen bleek dat mensen erg ver moesten scrollen om naar een andere leeruitkomst te gaan. Dit was dus erg problematisch. Hiervoor heb ik een sidemenu gemaakt die verschijnt als je naar de leeruikomsten scrollt. Met deze sidemenu kan je snel naar andere leeruitkomsten toe. Hiervoor moest ik wel alle tekst onder de leeruikomsten een padding geven zodat deze niet over de sidemenu heen kwamen.

Inhoud content

Voor de inhoud van mijn content wou ik simpel beginnen door H1's te gebruiken met daaronder wat tekst. Hierdoor kon je soms moeilijk zien wat bij elkaar hoorde en wanneer een nieuwe opdracht begon. Daarom had ik een achtergrondkleur toegevoegd en een andere kleur per opdracht. Uiteindelijk bleek dit niet zo mooi te zijn en heb ik gebruik gemaakt van H2's en meer tussenruimte zodat je toch goed kon zien waar een nieuwe opdracht begon.

Ook werd het bij lange pagina's vaak lastiger om snel overal doorheen te scrollen en een hele sidemenu voor elke opdracht aan de zijkant werd te lang. Uit mijn testen bleek dat de beste oplossing een knop aan de zijkant was om weer naar het begin van de page te gaan. Hiermee kan je weer snel naar de inhoud toe gaan en een andere opdracht kiezen. Ook heb ik hierboven een knop toegevoegd waarmee je weer terug naar de homepage kan.

Ik merkte bij mijn gebruikerstesten dat docenten erg snel over de content heengingen en vaak de eindresultaten miste. Ik had eerst een opvallende button gemaakt zodat deze opviel, deze kleur heb ik overal gebruikt voor het eindresultaat. De blauwe buttons linken allemaal naar gitlab, de groene buttons openen verwijzen naar het development gedeelte en de rode buttons zijn een link naar een andere page waar dat project staat. Zo heeft iederen kleur een functie.

Ook heb ik alle opdrachttitels een h1 gegeven en de kopjes die hierbij horen zoals uitleg en gebruikte bronnen een h2 zodat je beter kunt zien waar een opdracht begint en eindigt.

Small improvements

Ook merkte in dat mensen het frustrerend vinden om steeds terug te moeten naar de vorige pagina wanneer er ergens op geklikt is. Als in een poc naar het project wilt kun je die bekijken maar dan moet je weer terug naar alle poc's om te zoeken waar je bent gebleven. Door target="_blank" achter de href link te zetten opent de link in een nieuwe tab. Dit heb ik bij de meeste links toegevoegd.

Ik liet eerst iteraties en resultaten zien door afbeeldingen in mijn portfolio te zetten. Dit nam veel ruimte in beslag en dit zag er erg chaotisch uit. Om dit op te lossen heb ik een slideshow poc gemaakt die ik vervolgens in mijn website kon gebruiken. Omdat dit veel code was heb ik hier uiteindelijk een Library voor gebruikt genaamd Slick.js. Hierdoor kan ik makkelijk carousels maken van afbeeldingen en mijn iteraties laten zien.

Om mijn eindresultaten te laten zien wou ik pdf files embeden in mijn website. Hierdoor hoef je niets te downloaden en kun je meteen door mijn resultaat scrollen. Na wat testen en feedback van de docenten bleek dat hele documenten aan bijvoorbeeld research te veel is voor op een pagina. Hierdoor word je pagina erg druk en overzichtelijk. Ik heb dus modals gemaakt die je kunt openen wanneer je de research of een ander pdf document wilt openen.

Voor de leeruikomst Professional Identity moet je een lang stuk tekst typen om te laten zien wat voor media designer je bent en wilt zijn. Ik heb hier een groot stuk tekst wat goed is, maar uit mijn gebruikerstesten blijkt ook dat veel docenten snel door de content heen willen bladeren. Voor de docenten die liever iets minder lezen heb ik onder mijn Professional Identity page een Image gallery gemaakt waarin alle projecten staan die typisch zijn voor mij als media designer en waar ik met veel plezier aan werkte.

Ook merkte ik in de gebruiksonderzoeken dat de docenten mijn youtube linkjes vaak over het hoofdzagen, omdat dit ook een eindresultaat is, is het wel belangrijk dat ze deze zien. Ik heb daarom de youtube video's ge embed in mijn website zodat je ze meteen kunt zien en afspelen.

Vergelijking met professionele voorbeelden

Voor deze leeruitkomst moet ik mijn project vergelijken met voorbeelden uit het werkveld. Er zijn enorm veel portfolio's te vinden op het internet en deze verschillen allemaal enorm. Ik heb de portfolio's gezocht die overal het hoogste aangeschreven werden zodat ik zeker weet dat dit professionele portfolio's zijn. De meeste websites gebruiken ook een grote foto op hun home page en hebben erg duidelijk hun content opgedeeld.