I am currently working on modals for our software and I have been placing the 'Cancel' button always on the extreme left (Version A in picture). However while documenting myself more on modals, I discovered that most websites seem to put the buttom closer to the primary button found on the right (Version B in picture). Is there a specific usability reason why the second option is more adopted? I am unsure whether I should keep Version A or not. Thank you to anyone who will answer!
Besides visually grouping together for users to see available actions in proximity, space in the button bar can be reserved to separate destructive actions, or indicate status.
Besides the more common patterns of keeping functions together to quickly see available actions (and not have to look way left, then way right), the space available in the button bar can be used for status updates, or for placing destructive actions.
Reserving space for destructive actions:
You'll find patterns where if there's a Delete button, it's purposely placed away from the more common actions.
Reserving space for status indicators:
Some systems that use dialogs for editing, but have large properties, tabs, etc. keep space in the button bar reserved for a status indication: how much / what will be updated upon Save:
Both are correct, but it depends!
If it is a big modal, and Cancel is a destructive action, place it away!
In a big modal where users need to fill out a considerable amount of data, hitting Cancel by mistake is very damaging.
While for a small modal, where hitting Cancel by mistake results in a minimal damage, follow the common approach and keep them in a close proximity.
Of course B:
The shorter the user's travel on the screen, the better the interface design!
Fitts's Law summarises it:
Designers should aim to make objects as close to one another when they are used in the same sequence chain. They should also try to make the interactive elements of the screen as large as is sensible with the amount of space available. Small objects spread apart take the longest time to select; avoid this combination of design features as much as possible.