Meesterproef

Meesterproef Product Biografie

📖 Intro

Dit artikel gaat over mijn proces bij de meesterproef. Bij de meesterproef ben ik ingedeeld met twee anderen op een opdracht om een goede UX en UI te maken voor een website waar de gebruiker een netwerk kan simuleren. De simulatie werkte nog niet maar er waren al wel wat functies in de javascript die een bepaald concept lieten zien. Voor meer informatie:

• Link naar onze Website

• Link naar onze design rationale

• Link naar onze code

🛫 Week 1

Maandag hadden we een kickoff van dit vak en kregen we te horen wat voor project we hadden gekregen. Dit was de opdracht Social Network Simulator geworden. Hiervoor zijn we meteen aan de slag gegaan en hebben de eerste dingen alvast kunnen doen zoals OOP alvast een beetje uitschrijven en onderzoek er naar gedaan. Ook hebben we mogelijke eerste designs uitgezocht. Ik had vier leerdoelen, maar hiervan waren er twee minder bruikbaar van geworden. Uiteindelijk heb ik mijn drie leerdoelen iets aangepast.

Dinsdag hebben we ons verder ingelezen in het project. Ook hebben we de code die er al was in kunnen zien. We hebben kunnen brainstormen over het eerste design en de features. En hebben dieper in object oriented programming gekeken.

Wat we kregen van Yuri was een website waar een in een canvas bolletjes waren getekend, en je kan lijntjes tussen de bolletjes tekenen. De website zag er zo uit:

Woensdag begonnen we met tech reviews. Daar kregen we een tip om een korte recap bij de klant te geven van de opdracht zodat de opdrachtgever eventueel misvattingen eruit kan halen. Daarna hadden we onze eeste meeting met Yuri. Bij deze meeting hebben we de gelegenheid gekregen om vragen te kunnen stellen en dit hielp ons erg om de opdracht beter te snappen. Verder zijn we bezig geweest met ons eerste design en hebben een start gemaakt met het design te programmeren en wat er al geschreven is te begrijpen en te ordenen.

Donderdag hebben we wat er al geschreven was kunnen begrijpen en ordenen. Ook hebben we ons design in figma kunnen maken en de eerste dingen van het design kunnen programmeren. Donderdag hadden we ook onze eerste design review. Daar kwam uit dat we goed bezig waren en ze vonden het een leuke challenge. Ook heb ik feedback kunnen geven aan Bart over jQuery en heb hem geholpen om het te fixen. Ook heb ik hem geholpen met de grid-layout van onze website opzetten zodat hij kon beginnen met het designen van de controls.

Ook ben ik met ideeen gekomen om bepaalde smooth feels te geven aan de applicatie zoals het verschuiven van de focus balk in de selects, en het eerst openen van de info van de node, en daarna de informatie infaden. Dit hebben we niet meteen gebouwd want we hadden eerst namelijk andere prioriteiten.

Een van die prioriteiten was onder andere het vervangen van het canvas. We wilde niet steeds gaan tekenen in het canvas als er iets zou veranderen. En we wilde graag het canvas interactief maken. Dus hebben we besloten om het canvas te vervangen door div's in een section. Dit gaf ook andere voordelen namelijk het makkelijker toegankelijk en responsive kunnen maken. Dit was redelijk snel gedaan en daarnaast hebben we heel veel onnodige javascript kunnen weghalen. De dunne lange div's die de connecties moeten voorstellen hebben we uiteindelijk met wiskunde en wat hulp van Sanne de juiste lengte en hoek kunnen geven.

Vrijdag zijn we weer bezig geweest met het design en daarna ook verder gegaan met de eerste features te programmeren.

Ons eerste design was:

🔄 Week 2

Dinsdag hadden we een meeting met Marten en daarna zijn we verder gegaan met het laten werken van de functies.

Woensdag had ik een tech review met Marten en daarbij vooral gehad over het concept en wat code. Dit was allemaal oke en ik had geen vragen. We hadden het een beetje over performance en dit ook getest.

40 minuten voor het gesprek met de opdrachtgever zag ik dat Rick (een van de developers van de opdrachtgever) een nieuwe functie had gemaakt. Deze heb ik meeting op de goede plek in onze nieuwe code gezet en werkend gekregen.

