In de sprint Pleasurable UI hebben we als team een interface gebouwd voor het PreludeFonds waar gebruikers blij van worden. De focus lag op samenwerken, client-side scripting en creative coding. We hebben eerst gezorgd dat de website functioneel en betrouwbaar is, voordat we deze hebben uitgebreid met usable en pleasurable enhancements.
Als medewerker van Cool Kunst en Cultuur wil ik instrumenten kunnen beheren en uitlenen, zodat ik altijd een actueel overzicht heb van alle instrumenten en activiteiten. De Cool Preludefonds-applicatie helpt medewerkers van Cool Kunst en Cultuur om het overzicht van de uitgeleende muziekinstrumenten aan studenten te bewaren. De applicatie is ontworpen voor snel dagelijks gebruik.
Wat kan een gebruiker doen?
Instrumenten vinden
- Alle instrumenten bekijken in een overzichtelijke tabel met naam, type, serienummer, eigenaar en status
- Zoeken op naam instrument via de zoekbalk
- Filteren op type instrument
- Details per instrument zien en daarin ook de geschiedenis ervan
Instrument uitlenen
- Uitlenen via de detailpagina van een beschikbaar instrument
- Gegevens van de huurder, verhuurder en opmerkingen invullen
- Status verandert naar "uitgeleend"
Instrument innemen
- Innemen via de detailpagina van een uitgeleend instrument
- Status verandert terug naar "beschikbaar"
Nieuw instrument toevoegen
- Via de "instrument toevoegen" knop in het overzicht
- Formulier met verplichte velden
- Na opslaan staat het instrument gelijk bovenaan het overzicht
Acties volgen
- Via de actielog zie je een chronologisch overzicht van alle uitleningen, innames en aanpassingen
- Filteren op type actie om specifieke gebeurtenissen te zien
De website is opgebouwd volgens het principe van Progressive Enhancement, verdeeld in vier lagen. We beginnen met een functionele basis die altijd werkt, en bouwen daar laag voor laag enhancements bovenop.
de applicatie is opgebouwd volgens progressive enhancement, dat betekent dat alles werkt zonder JS of CSS.
technische opzet, Express: als webserver met routes voor paginas. LiquidJS: templates directus REST API: de database
De basis huisstijl is vastgelegd in een stylesheet met CSS custom properties voor kleuren, typografie en spacing.
De kleuren zijn opgezet met twee lagen variabelen. Een palette laag met de ruwe kleurwaarden en een semantische laag die verwijst naar die palettekleuren. Dit maakt het makkelijk om de huisstijl aan te passen zonder door de hele code te hoeven zoeken.
Het eigen lettertype Akkurat wordt ingeladen via @font-face met font-display: swap, zodat er altijd tekst zichtbaar is, ook als het font nog niet geladen is.
Koppen, paragrafen en links hebben een consistente basisstijl.
Formuliervelden geven visuele feedback via :valid- en :invalid-states, en er verschijnt bij correct ingevulde velden een vinkje via ::after als de browser :has() ondersteunt.
In de usable laag hebben we de basisfunctionaliteit uitgebreid met geavanceerdere CSS-keuzes die aansluiten bij de huisstijl. Dankzij progressive enhancement is de website op elke browser functioneel.
In de formulieren heeft de submit button verschillende states. Zo kan je zien of het uitvoeren van een verandering is gelukt, of er een error is, of dat hij nog aan het laden is. Zo hoef je je niet af te vragen of het versturen van informatie wel goed is gegaan.
Feedback en feedforward van animaties Op onze website hebben we op verschillende plekken gebruikgemaakt van feedback en feedforward. Hiermee geven we gebruikers duidelijke signalen dat hun acties worden herkend en daadwerkelijk effect hebben binnen de interface.
Een formulierknop die visuele feedback geeft wanneer erop wordt geklikt en duidelijk aangeeft wanneer het formulier succesvol is verzonden.
Recording.2026-05-28.112435.mp4
Loading, success en error states
loading.+.success.mp4
loading.+.error.mp4
Button states
De knoppen hebben vier states uitgewerkt: standaard, :hover, :active, :focus-visible en :disabled.
Animaties op de knoppen worden alleen afgespeeld als de gebruiker geen voorkeur heeft voor minder beweging, via @media (prefers-reduced-motion: no-preference).
Micro-interacties In de formulieren heeft de submit button verschillende states. Zo kan je zien of het uitvoeren van een verandering is gelukt, of er een error is, of dat hij nog aan het laden is. Zo hoef je je niet af te vragen of het versturen van informatie wel goed is gegaan.
de applicatie is in 3 lagen gebouwd, elke laag voegt iets toe, maar geen laag is verplicht
Laag 1 HTML: de basis, alles wat ee gebruiker nodig heft staat hier, paginas, links, formulieren. Wat een gebruiker doet, wordt geregeld door standaardbrowsergedrag; hierdoor is het niet gevoelig voor bugs/storingen.
laag 2 CSS: Kleuren, lettertypes, layout, alles wat de site er mooi uit laat zien. Zonder dit nog steeds bruikbaar.
laag 3 Javascript: Knoppen, feedback op acties, vinkjes, loaders en succesmeldingen. Alles wat het gevoel geeft dat er ook echt wat gebeurt zit hier.
Op deze manier werkt de site voor iedereen: op een oude telefoon/ipad, met slechte wifi en zelfs met screenreaders.
Wanneer de CSS niet werkt, is de hele website alsnog bruikbaar. Alle informatie staat dan in een rijtje onder elkaar. Het is zo wel een stuk minder mooi en overzichtelijk, maar er is niets dat hierdoor niet meer toegankelijk is. Wat je het meest mist, zijn de kleuren die de status van een instrument aangeven in het overzicht. Je kan namelijk niet meer in één keer zien waar een instrument is.
Er zijn geen verschillen in de werking van de website wanneer de JS niet werkt. Dit is omdat de code grotendeels bestaat uit HTML en CSS. Wel is het zo dat de verschillende states in de formulieren niet meer getoond worden. Je ziet dus niet of iets is gelukt of niet, of dat het nog geladen word. Maar het gebruiken van de verschillende formulieren is nog wel mogelijk.
Bij het ontwikkelen van de website hebben we rekening gehouden met de performance. Daarom hebben we verschillende optimalisaties en technieken toegepast om de gebruikservaring en snelheid te verbeteren.
- De headerafbeelding krijgt
fetchpriority="high"zodat de browser deze als eerste inlaadt - Fonts worden via
<link rel="preload">vooraf ingeladen zodat ze direct beschikbaar zijn - Fonts gebruiken
font-display: swapzodat tekst altijd zichtbaar is tijdens het laden - Op de detailpagina krijgt de hoofdafbeelding van het instrument ook
fetchpriority="high" - Bij het ophalen van data via de API beperken we de velden tot alleen wat de pagina nodig heeft via de
fieldsparameter, zodat er minder data over het netwerk gaat - De CSS wordt per pagina apart ingeladen zodat alleen de benodigde styles worden meegestuurd en er geen onnodige render-blocking CSS is
Clone de repository en installeer de dependencies:
git clone https://github.com/fdnd-agency/cool-kids.git
cd cool-kids
npm install
npm startDe website is nu beschikbaar op http://localhost:8000.
This project is licensed under the terms of the MIT license.