ReadME ‐ Julia - julia-stevens/pleasurable-ui GitHub Wiki

Beschrijving

Speakers

Op de speakers pagina krijgt de gebruiker een overzicht van alle sprekers die een webinar hebben gegeven. De sprekers kunnen vanaf deze pagina ge-bookmarked worden én de gebruiker kan doorklikken voor meer informatie over de betreffende spreker.

Hierarchy of User Needs

Deze pagina, inclusief bijbehorende functionaliteiten (zoals het bookmarken) zijn opgebouwd volgens de Hierarchy of User Needs. Dit is een model dat beschrijft aan welke basisvoorwaarden een digitale ervaring moet voldoen voordat het echt waardevol en betekenisvol wordt voor de gebruiker. Het bestaat uit verschillende niveaus die ik bij onderstaande, uitgelichte features zal toelichten.

Speaker page & bookmark functionaliteit

De bookmark functie op de speaker pagina geeft de gebruiker de mogelijkheid sprekers te bookmarken en un-bookmarken. De bookmarks zijn terug te vinden op de profiel pagina van de gebruiker, voor eenvoudige navigatie naar de favoriete sprekers. In een later stadium zou hier een functie aan gekoppeld kunnen worden dat een gebruiker meldingen krijgt van nieuwe webinars van gebookmarkte sprekers.

1 & 2 - Functional & Reliable

De bookmark functie is gebouwd met semantisch correcte HTML. Dit wil zeggen dat de functie toegankelijk is en dus gebruikt kan worden door gebruikers die met het toetsenbord navigeren en ook voor gebruiker die afhankelijk zijn van een screenreader, dit is getest in #47. Daarnaast draagt het bij aan de SEO, oftewel zoekmachines begrijpen de inhoud van de code beter. Ook maakt het code beter onderhoudbaar en past is het een best practice.

In deze laag is ook de eerste stap zichtbaar van het progressive enhancement principe. Dit principe houdt in dat je een functie eerst bouwt met pure, eenvoudige code, waarmee de functie in de basis werkt. Vervolgens, in de volgende lagen, wordt de functie uitgebreid (enhanced). Voor de bookmark functie betekent dit bijvoorbeeld dat de functie ook functioneert als een gebruiker een verouderde browser heeft, waarin sommige nieuwe code bijvoorbeeld niet ondersteund wordt. Dit is getest in #50.

3 - Usable

De bookmark functie en de hele pagina zijn op ieder apparaat te gebruiken. Dit omdat de pagina en de functie gebouwd zijn volgens het mobile first principe. Dit wil zeggen dat de pagina eerst voor mobiel is ontworpen en gebouwd, en vervolgens zijn uitgebreid voor grotere schermbreedtes. Zie onderstaande afbeelding:

Voor de bookmark functie heb ik ervoor gezorgd dat de tekst 'bookmark' of 'bookmarked' wordt aangepast in HTML. Hiermee zorg ik ervoor dat de gebruiker, ongeacht in welke browser (nieuw of oud) of welk apparaat, altijd te feedback krijgt en dus kan zien of een spreker ge-bookmarked is of niet.

4 - Pleasurable

In deze laatste laag is gewerkt aan aan het creëeren van een nóg prettigere gebruikerservaring. Dit door het toevoegen van een loading animatie en het voorkomen van een volledige refresh van de pagina. Hiermee dus ook de laatste stappen van het progressive enhanced principe. Zie bijvoorbeeld onderstaande video:

https://github.com/user-attachments/assets/e4696289-9829-47dc-bfe9-7e50215a10dd

Filter animatie

