VacatureRadar/docs/design/VISUAL_AUDIT_2026-07-26.md

Visuele audit en herstelroadmap

Datum: 26 juli 2026
Scope: alle tien primaire cockpitroutes, login en wachtwoordherstel; dark/light; 390, 768, 1280, 1440, 1920 en 3840 px.

Ontwerpoordeel

VacatureRadar heeft een onderscheidende, geloofwaardige dark-intelligencebasis. De cyan/emerald-signalen, technische typografie en datagedreven panelen passen bij het product. De vorige iteraties hebben echter lokale oplossingen op elkaar gestapeld. Daardoor zijn merkhiërarchie, informatiedichtheid en horizontale ankers niet overal één systeem. De premiumkans zit vooral in rust, reductie en voorspelbaarheid, niet in meer decoratie.

Bevindingen

Prioriteit	Bevinding	Gevolg	Herstel
P0	De roze conceptafbeelding was een beeldgeneratie-werkachtergrond en had nooit als logoresultaat gepresenteerd mogen worden.	Merkverwarring en vertrouwensverlies.	Alleen het lokaal gecontroleerde VacatureRadar-radarlogo wordt als productasset gebruikt; geen gegenereerde conceptplaat wordt geleverd of gedeployed.
P1	De bovenbalk en hoofdcontent hadden verschillende maximale breedtes op ultrawide.	Acties leken los te staan van de pagina en oogbewegingen werden te lang.	Eén gedeeld contentframe voor topbar en hoofdsecties, met een begrensde ultrawidevariant.
P1	Het dashboard toonde tot acht vrijwel gelijkwaardige vacaturekaarten en werd 2.399 px hoog op 1440×900.	Een dagoverzicht voelde als een tweede resultatenlijst.	Beperk het overzicht tot vijf besliskaarten; de verkenner blijft de volledige rangschikking.
P1	De activiteitstijdlijn gebruikte 256 px per gebeurtenis en werd 5.901 px hoog.	Lage informatiedichtheid, veel scrollen en zwakke scanbaarheid.	Compactere marker, kaart, detailzone en verticale tussenruimte zonder informatieverlies.
P1	De ITWorx-credit stond in een wit, omkaderd vlak met relatief groot woordmerk.	De ontwikkelaarscredit concurreerde visueel met het productmerk en oogde als advertentie.	Maak de credit randloos, kleiner, minder verzadigd en secundair; VacatureRadar blijft primair.
P1	Meerdere tekstlinks hadden een klikhoogte rond 26 px.	Zwakkere muis- en touchbruikbaarheid, ondanks semantisch correcte links.	Secundaire actielinks krijgen minimaal 38 px interactiehoogte; primaire controls blijven 44 px.
P2	Op 1440 px gebruikt de filterconsole twee functionele rijen, maar de visuele groepering is zwak.	Zoeken, verfijnen en toepassen lezen als losse velden.	Behoud responsieve wrapping, maar versterk consolekaart, vaste gaps en consistente controlhoogtes.
P2	Dashboardkaarten hadden veel interne verticale ruimte en sterke schaduwen.	De feed werd zwaarder dan de intelligence-rail.	Compactere kaartpadding en gaps; schaduw uitsluitend als elevatiesignaal.
P2	De profielpagina benut slechts circa 1.040 px van 1.121 px beschikbare content.	Een enkel profiel voelt onbedoeld klein.	Bewuste brede compositie behouden, met illustratie als ondersteunend element en duidelijke primaire actie.
P2	Systeemstatus en acht pipelinefasen zijn op laptopbreedte informatief maar erg dicht.	Kleine labels vertragen scanbaarheid.	Pipeline behoudt interne horizontale overflow op klein scherm; statusmetadata groepeert in consistente kolommen.
P2	De UI bevat veel uppercase labels van 8–10 px.	Technische sfeer, maar zwakkere leesbaarheid op compacte of geschaalde displays.	Uppercase alleen voor korte metadata; body- en actietekst blijven minimaal 12–15 px.
P2	Bewegingsreductie dekte de radarillustratie, niet alle transities en entreeanimaties.	Onvolledige reduced-motionervaring.	Globale gereduceerde motion voor animatie, transitie en smooth scrolling.
P3	De accountnaam verschijnt zowel in de sidebar als in het menu; de topbar herhaalt productnaam en paginacontext.	Lichte redundantie, vooral op smaller desktop.	Sidebar blijft identiteit en navigatie; topbar blijft context, zoeken en systeemacties met compactere lock-up.
P3	Lange beheerpagina’s zijn inhoudelijk correct maar hebben weinig lokale navigatie.	Gebruikers verliezen sneller hun positie in bronnen en activiteit.	Compacte rijen, sticky context waar aanwezig en paginering blijven leidend; geen verborgen inhoud.

Uitgevoerde roadmap

1. Merkdiscipline — productlogo en favicon strikt scheiden van ITWorx-ontwikkelaarsbranding; credit visueel terugplaatsen.
2. Layoutfundament — één maximaal contentframe voor topbar en pagina, met voorspelbare ankers van laptop tot ultrawide.
3. Informatiereductie — dashboard terugbrengen tot vijf kernmatches en activiteit compacter maken.
4. Interactie en toegankelijkheid — secundaire klikdoelen vergroten en reduced-motion volledig maken.
5. Responsieve verfijning — alle kernroutes controleren op mobiel, laptop, desktop en ultrawide, in licht en donker.
6. Regressie en release — templatecontracten, volledige gate, live containerhealth en assetsmokes uitvoeren.

Acceptatiebewijs

• Browsermatrix: 50 combinaties over tien ingelogde routes op 390, 768, 1280, 1920 en 3840 px; geen documentoverflow of consolewaarschuwingen.
• Licht thema: dashboard en mobiele verkenner gecontroleerd; correcte thematokens, geen overflow en intacte filters.
• Authenticatie: login op 390 en 1440 px; één herstel-link, gescheiden labels, zelfstandig gerenderde lijniconen en correcte merkhiërarchie.
• Meetbare reductie: dashboard 2.399 → 1.838 px op 1440 px; kernmatches 7/8 → 5; activiteitgebeurtenis 268 → 242 px na cacheverversing.
• Repositorygate: Ruff, Django check, migratiecheck, 268 tests geslaagd, 2 optionele browsertests overgeslagen en 83,45% branch-aware dekking.