Even later hadden we de meeting met Yuri (de opdrachtgever), en ze waren heel erg verast over wat we al hadden. We hebben nog meer duidelijkheid gekregen over wat zij nou eigenlijk willen met dit prototype. Dat is namelijk om het later wel automatisch te simuleren, en dat nodes hun eigen gedrag hebben. Alleen dan met interactie. Storytelling, oftewel onboarding vond Yuri een goed idee. We hebben ook gevraagd om te mogen testen en met wie dan. Hier kwam uit dat het gewoon studenten rond onze leeftijd moeten zijn alleen niet van onze studie. Het gaat er puur om of mensen het snappen en kunnen gebruiken, niet hoe het er ziet. Ook moeten we karaktereigenschappen toevoegen aan de nodes, gaat Rick verder op onze code en laat weten welke features er aan komen zodat wij hier al op kunnen voorbereiden.

Donderdag had ik een design review met Sanne. Daarbij heeft hij een nieuw idee benoemd om het netwerk te besturen. Namelijk door een telefoon te simuleren met social media en daaraan dus de kaart gaan veranderen. Zo is het misschien duidelijker voor de gebruiker van wat er gebeurt. Hier hebben we met het groepje over overlegd en uiteindelijk ervoor gekozen om dat erbij te maken.

Hierbij de schetsen om het in de layout te passen

Vrijdag zijn we bezig geweest met het omschrijven naar object oriënted. Ook kwamen we op een idee dat het misschien korter zou kunnen maken maar wel veel onoverzichtelijk. Namelijk om alle variabelen in een object te gooien en dit steeds meegeven aan de volgende functies. Dit hebben we uiteindelijk niet gedaan. Verder hebben we de functionaliteiten die we hadden werkend gekregen behalve de tools en dat de bolletjes groeien.

🔧 Week 3

Maandag ben ik bezig geweest met het omschrijven van de code naar object oriented. We hebben de tools werkend gekregen, de nodes groeien weer, hebben de forward buttons laten spawnen als je mensen linkt en hebben wat code duplications eruit gehaald.

Dinsdag zijn we bezig geweest met de design rationale. Deze hebben we opgezet en content voor gemaakt. Ook heb ik wat comments kunnen toevoegen aan de code.

Woensdag hadden we tech reviews, een meeting met Marten en weer een client meeting met Yuri. Bij de tech reviews heb ik laten zien waar we waren en heb ik de code kunnen laten zien aan Cyd. Die zei dat het misschien nog korter kon door onnodige code eruit te halen. Ook zei ze dat de mobiel een andere overlay img moest hebben zodat het meer als een geheel eruit ziet. Verder zei ze dat het lastig zou zijn om het in en uit zoomen van de kaart te maken, maar dat we er wel mee zouden kunnen experimenteren.

De meeting met Marten was kort en bondig, we lieten even zien en horen wat we Yuri zouden vragen en dit was allemaal in orde.

Wat we bij de client meeting wilde laten zien was wat we kwa code hebben omgeschreven naar object oriented. Verder wilde we wat vragen stellen aan Rick over de functies die hij had gegeven. Deze had ik namelijk geprobeerd te implementeren maar dat lukte niet. Dit kwam omdat ik bepaalde dingen mistte en niet helemaal goed gingen. Een aantal dingen daarvan heb ik kunnen fixen, maar soms wist ik niet helemaal wat hij er precies mee wilde doen. Uiteindelijk hebben we hier antwoord op gekregen na wat door te vragen, en snapte het. Wat we eigenlijk nog hadden moeten doen is het een beetje live coden want na het gesprek liep ik weer tegen andere dingen aan die ik nog niet had gezien.

Verder hadden we wat voorstellen gedaan aan Yuri. Deze gingen over de mobiel als main interface. Dit wilde hij niet als main interface maar eigenlijk als extra interface. Hij was verder wel heel erg enthausiast over het idee. Ook hebben we gevraagd wat hij vond van de onboarding en het exporteren en importeren van data om zo presets te maken. Hier was hij bij beide ideeen ook erg enthausiast.

Ook had Yuri nog wat dingen aan te merken op de styling. De mobiel moest kleiner, de toolbar naar onderen want die staat bovenaan en daardoor lijkt hij het belangrijkst, en het plaatje van de mobiel moet minder realistisch (wat Cyd ook zei).

Die woensdag hebben we dus meteen het design aangepast in figma, en meerdere versies gemaakt over wat mogelijk zou zijn. Uiteindelijk hebben we dingen bij elkaar gevoegd en hier kwam een mooi design uit.

