Sector verdieping

Inhoud

Je leest blogs, literatuur en hebt (een of meerdere ) tech-events bezocht zodat je op de hoogte bent van de laatste technologische ontwikkelingen. Maak dit aantoonbaar op je blog.

Creativity inc.
bol.com | Creativity, Inc., Ed Catmull | 9789400501201 | BoekenVoor specialize me 1 heb ik ‘Creativity inc.’ gelezen. Dit boek is geschreven vanuit Ed Catmull die zijn ervaring deelt over de ontwikkeling van de eerste computer geanimeerde film. In het boek word je meegenomen in het verhaal van Ed Catmull. Ik vond het een interessant boek om te lezen, maar ik had er naar mijn idee niet hel veel aan. Ik heb kleine tips eruit kunnen halen. Ik had het idee dat die niet goed werden uitgelegd en dat ik zelf goed moest zoeken naar wat de schrijver er exact mee bedoelt.

Antopoloog gezochtAntropoloog gezocht | Amsterdam University Press
Naast ‘Creativity inc.’ ben ik nu bezig met het lezen van ‘Antropoloog gezocht’. Dit boek sluit aan bij mijn specialize me voor de betrokken technoloog. Het gaat over drie antropologen die een beeld geven over hoe deze te werk gaan op d arbeidsmarkt.

Future Flux Festival
Ik  ben buiten de corona tijd naar het Future Flux Festival gegaan. Hier staan allemaal projecten van studenten met verschillende opleidingen die deze komen presenteren. Ik heb projecten gezien die te maken hebben met AR. Dit gebeurd door dat je met een bril door de ogen van een autootje kan kijken. Hierdoor moest je een andere auto die werd bestuurd door een andere speler, ontwijken.
Er was een simulatie van een containerschip. Deze simulatie werd bijvoorbeeld gebruikt om mensen vaarles te geven.

Ik heb op dit event gemerkt dat ook bij kleinere projecten, heel veel mensen enthousiast zijn. Je hoeft niet iets enorms te maken om de interesse te trekken. Daarnaast zag ik dat de doelgroep vrij breed was. Op de locatie waren er verschillende mensen; van volwassen zakenmannen tot beginnende studenten van een zorgopleiding. Met dit in mijn achterhoofd weet ik dat niet alleen technische mensen geïnteresseerd zijn in wat ik doe op de opleiding, maar voornamelijk mensen die er waarschijnlijk veel mee te maken gaan hebben.

Het was een hele leuke sfeer en niemand vond het erg om wat te vertellen over wat diegene gemaakt had. Hieronder heb ik nog bewijsmateriaal van hoe het eruit zag en de bevestigingsmail die ik heb gekregen over mijn tickets.

 

Generation Discover festival

Ook ben ik naar Generation Discover festival gegaan in Ahoy. Ik ben samen met een groep van mijn jaar laag er naartoe gegaan. Dit festival was voornamelijk gefocussed op het laten zien hoe groen en milieubewust we bezig kunnen zijn op technologisch vlak. Bijvoorbeeld waterstof auto’s. Toen we aankwamen op bestemming merkte ik dat er ontzettend veel kinderen waren tussen de 10 en 14 jaar. Ik had niet verwacht dat de doelgroep zo laag was, ik was hierom ook benieuwd wat er dan te zien was op het evenement. 

Toen ik binnen kwam, begreep ik waarom het vooral naar kinderen gericht was. Er waren heel veel interactieve activiteiten. Ongeacht de doelgroep vond ik het toch erg interessant om te zien waar mensen mee bezig waren in de ontwikkeling van de technologie. Ik heb op de event geleerd om een mini waterstof auto te maken en heb voor het eerst getekend in VR samen met anderen. 

Ik heb zelf nog nooit een mini waterstof auto gemaakt en besloot dit dus samen met de groep te doen. we kregen een mini bouwpakket en konden aan de slag. Ik dacht dat het vrij ingewikkeld zou zijn, maar het bleek makkelijker dan gedacht. Het principe van een waterstof auto is namelijk dat twee metalen contact met elkaar maken door water die je erop doet. Hierdoor wekken de metalen elektriciteit op en kan de auto rijden. In het begin ging de auto erg langzaam, maar toen we meer water er in deden, ging hij steeds sneller. Tot op het moment dat we het autootje hadden verzopen. Hij deed het niet meer en we konden weer overnieuw beginnen. Ik heb geleerd hoe ik energie kan opwekken met slechts twee metalen en water, ik zou dit kunnen gebruiken voor projecten in de toekomst.

Maken van waterstofauto
Groepsfoto
Titanic scene tussendoor, bij de afdeling van windenergie
Ticket
Entree evenement
Onderzoek

Je voert een onderzoek uit naar de sector van jouw keuze en houdt daarbij rekening met: Bronnen (Je hebt relevante bronnen op een correcte wijze verwerkt in tekst en bronnenlijst zodanig dat anderen een goed inzicht krijgen in je onderbouwing); Onderzoeksdoel (Je hebt het onderzoeksdoel zodanig afgebakend dat je een onderzoeksvraag kunt formuleren); Onderzoeksmethode (Je kan een onderzoeksmethode selecteren en uitwerken zodanig dat je daarmee een antwoord kunt vinden op de onderzoeksvraag); Data (Je weet data te verzamelen en weer te geven zodanig dat je conclusies kunt trekken en aanbevelingen kunt doen); Reflecteren (Je kunt zodanig op je eigen onderzoek reflecteren dat de sterke en zwakke punten van het onderzoek en jouw rol daarin duidelijk worden); Respect (Je gaat zodanig met je onderzoek omgeving en deelnemers om dat je hiermee respect toont);

Rechten van AI

In TLE 1 van jaar 2 heb ik samen met mijn team de opdracht gekregen om iets te verzinnen waardoor ongewenst gedrag op de werkvloer bespreekbaar wordt. Wij hebben besloten om een applicatie te maken die de werknemers hierbij helpt. Voor het “bouwen” aan de app, moesten we natuurlijk genoeg onderzoek doen om ons doel te bereiken. Om het ondezoek duidelijk in kaart te brengen hebben wij een miro bord aangemaakt.

Miro

Allereerst is het belangrijk om te weten waar je het over hebt. Om hier achter te komen hebben wij desk research gedaan naar wat ongwenst gedrag is en wat niet. Hiervoor hebben wij de hulp ingeschakeld van een HR medewerker Ed van Dijken. Hij heeft ons geholpen door ons tips en informatie te geven op basis van zijn ervaringen op gebied van zijn werk. Gedurende het maken van de applicatie hebben wij constant contact gehad met Ed. Later hebben wij, met behulp van een prototype van onze applicatie, een interview gedaan met mensen die aangeboden werden vanuit Ed van Dijken. Dit ging dan om mensen die te maken hadden met HR (er werken of ermee in contact zijn geweest) en een oud student die zich ook bezig had gehouden met deze kwestie. Wij hebben deze mensen geïnterviewd en vervolgens onze applicatie laten testen. Hierdoor hebben wij waardevolle informatie gekregen. De tips die wij kregen gingen over design, functionaliteit en privacy. Het laatste punt was lastig om rekening mee blijven te houden, maar dit is uiteindelijk goed gelukt.
De uitkomsten van de interviews en tests hebben wij verwerkt in een testrapport. De interviews zijn opgenomen en vervolgens uitgetypt in dit rapport. Alle data die hierin staat hebben wij anoniem gemaakt om de geïnterviewde zijn/haar privacy te waarborgen. Hieronder is een link te zien van het testrapport.

Testrapport

De deskresearch is te zien op het miro bord onder de pagina “sprint 0”. Hierbij staat ook de bron weergeven van de meeste informatie die wij gevonden hebben. Daarnaast staat er ook een ingevulde formulier met belangrijke insights die horen bij een specifiek onderdeel van HR of ongewenst gedrag. Hierdoor kan het probleem van meerdere kanten worden bekeken en de onderzoeksvraag gespecificeerd worden.
De onderzoeksvraag ging van “Hoe kan ongewenst gedrag op de werkvloer bespreekbaar worden gemaakt?” naar “Hoe creëren wij een laagdrempelige technologische toepassing voor het melden en bespreekbaar maken van ongewenst gedrag op de werkvloer?”

Om goed terug te kijken op het proces, hebben wij een verantwoordingsdocument gemaakt waarin de volgende beoordelingscriteria uitgebreid worden besproken; plannen & samenwerken, onderzoeken & ontwerpen, Valideren & testen en toepassen & doorontwikkelen.
Hieronder is een link te vinden naar dit document

Verantwoordingsdocument

Resultaat

1. Als onderzoeker kom je door middel van goed gevonden bronnen en goede argumenten tot een gefundeerde mening over ontwikkelingen op het vakgebied CMGT in jouw specifiek gekozen sector. Dit doe je met bovenstaande aanwijzingen om een onderzoek naar een hoger plan te tillen. Je kan kansen benoemen, ontwikkelingen en je geeft een goed overzicht van de huidige status van die sector, vanuit het perspectief van de CMGT’er. Je hebt o.a. gesproken (onderzoeksdata vergaard) door een gesprek te voeren met een expert die in deze sector actief is, liefst een technoloog. (Let op: dit is dus geen mede-student of een docent). 2. Je bedenkt en werkt een CMGT-concept voor de door jou gekozen sector uit en je kan aantonen dat dit concept nog niet in deze sector wordt toegepast maar wel van toegevoegde waarde kan zijn. Let op: je hoeft dit concept niet daadwerkelijk te ontwikkelen maar je zorgt wel voor een tekstuele uitleg en enkele grafische uitwerkingen. 3. Daarnaast heb je een artikel geschreven waarin je een technologische ontwikkeling onderzocht hebt. Hierin komt duidelijk naar voren dat je kritisch en onderzoekend gewerkt hebt om dit artikel te schrijven. Het artikel is gepubliceerd op Internet (in de 3e periode wordt bij het vak Media- en techniekfilosofie ook gewerkt aan een kritisch artikel wat je hier eventueel voor mag gebruiken).

De opdracht om een oplossing te vinden om ongewenst gedrag bespreekbaar te maken, kregen wij gelukkig vanuit de school. Hierdoor kregen wij ook direct contact met een expert uit het vakgebied. Dit heeft ons goed geholpen met het specificeren van het probleem. Deze expert is Ed van Dijken. Hij was onze opdrachtgever en daarbij ook een van de testpersonen. Ed heeft ons inzichten gegeven die ons hielpen bij het ondezoek, hierbij kan je denken aan ervaringen en hoe HR over het algemeen in zijn werk gaat. Als onderzoeker moet je natuurlijk genoeg over het vakgebied te weten komen, als je een oplossing wilt kunnen bedenken voor een probleem.

De sector die ik gekozen heb, is zorg en welzijn. Dit gaat dan om de mentale gezondheid. Wij hebben hiervoor een app gemaakt waarin een werknemer van een bedrijf de mogelijkheid krijgt om zijn positieve en negatieve ervaringen op te slaan in een dagboek. Dit dagboek is persoonlijk en hier kan ook niemand bij, behalve als de gebruiker ervoor kiest om deze te de delen. De applicatie bied ook een mogelijkheid aan om contact op te nemen met een intern of extern HR medewerker. De bedoeling is dat deze persoon, de gebruiker helpt met zijn of haar problemen. Als de gebruiker zich er fijn bij voelt kan het dagboek, of een deel hiervan, gedeeld worden met de HR medewerker.
In de applicatie staan ook tips over hoe je om moet gaan met ongwenst gedrag en wat ongewenst gedrag is. Dit verlaagd de drempel om contact op te nemen met iemand als dit nodig is. Hieronder is een link naar de prototype die we hebben gemaakt.

