feat: Start-align Dialog buttons and place the primary button first

[VincentSmedinga]

The conclusion of our research is to put the primary button first in a Dialog while still aligning them to the end of the line. See our ticket in Jira for Bas’ writeup.

I’ve implemented this with CSS that stacks the buttons vertically and stretches them if they don’t fit next to each other – so without a breakpoint 🎉

I documented the guideline as well.

[VincentSmedinga]

Previous description:

We’re still considering this; posting a PR to get a deployment to evaluate.

Even if we don’t follow through with the interaction design, we should merge the documentation improvements.

See also:

• OK-Cancel or Cancel-OK? The Trouble With Buttons – https://www.nngroup.com/articles/ok-cancel-or-cancel-ok/
• “primary-to-secondary from left-to-right wins!.. but not by much” – https://medium.theoremone.co/button-ambiguity-alignment-order-a42736e25334
• Gov.uk (old) left-aligned time-out modal – Modal dialogue alphagov/govuk-design-system-backlog#30 (comment)
• “Left is my preference too, mainly to maintain consistent button alignment across forms and dialog boxes” – https://twitter.com/AdhamDannaway/status/1415444582720888832
• “[Buttons to the right] is much more common. However not on Windows” – https://twitter.com/vponamariov/status/1717445421188964659

[alimpens]

Hm, this feels a bit off for me because of the 'right is next' convention of LTR languages, but I don't know how strong that convention is.

NLS recommends aligning the submit button in a form to the left, to create a natural scan line. Isn't that also relevant here? A dialog is sort of form-like.

[VincentSmedinga]

Hm, this feels a bit off for me because of the 'right is next' convention of LTR languages, but I don't know how strong that convention is.

NLS recommends aligning the submit button in a form to the left, to create a natural scan line. Isn't that also relevant here? A dialog is sort of form-like.

You’re mixing up forms and dialogs here.

Forms in dialogs are against our design guidelines. We will only use dialogs for simple confirmations, warnings or information. They will either have 1 button ‘I understand’, or 2, coming down to ‘Yes’ and ‘No’. In these contexts, having the primary action as the first one is logical when reading, listening and focusing.

Forms or other flows with multiple steps will be on a regular page and have their own rules for button placement – basically ‘Previous’ aligned to the left and ‘Next’ to the right.

[alimpens]

You’re mixing up forms and dialogs here.

No, not really. I'm just saying the guidelines on forms seems relevant here as well. Having a single scan line and having the button more visible for users that zoom in seem relevant for this case too.

Forms or other flows with multiple steps will be on a regular page and have their own rules for button placement – basically ‘Previous’ aligned to the left and ‘Next’ to the right.

This probably won't be the button placement, based on the guidelines I linked. Both 'Previous' and 'Next' will be left-aligned. My point is that that same alignment makes sense here imo, and it also makes our overall button alignment more consistent.

[VincentSmedinga]

You’re mixing up forms and dialogs here.

No, not really. I'm just saying the guidelines on forms seems relevant here as well. Having a single scan line and having the button more visible for users that zoom in seem relevant for this case too.

Sorry for my misunderstanding. What change do you suggest for this PR?

Forms or other flows with multiple steps will be on a regular page and have their own rules for button placement – basically ‘Previous’ aligned to the left and ‘Next’ to the right.

This probably won't be the button placement, based on the guidelines I linked. Both 'Previous' and 'Next' will be left-aligned. My point is that that same alignment makes sense here imo, and it also makes our overall button alignment more consistent.

That would be fine as well – what I really meant was that form button alignment is out of scope here; shouldn’t have mentioned the explicit example. Let’s discuss that in that future PR.

[alimpens]

Sorry for my misunderstanding. What change do you suggest for this PR?

I suggest left-aligning the buttons. That way, the primary button is visually more 'anchored', and it has the 2 benefits mentioned in the NLDS guidelines on button placement in forms.

[VincentSmedinga]

I suggest left-aligning the buttons.

Ah! Only now I understand what you aimed for with your first comment.

Bas did consider this, but decided to follow e.g. this article and right-align buttons in dialog specifically. Have you read the accompanying ticket in Jira? Let’s follow up there or face to face :)