Proximity of main action buttons in a form – close together or far apart?

[tim0]

Hi folks,
This matter has reared it’s muddled head in the last few places I have worked as a UX designer – the location of the “next” and “previous” buttons at the bottom of a form (this could also be a set of “cancel” / “okay” buttons in a modal). I have come across a few UX designers who insist they must be placed as far apart as possible, for safety’s sake. The rationale is you don’t want the user to accidentally press the wrong one. I agree there should be sufficient spacing, however I feel like placing them far apart goes against the Gestalt principles of proximity. Think of the accelerator and brake pedals of an automobile – pressing the wrong one could be disastrous – even fatal, however they are close together.
My theory is having the buttons far apart increases the cognitive load as the user needs to scan the page to find both. My problem is I have never had a way to prove this theory – I have never worked somewhere with the resources to A/B test something like this. Has anyone had experience in this matter or know of any usability tests / experiments? I’m happy to be proven wrong!

Refer to the image, and you will see what I mean!

[HassamAli7]

Hi Tim,

I like the point that you have made and I somehow agree with your theory. I want to add to your point, UX is not just based on UI it also depends on the flow and back-end functionality. My point is that placing buttons close to each other, why would it matter if data does not get lost? I believe that most of the times, it is a good UX to save user’s fillings except for payments or passwords (upon user’s consent), specifically in forms. So, even if user clicks it by mistake he/she can always click to land back on same page again, yes an extra click but that is why we place “next or back” buttons. Further, if we place buttons farther to each other, then I agree user would have to scan the page, plus it might not look decent. Decisions buttons should be placed near each or at some decent close distance to save time for user.

Again we are talking about forms, so I back your point here. I remember we were taught a principle of closest or most usable thing are placed near each others, along with disadvantage with an example of Russian nuclear warning (if I remember clearly), where lad pressed the wrong button/handle because he could not decide under panic as handles were placed right next to each other and looked same. So, another point is, it will depend on the type of form or content, i.e. domain.

I created and emergency administrator panel for using pervasive displays for communication during emergency. I along with my supervisor and PhD Student, conducted a questioners based research with domain relevant persons. Interestingly, they were not worried about the distance or placement of different selection buttons (Priority of emergency low, medium and high) unless they are quietly distinguished with colors.

So again, I think it all depends on domain and might vary with different users, but to me, UX is not just about UI and with well backed-up functionality for user flows, buttons should be kept near to each other in general.

[tim0]

Thanks for replying Hassam, that’s a great case study. This is a government site, so I think the decision to split the buttons so far apart was to cater to users with very low computer proficiency. It seems I am not in a position of influence here, it is how it has been implemented on many NSW government sites – so I’ll have to live with it. Hopefully at some stage I will be able to observe some screen recordings and watch mouse movements or eye tracking.

[HassamAli7]

You are always welcome Tim. I think government websites are always exception and should be as there will be def all types of users and frequent or major UX changes might not be as helpful as we think, at least, for the purpose of government. Now I just remembered when I was filling my VISA application and I did pressed a confusing button with wrong check mark. But again, there was no “save data” option back then, and I suffered like 10 working days to correct that. Though I was the first time user on VISA application form, but yes, there will be users like me who will check mark and submit and rethink about it to change. I should say, this is quite interesting point, rather than UI, a more secure temporary data saving technique might improve the UX.