Prototype

One of a kind

Ken je kwaliteiten

Je (h)erkent je sterke en zwakke punten binnen het opleidingsdomein zodanig dat je deze punten bewust aanpakt in je eigen ontwikkeling.

 

ZWAKKE PUNTEN:

Programmeren:
Programmeren vind ik niet het makkelijkst op de opleiding. Ik heb er vaak genoeg moeite mee als ik zelf een stuk code moet schrijven.
Om mijn programmeer skills te verbeteren ga ik naar Speedcourses, vraag ik medestudenten om hulp en stel ik vragen tijdens de lessen. Daarnaast neem ik vaak de programmeer functie op me als ik in een team werk tijdens CLE. Hierdoor hou ik mij er meer mee bezig en begrijp ik het sneller dan als ik mij er niet mee bezig houd.

STERKE PUNTEN:

Ontwerpen:
Ik vind ontwerpen erg leuk. Vaak ben ik diegene die de brainstormsessies leidt en waar mensen naar toe gaan als ze een design vraag hebben. Ik heb het idee dat ik goed out of the box kan denken. Ik heb vaak aan het begin van het jaar de design taken op mij genomen. Dit gaat dan om het ontwerpen en uitwerken van de casing van de robot.

Presenteren:
Ik ben niet bang om spontaan voor een groep mensen wat te vertellen.  Ik vind dit eigenlijk best leuk! Tijdens groepsopdrachten ben ik vaak de persoon die het product presenteerd. Ik heb hier niet veel voorbereiding voor nodig. Ik vertel wat wij hebben gedaan en wat onze gedachtes erbij waren.

Event

Je hebt minimaal één branchegerelateerd netwerkevent bezocht (meetup, conferentie, e.d.) zodanig dat je aantoonbaar je vakkennis hebt vergroot.

Future Flux Festival
Ik  ben vorig jaar op 4 juli naar het Future Flux Festival gegaan. Hier staan allemaal projecten van studenten met verschillende opleidingen die deze komen presenteren. Ik heb projecten gezien die te maken hebben met AR. Dit gebeurd door dat je met een bril door de ogen van een autotje kan kijken. Hierdoor moest je een andere auto die werd bestuurd door een andere speler, ontwijken.
Er was een simulatie van een containerschip. Deze simulatie werd bijvoorbeeld gebruikt om mensen vaarles te geven.

Ik heb op dit event gemerkt dat ook bij kleinere projecten, heel veel mensen enthousiast zijn. Je hoeft niet iets enorms te maken om de interesse te trekken. Daarnaast zag ik dat de doelgroep vrij breed was. Op de locatie waren er verschillende mensen; van volwassen zakenmannen tot beginnende studenten van een zorgopleiding. Met dit in mijn achterhoofd weet ik dat niet alleen technische mensen geïntresseerd zijn in wat ik doe op de opleiding, maar voornamelijk mensen die er waarschijnlijk veel mee te maken gaan hebben.

Het was een hele leuke sfeer en niemand vond het erg om wat te vertellen over wat diegene gemaakt had. Hieronder heb ik nog bewijsmateriaal van hoe het eruit zag en de bevestigingsmail die ik heb gekregen over mijn tickets.

 

Generation Discover festival

Dit jaar ben ik naar Generation Discover festival gegaan in Ahoy. Ik ben samen met een groep van mijn jaarlaag er naartoe gegaan. Dit festival was voornamelijk focussed op het laten zien hoe groen en milieubewust we bezig kunnen zijn op technologisch vlak. Bijvoorbeeld waterstof auto’s. Toen we aankwamen op bestemming merkte ik dat er ontzettend veel kinderen waren tussen de 10 en 14 jaar. Ik had niet verwacht dat de doelgroep zo laag was, ik was hierom ook benieuwd wat er dan te zien was op het evenement. 

Toen ik binnen kwam, begreep ik waarom het vooral naar kinderen gericht was. Er waren heel veel interactieve activiteiten. Ongeacht de doelgroep vond ik het toch erg interesant om te zien waar mensen mee bezig waren in de ontwikkeling van de technologie. Ik heb op de event geleerd om een mini waterstof auto te maken en heb voor het eerst getekend in VR samen met anderen. 

Ik heb zelf nog nooit een mini waterstof auto gemaakt en besloot dit dus samen met de groep te doen. we kregen een mini bouwpakket en konden aan de slag. Ik dacht dat het vrij ingewikkeld zou zijn, maar het bleek makkelijker dan gedacht. Het principe van een waterstof auto is namelijk dat twee metalen contact met elkaar maken door water die je erop doet. Hierdoor wekken de metalen elektriciteit op en kan de auto rijden. In het begin ging de auto erg langzaam, maar toen we meer water er in deden, ging hij steeds sneller. Tot op het moment dat we het autootje hadden verzopen. Hij deed het niet meer en we konden weer overnieuw beginnen. Ik heb geleerd hoe ik energie kan opwekken met slechts twee metalen en water, ik zou dit kunnen gebruiken voor projecten in de toekomst.

Maken van waterstofauto
Groepsfoto
Titanic scene tussendoor, bij de afdeling van windenergie
Ticket
Entree evenement

 

Netwerk

Je hebt een netwerk van externe contacten zodanig samengesteld dat deze contacten je verder kunnen helpen in je ontwikkeling.

Ik heb een LinkedIn account waar ik al wat connecties heb. Ik heb in mijn ervaring geschreven waar ik naar school ben gegaan, stage heb gelopen en waar ik gewerkt heb met de bijbehorende functie.
Mijn connecties bestaan uit:
– Oud klasgenoten en leraren van de middelbare school (Handig voor als ik een opdracht moet doen wat te maken heeft met andere studies of als ik langs moet gaan bij een school)
– Familie leden
– Vrienden
– Kennissen
– Mede studenten / Docenten
– Onbekenden binnen en buiten het vakgebied

Ik heb ervoor gekozen om voornamelijk met mensen te connecten die op mijn opleiding zitten. Ik kan hierdoor gemakkelijk ook na de studie contact met deze mensen behouden. Dit helpt voor projecten in de toekomst en eventueel een baan.

Vorig jaar ben ik op bedrijfssafari gegaan met de studie. We gingen hiermee langs drie bedrijven die te maken hebben met mijn vakgebied. Het bedrijf wat mij het meest aansprak van deze drie was Q42. Dit zijn 73 nerds die werken in een bedrijf om vette dingen te maken zoals interactieve websites, games en robots. Ik zou heel graag iets willen doen met het ontwerpen of testen van applicaties of games. Ik denk dat dit bedrijf mij daar goed bij zou kunnen helpen.
Om de ontwikkelingen van Q42 bij te houden heb ik ervoor gekozen om een connectie te maken met de CTO van Q42, Kars Veling. Deze persoon post regelmatig wat er gebeurd binnen het bedrijf. Via hem kan ik ook contact opnemen om te solliciteren.

Ik accepteer ook connectie verzoeken van onbekenden. Als deze mensen hulp nodig hebben dat gerelateerd is aan mijn vakgebied, kunnen ze gemakkelijk contact met mij opnemen.

Op dit moment heb ik 107 connecties. Het is altijd handig om zo veel mogelijk connecties te hebben.

Rolmodel

Je hebt een superheld uit het domein van CMGT gekozen die jou weet te inspireren. Je kan goed onderbouwen hoe dit rolmodel invloed heeft op jou.

Als superheld uit mijn domein heb ik gekozen voor Eric Barone ook bekend als ConcernedApe. Eric is een Computerspelontwikkelaar, geboren in Los Angeles en op het moment 32 jaar oud. Hij heeft de ”Bachelor of Arts/Science” aan de ”University of Washington Tacoma” afgerond.

Toen Eric Barone op zijn 24ste klaar was met zijn studie, probeerde een baan te krijgen binnen zijn vakgebied. Na talloze keren proberen werd hij steeds maar geweigerd. Hierdoor besloot hij zich meer te focussen op het verbeteren van zijn skills.
Hij vond het altijd leuk om muziek te maken en verhalen te schrijven. Hij besloot dit te combineren door een spel te maken. Dit spel werd een boerderijsimulator genaamd Stardew valley. De inspiratie kwam vooral van twee andere spellen waar hij graag zijn tijd mee doorbracht genaamd Minecraft en Harvest moon. Eric pakte de alleen de leuke aspecten uit het laatste spel en gebruikte deze vervolgens in zijn eigen game.

Alles in deze game was hij van plan om zelf te maken. Hij heeft dit dus ook gedaan voor de komende 4 jaar. Eric had in het begin niet door dat deze game populair zou kunnen worden en gebruikte het vooral om zijn vaardigheden te trainen. De art, muziek en code heeft hij allemaal zelf gemaakt en geschreven. Hierdoor werd dit zijn project. Na een paar mensen zijn spel te hebben laten spelen, kwam Eric erachter dat er veel potentie in zit. Hij besloot het spel op de markt te brengen via Steam. Dit deed hij zodra hij vond dat het af was.

De feedback die hij kreeg verwerkte hij op een online Trello bord. Hierdoor kon hij de overzicht houden van wat er nog moet gebeuren. Tijdens het developen van de game was hij zo een 70 uur per week ermee bezig gedurende 4 jaar lang.
Ik bewonder heel erg de toewijding die Eric heeft voor de game en zijn eigen ontwikkeling. Nadat de game gereleased werd op 26 februari 2016, ontplofte het internet. Er werden al gauw 400.000+ kopieën gekocht van het spel.
Eric kreeg van alle kanten positieve en negatieve feedback. Door i.p.v. 10 uur per dag, 15 uur per dag te besteden aan de game, kon hij vragen van fans beantwoorden en snel feedback verwerken zodra deze er was.

Ik vind het mooi om te zien dat iemand zo veel tijd en moeite in een product kan stoppen, en dat vervolgens ook terug te zien is in de reactie van de community. Eric besloot de hele game zelf te maken omdat hij vond dat hij zelf de enige was die hij suf mocht laten werken.

“You should be free to work yoursel to the bone, but not to force someone else to do that for you” ~ Eric Barone / ConcernedApe

Door deze quote laat Eric zien dat hij ondanks al het succes, nog steeds zichzelf blijft. Je merkt dat hij de community, die hij heeft gecreëerd door het maken van zo een spel, wilt helpen door een leuke game ervaring te geven, hoeveel tijd en moeite er ook voor nodig is.

Twee maanden na de release van de game, verkocht hij in april ruim over de 1 miljoen kopieën van de game. Hierdoor kwam Eric in de top 10 van beste gamedevelopers volgens Gamasutra(Bekende site voor gamecommunity). Hij stond samen in het rijtje met Blizzard en Niantic, twee enorm bekende gamestudios.

Eric is van plan om in de toekomst meer games te maken voor de community, niet voor het geld maar om de mensen meer vreugde te brengen tijdens het gamen. Geld zal geen rol spelen met een net worth van 34 miljoen. Hij zal hier wel hulp nodig hebben van een klein develop team. Een enorme community onderhouden is niet niks.

