← EnergyViewEnergyView — samenhang in drie stappen
Methode en afbakening
De eerste nulmeting is vastgelegd vóór de UX-wijzigingen (baseline.json). Daarna zijn dezelfde volledig ingevulde, synthetische scenario’s op de oorspronkelijke commit a80f9aa en de nieuwe versie vergeleken. De oorspronkelijke versie is uitsluitend voor deze referentie opnieuw geopend; haar appcode is niet aangepast. De fixture vult 4.200 kWh elektriciteit, 17.000 kWh gas en een bestaand vast contract in. Het zonnepanelenscenario heeft 4 kWp en een auto van 3,7 kW. De eerste fixture miste manualMode voor gas; de definitieve vergelijking hieronder gebruikt aan beide kanten de gecorrigeerde fixture. Er zijn geen persoonlijke meetgegevens gebruikt.
Gemeten in echte Chrome, met een iframe-viewport van 360×640 of 1280×720. Hoogte en y-posities zijn documentcoördinaten, dus zonder voordeel van automatisch scrollen bij navigatie. Een veld telt alleen wanneer het zichtbaar is; apparaatkeuzes zijn knoppen en staan apart in de component. Uitklappers tellen alleen als hun summary zichtbaar is. De eerste baseline telde ook open structurele details-containers; de definitieve telling is gecorrigeerd. De screenshots zijn Chrome-viewportopnamen, uitgesneden tot het iframe; er is geen scherminhoud aangepast. Geen Lighthouse- of snelheidsclaim.
Alle stappen: voor en na
| Scenario | Breedte | Stap | Velden | Uitklappers | Scrollhoogte px | Schermhoogtes |
|---|
| Elektriciteit | 360 | 1 | 3 → 3 | 0 → 0 | 2610 → 2156 | 4.08 → 3.37 |
| Elektriciteit | 360 | 2 | 2 → 2 | 1 → 1 | 1793 → 1519 | 2.80 → 2.37 |
| Elektriciteit | 360 | 3 | 0 → 0 | 4 → 4 | 3672 → 3267 | 5.74 → 5.10 |
| Elektriciteit en gas | 360 | 1 | 4 → 4 | 0 → 0 | 2702 → 2242 | 4.22 → 3.50 |
| Elektriciteit en gas | 360 | 2 | 4 → 3 | 1 → 2 | 1968 → 1823 | 3.08 → 2.85 |
| Elektriciteit en gas | 360 | 3 | 2 → 2 | 5 → 5 | 5142 → 4606 | 8.03 → 7.20 |
| Zonnepanelen en auto | 360 | 1 | 4 → 4 | 0 → 0 | 2727 → 2246 | 4.26 → 3.51 |
| Zonnepanelen en auto | 360 | 2 | 2 → 2 | 1 → 1 | 1819 → 1518 | 2.84 → 2.37 |
| Zonnepanelen en auto | 360 | 3 | 0 → 0 | 4 → 4 | 3698 → 3267 | 5.78 → 5.10 |
| Gas | 360 | 1 | 3 → 3 | 0 → 0 | 2610 → 2156 | 4.08 → 3.37 |
| Gas | 360 | 2 | 2 → 2 | 1 → 1 | 1793 → 1495 | 2.80 → 2.34 |
| Gas | 360 | 3 | 2 → 2 | 4 → 3 | 3585 → 3251 | 5.60 → 5.08 |
| Elektriciteit | 1280 | 1 | 3 → 3 | 0 → 0 | 1676 → 1530 | 2.33 → 2.12 |
| Elektriciteit | 1280 | 2 | 2 → 2 | 1 → 1 | 1184 → 1101 | 1.64 → 1.53 |
| Elektriciteit | 1280 | 3 | 0 → 0 | 4 → 4 | 2366 → 2223 | 3.29 → 3.09 |
| Elektriciteit en gas | 1280 | 1 | 4 → 4 | 0 → 0 | 1768 → 1616 | 2.46 → 2.24 |
| Elektriciteit en gas | 1280 | 2 | 4 → 3 | 1 → 2 | 1359 → 1145 | 1.89 → 1.59 |
| Elektriciteit en gas | 1280 | 3 | 2 → 2 | 5 → 5 | 3440 → 3131 | 4.78 → 4.35 |
| Zonnepanelen en auto | 1280 | 1 | 4 → 4 | 0 → 0 | 1768 → 1620 | 2.46 → 2.25 |
| Zonnepanelen en auto | 1280 | 2 | 2 → 2 | 1 → 1 | 1184 → 1101 | 1.64 → 1.53 |
| Zonnepanelen en auto | 1280 | 3 | 0 → 0 | 4 → 4 | 2366 → 2223 | 3.29 → 3.09 |
| Gas | 1280 | 1 | 3 → 3 | 0 → 0 | 1676 → 1530 | 2.33 → 2.12 |
| Gas | 1280 | 2 | 2 → 2 | 1 → 1 | 1184 → 1077 | 1.64 → 1.50 |
| Gas | 1280 | 3 | 2 → 2 | 4 → 3 | 2406 → 2264 | 3.34 → 3.14 |
Conclusie en hoofdactie
| Scenario | Breedte | Conclusie y voor → na | Onderkant hoofdactie na | Binnen viewport |
|---|
| Elektriciteit | 360 | 1250 → 355 | 627.4 px | Ja |
| Elektriciteit en gas | 360 | 1250 → 355 | 627.4 px | Ja |
| Zonnepanelen en auto | 360 | 1275 → 354 | 626.8 px | Ja |
| Gas | 360 | Geen aparte antwoordkaart → 355 | 625.2 px | Ja |
| Elektriciteit | 1280 | 769 → 297 | 528.8 px | Ja |
| Elektriciteit en gas | 1280 | 769 → 297 | 528.8 px | Ja |
| Zonnepanelen en auto | 1280 | 769 → 297 | 528.8 px | Ja |
| Gas | 1280 | Geen aparte antwoordkaart → 297 | 528.8 px | Ja |
Voorheen was er geen hoofdactie in de antwoordkaart; daarvoor staat geen verzonnen y-waarde. Het doel is gebaseerd op het eerste knelpunt: de conclusie stond op mobiel rond 1.250 px en op desktop rond 769 px. In deze vier vaste scenario’s staan conclusie en volledige hoofdactie nu binnen 640 respectievelijk 720 px. Dit is geen garantie voor willekeurig lange leveranciersnamen, ingezoomde tekst of alle foutmeldingen.
Per werkstroom
1. Je woning: één permanente rij onder de navigatie, met mainContent als ouderelement in alle stappen. Dezelfde klassen blijven binnen ieder scenario behouden. De huidige en geplande apparaten zijn chips; de bestaande editor blijft via Aanpassen en Plannen bereikbaar. In stap 1 zijn Heb ik / Overweeg ik / Nee één component per apparaat. Geen nieuwe vermogensvelden toegevoegd: de bestaande editor bevat die al. 2. Contract: één kaart per energiesoort, automatisch naast elkaar of onder elkaar. Eén toegankelijk keuzeveld vervangt de zichtbare zoekveld-plus-selectcombinatie. De originele select, ID’s, opties en wijzigingshandlers blijven bestaan. Eén gedeelde maandkeuze bedient de bestaande maandvelden. Bij bewaarde verschillende maanden wordt dat uitgelegd; een ontbrekend product blijft door de bestaande beschermingslogica behouden. Zelfde leverancier vult alleen de leverancier in; bij meerdere producten kiest de gebruiker zelf. Eén Details van je contract per energiesoort; oude geneste gascontainer is een gewone sectie. 3. Instellingen: vaste onderwerpenlijst links op desktop, onderwerpenlijst met terugknop op mobiel. Standaardwaarden tonen geen herstelrij. Alleen afwijkingen tonen Aangepast en Herstel; herstel-alles verschijnt alleen bij afwijkingen. Klaar sluit de dialoog. Gewone prijskeuzes en Voor kenners zijn apart bereikbaar, met dezelfde originele controles. Uitleg blijft maximaal 140 tekens. 4. Resultaat: één antwoordkaart kopieert de bestaande resultaatteksten en bedragen; geen tweede berekening. De hoofdactie opent de bestaande contractdetails. Bij elektriciteit én gas is duidelijk dat de hoofdkaart over elektriciteit gaat en gas bij Contracten staat. Vier gewone ankerlinks geven toegang tot overzicht, contracten, woning/plannen en methode. De bestaande drie beste aanbiedingen plus Toon alle blijven. De twee uitlegblokken zijn samengebracht in Hoe is dit berekend. Dubbele gasmetrics staan bij de gasuitleg. Promotielabels en hun voorwaarden blijven bij de contracten; de volledige promotiecontrole blijft vindbaar. Investeringen blijven als eigen kaart na de eerste vergelijking. 5. Samenhang: stapkaart, woningrij en footer meten op desktop alle drie 1.050 px, tegenover 720 / 1.217 / 1.217 px. Op mobiel alle drie 313 px bij een viewport van 360 px inclusief scrollbar en paginaranden. Bestaande kleuren en lettertypes blijven lokaal; kaarten, knoppen en chips gebruiken dezelfde ontwerpwaarden. Alle CSS-fontgroottes blijven minimaal 14 px en er zijn nog steeds drie breedtegrenzen.
Oud → nieuw
| Oud | Nieuwe plek |
|---|
| Losse woningkaart onder stap 1/2 en voor het resultaat | Permanente woningrij onder de stappenbalk |
| Wat heb je vandaag + tekst Wat overweeg je | Eén apparaatkeuze met drie standen |
| Woningdetails en aankoopplannen | Aanpassen / Plannen in de vaste woningrij; bestaande editor |
| Zoekveld plus keuzelijst per energie | Eén keuzeveld met typen, pijltjestoetsen en Enter; oorspronkelijke select blijft onderliggend aanwezig |
| Elektriciteitsmaand en aparte gasmaand | Eén gedeelde tariefmaand boven de kaarten; bewaarde verschillen worden vermeld |
| Korting of andere tariefkaart + geneste gasuitklapper | Details van je contract per energiesoort |
| Weet je het niet in lopende tekst | Bestaande gewone knop Ik weet mijn contract niet |
| Standaard / Herstel standaard onder ieder veld | Alleen bij afwijkingen: Aangepast / Herstel |
| Onderwerpknoppen over twee rijen | Zijbalk desktop; lijst en terugknop mobiel |
| Zeven prijsvelden met paginering | Gewone keuzes + Voor kenners |
| Welke gegevens gebruiken we + Hoe wordt deze vergelijking berekend | Hoe is dit berekend bij het resultaat |
| Markt-, methode- en broninformatie vóór de conclusie | Uitleg onder de conclusie; actualiteit bij de footer en Bronnen en methode |
| Dubbele gasmetrics | Gasmethode, met de bedragen prominent in antwoordkaart en contractentabel |
| Investeringen | Eigen zichtbare kaart na contractvergelijking, plus vaste route via Plannen |
Geen bestaand element-ID verwijderd of dubbel gemaakt. Nieuwe IDs staan in de bron. De tien beschermde rekenmodules zijn met cmp byte-identiek gecontroleerd tegen de v281-referentie. De golden-referentie is niet aangepast.
Instellingen: metingen en bediening
Bij openen op mobiel: 11 → 8 zichtbare bedieningselementen; 2 → 0 invoervelden; dialoog 616 → 554 px. Je kiest eerst één onderwerp. Op desktop: 11 → 10 bedieningselementen, 2 → 2 invoervelden; dialoog 696 → 696 px. Voor een gewone instelling: één onderwerpklik op beide formaten; het eerste desktoponderwerp is meteen open. Instellingen openen is één extra klik vanuit de flow. De zes onderwerpen wrappen niet meer. Het aantal groepen blijft zes, er is geen geneste accordionstructuur.
Kwaliteit en verificatiegrenzen
De eerste UX-ronde telde 212 tests; na de aanvullende gasdetailscontrole telt de suite 213 tests (de opgegeven 207 was een oudere stand). De laatste volledige ronde slaagt met 213/213. Zie bijgevoegde logs voor de volledige runs. Golden: acht scenario’s geslaagd met identieke waarden, rangschikkingen en identifiers; beschermde bestanden byte-identiek. Lint: 737 bestaande diagnostics, nul nieuwe groepen. Typecheck: 487 bestaande diagnostics, nul nieuwe groepen. Formatcontrole geslaagd. Pages, Worker en Home Assistant zijn gebouwd; deployment-source controleert de reproduceerbare bronkoppeling.
Axe wcag2a/aa inclusief kleurcontrast: nul overtredingen op de drie stappen en instellingen, op beide breedtes (acht controles). Contractkeuze met typen, pijltjestoetsen en Enter, maandwissel met behoud van product, en een instelling wijzigen/herstellen/Klaar zijn werkelijk in Chrome bediend. ID-behoud is apart gecontroleerd. Broncode- en CSS-tests zijn aangevuld voor de drie apparaatstanden, vaste woningrij en alleen bij wijziging zichtbare herstelacties.
Niet geverifieerd: Safari/iOS, Firefox, fysieke Android-toestellen, echte Home Assistant-dashboard-interactie en een nieuwe live Cloudflare Pages-uitrol. De bestaande rapport-CSP, sandbox, framing, curvebeleid en investeringsregels zijn niet gewijzigd. Er is geen gebruikersonderzoek uitgevoerd en geen nieuwe performanceclaim gedaan. Niet elk instellingsveld, elke dropdownoptie, elke afwijkende contractnaam en ieder foutpad is handmatig bediend. De meetfixture en scripts staan in scripts/ux/cohesion* voor herhaling.
Herhalen
Voer npm ci uit en daarna node scripts/ux/cohesion-prepare.mjs. Start de normale lokale preview en open /.qa/cohesion.html uitsluitend op een testomgeving. De laadknop vervangt daar de opgeslagen invoer door synthetische gegevens. Kies scenario en breedte; navigeer met de gewone appknoppen en klik Meet huidig scherm. De verborgen output bevat JSON; Controleer toegankelijkheid voert lokale axe uit. Gebruik dezelfde brondata en fixture voor beide versies. Screenshots worden pas na een actuele schermwaarneming vastgelegd. Deze testpagina en axe worden niet in de gebruikersapp gebouwd.
Beslissingen
Voor deze presentatieverbeteringen is geen reken- of beleidsbeslissing nodig. De eerder openstaande keuzes over curve-coulance, investeringsaannames en framing blijven ongewijzigd. De novemberpublicatie blijft expliciet tijdelijk: oktober-leverancierstarieven met de november-prijscurve, totdat de gebruiker echte novembertarieven aanlevert.
Extra contractcontrole — 4 november 2026
De aanvullende Chrome-controle vond nog één geneste uitklapper bij de korting op het huidige gascontract. De eerdere omschrijving van één niveau was voor dit onderdeel nog niet volledig gerealiseerd. De overbodige binnenste uitklapper is nu een gewone sectie binnen Details van je contract. De oorspronkelijke invoervelden, IDs, attributen en wijzigingshandlers blijven behouden. Er is geen prijs- of selectieregel aangepast; app.js is byte-identiek aan de vorige release.
Aanvankelijk leek de melding over een ontbrekende elektriciteitskorting verouderd. De eerste test had de invoer echter nog niet als een gebruiker bevestigd. Met echte toetsenbordinvoer en Tab werkt de bestaande melding correct. Een voorlopig toegevoegde verversingsaanroep is daarom verwijderd; de oorspronkelijke kortingslogica blijft ongewijzigd.
Extra werkelijk bediend in Chrome:
- Een gedeelde maandwissel november → oktober behoudt beide gekozen Bolt Vast-producten en wijzigt beide oorspronkelijke maandvelden.
- Gaskorting 0,5 c€/kWh ingevoerd met het toetsenbord; na Resultaat → Je contract blijft de korting 0,5 en de buitenste detailuitklapper open. Onder deze uitklapper zijn nul geneste details-containers over.
- Zelfde leverancier voor gas vult de leverancier in. Een bewust gekozen ander product krijgt niet de korting van het vorige product. Terugkeren naar het oorspronkelijke product toont opnieuw de opgeslagen 0,5 c€/kWh.
- Vier apparaatkeuzes op Overweeg ik blijven geselecteerd en laten de gebruiker in stap 1. De vier plannen verschijnen in de woningrij.
- Elektriciteitskorting 0,234 c€/kWh plus € 50 vaste korting toont na bevestiging de passende toelichting.
Een nieuwe regressietest gebruikt de bestaande kortingshandler en bewaart de renderrelatie. Een structurele DOM-test controleert dat het vlak maken dezelfde input-objecten en hun listeners bewaart. Dat is geen browsermeting; de bovenstaande bediening is afzonderlijk in Chrome uitgevoerd. De volledige suite telt nu 213 tests. Definitieve logs en nieuwe schermafbeeldingen staan in het bijgewerkte bewijsdossier. De eerdere meettabellen blijven de historische metingen van de eerste UX-ronde; er is voor deze kleine correctie geen nieuwe volledige 24-scenario-meting of snelheidsclaim gedaan.