Company
ServiceNSW
Year
2021
Type
Design System
Button alignment and ordering
I delved into the comparative review of Design Systems, and one notable focal point emerged—button grouping. Many designers seek clearer guidance on arranging buttons, like the positioning of "Next" and "Cancel." Questions arise: left and right, right and left, or perhaps right and underneath? This dilemma extends to other scenarios, be it the sequence of "Back" and "Next" in straightforward transactions, modals, or handling impactful actions like deleting an account.
The primary objective of this project is to offer guidance exclusively, placing a heightened emphasis on practical examples of usage.
Discovery
I ran into a bunch of issues working on this project, mainly with buttons not lining up the same way across different teams. We definitely need to figure out a solution for where and how buttons should be aligned and ordered.
Learning from other design systems
I love studying how big companies design things. Microsoft, Atlassian, and even the US and UK governments have these amazing design systems. I watch videos from Nielsen Norman too. They're like guides for making things look good and work well. While adopting elements that resonate with our specific needs, these experiences have been instrumental in crafting a design framework that seamlessly aligns with our project goals.
.png)
The order of grouped buttons differs depending on which type of layout we are designing. The most important thing we must consider for button grouping and ordering is that we are consistent with how they are placed.
There are two distinct patterns when it comes to the placement of buttons:
-
F-pattern
-
Z-pattern.
Button order preference changes between form page layouts and cards, versus modals, progress steppers and dialogue boxes.
Guidance
Forms
We left-align button groups in forms and cards.
Users scan page-level content in an “F” flow and because most of the page content is already left-aligned.
Aligning a prominent primary action with the path to completion (directly below the last question answered) lets people know they can and should move forward.
Order the buttons primary-to-secondary, from left-to-right.
Rationale: this follows the “natural” reading order (for western-languages) and increases the completion rate.
Destructive alternative
Use a secondary action as a link style button to clearly distinguish it from the primary destructive action such as Delete account. This has been proven to reduce interactions in error. If presented as a standard button type, they often get clicked in error.
Progress stepper, modals and dialogue boxes
Align the buttons to the right and primary on the right.
There is a difference in how our eyes scan information when viewing information contained in progress steppers, modals and dialogue boxes. This is called the “Z” pattern (see the “Gutenberg Diagram”). When we ask a user to progress through a series of steps or we are using a modal to grab their attention, the primary action traditionally sits at the bottom right. Placing the primary button last improves the flow because the layout "ends" with its conclusion.
Progess stepper
There are two options to consider using when placing the button groups in progress steppers (with the primary on the right on both occasions):
-
close together and right-aligned
-
Or either side of the page.
Modals and dialogs
