Amber
Deze week begonnen Ziggy en ik met een aantal iteraties voor het project, maar eerst waren we nog bezig met het verdiepen in het maken van een formulier. Hiermee kan je inloggen en een nieuw account maken. Naast dat de front-end moest werken, moesten we ook kijken naar de back-end ervan. Om dus een nieuwe gebruiker aan te maken, moest de database gebruikt worden.
Aan het einde van de week hebben we overlegd over verschillende taken waar wij aan wilden gaan werken dat weekend en volgende week. Hierbij hebben we gebruik gemaakt van de CMD-methods. De iteraties die we deze week hebben gemaakt zijn: persona, een begin van de requirements list, wireflow en beide een aparte styleboard en moodboard om die vervolgens samen te voegen.
Node js en .json blijven er nieuw voor mij en ik merk dat het wat langer duurt om dit dan ook te begrijpen. Hoewel het beetje bij beetje wel steeds beter lukt en dat is omdat ik blijf oefenen. Ik heb best wel een tijdje gesleuteld aan de code, maar het is mij gelukkig wel gelukt om eindelijk het login en het registratie scherm werkend te krijgen.
Ziggy en ik hebben goed nagedacht over wat voor soort doelgroep onze app zouden gebruiken. We hebben hierbij nagedacht over hoe oud deze persoon is, een beschrijving, frustraties, gedrag, personaliteit en motivatie. Allemaal onderdelen waar we rekening mee kunnen houden tijdens het ontwerpen van de app. We waren het snel met elkaar eens en hebben hier goed samengewerkt. De persona gaat over iemand die een band zoekt, met uitleg waarom hij een band zoekt, of het moeilijk is om een band te zoeken en wat hij graag wilt in zijn bandleden. Ik denk dat als wij ons ook goed focussen op de frustraties, dat wij een hulpzame app kunnen maken.
Hier hebben we een korte schets gemaakt voor onszelf hoe het inlog -en registratieproces eruit ziet, maar ook de overzichtspagina. Dit gaan we gebruiken als houdvast voor de volgorde van de schermen. Dit is even een snelle opzet en deze zal in de loop van de weken nog wel veranderen. Voor het coderen straks wilden wij alvast een goed idee hebben van de structuren van de pagina's.
Ziggy en ik hebben onze eigen styleboard en moodboard om vervolgens bepaalde interacties en kleuren uit te halen, die wij goed kunnen gebruiken voor het project. We hebben veel inspiratie op gedaan en nieuwe inzichten gekregen. Dit was die van ons samen:
Wat erg opvalt is dat het kleurenpalet best wel erg verschilt. Ik heb meer apps met darkmode en Ziggy met lightmode. Dat wordt een beetje kiezen waar we voor gaan. Wel hebben we beide paars erin, dat zou eventueel een kleur kunnen zijn waar we mee doorgaan. Ook wordt het duidelijk dat we een sans-serif lettertype gaan gebruiken en knoppen met ronde vormen. Het is nog even zien hoe het registratie proces en de filters eruit kunnen zien. Hopelijk kunnen we een sound illustratie gebruiken, dat vind ik er wel bij passen. Komende dagen gaan we bespreken hoe we onze styleboard gaan samenvoegen.
Ik had al snel even een lijst gemaakt van allerlei eisen en liet deze aan Ziggy zien. Deze zagen er goed uit, maar we moeten ze voor de zekerheid even laten checken bij de rest van de groep om te kijken of ze haalbaar zijn. Tijdens het maken van deze list dacht ik aan alles wat een gebruiker zou willen en kunnen doen op onze app, alsof ik het zou gaan gebruiken. Misschien nog wat nieuwe ideeën bedenken wat eventueel zou kunnen. De belangrijkste zijn natuurlijk inloggen, registreren, profiel bekijken en instellingen.
Deze week stond erg in het teken van onderzoek doen. Zowel naar de doelgroep als naar het product. Ziggy en ik hebben verschillende sites onderzocht en hebben de best, good & bad practise toegepast. We hebben gekeken wie onze doelgroep is, wat zij willen, waar zij naar zoeken en hoe oud ze zijn. Verder hebben we wat wireframe schetsen gemaakt van uit de best, good & bad practise en zijn we begonnen aan de job stories.
Ziggy en ik hebben apart van elkaar de doelgroep onderzoek gedaan. Dit hebben we verder nog niet besproken. Wat ik verder uit mijn onderzoek heb gehaald is dat de leeftijd van de doelgroep varieert tussen 14 en 72. Dat kunnen mannen en vrouwen zijn. Een band kiezen voor muzikanten heeft niks te maken met leeftijd, maar vooral met het samen spelen en beter worden in het spelen van het instrument. De muzikanten weten precies wat ze zoeken qua genre en vragen af en toe om een bepaalde leeftijd, maar vooral de locatie. De wat jongere generatie zoekt vooral een band om meer ervaring op te doen, 20 tot 30 willen al snel een serieuzere band en de doelgroep rond 60 en ouder doen het voor de lol.
Verder is het vinden van geschikte bandleden voor veel bands of muzikanten een groot probleem. Hoewel het eenvoudig lijkt gezien het aantal mensen dat muziek maakt, is het vaak lastig om muzikanten te vinden die zowel muzikaal vaardig zijn als goed in de band passen. Professionele muzikanten zijn vaak via artiestenbureaus of conservatoria te vinden, maar de meeste bands bestaan uit hobby- of parttime muzikanten, wat de zoektocht moeilijker maakt.
Dit heeft invloed op de filters en de registratie. Het kan handig zijn om iemands leeftijd te weten en dat die gene sowieso boven de 18 is. En verder dat de gebruiker geslacht, genres, instrumenten en natuurlijk locatie kunnen aangeven en zoeken.
Door deze techniek toe te passen op de gekozen sites hebben we beter inzicht gekregen over welke onderdelen we wel en niet willen gaan gebruiken. We hadden sowieso het idee om een soortgelijke FYP te maken zoals Tiktok, maar dan met een draai. Deze inzichten moeten nog duidelijk besproken en uitgewerkt worden.
Wat wij nu al uit dit onderzoek hebben gehaald is hoe wij onze knoppen, filters en layout eruit willen laten zien. Van Bad practice hebben we gezien wat voor soorten styles ervoor zorgen dat een app er oubollig uit gaat zien, dit is iets wat wij niet willen hebben. We moeten gebruik maken van een frisse uitstraling met niet al te veel content, dat er overzicht is voor de gebruiker.
Bij Good practises hebben we leuke inspiratie gehaald uit de soorten layouts, het connecten van gebruikers en de interface voor de for you page. Het was alleen nog niet helemaal wat wij zochten, omdat er in de voorbeelden of geen video's van gebruiker waren of er niet genoeg informatie was over deze gebruiker. Wij wilden een goed balans tussen de twee en hebben we die gevonden in Best practises met een goede for you page, duidelijke filters en informatie over de gebruiker.
Na goed onderzoek gedaan en de Best, good & bad practise hebben toegepast, hebben we al wat schetsen gemaakt over de verschillende manieren van de for you page en het filteren. Zelf had ik nog schermen toegevoegd over het inloggen en registreren. Ik had alvast nagedacht over de verschillende stappen en de layout van de content. Websites zoals Mobin en Nicely done heb ik gebruikt voor zoveel mogelijk inspiratie. Je kan bestaande apps bekijken en hun layout, componenten of flows zien. De laatste drie schetsen zijn van Ziggy.
Samen met Ziggy bedachten we een job story over waarom onze doelgroep nieuwe muzikanten wilt leren kennen. Daarna bedachten wij nog zelf twee verschillende job stories.
Ik wilde komen met goede, frisse ideeën om te gebruiken in de app zodat de gebruiker makkelijker nieuwe artiesten kan vinden. Een filter met voorgestelde mensen bestaat al, maar leek mij wel een goed idee om te integreren, omdat de gebruiker dan niet al te lang hoeft te zoeken naar de juiste artiest. Dit kan tijd besparen. Mijn andere job story ging over het verifiëren van deze artiesten. Misschien is iemand op de app wel erg goed, maar misschien kan je helemaal niet goed samenspelen. Het zou zonde zijn om dan een band te starten zonder te weten of het wel een goede match is.
- Apps die muzikanten helpen
- Netwerken voor muzikanten
- Bad, good, best practise
- Muzikanten bank
- Muzikanten zoeken
- Onderzoek vergelijkbare website
- Inspiratie registreren
- Past de persona bij onze doelgroep?
- Hoeveel schermen gaan we uit eindelijk maken?
- Hebben jullie nog aanvullingen voor de requirements list?
De groep vond de persona goed passen en aansluiten bij ons concept. Ook goed dat we gebruik hebben gemaakt van frustraties, zodat we daarop kunnen inspelen. De aantal schermen is afhankelijk van het ontwerp. Dat kan later nog een beetje veranderen. Ik had verder geen vragen over de wireframe schetsen, die wij hadden gemaakt. Het was natuurlijk maar een begin en deze hadden zij al gezien. Ze vonden deze er goed uit zien en ze vonden het een leuk en speels concept om gebruik te maken van een for you page met video's van bands.
Over de requirements list hadden zij een paar dingen; we gaan waarschijnlijk niks doen met het nummer verifiëren en het geslacht en leeftijd aangeven vonden zij een twijfelgeval. Leeftijd aangeven vond ik zelf wel belangrijk, maar misschien dat we dat laten nog anders kunnen laten aangeven.
- Wat moet Front-end precies maken ten opzichte van Back-end?
- Tot hoever moeten de functionaliteiten echt bruikbaar zijn? Bijv als we een chatfunctie designen, moet die het ook echt doen?
Het ligt vooral bij de groep tot hoever de Front-enders en Back-enders code schrijven, dus het is belangrijk iedereen een taak te geven. Ik denk dat we daar wel gemakkelijk uit kunnen komen wie wat gaat maken. Verder is het nodig dat alle functionaliteiten die erin zitten ook werkzaam zijn. Dus als wij die chat gaan maken, dat deze het ook daadwerkelijk doet.
Door de weinig lessen deze week ben ik vaak met Ziggy in call gegaan om aan onze opdrachten te werken. Ik een opzet van een styleboard gemaakt vanuit onze eigen styleboards uit week 3 en heb ik daarbij een logo gemaakt. Ziggy had toen meteen wat schetsen in HiFi gemaakt, hebben we daar wat inspiratie uitgehaald om vervolgens de rest van registreren in HiFi te zetten. We hebben de lay-out van registratie en al haar pagina's gemaakt, knoppen en bepaalde states van de pagina's, zoals: Error state, Empty state, 404 en Loading state.
Ik heb gekeken naar onze styleboards en het onderzoek om een eerste opzet te maken. Paars was dus wel onze hoofdkleur, zocht ik iconen met een frisse style, deed ik onderzoek naar typografie en knoppen en wilde ik illustraties toevoegen. Tijdens mijn onderzoek naar de typografie en knoppen, heb ik gekeken naar hoe groot deze moeten zijn op een telefoonscherm. Daar wilde ik wel rekening mee houden.
Voor het logo wilde ik een duidelijk beeld van waar Band buddy voor staat: muziek maken. En van muziek komen bepaalde golven, dus wilde ik een logo maken met beeld. Alleen wat tekst vond ik zelf niet duidelijk en krachtig genoeg. Dus voegde ik wat speelde muziek golven toe aan het logo.
Vorige week had ik al wat schetsen gemaakt voor de registratie pagina's en deze week hebben we ze gerealiseerd. Hierbij heb ik erg gelet op One primary action per page en heb ik gebruik gemaakt van iconen. Dat is toch makkelijker lezen en het geeft de gebruiker overzicht over de stappen.
Bij Ziggy zag ik al hoe hij de invulvelden had gemaakt en ik wist niet helemaal of dat wel duidelijk genoeg vond. Ik had al een keer eerder iets gelezen over dat soort velden dus ging ik weer opzoek. Ik vond deze link en paste een kleur toe aan de invoervelden. Om er toch voor te zorgen dat de gebruiker goed begrijpt dat ze interactief zijn zonder Ziggy's ontwerp volledig te veranderen, want het design vond ik er goed uitzien.
Ziggy had ook nog wat schetsen en daaruit hebben we nieuwe knoppen gehaald. We hebben bepaalde pagina's ook uit elkaar moeten halen vanwege de principle: One primary action per page om de hiërarchie erin te houden. Verder hebben we onze lay-outs samengevoegd, wat verrassend goed en snel ging. Het is ook goed om soms je eigen idee los te laten als dat van een anders net efficiënter werkt.
Dit zijn de resultaten ervan:
Je kan jezelf opgeven als band of als single artiest. Op basis van deze keuze ligt het eraan of je dan 1 naam hoeft in te voeren of de hele band.
Deze staat niet in de schetsen, maar dit ik heb gestyled toen ik in call was met Ziggy. Toen waren we al deze versies aan het maken/verbeteren. Alle informatie moest van het registreren komen en dat heb ik op deze manier gedaan:
Ook deze staat niet in de schetsen en heb ik samen met Ziggy gestyled. We dachten na over wat belangrijk is om aan te passen en wilden een darkmode erbij maken.
De wijziging aan knoppen hebben we dus vanuit de registratie pagina van Ziggy. Naar onze mening paste de nieuwe keuze knoppen beter bij de huisstijl dan die ik heb gemaakt. We hebben verschillende versies ervan gemaakt, omdat we niet wilden dat het teveel ging lijken op de "Next" knop als deze aangeklikt is.
Door de verschillende wijzigingen van deze week hebben we opnieuw naar onze styleboards/moodboards gekeken en de aanpassingen toegepast. Nu hebben we een compleet styleboard met onze elementen en de nieuwe aangepaste elementen:
- Wat vinden jullie van de volgorde van het registreren? Moeten sommige pagina's gehusseld worden?
- Kan er nog wat veranderd worden aan de dark-mode?
De volgorde van onze pagina's en de content ervan werden goed opgevangen. Iedereen was tevreden met het resultaat en de registratie stappen waren duidelijk. Ook viel dark-mode in de smaak en hoefde daar zeker niks aan veranderd te worden.
- Typografie muziek project
- Typografie tips
- Alternatief Futura
- Knop groottes
- Iconen grootes
- Beste invoervelden
- Logo inspiratie
- Logo templates
Deze week hebben Ziggy en ik vooral apart gewerkt aan onze HTML en CSS. We hebben de registratie pagina's verdeeld, de eerste helft voor Ziggy en de tweede helft voor mij. We hebben ons als eerste gestort op het skelet en daarna langzaam gaan opbouwen in de CSS. Ik had een opzet van de root gemaakt om gemakkelijk de fonts en de kleuren te gebruiken. En heb ik naast de pagina's maken en vormgeven, gewerkt aan het rouleren van de partials door middel van een terug en verder knop.
Gezamelijk hebben de partials aangemaakt voor de verschillende pagina's in registratie. Ik mijn helft vanaf genres en Ziggy vanaf inloggen. Voor de registratie pagina zelf hoefte er niet veel te gebeuren. Dante had deze al opgezet, wij hoeften alleen de juiste code van de partials erin te zetten en de 'previous', 'next' en submit button in te doen.
Registratie is de form en voor de partials hoeften wij alleen wat losse HTML toe te voegen. Er werd gebruik gemaakt van labels en input, zodat de gebruiker de informatie vervolgens in kan voeren. Daarbij moest gelet worden op de juiste 'name' zoals het in de database staan, anders gaat het niet werken. Voor de beschrijving was er al meteen een maximum gesteld aan woorden dat getypt mag worden. Dat heeft te maken met de design dat Ziggy en ik hebben opgesteld en anders zou het verschillende elementen verschuiven.
Registreer pagina
Beschrijving toevoegen
Video toevoegen
Genre toevoegen
Voor nu wilden wij ons eerst focussen op de techniek en minder op de vormgeving meteen. Als de content en de knoppen eerst goed staan en het werkt, dan zijn wij al heel ver. Wat ik wel meteen had gedaan alvast als voorbereiding is het maken van de root. Kijken welke kleuren wij gaan gebruiken voor de knoppen en tekstvelden, het font erin zetten en de bijbehorende schaduw. Het is belangrijk voor mij dat de css netjes is en dat er geen duplicate code is, anders wordt het zo rommelig.
Root
Nette CSS
Dus voor nu zagen de pagina's er zo uit. Dit is een voorbeeld van Description:
Voor nu was ik mij aan het focussen dat de partials gerouleerd worden als je op de 'next' en 'previous' knoppen klikt. Als er op "next" wordt geklikt, kijkt de code eerst even of alle velden ingevuld zijn. Zo ja, dan wordt de volgende stap getoond. Als er op "previous" wordt geklikt, dan krijg je de vorige pagina te zien. Hierdoor wordt steeds één stap tegelijk getoond en worden de verplichte velden gecontroleerd voordat de gebruiker verder kan.
- ChatGPT
- Hoe gebruiksvriendelijk zijn de registratiepagina's?
Het invullen van de registratiepagina's was voor hen heel gemakkelijk. Wat echt hielp, was dat er tekst stond boven de invoervelden die precies aangaf wat er van hen werd verwacht. De titels waren al behoorlijk duidelijk, maar de extra uitleg erbij maakte het nog veel prettiger.
We hebben hierna nog maar 1 week, dus we hebben flink doorgewerkt. Ik ben bezig geweest met het maken van de profiel en settings pagina. Het lukt om de informatie uit de registratie te halen en deze ook te updaten. De settings gebruiken werkt nog niet, er is slechts aan de vormgeving gewerkt. Aankomende week wordt deze werkend gemaakt. Ziggy is verder bezig geweest met de foryou page. Ook informatie oproepen, de searchbar en de filters maken.
Nu er een opzet is van registratie, ben ik alvast begonnen aan het profiel en de settings pagina. Naast de structuur schrijven, wat zo gedaan is, moest ik ook informatie ophalen van registratie. Dat deed ik door een stukjes EJS te schrijven. In de database staat de gebruiker als user, dus als ik de bandnaam wilde ophalen moet ik user.bandName doen. De name atrribute moet kloppen met wat er in de database staat, anders gaat het niet werken. Alle invoervelden staan op readonly waardoor ze niet aangepast kunnen worden, zonder op de edit knop te klikken.
Voor genres en instruments heb ik wat meer EJS moeten toevoegen. Er wordt lijst van instrumenten en genres getoond met checkboxen. Als een instrument of genre in de gebruikerslijst staat (user.userInstruments) of (user.genres), wordt de checkbox aangevinkt en zichtbaar. Ook de checkboxen zijn readonly. Hierdoor worden alleen relevante instrumenten en genres getoond en geselecteerd.
Code genres
Code instrumenten
Bij settings was ik daar nog niet aantoe gekomen, maar ik had wel alvast een opzet van de pagina gemaakt. Het werkend maken ga ik volgende week doen. Deze week ga ik mij focussen op het profiel.
Code settings
Naast de styling die ik geef aan de pagina, ben ik ook bezig geweest met de elementen goed neerzetten. Dus gebruik maken van display flex om elementen naast elkaar te zetten, zoals de header of de informatie van de gebruiker. Dan heb ik de labels en inputs naast elkaar gezet net zoals in de schets.
Dit is een opzet wat ik nu heb voor het profiel: De afbeeldingen en video's werken nog niet helemaal, maar je kan wel alles wat ingevuld is aanpassen.
En dit is de css ervan:
De 'edit' knop is uitgewerkt in JavaScript om invoervelden bewerkbaar te maken en wijzigingen op te slaan. EditIcon en saveButton worden geselecteerd met document.querySelector. De functie toggleReadonly verwijdert of voegt het readonly attribuut toe aan alle invoervelden en textareas.
Wanneer op de editIcon wordt geklikt, wordt toggleReadonly(false) aangeroepen om de readonly attributen te verwijderen en de 'Save' knop zichtbaar te maken. Bij een klik op de 'Save' knop wordt toggleReadonly(true) aangeroepen om de readonly attributen weer toe te voegen en de 'Save' knop te verbergen. Dit zorgt ervoor dat de gebruiker de velden kan bewerken na het klikken op de 'edit' knop en de wijzigingen kan opslaan door op de 'Save' knop te klikken.
Om genres en instrumenten te laten bewerken, had ik de code erboven nog wat uitgebreid. Dit laat alle overige knoppen zien, die niet aangevinkt zijn.
De code voegt een click-eventlistener toe aan elke knop in choiceButtons. Bij een klik wordt de checkbox-status van die knop omgeschakeld en krijgt de knop de class .checked als de checkbox is aangevinkt. De zichtbaarheid wordt aangepast via toggleCheckVisibility. Als een andere knop eerder was aangeklikt, wordt de class .check van die knop verwijderd. De huidige knop wordt vervolgens als lastClickedButton opgeslagen.
Omdat nu alle pagina's wel kloppen en hetzelfde blijven, wilde ik de oude wireflow even updaten. Het registratie proces is nu wat anders en de settings en for you pagina is nu uitgebreider. We zijn nu ook van een chat maken naar de gebruiker een email laten sturen naar hun matches, omdat een chat maken te ingewikkeld was.
- ChatGPT
- Is de EJS voor genre en instrument netjes geschreven?
- Is het editten van het profiel duidelijk genoeg?
- Wat gaat niet meer lukken om toe te voegen?
De EJS-code voor genres en instrumenten is netjes geschreven, maar het kan misschien wat comments gebruiken voor de leesbaarheid. Verder is het proces voor het bewerken van het profiel duidelijk en goed uitgewerkt. Ze vinden het fijn dat de invoervelden een kleur krijgen als je wilt bewerken, dat zorgt ervoor dat je weet wat je kan aanpassen.
Wat waarschijnlijk niet meer gaat lukken is het maken van de talen varianten, display en de error messages. Het is voor ons belangrijker dat de functionaliteiten goed werken. Taal en display waren sowieso niet heel erg belangrijk, dus gaan we die waarschijnlijk laten vallen. Error messages gaan we alleen doen als er echt nog tijd over is.
Dit is alweer de laatste week en ik ben bezig geweest met het werkend krijgen van de settings pagina, het veranderen van het video format in de profiel pagina en de laatste finishing touches.
Maar ook hebben we alles gemerged en bleken er maar een paar errors te zijn. Het leek vooral te gaan omdat Ziggy en ik in hetzelfde bestand hebben gewerkt dan dat er erg fouten waren. Dus dat was zo opgelost.
Ik heb in de html meer elementen verwijderd, dan nieuwe elementen toegevoegd. De settings is veranderd. We wilden het veranderen van taal en display niet meer. Dat zou op dit moment teveel tijd kosten dan dat wij nu hebben, dus willen we ons focussen op echt de belangrijkste dingen en dat is op het moment: email en wachtwoord veranderen, account verwijderen en uitloggen.
Hierbij heb ik aparte forms gemaakt voor deze keuzes om vervolgens een overlay creëren als je erop klikt.
De aangepaste Settings pagina:
Code van overlay:
Verder is het profiel qua video's nu anders. Het staat nu buiten de form, omdat dat makkelijker en efficiënter is te programmeren in de backend. Verder is ook best practice om dat apart te doen qua design perspectief.
Wat ik verder nog voor kleins had toegevoegd in het profiel. Dit probeerde ik ook in registreren, maar het werkte heel erg slecht, dus haalde ik het weg.
Dit is het aangepaste profiel:
Wanneer je gaat bewerken: Hieronder zie je ook meteen de nieuwe indeling van de video's. Ik heb er een grid van gemaakt en de verzend en verwijder buttons hebben hun eigen styling gekregen.
Dit is de nieuwe structuur van het profiel:
Omdat ik dus de preview heb toegevoegd, moest deze ook gestyled worden en volledig in de preview passen. Dat heb ik gedaan door object-fit op cover te doen en de hoogte en breedte op 100% te doen. Hierdoor blijft de video even groot als het element waar het in zit. De overflow zorgt er dan nog voor dat de overlappende elementen binnen het kader blijven.
Voor de settings overlay heb ik een .overlay gemaakt, deze gestyled en een transition gegeven waardoor deze langzaam verschijnt en verdwijnt.
Aan de keuze knoppen in registreren en profiel heb ik een kleine animatie toegevoegd. Als je erop klikt knippert de checkbox een beetje en vult zichzelf daarna met de kleur paar met een vink erin. Ik vond het wat speelser en anders dan gewoon alleen de checkbox laten vullen met een transition.
Na het toevoegen van nieuwe elementen, is de javascript code voor het editten van de profiel pagina nog wat veranderd. Deze code heeft extra functionaliteit voor het beheren van de media invoervelden, een toggle voor de zichtbaarheid van checks binnen de profielkeuzeknoppen en het toevoegen van een class aan de invoervelden tijdens het bewerken.
Dit geldt ook voor de 'Next' en 'Previous' buttons. Daar heb ik dezelfde check toegevoegd als dat van profiel. Dat er dus een class wordt toegevoegd wanneer erop geklikt wordt en dus de animatie aanstaat. Verder is de partial code wat aangepast. Naast dat het ervoor zorgt dat je door de pagina's kan klikken, laadt het ook de content die erin zit. Niet dat je alle content in een pagina krijgt.
Sommige zijn nieuw en sommige zijn aangepast. Dit zijn nu de definitieve versies van registratie:
Leeftijd verifiëren
Aangeven of je boven de 18 bent, anders mag je geen account aanmaken
Aantal members
In plaats van allemaal stappen maken om ieder bandlid toe te voegen, hebben we besloten het simpeler te maken en een pagina te maken om de aantal band members aan te geven.
Naam band
Daarna geef je je bandnaam op in plaats van iedereens naam.
Genres en instrumenten aangeven
Deze pagina's zijn het zelfde gebleven
Video's toevoegen
Helaas lukte de video preview niet meer, dus heb ik het op deze manier opgelost. Geen preview, maar wel kunnen uploaden.
Beschrijving toevoegen
Aangezien je niet meer iedereens naam, geslacht en leeftijd kan dat eventueel in de beschrijving. Hierin vertel je kort en krachtig over je band tot maximaal 125 karakters.
Locatie toevoegen
Aangezien bands graag iemand willen die in de buurt wonen, vul je je locatie in om andere bands of artiesten in jouw buurt te kunnen zien.
Account aanmaken
Als laatst vul je je email in en een nieuw wachtwoord. De 'Next' button is veranderd naar een 'Submit' button, omdat het de laatste pagina is.
Account gelukt
Eenmaal als alles goed is gelukt en het account opgeslagen is, kan je meteen inloggen en nieuwe connecties maken.
- ChatGPT
- Check button
- Overlay
- Replace method
- Hoe ziet het nieuwe design van video's eruit?
- Hoe is de gebruiksvriendelijkheid van settings?
- Hoe vinden jullie de registreer pagina's qua style en gebruiksvriendelijkheid?
Het nieuwe video design is overzichtelijk en professioneel. Door video's buiten de form te plaatsen en in een grid, staat het goed in formaat. Verder vinden ze de settings pagina gebruiksvriendelijker omdat er goede focus is gelegd op de feedback die je krijgt als je een actie wilt uitvoeren, zoals je account verwijderen of uitloggen. De tekst is compact en duidelijk. Ook maakt de transition het leuk om de overlay tevoorschijn te halen.
Als laatst zijn de recente wijzigingen aan de registreer pagina's qua design goed en lijken de stappen wat logischer om doorheen te gaan dan voorheen. Dat is omdat er stappen in zaten wat zij toen twijfelachtig vonden en die wij nu veranderd hebben. Deze pagina's waren aan Ziggy, dus hij heeft geboortedatum veranderd in 18+, de splitsing van band of solo naar alleen band, gender weggehaald en een pagina toegevoegd waarbij je het aantal bandleden kan aangeven.