feat(ui): stepper-flow met progressieve onthulling (3 stappen) (#19)#55
Merged
Conversation
#19: de app was één lange scrollpagina; testgebruikers verdwaalden. - Nieuwe ui/stepper.py: horizontale voortgangsindicator (Npuls-blauw=actief, groen ✓=voltooid, grijs=toekomstig). Pure step_status-helper (getest). - app.py onthult de stappen progressief via st.container + st.stop-gating: Data → Kolomtypes → Synthesizer → Genereren → Resultaten, met Vorige/Volgende. Na generatie tonen we alle secties zodat tweak + regenereren blijft werken. - Containers i.p.v. expanders als stap-wrapper (expanders mogen niet nesten). Geverifieerd met streamlit AppTest: volledige happy path (demo → genereren → resultaten met 3 tabs) zonder exceptions. Closes #19
…aten) 5 stappen bleek overkill: bij demo- en schone data deed de gebruiker niets in de oude stappen Kolomtypes en Synthesizer — die verplichte klikken waren puur excise. - Oude stap 2+3+4 samengevoegd tot één 'Genereren'-stap: kolomtypes en synthesizer zijn daar optionele verfijning (auto-detectie volstaat meestal); twijfelachtige type-suggesties komen vanzelf bovenaan. Resultaten = stap 3 (markeert het einde). - Demo-pad is nu Data → Volgende → Genereer → Resultaten. - Wizard-gating + Vorige/Volgende blijven; balk van 5 naar 3 labels. Geverifieerd met AppTest: volledige happy path zonder exceptions.
StevenRamondt
changed the title
De gestapelde reveal voelde niet als een wizard (alle stappen bleven onder elkaar) en resultaten markeerden het einde niet. Nu precies één stap zichtbaar: - datasource.render() geeft None terug i.p.v. st.stop(); de app bewaart de gekozen dataset in session_state['src'] zodat stap 2/3 'm niet opnieuw tekenen. - Stap 1 = data, stap 2 = genereren (kolomtypes + synthesizer optioneel), stap 3 = resultaten (markeert het einde, balk licht stap 3 op). Vorige/Volgende + 'Terug naar instellingen' vanuit resultaten; 'Naar resultaten →' als er al synthese is. - Terug naar stap 1 behoudt de dataset (uploadveld leeg = vervangen optioneel). Geverifieerd met AppTest: per stap alleen de juiste elementen zichtbaar (databron weg in stap 2, genereer-knop weg in stap 3), happy path zonder exceptions.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Wat
Golf 3, deel 1 van het UX-traject. De app was één lange scrollpagina; beide gebruikerstests toonden dat mensen stappen oversloegen en niet wisten hoeveel er nog volgde.
#19 — Stepper + progressieve onthulling (3 stappen)
ui/stepper.py: horizontale voortgangsbalk — ① Data laden → ② Genereren → ③ Resultaten. Npuls-blauw = actief, groen ✓ = voltooid, grijs = toekomstig.app.pyonthult de stappen via een wizard (st.container+st.stop-gating) met Vorige/Volgende.Waarom 3 en niet 5
Een eerdere opzet had 5 stappen (Data → Kolomtypes → Synthesizer → Genereren → Resultaten). Bij demo- en schone data deed de gebruiker in Kolomtypes en Synthesizer niets — die verplichte klikken waren puur excise en maakten de snelle route trager. Samengevoegd tot één Genereren-stap.
Ontwerp (ui-designer / ISGVO)
ui-designer-skill expliciet gedraaid. Probleem = oriëntatieverlies (Norman: uitvoeringskloof) + overweldiging (Miller); stepper = Zeigarnik. Navigatie via echte Vorige/Volgende-knoppen (Streamlit kan niet naar een sectie scrollen → klikbare balk zou nep-affordance zijn).Streamlit-constraint
st.expandermag niet genest worden en de config-functies maken zelf expanders → stap-wrappers zijnst.container(border=True).Tests & verificatie
step_status+ labels.AppTest: volledige happy path (demo → Volgende → Genereer → resultaten met 3 tabs + succesmelding) zonder exceptions.ruffschoon.Docs
docs/aan-de-slag.md: 3-staps flow beschreven.Closes #19