De reden waarom ik deze man als mijn rolmodel heb gekozen, is omdat hij laat zien dat als je genoeg tijd en aandacht geeft aan een product, het heel groot kan worden. Ik heb op deze manier CLE’s benaderd op de opleiding. Ik merkte dat als ik veel aandacht aan de opdracht besteedde en er veel tijd in stop, het product iets wordt waar ik echt trots op kan zijn.
Daarnaast laat Eric zien dat je geen goede programmeur hoeft te zijn om iets vets te maken. Hij heeft gaandeweg dingen geleerd wat hem een goede programmeur gemaakt heeft. Ik heb hiervan geleerd dat ik kleine stappen moet nemen in een project en daarop kan uitbreiden, uiteindelijk begrijp ik het groter geheel en kan ik deze code toepassen op andere projecten.

Online presence

Je hebt je online geprofileerd en gemanifesteerd (online presence) via het delen van applicaties / code snippets / tutorials. Je draagt actief bij aan de online tech-community en bent hierdoor zichtbaar als aankomend professional voor externen.

Youtube
Ik heb een youtube account waar ik video’s upload die gerelateerd zijn aan mijn opdrachten. Ik er bijvoorbeeld een brainstormsessie op staan die ik heb gedaan m.b.t. de game die ik in CLE 4 moest maken.

Github
Ik heb sinds vorig jaar een Github account. Ik gebruik deze vooral in groepsopdrachten. Het is handig om je code te delen en aan te passen. Als back-up kan het ook erg goed helpen. Ik gebruik naast projecten Github ook om huiswerk van programmeren te leren en maken.
Zoals je misschien ziet men ik bezig met een cookieclikker. Dit is een simpel spelletje die ik buiten schooltijd maak. De code die ik hiervoor gebruik plaats ik op Github, voor mezelf en voor de mensen die er interesse in hebben.

LinkedIn
Naast youtube en Github gebruik ik zoals eerder genoemd ook LinkedIn. Dit gebruik ik om makkelijk connecties te maken met mensen in mijn vakgebied.

StackOverflow
Als ik ergens tegen aan loop in mijn code, ga ik meestal meteen naar StackOverflow. Dit is een website waar mensen met vragen over programmeren bij elkaar komen. Deze worden dan door anderen beantwoord die er verstand van hebben. Bijna al mijn vragen die ik had zijn al gesteld door iemand anders. Dit maakt het makkelijker om een antwoord te vinden dat bij mijn probleem past.

Specialisatie

Nieuwsgierig

De informatie die in deze block te zien is, is voornamelijk gebasseerd op CLE 2 reserveringssysteem.

Als specialisatie heb ik gekozen voor webdesign. Ik heb deze specialisatie gekozen, omdat ik er enthausiast over ben om mooie websites te maken die goed werken. Tijdens de opdracht van CLE 2, om een reserveringssysteem te maken, werdt er ook verwacht dat we er een werkende website bij zouden maken. Om dit te realiseren heb ik behoorlijk veel gebruik gemaakt van het internet om bepaalde stukken code op te zoeken en uitgelegd te krijgen. Deze informatie kreeg ik op websites zoals:
https://www.w3schools.com/
https://developer.mozilla.org/nl/
https://www.tutorialspoint.com/index.html
https://stackoverflow.com/
https://php.net/
En natuurlijk veel hulp van docenten en studenten.

De benodigde informatie die ik moest opzoeken ging bijvoorbeeld over het maken van formulieren en voornamelijk over CSS en PHP.
Door veel tutorials op te zoeken kom je achter dat mensen heel creatief zijn en telkens weer op een nieuw idee komen om hun website er mooier uit te laten zien of beter te laten werken. Ik ben zelf niet zo ervaren maar door dit te proberen leer je steeds betere websites neer te zetten en zo een mooier product te maken.

Brede oriëntatie

Zoals ik in het vorige deel beschreven heb, heb ik gebruik gemaakt van verschillende websites en voornamelijk hulp van docenten en studenten. Ik heb naast de opdracht van CLE 2, bewust een baan genomen als webdeveloper. Mijn opdrachtgever wist dat ik niet zo ervaren was en heeft me toch aangenomen, omdat hij weet dat ik aan het leren ben. Door een baan te nemen ben ik mij een stuk meer gaan verdiepen in dit onderwerp en heb ik in een korte tijd veel kunnen leren. Ik heb door dit te doen geproefd hoe het zou zijn om hier werk mee te hebben als webdeveloper. Mijn ervaring zegt dat dit leuk werk is, maar voor even. Ik merk dat ik vrij snel klaar ben met het werken aan websites en denk dat ik toch gevarieerder werk wil doen binnen mijn vakgebied.
Na CLE 4 ben ik erachter gekomen dat games maken toch iets meer voor mij is. Ik heb hier wederom niet veel ervaring mee, maar ik voel me hier wel meer thuis. Dit komt omdat ik vaak geintresseerd ben in de gedachtengang van de gamedevelopers en in de opdracht van CLE 4 mijn best heb gedaan om een mooi product neer te zetten.
Ik heb eerder met GameMaker gewerkt en hierdoor op een andere manier games proberen te maken. Dit heb ik geprobeerd aan de hand van tutorials en al gemaakte games waar ik mijn inspiratie vandaan haalde. Dit was niet meteen een succes, maar ik merkte wel dat hier potentie in zat.
Bekende voorbeelden van games waarvan ik vind dat ze goed in elkaar zitten zijn. Deze zijn ook in gamemaker gemaakt:
Undertale
Nidhogg

Eindproduct

Het eindresultaat is een af product. Het product is bruikbaar, professioneel uitgewerkt. Je presenteert je product met mooie foto’s en een filmpje op de CMGT showcase-site.

Front end

DE INHOUD HIERONDER IS GEBASEERD OP CLE1 sprint 3 2018. ik kreeg de opdracht om een spel te maken voor kinderen. ik heb dit gedaan en vervolgens een one pager voor gemaakt, gericht naar kinderen. Voor je gemak heb ik de code en de link naar de website hieronder staan.

Live website
GitHub

HTML

Je hebt onderzoek gedaan naar het werken met HTML5 middels een online cursus. Je kent de basis HTML elementen zoals div, span en p . Je weet wat semantische elementen zijn, en je kan hiermee een basis HTML document opzetten.

Afgelopen twee jaar heb ik tutorials gevolgd op sites zoals w3schools en stackoverflow. Hier heb ik geleerd hoe je websites maakt op basis van html en css. Daarnaast gebruik ik de app Mimo om dagelijks opdrachten te doen op gebied van html, css en javascript. Dit helpt me om regelmatig met programmeren bezig te zijn.

Na die tutorials weet ik ook wat de elementen doen. Div is een block element, span een inline element, en p gebruik je voor paragrafen.

De tag <span> wordt gebruikt om inline-elementen in een document te groeperen. Deze tag biedt op zichzelf geen visuele verandering. Je kunt een haak toevoegen aan een deel van een tekst of een deel van een document.

De tag <div> definieert een divisie of een sectie in een HTML-document. Het element <div> wordt vaak gebruikt als container voor andere HTML-elementen zoals stijlen met CSS of om bepaalde taken uit te voeren met JavaScript.

De tag <p> definieert een alinea. Browsers voegen automatisch wat ruimte (margin) toe voor en na elk <p> -element. De marges kunnen worden aangepast met CSS (met de margin-eigenschappen).

Een semantisch element beschrijft=de betekenis ervan voor zowel de browser als de ontwikkelaar.
Voorbeelden van niet-semantische elementen: <div> en <span> – Vertelt niets over de inhoud.
Voorbeelden van semantische elementen: <form>, <table> en <article>: definieert duidelijk de inhoud.

In de code van mijn one pager kan je zien dat ik deze elementen heb gebruikt.

CSS

Je kan werken met css selectors: tags, id’s en classes. Je kan werken met css eenheden: %, em, vw, vh en px. Je begrijpt de werking van css display: block, inline-block, inline, flex. Je website is responsive door gebruik te maken van relatieve eenheden, flex, grid, en/of media queries. Je gebruikt geen css framework.

heb ik gebruikt om precies het midden te bepalen van de pagina zodat ik zeker weet dat de onderdelen op de juiste plaats staan.

In dit project heb ik tagsid’s en classes als selectors gebruikt. Id’s heb ik voornamelijk gebruikt voor onderdelen waarin ik javascript. Hierdoor kon ik makkelijker onderscheid maken in tussen onderdelen waar ik javascript voor gebruik en waar niet.

Het belangrijkste verschil tussen display: block en display: inline-block is dat er geen regeleinde achter het tweede element voegt waardoor je er nog een element naast kan zetten.

Om mijn website responsive te maken heb ik gebruik gemaakt van Media queries. Ik heb ervoor gezorgd dat mijn website responsive is voor een normale desktop en voor een telefoon met de pixels van 360 x 640. Hierdoor laat ik zien dat ik weet hoe ik de pagina moet veranderen wanneer de window of scherm een bepaalde grootte heeft.

Javascript

Middels code voeg je nuttige functionaliteit toe aan je applicatie. Je app toont een status en kan reageren op acties van de gebruiker. Je hebt je code zelf geschreven. Je code is leesbaar opgebouwd met heldere functienamen en variabelen, en dit kan je mondeling toelichten. Je gebruikt geen javascript framework of library.

Voor mijn one pager heb ik javascript gebruikt om duidelijk te laten zien hoe mijn product werkt. Met deze demo kan je het spel via de browser spelen. De bedoeling is om de vlammen te blussen voor de tijd om is. Als het je lukt dan staat er een berichtje dat aangeeft dat je hebt gewonnen. Anders staat er een berichtje dat je hebt verloren. Er is een mogelijkheid om het spel opnieuw te spelen zonder de website te hoeven refreshen. Om goed aan te geven hoeveel tijd je over hebt, heb ik een timer gemaakt. Deze stopt zodra al het vuur uit is, zodat je kan zien hoe snel je was.

Daarnaast heb ik aan het eind van de onderstaande code ervoor gezorgd dat de pagina na anderhalve minuut ververst.

//Dit voeg ik toe

var fires = [document.getElementById('vuur'),document.getElementById('vuur1'),document.getElementById('vuur2'),document.getElementById('vuur3'),document.getElementById('vuur4')];

//De functie om het spel te herstarten

function restart(){

    x = 0

    document.getElementById('result').classList.add('hidden');

    document.getElementById('result').classList.remove('show');

   

    document.getElementById('vuur').classList.add('hidden');

    document.getElementById('vuur').classList.remove('show');

    document.getElementById('vuur1').classList.add('hidden');

    document.getElementById('vuur1').classList.remove('show');

    document.getElementById('vuur2').classList.add('hidden');  

    document.getElementById('vuur2').classList.remove('show');

    document.getElementById('vuur3').classList.add('hidden');  

    document.getElementById('vuur3').classList.remove('show');

    document.getElementById('vuur4').classList.add('hidden');  

    document.getElementById('vuur4').classList.remove('show');

    document.getElementById('restart').classList.add('hidden');

    document.getElementById('restart').classList.remove('show');

    document.getElementById('vuurButton').classList.add('show');

    document.getElementById("myC").style.cursor = "";

}

//Functie die aangeeft of je het spel hebt gehaald

function myFunction () {

    console.log('runned');

    if(x >= 5)

    {

        document.getElementById('vuurButton').classList.add('hidden');

        document.getElementById('vuurButton').classList.remove('show');

        document.getElementById('restart').classList.add('show');

        win()

    }

}

restart()

//Dit is de start knop om te beginnen met de demo