Geexperimenteerd met de indeling: (Het is uiteindelijk de eerste geworden)

Donderdag ben ik bezig geweest om de layout van de website te veranderen aan de hand van het figma design. Ik wilde dit heel graag doen want ik was helemaal klaar met de onzekerheid van de code van Rick, en kwam daar dus niet echt verder mee.

De layout was snel gefixed. En verder was ik bezig meet meer optimalisatie van de code.

Vrijdag ben ik bezig geweest om de laatste dingentjes in het design te optimaliseren. Zo was het idee om het logo te laten verdwijnen als je erover heen hoverde, zodat je bij de nodes kan die erachter spawnen en zo het canvas zo groot mogelijk kan blijven. Toen ik dit aan het maken was lukte het niet helemaal zoals in mn gedachte, de header was aan het glitchen en dit kwam doordat de cursor aan het varanderen was naar de select cursor. Ik had een aantal dingen geprobeerd zoals display none, user-select op none, maar dat werkte allemaal niet. Uiteindelijk vond ik deze regel code dat het glitch effect oploste: filter:alpha(opacity=0);. Deze regel code had ik nog nooit gezien maar het werkte wel.

Ook ben ik bezig geweest om de data in de telefoon in te laden aan de hand van welke node je hebt geselecteerd.

🎬 Week 4

Maandag ben ik weer bezig geweest met het fixen van de step functie die Rick mij gegeven had. Ook hadden we een meeting met Marten en daar hadden we het over het vorige gesprek met Yuri, en ik zei dat ik van plan was om met Rick even samen te zitten om naar zijn functie te kijken. Dit vond Marten een goed idee. Later heb ik dus Rick een bericht gestuurd en afgesproken om woensdag na onze meeting even samen te zitten om het te fixen. Hetzekfde moment zat ik de code weer te bekijken en zag waar het op verschillende plekken mis ging. Rick gebruikte de hele node als key() in de map() en wij de node.id. Vervolgends gooien wij de node in de value van de map, en rick gooide daar de score in. Uiteindelijk hebben we als groepje besloten om het zo op te slaan: nodes.set(node.id, {node, score}). We kunnen namelijk niet de score in de node gooien aangezien het een pointer is en dus kan veranderen. Elke relatie heeft weer een unieke score, zelfs al is het dezelfde node.

Dinsdag ben ik hier weer verder mee geweest en heb ik de functie werkend kunnen krijgen. De geselecteerde node, maakt steeds kleine stapjes en ik krijg geen errors meer. Wel is de code nog super rommelig en zouden er nog dingen misschien worden aangepast. Ook gaat er nog iets niet goed maar dat los ik nu op met 3 if statements. Dit moet er ook uit worden gehaald. Verder ben ik bezig geweest met het fixen van de data in de telefoon en wat bugs op gelost.

Woensdag hadden we weer tech reviews. Daarbij ging het vooral over waar we waren en wat ik ga vragen in het gesprek straks met Rick. Bij de client meeting gaven we ook weer een update. En daarna heb ik deels de simulatie met kunnen oplossen met Rick.

Laatste sketches figma na meeting met de klant.

Donderdag CSS day

Vrijdag CSS day

🔬 Week 5

Maandag ben ik verder gegaan met de step functie en heb het eindelijk werkend gekregen. Ik had hier nog wel wat vragen over wat dingen in de code maar die kon ik stellen op woensdag.

Dinsdag was ik druk bezig met stage, ik had daarna wel wat documentatie geschreven voor de step functie, en heb ik de calulations en de group functies kunnen laten berekenen als je bezig bent in het canvas.

Woensdag hadden we tech reviews en de client meeting waar ik vragen kon stellen over onduidelijkheden in de logica, dit heb ik daarna even kunnen fixen en kunnen opschonen.

Donderdag ben ik bezig geweest met een filter functie en hadden we design reviews. Bij die review had ik een vraag over hoe we de most important person beter konden weergeven. Uiteindelijk kreeg ik ok nog meer feedback op de website en daar hebben we later met de groep een laastste todo lijst van gemaakt. Die lijst was uiteindelijk:

• Infolinks lichter => Als feedback uit de design review
• Most important person op canvas en minder in de calculations popup => Als feedback uit de design review
• Anchor positioning popup
• Rode stippen naar rode post icoontjes.
• bulk delete posts op account
• swicthen tussen gebruikers op mobiel weghalen
• add friend pagina + mobiel een class maken
• onboarding afmaken
• delete account functie
• forward buttons uitdoen wanneer je links uitzet
• wat wij willen over brengen is nog niet helemaal duidelijk -> testen,
• responsiveness fixen
• node veslepen -> toekomstig iets
• Add influencer + het ontstaan van een influencer stimuleren -> toekomstig iets
• Nodes niet spawnen op de rand van het canvas
• Meer documentatie voor de nieuwe functies, comments schrijven en opschonen.
• Toegankelijkheid
• Person node configuiratie

Verder had ik vandaag nog andere kleine functies gefixed zoals lijsten in de mobiel refreshen zonder flickeren en nchor positioning gebruikt op de node data container. Dit lukte eerst niet en na veel trial and error ben ik erachter gekomen dat het lag aan een position absolute. Dit vond ik erg raar want in het voorbeeld en in een ander test document kan het er wel op staan. Ook heb ik Bart geholpen met js code.

Vrijdag ben ik niet op school geweest. Ik ging naar een open dag van de kazerne van mijn neef in Rotterdam. In de middag heb ik thuis wel gewerkt aan dingen die nog af moesten worden gemaakt namelijk: dat de most important persons niet meer worden laten zien in de calculations popup, maar met medals op de persoon zelf. En het aan en uit zetten van het berekenen van de hoeveelheid groepen.

⏱️ Week 6

Maandag ben ik bezg geweest om wat bugs op te lossen. Anchor positioning werkt namelijk niet op safari en chrome en dit moest ik even fixen door te kijken of het gesupport wordt, en dan zo nodig de oude manier gebruiken. Ook zorgte anchor positioning ervoor dat de anchor boven alles komt, zelfs als het element waarop die anchored, niet zichtbaar is. Dit heb ik uitiendleijk kunnen oplossen met position-visibility: anchors-visible;. Ook ben ik bezig geweest om de mobiel object oriented te schrijven. Dit hebben we niet gedaan toen we het aan het maken waren dus is het uiteindelijk een onbegonnen zaak geworden om dat om te schrijven. Je hebt namelijk overal variabelen nodig om de functie uit te kunnen voeren en de functies worden op verschillende plaatsen uitgevoerd. Uiteindelijk zijn we hier mee gestopt en hebben we het gelaten. Een goed leermoment voor de volgende keer: als je object oriented aan het schrijven bent, MOET je het vanaf het begin ook zo schrijven, en niet denken van ik doe het later wel beter.

Dinsdag zijn we vooral bezig geweest met de laatste dingen op het lijstje. Er komen natuurlijk altijd weer dingen om de hoek kijken dus elke keer dat dat gebeurt overleggen we of we dat gaan fixen. Het doel van vandaag was om kwa code klaar te zijn zodat we het woensdag af kunnen ronden.

Woensdag zijn we vooral bezig geweest met de wiki afmaken. Code nakijken, comments erbij plaatsen waar het nog moet, en zo nodig nog even opschonenen. Ook hebben we natuurlijk de presentatie voor donderdag voorbereid. En terwijl we bezig waren met al dit hebben we nog flnk wat bugs opgelost. Er zaten bijvoorbeeld nog bugs in de telefoon en infolinks tussen posts en personenen of dingen die het nog niet deden namelijk de seen count per posts op de mobiel en het kunnen doorsturen van posts op de liked pagina.

Ook hebbben we kunnen testen met personen uit de doelgroep. Daaruit kwam dat de toolbar en telefoon pas laat werden gevonden, vonden ze de mobiel onoverzichtelijk, probeerde vaak op posts te drukken en konden het canvas moeilijk leeghalen. Een aantal oplossingen die we daarvoor meteen hadden bedacht waren dat de onboarding moet worden uitgebreid, de telefoon doorzichtig laten zien met een empty state, een algoritme om posts en mogelijke vrienden op de mobiel te laten zien. Dit hebben we ook meteen genoteerd in onze design rationale.

Donderdag in de ochtend heb ik nog twee bugs uit de website kunnen halen en daarna hadden we de eind presentatie bij de klant. Die ging erg goed. We gingen door het design heen, daarna door de website heen om alle features even te laten zien. En als laatste door de documentatie, nog wat uitleg over waar bepaalde dingen staan zoals de variabelen die het netwerk.

Dit is de uiteindelijke website die we hebben opgeleverd:

Vrijdag hadden we de expo bij CMD.