Consistente links uitgelijnde buttons en flexibele stylingopties voor formulieren

[Ollie-nl]

Thema / Theme

Frontend

Omschrijving / Description

Doel
Als organisatie willen we buttons consistent links kunnen uitlijnen, en hun volgorde en stijl flexibel kunnen aanpassen. Zo kunnen we toegankelijke en gebruiksvriendelijke formulieren bieden voor al onze bezoekers.

Probleem

• Toegankelijkheid
  Gebruikers met kokervisie verwachten dat buttons aan dezelfde kant zijn uitgelijnd als andere formuliercomponenten. De huidige rechts uitgelijnde knoppen zijn moeilijker te vinden, vooral op brede schermen.
• Consistentie
  Gebruikers die inzoomen of kleine schermen gebruiken, ervaren een rommelige en inconsistente presentatie doordat knoppen niet logisch uitlijnen.
• Verwarring
  De huidige styling en kleurgebruik kan leiden tot verwarring, wat gebruikers met keuzestress afschrikt of doet afhaken.
• Beperkingen
  Het ontbreken van flexibiliteit in knopvolgorde en styling belemmert formulierbouwers bij het maken van optimale, contextspecifieke ontwerpen.

Wensen

• Links uitlijnen van buttons
  Knoppen consistent links uitlijnen, direct onder de invoervelden. Dit creëert een duidelijke visuele hiërarchie en verbetert de toegankelijkheid.
• Flexibele stylingopties:
  Formulierbouwers moeten eenvoudig de stijl van buttons kunnen aanpassen, bijvoorbeeld:
  Primary (meest prominente actie)
  Secundaire actie
  Subtle (minder prominente actie)
  Button als link (niet visueel als knop)
  Toevoegen van eigen class
• Aanpasbare knopvolgorde:
  Knoppen in een logische volgorde plaatsen (bijv. eerst “Voltooien”, daarna “Later verder”), waarbij minder prominente acties lager gepositioneerd worden.
• Optie om knoppen te verwijderen:
  Bijvoorbeeld in situaties waar een “Annuleren”-knop niet wenselijk is, om gebruikersfocus te behouden.

Added value / Toegevoegde waarde

Waarom links uitlijnen?

Duidelijk pad naar voltooiing: Links uitgelijnde knoppen volgen de natuurlijke leesrichting en verminderen de cognitieve belasting.
Verbeterde toegankelijkheid: Links geplaatste knoppen zorgen ervoor dat gebruikers met kokervisie of vergrotingstools niet horizontaal hoeven te scrollen of knoppen missen.
Minimaliseert fouten: Minder prominente knoppen, zoals “Stoppen”, onder de primaire knop plaatsen voorkomt frustratie door onbedoeld annuleren.

Aanvullende opmerkingen / Additional context

Gerelateerde issues

OpenForms Embed: knoppengroep om door het formulier te naviegeren aanpassen naar een overzichtelijker geheel #615

Linkjes
Adam Silver: Formulierknoppen
UX Design: Knopplaatsing
NL Design System: Formulieren uitlijnen
Luke Wroblewski: Knopvolgorde

[sergei-maertens]

Refinement: ideally we'd like to make this change in our markup and our own Open Forms theme, in hopes that other organizations will also accept this, but we need to anticipate that some might really not want this and need an escape hatch (with an open forms design token?)

[JeroenduC]

Watching this issue with great interest. From the User Research we did we really noticed that a proper outlining of the buttons helps with accessibility and usability of the form.

[MariekeBrouwer]

Great and valid points concerning the accesibility as well and according to user research:)

In addition to the existing styling options, a manual configuration option has now been introduced in the general open forms. However, various button elements should also be editable, including: text color, border color, button color, border width, and button radius. This flexibility will ensure the buttons are usable across a variety of municipalities (preferably while maintaining compatibility with the NL Design System library).

Currently, the 'uitloggen' (log out) button is defined as an error button. Ideally, this should be replaced with one of the button types suggested by René, to better reflect the prominence and usage of the action. For instance, continuing an action is generally more important than logging out.

As an additional example, the 'opslaan en later verder gaan' (save and continue later) button may not be very useful in extremely short forms. Therefore, we also support the option to remove buttons where they improve the user flow / focus.

[sergei-maertens]

Please note that we already support disabling the pause button, as there are indeed use cases where this distracts. Some items in this issue require code changes, others will be dismissed because it's already possible to reach the desired goal.

E.g. styling the buttons is possible already, but we do realize this is far from a pleasant UX to create/modify the theme.