document.getElementById('vuurButton'). onclick = function(event){

    startTimer(20);

    document.getElementById('vuur').classList.add("show");

    setTimeout(function(){document.getElementById('vuur1').classList.add("show");}, 1000);

    setTimeout(function(){document.getElementById('vuur2').classList.add("show");}, 2500);

    setTimeout(function(){document.getElementById('vuur3').classList.add("show");}, 4000);

    setTimeout(function(){document.getElementById('vuur4').classList.add("show");}, 5500);

    start()

    document.getElementById('result').classList.add('show');

    document.getElementById('vuurButton').classList.remove('show');

    document.getElementById('vuurButton').classList.add('hidden');

    document.getElementById("myC").style.cursor="url('image/blusser.png'),help";

};

//Dit is de restart button om het spel opnieuw te spelen.

document.getElementById('restart'). onclick = function(event){

    restart()

    resetl()

    resetw()

    document.getElementById('restart').classList.remove('show');

    document.getElementById('restart').classList.add('hidden');

};

function start(){

    var str = document.getElementById("result").innerHTML; 

    var res = str.replace("", "Snel blus het vuur!");

    document.getElementById("result").innerHTML = res;

}

function fail(){

    var str = document.getElementById("result").innerHTML; 

    var res = str.replace("Snel blus het vuur!", "Jammer! Je hebt het helaas niet gehaald.");

    document.getElementById("result").innerHTML = res;

}

function resetl(){

    var str = document.getElementById("result").innerHTML; 

    var res = str.replace("Jammer! Je hebt het helaas niet gehaald.", "");

    document.getElementById("result").innerHTML = res;

}

function resetw(){

    var str = document.getElementById("result").innerHTML; 

    var res = str.replace("Goed gedaan! Het gebouw is geblust.", "");

    document.getElementById("result").innerHTML = res;

}

function win(){

    var str = document.getElementById("result").innerHTML; 

    var res = str.replace("Snel blus het vuur!", "Goed gedaan! Het gebouw is geblust.");

    document.getElementById("result").innerHTML = res;

}

var timeInSecs;

var ticker;

function startTimer(secs){

timeInSecs = parseInt(secs)-1;

ticker = setInterval("tick()",1000);   // elke seconde

}

function tick() {

var secs = timeInSecs;

if (secs>0) {

timeInSecs--;

}

else {

    fail()

    document.getElementById('restart').classList.add('show');

    

    

clearInterval(ticker); // stop tellen bij 0  

}

if(x >= 5){

    clearInterval(ticker);

}

if (secs<10){

    secs = "0" + secs

}

document.getElementById("countdown").innerHTML = secs;

}

//Op het moment dat er op een vlam wordt geklikt, word 'show' weggehaald en vervangen door 'hidden'.

//Dit gebeurd bij alle vlammen. Bij elke vlam die aangeklikt is komt er een x bij.

var x = 0

document.getElementById('vuur').onclick = function(event){

    document.getElementById('vuur').classList.add('hidden');

    document.getElementById('vuur').classList.remove('show');

    x++

    console.log(x + " vlam geblust");

    myFunction();

};

document.getElementById('vuur1').onclick = function(event){

    document.getElementById('vuur1').classList.add('hidden');

    document.getElementById('vuur1').classList.remove('show');

    x++

    console.log(x + " vlammen geblust");

    myFunction();

};

document.getElementById('vuur2').onclick = function(event){

    document.getElementById('vuur2').classList.add('hidden');

    document.getElementById('vuur2').classList.remove('show');

    x++

    console.log(x + " vlammen geblust");

    myFunction();

};

document.getElementById('vuur3').onclick = function(event){

    document.getElementById('vuur3').classList.add('hidden');

    document.getElementById('vuur3').classList.remove('show');

    x++

    console.log(x + " vlammen geblust");

    myFunction();

};

document.getElementById('vuur4').onclick = function(event){

    document.getElementById('vuur4').classList.add('hidden');

    document.getElementById('vuur4').classList.remove('show');

    x++

    console.log(x + " vlammen geblust");

    myFunction();

};

//refresh de pagina na 90 seconden

    setInterval(function(reload){

        window.location.reload(1);

        console.log("reload");

     }, 90000);

Oplever

De Code waar ik het in de rest van deze post over ga hebben in te zien zodra je op de onderstaande link drukt.

GitHub

Verzorging code

Voor dit blok heb ik ervoor gekozen om de code te gebruiken waar ik in CLE 4 mee aan de slag ben geweest. Ik werk hierbij in Visual Studio Code met Typescript en Phaser. Deze programmeertaal is voor mij nieuw dus ik hielp ik mijzelf en mijn teamgenoten de code beter te begrijpen door regelmattig comments toe te voegen aan stukken code die misschien niet te begrijpen zouden zijn. Uiteindelijk hebben ik voor bijna elk stukje code een Comment er boven geplaatst. Hieronder is hier een voorbeeld van te zien.

Daarnaast heb ik er bewust voor gekozen om de drie levels hetzelfde structuur te geven zodat er goed overzicht is en we weten wat elk level gemeen heeft zodat we dat makkelijk kunnen aanpassen wanneer nodig. We hebben de namen zo goed mogelijk geprobeerd te associëren met het bijbehorende code.

Ik heb zo veel mogelijk de richtlijnen geprobeerd te volgen die gegeven zijn aan het begin van CLE 4, tijdens de workshop. Het was vrij lastig om andere informatie te vinden die me kon helpen om de code nog beter te maken aangezien hier niet zo veel van op staat op het internet. Uiteraard heb ik regelmatig raad gevraagd aan medestudenten en docenten.

Versiebeheer

Aan het begin van dit project hebben we een GitHub Branch geopend. Hierop hebben we de standaard code, die we gekregen hadden tijdens de workshop, opgezet en vervolgens door het Committen, Pushen en Pullen, de code telkens vernieuwd. Door dit te doen zijn we tot het product gekomen wat we nu hebben. Aan het begin was het wennen om ermee te werken, maar als je eenmaal weet hoe je de Origin ophaalt en vervolgens jouw progressie erin zet, gaat het een stuk makkelijker. Bij het committen heb ik geprobeerd om zo duidelijk mogelijk op te schrijven wat ik veranderd of toegevoegd heb aan de code. Het hieronder staande linkje stuurt je naar de pagina waar alle commits te zien zijn die we hebben gemaakt tijdens het project.

GitHub

 

 



Overdracht

In CLE 2 heb ik user stories gemaakt. In deze CLE was het de bedoeling dat ik een reserveringssysteem zou gaan maken die aan de eisen voldoen van de volgende user stories. Deze zijn priotiseerd a.d.h.v. de INVEST en MoSCow methode:

Story 1:
Als eigenaar van een kapperszaak
wil ik de afspraken gestructureerd terug kunnen zien,
zodat ik mijn afspraken makkelijk terug kan vinden.

Defenition of done: Deze user story is behaald wanneer de admin, de afspraken kan onderscheiden met: naam, achternaam, e-mailadres, behandelingstype, datum, tijd en opmerking.

Story 2:
Als klant met een druk schema
wil ik zelf een tijd kunnen kiezen om een afspraak te maken,
zodat ik daar omheen andere dingen plannen.

Defenition of done: Deze user story is behaald wanneer de gebruiker zelf een tijd kan kiezen tijdens het maken van de afspraak.

Story 3:
Als eigenaar van de kapperszaak
wil ik mijn afspraken kunnen verplaatsen en/of bewerken,
zodat ik mijn werkschema overzichtelijk kan maken.

Defenition of done: Deze user story is behaald wanneer de admin, afspraken kan verwijderen of bewerken via de adminpagina.

Story 4:
Als klant met een onvoorspelbaar werkrooster
wil ik mijn afspraken op elk moment kunnen annuleren,
zodat ik niet voor dubbele afspraken kom te staan.

Defenition of done: Deze user story is behaald wanneer de gebruiker de afspraak kan annuleren via de website (met een e-mailverificatie).

Story 5:
Als vergeetachtig persoon
wil ik een reminder krijgen vlak voor ik een afspraak heb,
zodat ik mijn afspraak niet mis.

Defenition of done: Deze user story is behaald wanneer de gebruiker en admin een mail krijgen, 24 uur voor de afspraak, waarin staat wanneer deze afspraak is en wat de behandelingstype is.

Story 6:
Als klant
wil ik weten wat de betalingswijzen zijn,
zodat ik weet of ik contant geld mee moet nemen.

Defenition of done: Deze user story is behaald wanneer er onder aan het afspraakformulier is aangegeven wat de betalingsmogelijkheden zijn. 

 

Hieronder wordt, met behulp van afbeeldingen, een handleiding gegeven voor de klant en admin over hoe de website werkt.

Handleiding klant:

 

Scrol naar beneden om een afspraak te maken
Dit is een afspraak formulier. Noteer je gegevens en maak een afspraak door op ”submit” te klikken.
Onderaan de website zijn de contactgegevens te zien. Telefoonnummer en locatie van de kapsalon.
Na al de gegevens te hebben ingevuld dien je op ”submit” te klikken om de afspraak te maken
Na het maken van een afspraak krijg je een bevestiging van de datum, tijd en waarvoor je komt. Vervolgens kun je terug naar de hoofdpagina door op de paarse balk of het logo te klikken.

Handleiding Admin:

Als admin kan je de afspraken terug vinden door in te loggen. Dit doe je door op ”Login” te klikken rechts boven in het scherm.
De website brengt je vervolgens naar een login pagina waar je in moet loggen. Als je niet wilt inloggen kan je terug door op de paarse balk of het logo te klikken.
Na de correcte inloggevens ingevuld te hebben druk je op ”login” om in te loggen.
Je wordt na het inloggen naar een overzicht gebracht waar je alle afspraken kunt zien, bewerken en verwijderen.
Om een afspraak te verwijderen druk je op de ”delete” knop van de bijbehorende afspraak.

Om een afspraak aan te passen klik je op de ”edit” knop van de bijbehorende afspraak.
Zodra je op de ”edit” knop klikt, wordt je gebracht naar een pagina waar je de afspraak kunt veranderen. Hier kan je de naam, achternaam, e-mailadres, behandelingstype, datum, tijd en opmerking aanpassen. Zodra je klaar bent met aanpassen druk je op ”submit”
Je wordt na het aanpassen vervolgens terug gebracht naar alle afspraken. De aangepaste afspraak is meteen ge-update. Als je terug wilt gaan naar de hoofdpagina druk je op de logo.

Interactie ontwerpen

Requirements

Je hebt de user stories gebruikt als aanleiding voor het interactieontwerp, zodanig dat hier de functionaliteiten op zijn afgestemd.

In CLE 2 heb ik een reserveringssysteem moeten maken voor opdrachtgever. Deze moest aan een aantal eisen voldoen:
– Dit moet gebeuren in php
– Een deel van de website is niet toegankelijk is zonder in te loggen
– Het formulier moet beveiligd zijn tegen xss en sql injecties

Naast deze eisen moest ik natuurlijk ook aan de wensen van de opdrachtgever voldoen. Na een korte interview heb ik user stories gemaakt. Deze zijn priotiseerd a.d.h.v. de INVEST en MoSCow methode en voldoen aan de eisen van de opdrachtgever en klanten. Naast het maken van user stories heb ik ook bij elke story de defenition of done opgeschreven. Dit is handig om te doen zodat je weet wanneer je deze user story gedaan hebt. Als je dit niet doet blijft het vaag of je hebt gedaan wat je moest doen. Hieronder zijn de user stories te zien:

Story 1:
Als eigenaar van een kapperszaak
wil ik de afspraken gestructureerd terug kunnen zien,
zodat ik mijn afspraken makkelijk terug kan vinden.

Defenition of done: Deze user story is behaald wanneer de admin, de afspraken kan onderscheiden met: naam, achternaam, e-mailadres, behandelingstype, datum, tijd en opmerking.

