docs: complete Stitch frontend replacement
This commit is contained in:
Jens
+39
-143
@@ -1,171 +1,67 @@
|
||||
# UX-specificatie
|
||||
|
||||
## 1. Ervaringsprincipe
|
||||
## Ervaringsprincipe
|
||||
|
||||
VacatureRadar voelt niet als een zoekmachine maar als een rustige persoonlijke inbox. De gebruiker ziet eerst beslisbare informatie en pas daarna technische details. Bronbeheer en parserproblemen blijven beschikbaar, maar domineren de dagelijkse flow niet.
|
||||
VacatureRadar is een persoonlijke intelligence-cockpit: eerst beslisbare informatie, daarna bewijs en technische details. Het product claimt alleen wat uit echte vacatures, scores, bronruns en gebruikersacties kan worden afgeleid. Ervaring en senioriteitslabels zijn context, nooit een blokkerende scorefactor.
|
||||
|
||||
## 2. Informatiearchitectuur
|
||||
## Informatiearchitectuur
|
||||
|
||||
Hoofdnavigatie:
|
||||
De desktopnavigatie groepeert:
|
||||
|
||||
1. **Vandaag** — beste matches en kernstatus;
|
||||
2. **Vacatures** — volledige doorzoekbare lijst;
|
||||
3. **Sollicitaties** — dossiers en opvolging;
|
||||
4. **Profiel** — voorkeuren en drempels;
|
||||
5. **Bronnen** — source health en retries;
|
||||
6. **Systeem** — health, versies en beheercontext.
|
||||
1. Overzicht;
|
||||
2. Nieuwe matches en het volledige vacaturearchief;
|
||||
3. Skillsradar;
|
||||
4. Sollicitatiepipeline;
|
||||
5. Werkgeversradar;
|
||||
6. Zoekprofiel;
|
||||
7. Bronnen;
|
||||
8. Automatisering;
|
||||
9. Activiteit.
|
||||
|
||||
Op mobiel wordt dit een compacte uitklapbare navigatie; primaire vacatureacties blijven binnen duimbereik.
|
||||
Mobiel blijven Overzicht, Matches, Pipeline en Profiel in de vaste tabbar; alle routes blijven bereikbaar via de toegankelijke drawer.
|
||||
|
||||
## 3. Dashboard “Vandaag”
|
||||
## Schermgedrag
|
||||
|
||||
### Doel
|
||||
### Overzicht
|
||||
|
||||
Binnen 30 seconden weten of er iets relevants is.
|
||||
Toont echte dag-KPI's, beste recente radarselectie, dagconclusie, open opvolging, recente auditgebeurtenissen en bronstatus. Beste matches zijn visueel dominant; onbekende trends worden niet gesimuleerd.
|
||||
|
||||
### Volgorde
|
||||
### Vacatureverkenner en detail
|
||||
|
||||
1. paginatitel + korte samenvatting;
|
||||
2. KPI's: nieuwe vandaag, actieve vacatures, open dossiers, ongezonde bronnen;
|
||||
3. kaarten, descending score;
|
||||
4. lege toestand met concrete uitleg;
|
||||
5. subtiele link naar alle vacatures/bronnen.
|
||||
De verkenner combineert serverfilters, sortering, actieve filterchips, paginering en op breed scherm een geselecteerd intelligencepaneel. Standaard worden alleen aantoonbaar IT-relevante, niet hard uitgesloten vacatures getoond. Het volledige bronarchief blijft expliciet bereikbaar.
|
||||
|
||||
### Matchkaart
|
||||
Het detail scheidt matchscore, recommendation en datakwaliteit; toont componentbewijs, positieve signalen, concerns, skills, vacaturetekst, provenance, bronnen, versies en dossierstatus. Externe bronlinks zijn veilig en nooit een automatische sollicitatie.
|
||||
|
||||
Boven de vouw:
|
||||
### Sollicitatiepipeline
|
||||
|
||||
- recommendationlabel;
|
||||
- score als `86/100` en confidence apart;
|
||||
- functietitel;
|
||||
- werkgever;
|
||||
- locatie + werkvorm;
|
||||
- maximaal twee kernpluspunten;
|
||||
- maximaal één belangrijkste concern;
|
||||
- acties: bekijken, interessant, bewaren, verbergen, gesolliciteerd.
|
||||
Kanban is de visuele standaard; de lijstweergave en statusselectie zijn de toegankelijke fallback. Statuswijzigingen zijn echte CSRF-beveiligde POST-acties en schrijven een tijdlijnevent. Dossieredit toont snapshot, contact, notities, documentenstatus en activiteit.
|
||||
|
||||
Regels:
|
||||
### Zoekprofiel en skillsradar
|
||||
|
||||
- geen score zonder label/uitleg;
|
||||
- onbekende data als “Niet vermeld” of “Nog niet berekend”;
|
||||
- hard uitgesloten jobs niet op Vandaag;
|
||||
- dubbele aliassen niet als aparte kaart.
|
||||
De configurator groepeert profielbasis, rollen, technologiesignalen, regio, werkvorm en overige voorkeuren. Postcode volstaat; gemeente en coördinaten komen uit de gelicenseerde lokale dataset. Rollen en skills zijn selecties/checkboxes, geen ruwe JSON. De preview gebruikt de laatste echte score en revisiehistoriek.
|
||||
|
||||
## 4. Vacaturelijst
|
||||
De skillsradar toont vraagvolume, profieldekking, expliciet skillveldbewijs versus tekstsignalen en niet-blokkerende leerkansen.
|
||||
|
||||
Filters:
|
||||
### Bronnen en automatisering
|
||||
|
||||
- vrije tekst;
|
||||
- relevantiefocus: standaard aantoonbare IT-titels, met expliciet volledig bronarchief;
|
||||
- radarselectie: standaard geen harde uitsluitingen of verborgen score, met aparte inspectiefilters;
|
||||
- status;
|
||||
- recommendation/scoreband;
|
||||
- werkvorm;
|
||||
- regio;
|
||||
- werkgeverstype;
|
||||
- feedbackstatus.
|
||||
Bronnen tonen policy en operationele status apart, plus laatste run, volgende planning, parser, tellingen, retry, imports en gebruikersgescopeerde platformmailboxen. Directe crawling van denylistplatformen blijft verboden.
|
||||
|
||||
Desktop gebruikt een compacte filterbalk; mobiel een disclosurepanel. Filters blijven in querystring zodat bookmarks en back navigation werken.
|
||||
Automatisering toont de echte 24-uursketen, database/readiness, bronruns, scoring en notificaties. Worker-, AI- of browserstatus wordt als niet gemeten/niet geconfigureerd gelabeld wanneer geen betrouwbare probe bestaat.
|
||||
|
||||
De standaardvolgorde is persoonlijke matchscore, niet importtijd. Niet-IT-inhoud wordt niet
|
||||
verwijderd: ze blijft uitsluitend via `Volledig archief` bereikbaar. Een beschrijvingshit alleen
|
||||
mag nooit een niet-IT-titel promoveren.
|
||||
### Activiteit en werkgevers
|
||||
|
||||
Tabel of kaarten kiezen op breedte. Geen horizontale scroll voor kernvelden.
|
||||
Activiteit is een gepagineerde, filterbare tijdlijn uit bronruns, vacatureversies, feedback, dossiers, notificaties en profielrevisies. Persoonlijke events zijn gebruikersgescopeerd.
|
||||
|
||||
## 5. Vacaturedetail
|
||||
Werkgevers combineert genormaliseerde werkgever-, vacature-, score-, bron- en dossierdata in een index/detailervaring. Sector, contact of marktclaims worden niet verzonnen.
|
||||
|
||||
Secties:
|
||||
## States en copy
|
||||
|
||||
1. titel, werkgever, status, canonical link;
|
||||
2. score-overzicht met componenten;
|
||||
3. “Waarom aanbevolen” en aandachtspunten;
|
||||
4. harde uitsluitingen indien via directe link geopend;
|
||||
5. vacaturetekst (gesanitized);
|
||||
6. voorwaarden/skills/locatie;
|
||||
7. bronnen en provenance;
|
||||
8. wijzigingshistorie;
|
||||
9. sollicitatiestatus/notities.
|
||||
- Empty: verklaart waarom en biedt één relevante vervolgstap.
|
||||
- Unknown: “Niet vermeld”, “Niet gemeten” of “Niet geconfigureerd”.
|
||||
- Error/partial/stale: toont impact en een veilige retry waar ondersteund, nooit een stacktrace.
|
||||
- Success: servermessage in een `aria-live` toast en blijvende nieuwe toestand.
|
||||
- Copy is Nederlands, direct en niet-oordelend: “Mogelijke match” en “Niet teruggevonden” in plaats van absolute geschiktheidsclaims.
|
||||
|
||||
Bronbewijs wordt technisch maar scanbaar getoond: veld, methode, confidence, excerpt en bron.
|
||||
## Responsiveness
|
||||
|
||||
## 6. Profielwizard/editor
|
||||
|
||||
De eerste onboarding wordt in maximaal vijf logische stappen opgezet:
|
||||
|
||||
1. rollen en ongewenste titels;
|
||||
2. skills en ongewenste verplichte skills;
|
||||
3. regio, afstand en werkvorm;
|
||||
4. contract en employerpreferences;
|
||||
5. digest en samenvatting.
|
||||
|
||||
De bestaande editor mag één pagina blijven voor MVP, maar groepeert velden visueel en geeft voorbeeldsyntax. JSON mag in de interne modelvorm bestaan; de eindgebruiker ziet uiteindelijk chips/checkboxes, geen ruwe JSON.
|
||||
|
||||
Opslaan toont:
|
||||
|
||||
- welke harde regels actief zijn;
|
||||
- scoregewichten in begrijpelijke labels;
|
||||
- profielversie;
|
||||
- mogelijkheid om learning uit/reset te zetten.
|
||||
|
||||
## 7. Bronnen
|
||||
|
||||
Bronkaart/-rij toont:
|
||||
|
||||
- naam en domein;
|
||||
- type;
|
||||
- policy en operationele status apart;
|
||||
- laatste succes/fout;
|
||||
- volgende run;
|
||||
- parser/confidence;
|
||||
- laatste tellingen;
|
||||
- retryknop indien policy niet deny.
|
||||
|
||||
Kleur is nooit de enige indicator. `deny`, `review`, `quarantined` hebben tekst en icoon/patroon.
|
||||
|
||||
## 8. Sollicitaties
|
||||
|
||||
Kanban is niet noodzakelijk. Een duidelijke lijst met status, werkgever, functie, applied date, follow-up date en eerstvolgende actie is beter voor laag volume.
|
||||
|
||||
Dossierdetail/editor bevat:
|
||||
|
||||
- immutable vacaturesnapshot;
|
||||
- huidige bronlink/status;
|
||||
- contact;
|
||||
- notities;
|
||||
- documentenmanifest;
|
||||
- tijdlijn van statuswijzigingen (backlog);
|
||||
- opvolgdatum.
|
||||
|
||||
## 9. Meldingen
|
||||
|
||||
Digestcopy:
|
||||
|
||||
```text
|
||||
2 sterke matches
|
||||
4 mogelijke matches
|
||||
11 automatisch uitgesloten
|
||||
1 opgeslagen vacature sluit binnenkort
|
||||
```
|
||||
|
||||
Elke vacature heeft titel, werkgever, locatie, score, twee redenen, één aandachtspunt en originele link. Geen volledige vacaturetekst in mail.
|
||||
|
||||
## 10. States
|
||||
|
||||
Iedere pagina specificeert:
|
||||
|
||||
- loading: alleen nodig bij async enhancement; serverrender toont normale response;
|
||||
- empty: leg uit waarom en geef één relevante actie;
|
||||
- error: concrete fout + veilige retry, geen stacktrace;
|
||||
- partial: bron/resultaten beschikbaar met warning;
|
||||
- stale: toon laatste succesvolle tijd en dat vernieuwing faalde;
|
||||
- unauthorized: login en geen informatielek.
|
||||
|
||||
## 11. Copyrichtlijnen
|
||||
|
||||
- Nederlands, direct en niet-oordelend;
|
||||
- “Mogelijke match” in plaats van “Je bent geschikt”;
|
||||
- “Niet teruggevonden” in plaats van “Je mist”;
|
||||
- “Rechtstreekse werkgeversbron” in plaats van absolute garantie;
|
||||
- percentages alleen wanneer betekenis duidelijk is;
|
||||
- technische bronfout in beheer, eenvoudige impacttekst op dashboard.
|
||||
Desktop bewaart de Stitch-kolomverhoudingen. Tablet stapelt intelligence-rails onder de hoofdtaak. Mobiel herschikt kaarten en forms; wide data gebruikt een lokale scroller. De browsermatrix omvat 360×800, 390×844, 768×1024, 1024×768, 1280×800, 1440×900 en aanvullende 1920/2560px-controles.
|
||||
|
||||
Reference in New Issue
Block a user