/VIDii

Primary LanguageJavaScript

Banner

Interface en Interactie Marc Bakker

1. Uitkomst research

Godzilla

Gundam

Research

Ik heb gekeken naar de oudste pop culture iconen die ik ken. En dat heb ik verder onderzocht en genoteerd op mijn mindmap. Ik kwam uit op Gundam, een anime serie dat komt uit 1979 dat wel meer dan 50 shows, films en manga heeft, laat staan de honderden modelkits en andere action figures die zij hebben. Godzilla waarvan de eerste film uitkwam in 1954, totaal heeft het meer dan 33 Japanse films, en de nieuwste komt uit op 3 November 2023. En als laatst heb ik gekeken naar Castlevania, een videogame van 1986, dat in totaal meer dan 30 videogames heeft. Ik had ook nog kort even gekeken naar, Osamu Tezuka, de Walt Disney van Japan, maar dit interesseerde mij wat minder. Dus ik had besloten om in ieder geval dat onderwerp niet te kiezen voor het detail analyse. Al deze vier I.P.'s hebben een grondige geschiedenis waar je genoeg kan detail informatie van kan halen.

2. Conceptschetsen

Context Map

Context schetsen

Toelichting

Ik heb als eerst gekeken naar een paar algemene aspecten dat te maken heeft met de Gundam franchise. Dus ik heb thema's zoals: Oorlog, Locaties Piloten etc in mijn context map opgenomen. Met deze verzameling ben ik verder gegaan met het maken van de vijf concept schetsen. Ik vond het nog erg moeilijk om mijn concepten niet te algemeen te maken. Veel van mijn concepten zijn namelijk makkelijk te verwisselen met andere franchises. Dat kwam ik te weten nadat ik feedback vroeg van de docent. Daarom heb ik mijn best gedaan om het eerste concept wat dichter bij het onderwerpt te leggen voor de volgende werkgroep.

3. Concept + feedback

Concept

Toelichting

Mijn onderwerp is Mobile Suit Gundam. Dat is een science fiction anime show uit 1979 tot nu. Ik ga het specifiek hebben over speciale uitgaves van hun modelbouw figuren door de jaren heen. Om nog iets specifieker te zijn wil ik de website laten zien alsof je op locatie bent van Gundam Factory Yokohama Japan. Als je op een modelbouw doos aanklikt dan wijst de 18 meter lange Gundam naar het product. Verder wordt er informatie weergegeven zoals: Datum van uitgifte, Schaal, Prijs en nog meer korte relevante informatie dat dat product zich onderscheid van de andere. En die informatie wordt in een balk onderaan weergegeven.

Feedback

Ik heb feedback van Steven en Ruben. Zij zeiden dat mijn idee nog een beetje algemeen is. Het idee van een Gundam factory vonden ze wel leuk, maar het was een beetje vreemde de model kits zomaar aan het zweven is. Dus Steven en Ruben kwamen op het idee om het onderwerp weer terug naar het Gundam show terug te brengen. Dus breng deze suits terug in binnen in een fabriek van de show zelf.

4. Details + feedback

Concept v2

Concept v2 2

Toelichting

Vanuit de feedback van mijn eerste uitgewerkte concept wil ik echte suits op een missie sturen in een hangar binnen in een moederschip van de show zelf. Daarvan los zie je nog steeds losse info over de suits. Maar dit maakt het concept uniek en wat specifieker. Omdat een opslagplek van deze gigantische robots zie je alleen in deze show. Ik had het ook nog even gevraagd aan de docent. En die vindt dit een veel beter richting. Maar Wanneer de basis staat, werd er wel aangeraden om verder kleinere onderwerp gerichte details toe te voegen. Zodat je, je nog meer in het onderwerp verdiept. Ik heb alvast wat nagedacht over progressive disclosure, feedback (en toevallig feedforward).

Voor progressive disclosure heb je een aparte info knop die net iets meer info geeft over de mobile suit. Feedback, als je met de knoppen vooruit/achteruit gaat hoor je een sound effect van een mechaniek dat beweegt. Om de gebruiker te laten weten dat er iets moet gebeuren en het suggereert dat er echt iets mechanisch beweegt. En ik heb ook als feedback, dat als je helemaal naar rechts en naar links gaat, dat het scherm rood wordt, als indicatie dat je klaar bent met door scrollen/klikken. Feedforward, het scherm is laat nog aan de linkerkant zien wat het eerstvolgende Mobile Suit is.

  • Toevoegingen op basis concept
  • Slide animatie
  • Slide sound effect
  • Extra info scherm
  • Teveel naar links/rechts op computer scherm animatie

Paaseieren, feedback en nieuwe features

Ik heb wat feedback gekregen en kort terug gekeken naar mijn huidig concept. Ik heb daarvan een paar punten van gepakt dat ik belangrijk vindt. Maar het belangrijkste was dat de data op het scherm nog een beetje te vaag was. En dat ik een easter egg moet toevoegen. Daarom had ik ervoor gekozen om de data wat verder uit te schrijven en om een verborgen animatie toe te voegen. In die animatie wil ik dat een mobile suit opstijgt en terug komt .

  • Link toevoegen aan extra info scherm, voor derde stap in progressive disclosure. Ga direct naar de wikipedia page.
  • Teveel naar links/rechts op computer scherm sound effect van de show zelf.
  • Extra info scherm button sound effect van de show zelf.
  • Zero state, korte uitleg wat de site is voordat je er zomaar in gegooid wordt.
  • Easter egg, klik om de Mark II Gundam en zie hem wegvliegen.