Story 2:
Als klant met een druk schema
wil ik zelf een tijd kunnen kiezen om een afspraak te maken,
zodat ik daar omheen andere dingen plannen.

Defenition of done: Deze user story is behaald wanneer de gebruiker zelf een tijd kan kiezen tijdens het maken van de afspraak.

Story 3:
Als eigenaar van de kapperszaak
wil ik mijn afspraken kunnen verplaatsen en/of bewerken,
zodat ik mijn werkschema overzichtelijk kan maken.

Defenition of done: Deze user story is behaald wanneer de admin, afspraken kan verwijderen of bewerken via de adminpagina.

Story 4:
Als klant met een onvoorspelbaar werkrooster
wil ik mijn afspraken op elk moment kunnen annuleren,
zodat ik niet voor dubbele afspraken kom te staan.

Defenition of done: Deze user story is behaald wanneer de gebruiker de afspraak kan annuleren via de website (met een e-mailverificatie).

Story 5:
Als vergeetachtig persoon
wil ik een reminder krijgen vlak voor ik een afspraak heb,
zodat ik mijn afspraak niet mis.

Defenition of done: Deze user story is behaald wanneer de gebruiker en admin een mail krijgen, 24 uur voor de afspraak, waarin staat wanneer deze afspraak is en wat de behandelingstype is.

Story 6:
Als klant
wil ik weten wat de betalingswijzen zijn,
zodat ik weet of ik contant geld mee moet nemen.

Defenition of done: Deze user story is behaald wanneer er onder aan het afspraakformulier is aangegeven wat de betalingsmogelijkheden zijn.

 

Documentatiekennis

Je kunt de verschillende onderdelen van een interactieontwerp benoemen, zodanig dat je weet welke functie deze onderdelen in het geheel hebben.

Met een user story zorg je ervoor dat in één zin duidelijk is waarom een bepaalde funtionaliteit belangrijk is voor een speciefieke doelgroep. Als voorbeeld:

Als (gebruiker) wil ik (funtionaliteit), zodat (Reden).

MoSCoW

Met behulp van de MoSCoW methode kan je de gemaakte user stories priotiseren. Hierdoor weet je welk het belangrijkst zijn en welke minder belangrijk zijn.

Must have
Functionaliteiten van belang zijn en in het product moeten voorkomen.

Should have
Functionaliteiten die in het product moeten voor komen, maar het product werkt ook zonder deze functionaliteiten.

Could have
Functionaliteiten die uiteindelijk wel in het product moeten komen, maar niet van belang zijn om op te focussen als de vorige twee punten nog niet behandeld zijn.

Would have
Functionaliteiten die niet in het uiteindelijke product hoeven te komen, maar het kan wel. Dit zijn bijvoorbeeld functionaliteiten die niet belangrijk zijn of op het moment niet haalbaar.

Style guide

Een style guide dient als een soort gids dat laat zien wanneer bepaalde visuele elementen toegepast moeten worden en in welke context. Het gaat dan bijvoorbeeld om: logo’s, kleurpaletten en lettertypen.

Site map

Een sitemap is een document waar alle pagina’s van je site te zien zijn. Door een site map kan je zien hoe je op bepaalde pagina’s terecht kan komen. Hieronder heb ik een voorbeeld van een site map die ik heb gemaakt voor het reserveringssysteem.

Wireframes

Een wireframe is een soort blauwdruk van je website. Je schetst de website zodat je deze niet meteen hoeft te bouwen. Als er dingen zijn die veranderd moeten worden, kan dit makkelijk worden gedaan zonder te coderen. Een wireframe laat bijvoorbeeld zien waar bepaalde content op een site gaat staan. Dmv annotaties kan je aan de klant duidelijk maken wat je met bepaalde onderdelen bedoeld. Zoals uitleg over wat er gebeurd als je op een bepaalde knop klikt. Hieronder is een link te zien van een clickable wireframe die ik heb gemaakt voor mijn opdrachtgever (kapster):
Wireframe

Wire flow

Met behulp van een wire flow verbind je de pagina’s van een wireframe met elkaar. Hierdoor weet je welke knop waar naartoe gaat. De mogelijke acties op de pagina’s worden duidelijk.

Ik heb ook een low fidelity Wireframe gemaakt voor de website van de Vuurvechter9000 die in het volgende punt genoemd wordt. Deze wireframe heb ik gemaakt voor de mobiel. Er staan annotaties bij die laten zien waar bepaalde elementen in de Wireframe voor dienen.

 

Activity diagram

Een activity diagram is een methode om stapsgewijs het proces van het systeem en de gebruiker weer te geven. Ik heb hieronder een Activity diagram gemaakt van het inloggedeelte van de reserveringspagina. Het idee is dat alleen de admin kan inloggen.

Opstellen & Uitvoeren

Je kunt voor tenminste 2 verschillende devices een interactieontwerp opstellen, zodanig dat het aansluit op de doelgroep en de context.
Het interactieontwerp is ontwikkeld in meerdere iteraties, zodanig dat je het kunt omzetten in een werkend prototype.

Voor mijn front-end block moest ik ervoor zorgen dat mijn site responsive was en daarom ook op een ander device zou werken. Ik heb hierbij de opdracht genomen uit CLE 1 sprint 3. In deze sprint was de opdracht om een spel te maken voor kinderen. Ik hield me hier bezig met de casing van het product en later heb ik een one pager hiervan gemaakt. Deze heb ik vervolgens responsive gemaakt.

Om dit te bereiken heb ik media queries gebruikt. Deze zorgen ervoor dat als het scherm kleiner is dan een bepaalde grootte, de website op een bepaalde manier aanpast waardoor het er nog goed uit ziet. De site is voornamelijk gericht naar de jongere doelgroep tussen 6 en 9 jaar. Dit is de reden waarom de tekst erg simpel is. De link naar deze site is hieronder te vinden:
Vuurvechter 9000tm

Mobiele weergaven

Desktop weergave

Aan het begin van CLE 2, heb ik een wireframe gemaakt voor mijn opdrachtgever. Dit heb ik gedaan zodat ik feedback kan krijgen en vervolgens een prototype kan maken waarin de feedback is verwerkt die ik eerder heb gekregen. Hieronder is nogmaals de wireframe te zien die ik heb gemaakt.
Wireframe

Naast de wireframe heb ik een prototype van de site gemaakt met zo veel mogelijk functionaliteiten (voor zo ver het kan in een prototype). Dit is een uitbreiding van de wireframe. Ik heb hier de volgende feedback in verwerkt die ik van mijn opdrachtgever en testpersoon heb gekregen:
Voornaam, achternaam, e-mailadres en opmerking staat vast en kan niet veranderd worden (edit pagina)

Hieronder is de link van het prototype te zien.
Prototype

Aangezien dit slechts een prototype is, is het lastig om van speciefieke funtionaliteiten feedback te krijgen. Ik doel hier op bijvoorbeeld het limiteren van hoelaat tot hoelaat je kan reserveren. Ik heb later feedback gevraagd wat meer hierop gericht is. Dit heb ik met de daadwerkelijke website zelf gedaan.

De feedback die daaruit kwam luidt als volgt:

Feedback testpersoon

Feedback opdrachtgever

Ik heb jammer genoeg niet voldoende tijd gehad om al de feedback aan te pakken. Ik heb daarom het belangrijkste eruit gepakt en ben daarmee aan de slag gegaan.

Hieronder is een filmpje te zien van het reserveringssysteem. Het is mij niet gelukt om deze online te krijgen omdat het erg lastig is om de database ook online te zetten. Zonder online database krijg je meteen een foutmelding zodra je op de site komt.

 

 

Concept

Context in kaart brengen
Je kunt de ontwerpopdracht en het onderzoek hiernaar beschrijven, zodanig dat de context en het achterliggende probleem duidelijk worden.
 
Opdrachtomschrijving
In CLE 3 2019, kreeg ik de opdracht om een interactief ontwerp te maken in een Rotterdamse park. Voor we een interactief ontwerp kunnen bedenken moeten we het volgende onderzoeken:
 
– Desktop research
– Field research -> Behavioural map
– Interview
– Stakeholders
 
Desktop research
Toen wij de locatie van het park kregen (Millinxpark), zijn we er meteen naartoe gegaan om het gebied te leren kennen. Dit deden we zodat we wisten hoe groot het park ongeveer was en waar het lag. Vervolgens zijn we naar huis gegaan en heb ik een Desktop research gedaan. Hieruit bleek dat het park ligt in een van de gevaarlijkste wijken in Rotterdam. Naast dit feit heb ik hieronder nog een aantal afbeeldingen met gegevens die ik gevonden heb over de wijk.
 
 
Field research
Vòòr het interviewen heb ik de interactie in het park op drie verschillende tijden geobserveerd. Hierbij hebben ik gekeken naar hoeveel mensen langs het park lopen, naar binnen lopen en wat deze mensen doen om en in het park. Aan de hand hiervan heb ik een behavioral map gemaakt:
 
 
Hierboven is te zien waar de mensen liepen. Dit is een bovenaanzicht van het park. De mensen die op het park te zien zijn, zijn alle mensen die in het park kwamen. Het paarse gedeelte moet het buurthuis voorstellen waar veel interactie was. de bovenste en onderste rij aan plusjes en minnetjes buiten het park zijn de mensen die langs het park liepen (dus niet erin). De figuren naast de rondjes (plantenbakken). Staan voor de mensen die door het park liepen en er verder geen interactie mee hadden. Voor de rest zie je nog twee kinderen spelen in het park bij het gele cirkeltje. Ze waren voor ongeveer tien minuten aan het voetballen en verlieten vervolgens het park weer.
 
Nadat we klaar waren met het observeren, zijn we gaan zoeken naar sporen van verweer. Deze zijn ook aangegeven in de behavioral map hierboven.
 
 
Interview
Toen we klaar waren met het onderzoeken van het park, heb ik interviews gehouden met de mensen die te maken hebben met het park. Aangezien het park vrij leeg was na de Field research was ons idee om naar de wijkagent. We zijn naar de dichtstbijzijnde politiebureau gegaan en hebben gevraagd of deze tijd voor ons had. Die dag lukte het jammer genoeg niet en heb ik daarom mijn gegevens achter gelaten. Jammer genoeg nam de agent geen contact meer op.
Omdat we perse iemand wilde interviewen zijn we naar de buurthuis gegaan die direct aan het park ligt. Hier heb ik drie werknemers kunnen interviewen die mij waardevolle informatie gaven.
Ik heb de volgende vragen gesteld:
 
– Wordt het park regelmatig bezocht?
Het park wordt in de winter minder bezocht dan in de zomer. Dan wordt het park drukker bezocht. Ook wordt het park gebruikt door de basisschool in de buurt. Op bepaalde dagen van de week wordt het park gebruikt om pauze te houden. Ook de overblijfklas maakt gebruik van het park.
 
– Worden er in dit park evenementen vanuit het buurthuis georganiseerd? En zo ja, welke?
Het park wordt niet gebruikt door het buurthuis voor evenementen. Dat gebeurde ooit wel, het park werd toen gebruikt voor fietslessen, maar door recente renovaties van het park is het niet meer mogelijk om een rondje te rijden.
 
