Buttons Alignment Policy
By: Maksim Say-Fo
Tags: Usability, User Experience Design, UI Design, User Interface, UX Design

The right-aligned buttons pay off in complicated web forms with evenly distributed input fields, checkboxes, radio buttons, and other elements. In other words, right alignment for a submit buttons should be used if user scan your form from left to right (and only after — from top to bottom) or if the button indicates that there is the next step in this particular scenario (e. g. “Next” or “Continue” button).

Example of appropriate usage of aligns: right. Red circles represent user focus

But very commonly designers use this pattern without any hesitation and analysis which is definitely no good. I’m sure that you’ve seen plain login forms with couple inputs and a submit button placed on the right.

My point is that in most cases you should consider putting your buttons on the left side by default (as it is actually — according to HTML/CSS rules). Especially if you’re working on a small project. I put together a few reasons why below.

Advantages of left alignment

Simple forms lined up in one column or in F-pattern are easier to read. Users move down the form in one visual direction and submit button aligned left closes the journey. It may seem that this case stands in contradiction with the one previously mentioned (that right-aligned button closes the form), but it’s not. The major thing here is the reading pattern — the way users scan your page or form. So, basically, if you organize your content in F-pattern you should use left alignment for your buttons to reduce the mental effort for users navigating through your form. Additionally for us as a designer it means that we can have more control over the viewer’s eye moves across the screen.

High-speed journey’s on the left and a little stumble’s on the right

Left alignment is more convenient for those users who use Tab key for navigation because they don’t have to look over on the other side of the screen. There is no twitching. And it’s more convenient for developers as well, cause they don’t have to juggle with the tabindex attribute as the button will remain the first element on the left after the last form item.

Tab navigation process

Take a look at Google Sign In the form below. Designers decided to put the main button on the right, according to the Gutenberg diagram apparently. It kinda makes sense, cause there is a second step in this process (password entry) and the button’s placement hints about it. Nonetheless, the form is so simple that there is an element of visual controversy — seems that the “Create Account” link and the “Next” button should’ve been switched places. This is particularly noticeable when using the Tab key for navigation because of the hop between “learn more”, “Next” and “create account”. Not even mention that users have to do two extra taps on a keyboard to perform primal action.

Wouldn’t it be better to put a button after input and place the “forgot email” at the right of the button? This brings us to the next advantage of left alignment…

Navigation through Sign In Google form using Tab key. Two extra taps to perform main action

Left-aligned buttons leave room for any possible improvements in the future. You definitely should consider left alignment for your buttons if you may need to place some other elements or indicators nearby. Again, it will be much easier to fit any additional item, whether a link or a loader — most of the time it won’t break consistency in your design.