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]

  • 1
    Advancing forward is not the same direction for everyone, it's a local and/or culture specific direction. – Oskar Duveborn Aug 23 '11 at 13:54
  • @Oskar and as another little twist, some toolkits will automatically reverse the order depending on the locale/language. – Roger Attrill Aug 23 '11 at 14:52
  • the only thing against a [cancel|login] that I can think of is that 'cancel' comes first if I use tabs to navigate. can be worked around with tabindex ofc. – Kashyap Aug 23 '11 at 22:29
  • What to do if the platform standards show the Primary action first, and the secondary on the right? According to the Microsoft standards, they prefer this because this is the natural reading order (for languages with left-to-right reading order)? <msdn.microsoft.com/en-us/library/aa468595.aspx> – Kim Sep 6 '12 at 14:28

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?

| improve this answer | |
  • +1 And that's why confirmation dialogs for things with disastrous consequences (Really format HD?) on which a user might quickly click OK without thinking present the buttons reversed. – msanford Sep 6 '12 at 22:44

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:

enter image description here

| improve this answer | |
  • Updated the question, removing a button is not an option. And basically my question was why this order? You have not given any reasoning. – Codevalley Aug 24 '11 at 9:41

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.

| improve this answer | |

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.

| improve this answer | |

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.

| improve this answer | |

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.

| 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.