1

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!

modal options

4

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.

enter image description here

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:

enter image description here

|improve this answer|||||
  • Super helpful @mike-m ! I had never really noticed how the left space can be used for indicators as well, will keep that in mind :) – StarGirl May 8 '19 at 7:14
3

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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.

mockup

download bmml source

|improve this answer|||||
  • Good to know! I'm working predominantly with smaller modals, so I will stick with the second option – StarGirl May 8 '19 at 7:15
1

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.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.