– Wat zou u willen verbeteren aan het Millinxpark?
De renovaties aan het park hebben het park geen goed gedaan. De rozenstruiken en bomen zijn weggehaald, net als het kleine speeltuintje, wat het een kale afgetrapte vlakte maakt, de plantenbakken staan vol met verdronken bloemen en ook de bloemperken zien er kaal uit. Er mag van de mensen van het buurthuis wel wat meer kleur komen in het park. Ook is het belangrijk dat de mensen zich betrokken voelen bij het park. De gemeenschap van de wijk moet gezamenlijk gaan zorgen voor het onderhoud van het park. Het Millinxpark moet voor omwonenden ‘Ons park’ worden.
 
– Zijn er al plannen om dit park aantrekkelijker te maken?

Er wordt binnenkort een container geplaatst met speelgoed dat het park aantrekkelijker moet maken voor kinderen.

– Is er nog iets waar we extra rekening mee moeten houden bij het ontwerpen van het product?
Als er iets ontwikkeld wordt dat geplaatst gaat worden in het park, moet dat wel ‘hufterproof’ moet zijn, aangezien er nog wel eens wat gesloopt wordt. Daarnaast werden de hekken rond het park werden ooit ’s avonds afgesloten om overlast te voorkomen, maar omdat sommige mensen tot laat in de avond in het park bleven zitten is dat afgeschaft. Er is nog geen overlast geweest sinds de hekken open zijn.

Stakeholders
Als stakeholders had ik de bewoners, mensen in de buurthuis en de politie in gedachten. De bewoners spreekt voor zich aangezien deze aan het park wonen en direct in contact komen met ons product.
De mensen in de buurthuis zijn indirecte stakeholders, omdat deze de gezelligheid/blijheid ervaren waar ons product voor zorgt. 
De politie/wijkagent heeft veel met het park te maken. Als ons product ervoor kan zorgen dat er minder criminaliteit is in het park omdat het er gezellig en vriendelijk wordt, is de politie een indirecte stakeholder.
 
Creatieve sessie voorbereiden en begeleiden
Je kent meerdere brainstorm methodes, zodanig dat je een creatieve sessie kan voorbereiden en begeleiden, om in een team tot verschillende originele ideeën te komen.
 
Voor de opdracht van CLE 2 is het lastig om een nuttige brainstormsessie op te zetten. Ik heb er daarom voor gekozen om een brainstormsessie te gebruiken die ik later dat jaar gedaan heb. Dit was in CLE 4. De opdracht luidt als volgt: maak de meest vette arcade game ooit.
Aangezien we een game moeten maken is het niet van toepassing om creatieve sessies te gebruiken die bedoeld zijn voor andere doeleindes zoals het maken van een interactief ontwerp voor een maquette. Ik moest een andere brainstormmethode gebruiken dan ik gewend ben.
Na verschillende brainstormmethodes op te zoeken via het internet kwam ik er op een uit die goed aansloot op mijn opdracht. Ik heb deze brainstormsessie goed doorgelezen en vervolgens steekwoorden opgeschreven zodat ik tijdens de sessie niet vergeet wat de volgende stap is. Hieronder is de link te zien waar ik deze informatie vandaan heb: 
Link
 
Hieronder is te zien welke stappen we doorliepen om deze brainstormsessie tot een goed eind te laten verlopen, daar onder zie je het bijbehorende fimpje:
 
  • Hoe moet het spel eruit zien? (individueel). Doel, vorm, spelers (individueel)
  • Maak elk drie tekeningen van jouw idee (individueel)
  • Kies de 3 beste ideeën uit (samen)
  • Vul deze ideeën aan met extra mechanics (individueel)
  • Kies de drie beste mechanics uit (samen)
  • Kies een uiteindelijke game die goed past bij de drie uitgekozen mechanics (samen)
  • Kies een naam voor het spel

 
Na deze brainstormsessie kwamen we op de conclusie dat we een Dungeon Crawler willen maken met puzzels die je moet oplossen voor je verder komt. Het verbaasde ons dat we op dit idee uit kwamen aangezien we van te voren gedacht hadden dat we ons concept niet zouden veranderen. Door deze brainstormsessie is onze visie veranderd en gaan we nu een Dungeon Crawler maken ipv een platform game. Hieronder zijn foto’s te zien van de brainstormsessie.
 
 
 
 
Visualiseren
Je kan uit verschillende ideeën de meest geschikte ideeën kiezen (COCD box), zodanig dat je deze ideeën kan omzetten in tenminste drie conceptbeschrijvingen (m.b.t functionaliteiten, interactie en technologie).
 
Tijdens de brainstormsessie die in de vorige uitdaging besproken is, heb ik de deelnemers, inclusief ik zelf, gevraagd of zij verschillende soorten games zo precies mogelijk kunnen tekenen. Het idee hierachter was dat we niet constant aan het zelfde zouden denken en een andere game in gedachten zouden krijgen. We kwamen toen uit op drie verschillende soorten games:
 
– Verticale platform game
– Horizontale platform game
– Dungeon crawler
 
Voor wij deze brainstormsessie in gingen hadden we al een horizontale platform game in gedachten. Later kwamen we erachter dat een dungeon crawler meer past bij onze kennis en doel. De onderstaande concepten zijn bedacht op papier en vervolgens beter gevisualiseerd d.m.v. Photoshop.
 
In dit concept ben je een aapje. Het doel is om zo veel mogelijk bananen te pakken door zo hoog mogelijk te komen. Je hebt drie pogingen (hartjes links boven). Als je buiten het scherm valt raak je een leven kwijt. De horizontale pijlen laten zien dat deze platformen bewegen waardoor het uitdagender wordt voor de speler om hoger te komen. 
De horizontale pijl geeft aan dat het scherm mee scrolt naar boven. De eerste paar sprongen kan je niet af gaan, maar als je hoger komt en het scherm scrolt mee, kan je er buiten vallen.
 
Vertical platform game
 
In het volgende concept speel je weer als het aapje. Het doel is om de hoeveelheid bananen, die je rechts boven in het scherm ziet, te verzamelen. Zodra dit gedaan is heb je het level gehaald. Zodra het aapje in het water valt ben je af en begint het spel opnieuw. De bananen die je in dat level verzameld hebt verdwijnen. De lianen die je ziet kunnen gebruikt worden om op te klimmen. Het idee is dat in volgende levels de platformen lastiger geplaatst zijn en bewegen (net als in het vorige concept).
 
Horizontal platform game
In het derde en laatste concept, is het de bedoeling dat het aapje de grote banaan bemachtigd. Dit doe je door de sleutel te pakken die de donker gekleurde blokken opent. De kleine bananen dienen als extra punten die je als persoonlijke score kunt berekenen. Je moet de groene en rode monsters ontwijken om je doel te behalen. Deze monsters bewegen horizontaal en de kleur bepaald de snelheid. Als je geraakt wordt, begint het level opnieuw. Uiteindelijk hebben wij voor dit concept gekozen.
 
Dungeon crawler game
 
Documentatie
Je kan één van de concepten professioneel visualiseren middels een poster, zodanig dat het concept inzichtelijk is en de achterliggende argumentatie duidelijk wordt.
 
Voor de Millinxmakkers heb ik een poster gemaakt van het concept van het interactief ontwerp.
De uitleg van dit ontwerp is te lezen in de blogpost van het Iron man block:
 
 

Doelgroep

Interviewen

In CLE 3 kreeg ik de opdracht om samen met drie andere studenten een prototype te maken van een interactief voorwerp in een park in Rotterdam. Wij kregen het Millinxpark toegewezen. Dit park bevindt zich op de plek zoals hieronder aangegeven.

Voor we konden beginnen met het bedenken wat we zouden kunnen maken, moesten we eerst onderzoek doen. We begonnen met een Fly on the wall waar we keken op welke manier de mensen in die omgeving interactie toonden met het park. Vervolgens gingen we naar het aanliggende buurthuis om een interview te houden met de medewerkers die bij het park wonen. De vragen en antwoorden van het interview zijn hieronder te zien:

  • Wordt het park regelmatig bezocht?
    Het park wordt in de winter minder bezocht dan in de zomer. Dan wordt het park drukker bezocht. Ook wordt het park gebruikt door de basisschool in de buurt. Op bepaalde dagen van de week wordt het park gebruikt om pauze te houden. Ook de overblijfklas maakt gebruik van het park.
  • Worden er in dit park evenementen vanuit het buurthuis georganiseerd? En zo ja, welke?
    Het park wordt niet gebruikt door het buurthuis voor evenementen. Dat gebeurde ooit wel, het park werd toen gebruikt voor fietslessen, maar door recente renovaties van het park is het niet meer mogelijk om een rondje te rijden.
  • Wat zou u willen verbeteren aan het Millinxpark?
    De renovaties aan het park hebben het park geen goed gedaan. De rozenstruiken en bomen zijn weggehaald, net als het kleine speeltuintje, wat het een kale afgetrapte vlakte maakt, de plantenbakken staan vol met verdronken bloemen en ook de bloemperken zien er kaal uit. Er mag van de mensen van het buurthuis wel wat meer kleur komen in het park. Ook is het belangrijk dat de mensen zich betrokken voelen bij het park. De gemeenschap van de wijk moet gezamenlijk gaan zorgen voor het onderhoud van het park. Het Millinxpark moet voor omwonenden ‘Ons park’ worden.
  • Zijn er al plannen om dit park aantrekkelijker te maken?
    Er wordt binnenkort een container geplaatst met speelgoed dat het park aantrekkelijker moet maken voor kinderen.
  • Is er nog iets waar we extra rekening mee moeten houden bij het ontwerpen van het product?
    Als er iets ontwikkeld wordt dat geplaatst gaat worden in het park, moet dat wel ‘hufterproof’ moet zijn, aangezien er nog wel eens wat gesloopt wordt. Daarnaast werden de hekken rond het park werden ooit ’s avonds afgesloten om overlast te voorkomen, maar omdat sommige mensen tot laat in de avond in het park bleven zitten is dat afgeschaft. Er is nog geen overlast geweest sinds de hekken open zijn.

Deze resultaten zijn voortgekomen uit interviews van meerdere medewerkers/bewoners. Ik ben daarnaast ook langs het politiebureau geweest en daar gevraagd wat voor activiteiten er in dat park afspelen. Dit heb ik gedaan, omdat vanuit Desk Research bleek dat het park een geschiedenis heeft met veel criminaliteit. Uit dit gesprek bleek dat het eigenlijk wel mee viel en de afgelopen twee jaar niet veel criminele activiteit was, op gevechten en ruzies na. We werden er nogmaals aan herinnerd dat de kans groot is dat ons product vernield zou worden en dat we daarom rekening moesten houden met hoe sterk het product is.

Aan de hand van deze interviews wilden we een product maken die stevig genoeg is en veel kleur heeft zodat het product lang mee gaat en het park er kleurrijker uitziet.

Je hebt bij meerdere personen uit de doelgroep een interview afgenomen zodanig dat hier relevante conclusies uit getrokken kunnen worden.

Analyseren

Mijn doelgroep is in dit geval iedereen die gebruik maakt van het park. Bijvoorbeeld kinderen, jongeren, ouderen, bejaarden, politie en medewerkers van het aanliggende buurthuis. voor het interviewen heb ik de interactie in het park op drie verschillende tijden geobserveerd. Hierbij hebben ik gekeken naar hoeveel mensen langs het park lopen, naar binnen lopen en wat deze mensen doen om en in het park. Aan de hand hiervan heb ik een behavioral map gemaakt:

hierboven is te zien waar de mensen liepen. Dit is een bovenaanzicht van het park. De mensen die op het park te zien zijn, zijn alle mensen die in het park kwamen. Het paarse gedeelte moet het buurthuis voorstellen waar veel interactie was. de bovenste en onderste rij aan plusjes en minnetjes buiten het park zijn de mensen die langs het park liepen (dus niet erin). De figuren naast de rondjes (plantenbakken). Staan voor de mensen die door het park liepen en er verder geen interactie mee hadden. Voor de rest zie je nog twee kinderen spelen in het park bij het gele cirkeltje. Ze waren voor ongeveer tien minuten aan het voetballen en verlieten vervolgens het park weer.

Naast een behavioral map heb ik ook een story board gemaakt die moet laten zien hoe het product werkt. In het eerste vakje zie je een ouder en kind lopen. Ze komen de piano tegels tegen. Het kind springt erop en het blijkt dat deze geluid maken. De ouder filmt dit en deelt dit op social media. Hierdoor raken meer mensen in contact met dit product en komen er meer mensen op af. Het park is nu levendiger en er wordt muziek gemaakt.

Communiceren

Na de interviews konden we user stories opzetten die gebaseerd zijn op de behoeftes van de bewoners en medewerkers van het buurthuis.

Story 1 – Terugbrengen sfeer in het Millinxpark

Als omwonende van het Millinxpark

Wil ik dat er weer sfeer terugkomt in het park

Zodat het park niet zo leeg een kaal is om naar te kijken.

Defintion of Done

Deze user story is niet meetbaar te behalen, maar de hoop is dat de ontwikkeling ons project bijdraagt aan de uiteindelijke realisatie van dit doel.

Story 2 – Park weer aantrekkelijk maken voor kinderen

Als kind dat speelt in het Millinxpark

Wil ik iets leuks te doen hebben dat geen geld kost

Zodat ik een rede heb om naar het park te gaan.

Defintion of Done

Deze user story is behaald wanneer de gebruiker geen geld hoeft te betalen om gebruik te maken van het product.

Story 3 – Bijdragen aan opkomst Tarwewijk

Als gemeente van de stad Rotterdam

Wil ik dat er meer mensen naar het Millinxpark komen

Zodat daarmee bijgedragen wordt aan de weder opkomst van de Tarwewijk.

Definition of Done

Deze user story is niet meetbaar te behalen, maar de hoop is dat de ontwikkeling ons project bijdraagt aan de uiteindelijke realisatie van dit doel.

Story 4 – Weten dat het spel bestaat

Als bezoeker aan het Millinxpark

Wil ik graag weten dat het pianopad ook als spel gespeeld kan worden

Zodat ik deze toevoeging aan het Millinxpark niet mis loop

Definition of Done

Deze user story is behaald wanneer de bezoekers van het Millinxpark er op een bepaalde manier (bord, poster etc.) van bewust van wordt gemaakt dat het piano pad als spel gebruikt kan worden.

Story 5 – Starten Piano Party

Als gebruiker van Piano Party

Wil ik dat ik op een makkelijke manier en via mijn telefoon het spel kan starten

Zodat ik niet afhankelijk ben van een startknop op locatie die kapot kan gaan.

Definition of Done

Deze user story is behaald wanneer de gebruiker het Piano Party spel kan starten doormiddel van een druk op een knop in de webapplicatie.

Story 6 – Zelf een nummer kiezen

Als gebruiker van Piano Party

Wil ik dat ik kan kiezen uit meerdere nummers

Zodat het pianospel meerdere keren gespeeld kan worden zonder dat het eentonig wordt

Defintion of Done

Deze story is behaald wanneer de speler de keuze heeft uit meerdere nummers. Deze zullen ingevoerd moeten worden in het spel en opgehaald moeten worden uit de Lost.fm web API.

Story 7 – Replayability Piano Party

Als gebruiker van Piano Party

Wil ik dat ik zelf kan kiezen welk nummer ik wil spelen

Zodat ik het spel kan spelen op mijn favoriete nummer

Defintion of Done

Deze story is behaald wanneer de speler, voor de start van het spel, een van de in het spel ingevoerde nummers kan kiezen om af te laten spelen tijdens het spel.

Story 8 – Stevigheid product

Als gebruiker van Piano Party

Wil ik dat het product stevig is

Zodat hij minimaal een half jaar mee gaat zonder extra onderhoud

Defintion of Done

Deze story is behaald wanneer het product na een half jaar het nog steeds net zo goed doet als de eerste dag dat hij er staat.

De bovenste User Stories heb ik vervolgens geordent aan de hand van de MoSCoW methode. De ondergenoemde punten betrekken op de titels van de bovengenoemde user stories:

Must Have Should Have Could Have Won’t Have
Weten dat het spel bestaat Zelf een nummer kiezen Terugbrengen Sfeer in Millinxpark  
Starten Piano Party Replayability Piano Party Park weer aantrekkelijk maken voor kinderen  
    Bijdragen opkomst Tarwewijk  
Testopzet

Tijdens de ontwerplessen van CLE 3 moesten we zelf een testopzet maken van het product. Ik heb gekozen voor 5 seconds testing. Dit houdt in dat ik een doek over de maquette met het interactief ontwerp doe en een medestudent vraag om, zodra ik het doek omhoog doe, te kijken naar het product tot ik hem na vijf seconden weer verberg onder een doek. Hiervoor vraag ik aan de testpersoon of hij/zij hardop kan denken. In deze vijf seconden verteld de testpersoon wat hij/zij ziet en opvalt. Hierna vraag ik wat diegene denkt dat het interactief ontwerp is en vraag ik vervolgens om feedback waar nodig.

Deze test heb ik tijdens de les gedaan met een een medestudent. De vijf seconden dat diegene keek, viel hem de bomen en shotglaasjes op. De witte tegels kwamen daarna. Vijf seconden was duidelijk te kort om te weten dat het om de tegels gaat en niet perse om de shotglaasjes. Het idee van het ontwerp is namelijk dat zodra er op een tegel gedrukt wordt, er een bloempot (shotglaasje) licht geeft.

Op deze manier van testen kwamen we erachter dat ons ontwerp niet echt opviel. We hebben later de maquette aangepast en er lampjes aan toegevoegd met houten plaatjes ervoor welke dienen als piano tegels. Zoals hieronder te zien.

Uitvoering

Naast het testen van het project uit CLE 3, heb ik ook het project uit CLE 4 (Arcade game) getest. Wij hebben een spel gemaakt genaamd Bouki.

Level 1
Level 2
Level 2
Level 3

Bij de oplevering van dit project heb ik twee docenten (Emiel en David) en een aantal studenten (Anoniem) dit spel laten spelen. Ik heb mijn laptop neergezet en ze een controller gegeven. Verder heb ik niks verteld en ze gevraagd om hardop te zeggen wat ze denken.
Het was duidelijk dat ze ervan uit gingen dat de kleine banaantjes gepakt moesten worden voordat je het spel kon halen. Achteraf vertelde ik dat dit niet het geval was. Zodra je de grote banaan pakt ga je namelijk al naar het volgende level.
Het eerste level was lastiger voor de gebruikers dan ik vooraf had verwacht. Mijn bedoeling was om de levels van makkelijk naar moeilijk op te bouwen, met level 1 als makkelijkst en level 3 als moeilijkst. Uiteindelijk is gebleken dat level 2 het makkelijkst was en daarop volgend level 1 en 3. 
Level 1 duurde gemiddeld 8 minuten. Level 2, 3 minuten en level 3 duurde gemiddeld 7 minuten. Hoe langer een speler in een level zat hoe meer zijn frustratie toe nam. In eerste instantie was dat niet de bedoeling van het spel, we wilden een puzzel spel maken die je kan spelen zonder dat je het level opnieuw moet spelen zodra je een fout maakt. Het doel van het spel was dus om de speler te laten nadenken en niet om de speler te frustreren. Achteraf gezien is dit geen negatief punt. Deze frustratie kan de speler motiveren om het level te halen.

Conclusies

Uit de test is gebleken dat het eerste level erg moeilijk was. Ik wilde het spel graag uitdagend genoeg maken, maar al snel bleek dat het spel te lastig werd. Als maker is het lastig in te schatten wat doelgroep moeilijk vind. Dit komt omdat je zelf het spel hebt gemaakt en precies weet wat de bedoeling is. Als nieuwe speler moet je dit eerst ontdekken en als dit niet goed aangegeven is, kan het vrij snel frustrerend worden. Dit kan positieve en negatieve gevolgen hebben. Het kan zijn dat je hierdoor juist het spel wilt uitspelen waardoor je een volmaakt gevoel krijgt. Aan de andere kant kan het zijn dat het stoppen van het spel, een beter gevoel geeft dan er veel tijd aan te besteden om het uit te spelen. Ik kreeg van de testers feedback om levens in het spel toe te voegen. Op de afbeeldingen is te zien dat er hartjes zijn (levens). Dit was inderdaad bedoeld om te implementeren in de game maar door te weinig tijd hebben we dit jammer genoeg niet kunnen realiseren. Ik heb de hartjes er wel ingelaten zodat de spelers weten dat ik er mee bezig ben. 

In eerste instantie zaten er geen vijanden in de game. Het spel was bedoeld om als puzzel game te dienen. We wilden werken met knoppen en deuren. We hadden ervoor gezorgd dat je een sleutel moest oppakken zodat je een deur kon open waar de banaan in zit. Na dit getest te hebben en medestudenten laten testen, bleek het dat het spel al vrij snel saai werd. Toen kwam ik op het idee om vijanden toe te voegen. 
Met enkele vijanden werd het spel al vrij makkelijk. Vandaar dat ik er steeds meer begon toe te voegen tot ik er zelf moeite mee had om te spelen. 
Hierdoor is het spel niet zo snel uit te spelen en heb je er ongeveer een kwartier voor nodig. 

Door tijdnood is het spel niet zo uitgebreid geworden als ik zelf had gewild. Ik had er graag nog extra levels, verschillende vijanden aan toegevoegd en een eindbaas. Voor de tijd die we uiteindelijk gebruikt hebben om dit spel te maken, ben ik tevreden met het eindproduct.

Being a boss

De inhoud hieronder is gebaseerd op CLE 3, interactief ontwerp in een park.
Debriefing

Van onze opdrachtgever (Hogeschool Rotterdam) hebben wij de opdracht gekregen om een interactief ontwerp te maken in een maquette van een aangewezen park in Rotterdam. Hiervoor moesten we onderzoek doen en de informatie gebruiken om ons ontwerp zo goed mogelijk aan te laten sluiten op onze doelgroep.

Ik ben samen met mijn peerteam langs geweest bij het Millinx parkhuis. Dit is een buurthuis, liggend aan het Millinxpark. Naast een buurthuis is het ook een kinderopvang en basisschool. Wij hebben daar drie medewerkers van de buurthuis geïnterviewd en te horen gekregen dat het park voornamelijk gebruikt word door kinderen tijdens de speeltijd. Daarbuiten is het park vrijwel altijd leeg.

Afbeeldingsresultaat voor millinxparkhuis

Door te vragen wat zij denken dat het park mist, kwamen we er achter dat er weinig gezelligheid is. Daarnaast missen ze kleur en leven in het park. De bloemen en het gras was dood en er waren weinig speeltoestellen voor kinderen. Door dit te horen kwamen er vrij veel ideeën bij mij en mijn teamgenoten op. Door dit interview konden we ver komen.

Om te bevestigen dat de informatie goed op ons is overgekomen, hebben we ter plekken een paar ideeën bedacht die zouden aansluiten op wat zij gezegd hadden. We zaten op het juiste spoor en konden vanuit dat punt verder met de ontwikkeling van onze ideeën.

Hieronder is de debrief te zien die ik in CLE 2 heb gemaakt aan de hand van de informatie die ik heb gekregen van mijn opdrachtgever.