Op zowel de webinars pagina als de speakers pagina heeft de gebruiker de mogelijkheid om het overzicht van webinars of sprekers te filteren. Deze functie is wederom opgebouwd met de verschillende lagen van de [Hierarchy of User Needs(https://www.nngroup.com/articles/theory-user-delight/).

1 & 2 - Functional & Reliable

In deze laag is ook de eerste stap zichtbaar van het progressive enhancement principe. Dit principe houdt in dat je een functie eerst bouwt met pure, eenvoudige code, waarmee de functie in de basis werkt. Vervolgens, in de volgende lagen, wordt de functie uitgebreid (enhanced). Voor het filter betekent dit de functie op elk apparaat in elke browser werkt. Dit is getest in #50.

3 - Usable

Het filter is gemakkelijk te gebruiken, ook als de styling of de animatie niet ondersteund wordt. Daarnaast zijn de filters op kleine en grote schermen te gebruiken. Dit omdat de pagina en de functie gebouwd zijn volgens het mobile first principe. Dit wil zeggen dat de pagina eerst voor mobiel is ontworpen en gebouwd, en vervolgens zijn uitgebreid voor grotere schermbreedtes. Zie onderstaande afbeelding:

4 - Pleasurable

In deze laatste laag van de hierarchy is gewerkt aan het pleasurable maken van de interactie. Hiervoor is de dropdown volledig gestyled volgens de huisstijl en een animatie toegevoegd met nieuwe CSS. Wanneer een browser of apparaat deze nieuwe code niet ondersteund, blijft het filter gewoon werken, met de standaard styling van de browser. Wanneer alles wel wordt ondersteund krijgt de gebruiker onderstaande animatie:

https://github.com/user-attachments/assets/88641fce-9ed1-48bb-8e82-bcec23454f19

https://github.com/user-attachments/assets/a0c0e4ba-bdee-4b13-9f4f-e8a5ac45bcfe

Kenmerken

In dit project is gebruikt gemaakt van Node.js en Express om een webserver op te zetten. Ik gebruik Liquid als template-engine voor het genereren van dynamische HTML-pagina's.

Routes en dataverwerking [links worden aangevuld wanneer server klaar is]

app.get("/"): Laadt de homepage en rendert de index.liquid.
app.get("/webinars"): Haalt alle webinars op via de Directus API en past filters toe op categorie en sorteervolgorde. Bookmark-data wordt opgehaald via messages, en alles wordt gerenderd in webinars.liquid.
app.get("/webinars/:slug"): Haalt detailgegevens op van één specifieke webinar (inclusief sprekers, categorieën en resources) op basis van de slug en toont dit in webinars-detail.liquid.
app.post("/webinars"): Verwerkt het toevoegen of verwijderen van een webinar uit de bookmarks. Dit gebeurt via messages in de Directus API.
app.get("/contourings"): Haalt een lijst van alle contourings op en toont deze in contourings.liquid.
app.get("/contourings/:slug"): Haalt de detailgegevens van een contouring op via de slug en toont dit in contourings-detail.liquid.
app.get("/speakers"): Haalt alle sprekers op, toont bookmarks (op basis van Bookmark for Julia) en ondersteunt filtering op "all" of "bookmarked". Wordt weergegeven in speakers.liquid.
app.get("/speakers/:slug"): Laadt de detailpagina van een specifieke spreker (inclusief gerelateerde webinars) in speakers-detail.liquid.
app.post("/speakers"): Verwerkt het bookmarken of unbookmaken van een spreker. Controleert op duplicatie en gebruikt _method=DELETE voor verwijderacties.
app.post("/speakers/:id/unbookmark"): Verwijdert expliciet een bookmark voor een spreker op basis van ID, met redirect naar de juiste filter.
app.get("/about-us"): Haalt teamleden, partnerlogo’s en contentblokken op en rendert deze op de about-us.liquid pagina.

Data ophalen en HTML renderen

Gegevens worden opgehaald via fetch()-aanroepen naar de Directus API, bijvoorbeeld voor webinars, sprekers, categorieën en berichten (bookmarks).
Voorbeeld: ophalen van webinars met gerelateerde sprekers, categorieën en resources.
Rendering gebeurt met behulp van Liquid templates, waarbij data via Express wordt doorgegeven aan .liquid views.
Bookmarks worden opgeslagen als berichten in Directus (avl_messages) en worden gesorteerd/gefilterd op basis van text (bijv. webinar ID) en for (bijv. "Bookmark for Julia").
Filters in routes zoals /webinars en /speakers maken gebruik van querystrings (?category=..., ?sort=..., ?filter=...) voor dynamische weergave.

Technische stack

Express.js als backend webframework
LiquidJS voor template rendering
Directus als headless CMS en API backend
Method-override om POST-formulieren te gebruiken als DELETE
Fetch voor data-ophaalverzoeken naar de API

Installatie

Zoals beschreven bij Kenmerken is bij dit project gebruik gemaakt van NodeJS. Om aan dit project te werken moet NodeJS geïnstalleerd zijn. Eenmal geïnstalleerd kan het project geopend worden in de code editor.

Voer in de terminal npm install uit om alle afhankelijkheden te installeren.

Voer vervolgens npm start uit om de server te starten.

Ga in je browser naar http://localhost:8000 om het project te bekijken.

Nodemon

Om het werken makkelijker te maken is ook nodemon in dit project geïnstalleerd. Hiermee wordt de server automatisch opnieuw opgestart bij wijzigingen en hoeft dit niet meer handmatig gedaan te worden met npm start.

Om met nodemon te werken, type npm run dev in de terminal.