What order should we place buttons on a login/sign up screen?

Question

Should it be [Login | Cancel] or [Cancel | Login]?

Some people say Login should be on the right, since we are "advancing" forward.

EDIT: Removing Cancel is not an option. I just used Login|Cancel as example terms. More generally let us call them [Positive|Negative] or [Primary|Secondary]

Answer 1

You're correct, the most affirmative action should be on the right because it is akin to the user moving on.

This article explains why, it uses the OK button as an example, but it equally applies to the Login button as well:

Why ‘Ok’ Buttons in Dialog Boxes Work Best on the Right
_{(I know I've linked twice to this site, but I'm not affiliated in any way)}

To quote:

It’s similar to how pagination buttons are placed. The button that takes users to the next page is on the right, and the button that takes users back to their earlier page is on the left. This button placement works because it maps to the user’s left-to-right reading and navigating direction, where right is the direction to progress and left is the direction to regress.

‘Ok’ and ‘Cancel’ buttons in dialog boxes should follow a similar interaction pattern because they function like pagination buttons. Not only that, but the left and right directional pattern is what users are used to in the western world. Placing your primary action on the right and secondary action on the left will make your dialog box buttons easier and more intuitive for users to understand.

Ok progresses users forward to the next screen and ‘Cancel’ regresses users back to their original screen.

The same would equally apply to the Login and Cancel buttons.

Jakob Nielson suggests that it may not actually matter, but that listing OK improves the flow:

OK–Cancel or Cancel–OK?

Answer 2

Login only. Unless you have a specific need for cancel to take you back to a certain page, you should use simply one button.

If this is a mobile app, that is a different story, as the login is typically a pop up. In that case, put cancel first, with login to the right.

Like this:

Answer 3

I almost always put the affirmative action to the right, though some argue that Cancel, as the least damaging action in almost every case, is the safest and therefore belongs on the right. I think if you choose a pattern to use and stick with it, you'll be doing well by your audience.

Answer 4

I think it is most common to have the positive action on the right. If it is flipped I often find myself clicking cancel when I mean to click submit, especially if both buttons are the same color.

I would say you should stick with what users know and expect which is positive negative-positive.

Answer 5

You should do a simple A/B test and determine what works best in your situation. Different designs and devices might give you different results.

I always try to have only one button per form/page. If you need two (cancel), make the less important button look like a link. You need to lead the user to the correct action. Do not make them think.

Answer 6

I agree with the premise that items of more importance should be placed on the bottom right, at least for left to right, top to bottom reading languages. So you should place the default action, or the action you want to encourage there.

This has been a principle since Gutenberg, and is even called the Gutenberg Rule.

However, for an online login/sign up sheet what is more important is to de-emphasize the secondary action (in this case, cancel).

See also this question.