debrief

Middelen

De middelen die we nodig hebben om tot ons eindproduct te komen:

  • Laptop
  • Benodigde ontwerp programma’s
  • Arduino
  • Toegang tot het stadslab
  • Beschikking tot openbaar vervoer
Proces

Allereerst is het noodzakelijk om informatie op te doen over het park. Dit doe je doormiddel van desk research en observatiemethoden zoals Fly on the wall. Deze methode houd in dat je onopvallend mensen observeerd die langskomen op de locatie. Hierbij let je op hoeveel mensen er zijn, wat ze doen en hoe lang ze er zijn.
Vervolgens ga je in gesprek met de mensen die een relatie hebben tot de locatie, bijvoorbeeld bewoners of wijkagenten. Je houd een interview en vraagt je af wat diegene mist op de locatie, daarnaast vraag je over eventuele problemen die zich daar voordoen.

Met deze informatie ben je gereed om een brainstormsessie te houden. In de beginfase van deze sessie hou je geen rekening met de eerdere informatie die je hebt gekregen. Hierdoor ben je gestimuleerd om meer en gekkere ideeën te bedenken. Vervolgens, wanneer de sessie bijna afgelopen is, stem je de ideeën af op de informatie die je hebt gekregen en kom je tot een concept waar je gezamenlijk aan kunt werken.

De uitkomst koppel je terug naar je klant, in dit geval zijn dat de medewerkers van het buurthuis en de geïnterviewde bewoners. Wanneer zij akkoord gaan met het concept, kan je beginnen.

Je maakt een takenverdeling met je groepje. Wij hebben ervoor gekozen onze groep in te delen in programmeurs, deze zorgen voor de software en de bijbehorende code, en de ontwerpers, deze zijn verantwoordelijk voor de maquette. Tijdens het maken van het concept houd je contact met je teamgenoten zodat je problemen op tijd onder ogen kan zien.

De programmeurs zorgen er eerst voor dat er een webapplicatie ontwikkeld is. Daarna dienen ze deze te verbinden met een API die van toepassing is. Terwijl dit gebeurd, zorgen de ontwerpers ervoor dat de maquette klaar gemaakt wordt en de software gereed is om te verbinden met de webapplicatie. Zodra beide teams hun bijdrage geleverd hebben, worden deze met elkaar verbonden en kom je tot een eindproduct.

Het eindproduct wordt zodra hij klaar is, getest door de ontwikkelaars zelf, zodat eventuele fouten er meteen uitgehaald kunnen worden. Vervolgens word het product getest door de klant. Feedback wordt verwerkt en uiteindelijk zal het door de doelgroep getest worden. Als er nog feedback is word het product hier nog verder op aangepast en weer getest tot er geen relevante feedback meer is. Het product is nu klaar om gerealiseerd te worden.

Risico’s

Er zijn altijd risico’s in een proces waarbij veel teamwork wordt vereist. Om problemen zoals miscommunicatie of onduidelijkheden te voorkomen dien je regelmatig contact te gebben met je team. Wij hebben als oplossing, de digitale communicatieplatform Discord gebruikt. Je kan hier gemakkelijk aparte kanalen aanmaken die alleen bedoeld zijn voor foto’s en informatie. Zo onderscheiden we de informatie gemakkelijk en is het daarom erg georganiseerd.

Naast het informatie gemakkelijk opslaan, gebruiken we het platform ook om bijna elke dag contact met elkaar te hebben zodat er geen miscommunicatie ontstaat.

Flexibele planning

Wij hebben een flexibele planning gemaakt doordat we niet strak hebben ingeplant wat we gaan doen. We hebben per sprint naar het einddoel gekeken. Aan de hand hiervan hebben we vervolgens tussendoor zelf deadlines ingepland zodat er een grotere zekerheid is dat we ons einddoel bereiken. Bij het inplannen hebben we gebruik gemaakt van een todo lijst op Trello. Hierdoor kan je gemakkelijk zien door wie nog wat gedaan moet worden en wanneer deze persoon het doet. Daarnaast kan je zien of diegene er mee bezig is of er klaar mee is. Hierdoor kan je elkaar in de gaten houden en reminders geven wanneer je merkt dat er nog wat gedaan moet worden.

Samenwerkingscontract

Hieronder is het samenwerkingscontract te zien die ik heb opgesteld voor mijn team. De hierboven punten zijn erin verwerkt en het contract is afgesloten met de handtekeningen van ieder teamgenoot.

Handtekeningen

samenwerkingscontract

Communicatie

Zoals eerder al genoemd in het proces, houd je regelmatig contact met je klant. Wij hebben dat immers niet zo vaak gedaan, dit omdat wij vanaf het begin goedkeuring gekregen hadden voor ons idee. We zijn overigens wel van plan om binnenkort de maquette te laten zien zodat ze weten dat we iets hebben gedaan met de ideeën die ze bij ons opgewekt hebben.

Om er zeker van te zijn dat we echt op het goede spoor zaten hadden we met meer regelmaat contact kunnen hebben met onze klant. Wij gingen er vanuit dat dit nodig was, dus hebben we die tijd gebruikt om ons te focussen op het project.

Pitch perfect

Kwaliteit

Brightwheel

In de speech die hieronder te zien is, gaat over iemand die een mobiele applicatie presenteert zodat hij ervoor gesponsord kan worden en het bekender kan maken dan het op dat moment al is.

Wat ik goed vind hieraan is de manier hoe hij spreekt. Hij praat rustig aan een stuk door zonder dat hij moet na denken wat hij wil zeggen. Hierdoor is te zien dat hij erg goed voorbereid is en komt hij erg overtuigend over. Daarnaast begint hij met een anekdote waar het publiek zich heel erg in kan herkennen waardoor ze meer aandacht voor het product hebben.

SportsPod

In het volgende filmpje is ene man te zien die zijn product aanbied aan rijke mensen die hem, net als in het vorige filmpje, kunnen helpen om het populairder en groter te maken. Het product wat hij presenteert is een sportsPod waarin je kan zitten als ouder. Hierdoor wordt je op regenachtige dagen niet kleddernat geregend als je naar bijv. je kind kijkt die aan het voetballen is.

Het goede aan deze pitch vind ik dat hij tijdens het korte verhaaltje dat hij houdt in het begin, het ook laat zien hoe het eruit zou zien. Door de visualisatie herken je jezelf nog meer in het probleem en ben je bereid om het te verhelpen. Daarnaast laat hij zijn volledig werkende product zien en zelfs testen door het publiek. Hij laat hierdoor zien dat het werkt.

Goede voorbeelden

Naar aanleiding van het filmpje hierboven, die een portable seat presenteerd, heb ik gemerkt dat het erg belangrijk is om je product constant te presenteren en laten zien wat je ermee kunt. Vervolgens is het ook een gouden regel om vrij regelmatig de naam van het product te noemen, hierdoor blijft het nog een tijd in je hoofd zitten nadat je het filmpje hebt bekeken.

Daarnaast is het natuurlijk ook altijd goed om wat humor in je pitch te verwerken, maar door te veel humor kom je ongeloofwaardig over en word je product niet serieus genomen. En als laatste is duidelijk spreken erg belangrijk. Door niet monotoon en duidelijk te spreken, ben je goed verstaanbaar en interessant om naar te luisteren.

In de volgende paragraaf heb ik mijn idee van een goede pitch uitgelegd aan de hand van drie onderdelen. Kennismaken, onderwerp en slot.

Ken je publiek

Allereerst is het belangrijk om een structuur in je pitch te hebben. Je begint met kort voorstellen. Dit doe je door je naam te noemen en te vertellen waar je het over gaat hebben.  Hierdoor weet je publiek met wie ze te maken hebben en wat het onderwerp is van je pitch. Vervolgens leg je uit hoe je tot je idee bent gekomen (frustraties of problemen die je hebben laten nadenken over een oplossing).

Nu je een klaar bent met een korte inleiding, noem je de naam van je product en vertel je wat dit doet en inhoud. Hierbij vertel je hoe het werkt en hoe dit product het probleem op lost. Tussendoor herhaal je regelmatig de naam van je product. Door dit te doen, blijft de naam hangen.

Tenslotte maak je nog een kleine samenvatting aan het eind van je pitch en sluit je af met een goede slotzin die je aan het denken zet.

Voor je aan je pitch begint moet je je publiek goed kennen. Hierdoor weet je wat voor taalgebruik van toepassing is tijdens het pitchen. Als je te moeilijke of makkelijke termen gebruikt kan het publiek zich snel vervelen waardoor de aandacht weg valt.

De inhoud van je pitch hangt ook erg af van je publiek. Zorg erop dat je pitch aangepast is op het vakgebied van je publiek zodat zij zichzelf erin kunnen herkennen.

Daarnaast is het erg belangrijk dat je ontspannen en duidelijk praat. Je bent hierdoor goed te verstaan en kom je zelfverzekerd over. Om ervoor te zorgen dat je dit goed doet is een goede voorbereiding vereist waarbij je de speech een aantal keer oefent.

Het product dat ik gepitcht had, was een teller voor een bar die bij hield hoeveel mensen er op dat moment binnen waren en op sloeg hoeveel mensen er over de hele dag gekomen en weg zijn gegaan. Voordat ik deze pitch heb gehouden, heb ik me eerst verdiept in de wensen van onze opdrachtgever dat in dit geval de medewerker was in de bar. Hij vond het handig om te weten hoeveel mensen er op een bepaalde avond de bar zouden bezoeken en wilden dit graag terug kunnen zien. Wij hebben vervolgens het product in elkaar gezet en gepitcht aan de hele jaarlaag.

Eigen kwaliteiten

Contact met publiek, vlot spreken, verhaal

In het begin is meteen te zien dat ik naar het product kijk en niet naar het publiek. De reden hiervoor was, omdat ik een beetje nerveus was. Later in de pitch word dit minder en kijk ik vaker naar het publiek.

Ik had vervolgens voor de proffesionaliteit de pitch moeten beginnen met het voorstellen van mezelf en uitleggen waar ik het over ging hebben. Vervolgens had ik moeten uitleggen hoe ik tot het probleem gekomen ben en dan pas de oplossing. Ik ben meteen begonnen met de oplossing, omdat ik ervan uit ging dat iedereen wel wist waar ik het over had.

Ik heb vervolgens wel de naam van het product genoemd en goed uitgelegd wat het doet en wat de oplossing is.

Ik heb ervoor gekozen om het product te demonstreren nadat ik klaar was met praten aangezien ik beide handen nodig had om het te laten zien. Hierdoor is de aandacht van het publiek afgenomen. Achteraf gezien kon ik dit oplossen door iemand anders het product te laten demonstreren.

Bij een eventuele volgende pitch zal ik moeten letten op de inleiding zodat ik de aandacht vanaf het begin al heb. vervolgens moet ik meer tijd besteden aan het voorbereiden. Hierdoor heb ik het dan beter ingestudeerd en kom zo ook makkelijker uit mijn woorden. Door dit te doen vermijd ik het zoeken naar woorden tijdens de pitch. Dit zorgt ervoor dat ik minder  “Euhm.. / ehhh..” zeg en de pitch vlot verloopt. Ook is het handig om in de toekomst ervoor te zorgen dat iemand ander het product demonstreert zodat ik verder kan praten terwijl dat gedaan word. Ik maakte het in mijn pitch mezelf erg moeilijk door alles zelf te doen.

Tot slot was ik vergeten om een slotzin te bedenken. Dit moet ik zeker de volgende keer wel doen.