Paaseieren

5. Reflectie op ontwerp, code en eigen ontwikkeling

Eind 1

Eind 2

Kern van het concept

Ik heb een tijdlijn van de belangrijkste Mobile Suits van de 1979 show Mobile Suit Gundam. Dit is een science fiction show met een anti war boodschap. En in dit verhaal vechten de twee kanten, De Earth Federation en de ruimte kolonisten Zeon met elkaar in gigantische robots. Mijn site is een hangaar binnen in het Earth Federation moederschip, de "White Base". En daar ga je langs deze robots met een computer binnen in het schip. Op dit scherm zie je statistieken zoals bouwjaar (UC staat voor Universal Century, de jaar kalender van de show zelf.), snelheid grootte en meer. En op dat scherm kan je nog meer informatie zien met de informatie knop.

Ik vindt het ontwerp bij het object/karakter passen want ik heb de visuals, geluiden en interactie meegenomen met het thema. Bijvoorbeeld heb ik sound effects van de shows gebruikt, de bediening is doormiddel computers binnen de show zelf en de gradients en de rest van de kleuren zijn gebaseerd op de esthetiek van de laat jaren 70 show. En ook zou het ook heel logisch zijn in de show zelf, dat je even naar de statistieken kijkt van jouw Mobile Suit, waar het goed of slecht in is, voordat je in een gevecht gaat en vanuit het moederschip gelanceerd wordt.

Toevoegingen op basis concept Gekregen feedback Op de een na laatste versie had ik nog even feedback gevraagd aan Ruben doormiddel van het Checklist details, verzorging en nette code formulier. Dat kwam voor het meest positief en goed verzorgd uit. Ik had alleen een onnodige wrappers gebruikt, met name een paar articles en section te veel. Ik had daarna ook nog effe aan Sanne gevraagd hoe het netter kan. Dus nu heb ik bijvoorbeeld de menu tag gebruikt voor drie buttons en heb ik nu geen articles meer en een paar sections beter gebruikt.

Voor het feedback van mijn laatste versie die ik ga inleveren voor het eindopdracht kreeg ik nog feedback van Luc. Voor het meest is mijn laatste versie positief beoordeelt. Maar het belangrijkste puntje feedback hem vind ik dat er misschien wat meer easter eggs in kon. Dat was origineel ook mijn bedoeling, maar na het herbouwen van de site (vanwege incorrect gebruik van classes en sections) was ik al heel veel tijd kwijt. Dus inderdaad, het is jammer dat er zo weinig easter eggs in zitten.

Evaluatie ontwerp

Ik vindt zelf dat mijn concept en ontwerp goed past bij mijn gekozen object. Maar dat heb ik al uitgelegd in het kopje kern van het concept helemaal boven. En ik heb ook toevoegingen gemaakt om mijn ontwerp te versterken. Hier heb ik ze op een rijtje:

  • Progressive disclosure, extra informatie scherm voor als de gebruik meer info wilt. En daarna ook nog is een link voor nog meer info, maar dat is alleen voor de liefhebber.
  • Feedforward, je hebt nu een focus licht highlight, animatie en geluid om duidelijk te maken welke Mobile Suit de informatie overgaat.
  • Feedback , als je teveel naar voren of achter gaat krijg je een animatie en geluid dat je niet verder kan.
  • Ook is de gehele site bruikbaar met toetsenbord en uiteraard ook muis, doormiddel van het gebruik van buttons.
  • Easter egg als je op de MK II Gundam klikt (met een button) dan vliegt hij weg net zoals in de show.
  • States, hover en active een andere kleur voor elke buttons en zelfs link. Op focus heb ik extra style-ing, een oranje border rond de button/link heen om de gebruiker nog duidelijker te maken waar hij is.

Evaluatie code Ten eerste ben ik al blij dat het werkt. Maar als ik dit project helemaal vanaf het begin opnieuw zou moeten maken, dan zou de code er wel wat anders uitzien. Bijvoorbeeld mijn HTML kan net wat netter, de div is eigenlijk overbodig, maar ik had het vanaf het begin met articles en te veel sections gemaakt. En dat is jammer, want dat hoeft helemaal niet. En de CSS was in het begin te slordig om later weer makkelijk netjes te schrijven. Maar nu met mijn laatste versie is het wel al een groot stuk netter.

En voor de JS, misschien zou ik de volgende keer niet te veel doen met scroll bar manipulatie, want als het browser net te groot of te klein is, dan werken de cases niet meer goed. Maar dat heeft meer te maken met het ontwerp keuze dan de kwaliteit van mijn JS code. En daar heb ik dus ook niet te veel over te klagen.

Evaluatie Proces

Met het proces heb ik niks over te klagen, elke stap heb ik grondig vastgelegd op het MIRO bord. Ook ben ik niet vergeten om alle feedback en bronnen te verzamelen. Ik heb misschien wel wat meer vragen aan hulpstudenten en docenten kunnen vragen. Mijn HTML kon vanaf het begin wat beter als ik dat eerder gevraagd heb. Ook heb ik regelmatig mijn progressie laten zien aan Sam en Sanne. Verder heb ik mijzelf uitgedaagd om nieuwe dingen te leren. Met name:

  • button menu tag - HTML
  • custom gradients - CSS
  • custom border radius - CSS
  • filter Inset - CSS
  • aria label, link (a href) andere locatie manipuleren - JS
  • scrollBy, scrollLeft etc om scrollbar te manipuleren - JS
  • verder oefen en met switch - JS

Bronnenlijst