This way we don´t have to read the cancel button first, which saves some time. And we all know that time is the essence on a webpage. It´s just a theory however.

Putting the preferred action in bold is a good tip from you. Keeping it simple for the visitor is key and makes it a little bit easier to choose. Thanks for that tip.

Greetings, John

Thanks for the great article!

I’ve been digging around on the net trying to find some information as to how to treat forms that are part of a multi-step process, and I’m wondering if you have any ideas?

In a multi-step process that allows three functions (next, back, cancel), how do we decide the best layout? We now have more than one secondary action.

I recognize that you could design around this by avoiding the need for BOTH cancel and back functions, but in many cases we need to provide both.

Thoughts?

Jeff

It would be really interesting to see the result from your user tests. It would be really cool if you could test both approaches (primary action to the left vs. primary action to the right). I don’t think that an eye-tracking device is necessary. On the contrary I believe that you could get really good data with just a normal user test. I would really appreciate it if you could report back the results!

About your last question. Even though the “Cancel” link is sort of an undo. I definitely don’t think it should be used as a reset, but rather as a way out from the form. What would be useful though is to temporarily store the data entered by the user, so if he’s interrupted, are able to go back later to the same page and finish filling out the form.

I was commenting about this issue with a colleague and we come up with some observations:

- The single button aligned in the right, in our opinion, really looks better than the one aligned with the left. We think that a natural flow is created and since this button has a strong visual characterization, it will attract the eye of the user. It will serve also to indeed break the flow of filling the form to the next task that is finishing the form.

- The main question now is: What if we need a second button? If I right-aligned my “OK” class button, where do I put my “Cancel” class button? I came up with a solution that is turning the Cancel into a link, similar to the one tested in this article you mentioned, but the main difference is that I’ve putted the cancel first, and OK second, both right aligned.

My first impression for doing this was: Since I am right aligning my buttons, I think the main one has to be the rightmost of them, because it will end the form, and it will stand more prominently.
If I put my cancel as a link, it will fade out in comparison with the OK button, and will matter less if it is in the left of the OK.

Of course it will be interfering with the tab order, but I consider the tab navigation a visual one, a keyboard replacement for the mouse clicking, so is it wrong to consider that people look at the screen when tabbing? If it so, tabbing to the Cancel first then OK last is not a major problem in my opinion.

Another aspects to take into consideration: When the cancel is in a link form, and the OK is at button form, the two of them kind of glue together and it seems that people will tend to look to them as if they were one single item.

I always align my right buttons at the end of my form elements, and not the end of the screen. It draws some kind of box in the form, and I think it helps to give the form a unity design, and kind of prevent people for searching for the OK button.

I would like to see this particular design I normally do tested against the ones in that article. Unfortunately I have no access to an eye tracking device. I will try to perform this test with a few users to see the feedback I get.

One last question: Do you think in the future the better is to change the “Cancel” link for an “Undo” link? This undo will do exactly what? Discard all changes the user had made and turn the form exactly how it was when the user entered the screen, or his last save?

Thanks for your comments and for your excellent article.

Also in our western culture where we read from left to right and start at the top an work our way down, it could seem natural to end the form in the lower right corner. After all that’s how a page of text looks.

Having only one action is probably because you can always bail out using the back-button of the browser. I think it’s also because the undo-pattern still isn’t widely adopted in web based applications, and therefor designers and developers tend to ignore that option.

As you can read from the article and from the comments, my conclusion is to put the button aligned with the left part of the form since there’s where the eye is looking for the next element. But if I would put it in the right corner I would probably put the Primary action aligned with the right part of the form and the secondary action to the left of it. The most crucial factor here would be to make the primary action more visually distinct. That said i still think it’s a worse solution since you loose two major benefits of the “left”-approach. The natural place for the eye to look and that the primary action comes after the secondary action in the tab-sequence. That on the other hand is something you can control.

I’m asking you this because I’m trying to create a pattern for me and I was using the right aligned buttons, because it was natural to me that the conclusion of a given screen was in the right, like starting doing something in the left and ending in the right.

What do you think about that? And using this right align, what do you think one should do when putting extra buttons on the interface like Cancel, or even Delete for a web-based application?

One obvious thought that comes to mind is that this can really be true in our western culture where we read from left to right. In countries where they read from right to left the opposite should be true.

Also thanks for the link to Lukes other article. I should have had that in this article in the first place.

Cheers!
Gabriel

Having the buttons aligned with the left side of the form makes a clear path for the eye to follow – but it’s not the only way to do it. If you look at Luke’s articles again from this point of view, you’ll see that his first article does indeed work. If you look at his other article Primary and Secondary Actions in Web forms, you will see that the tests included the two buttons separated, but they only tested CANCEL on the left (primary position for the eye movement) and excluded SUBMIT on the left.

SO: look at the left-hand edge of the boxes on your form. Then put the primary button aligned with that left-hand edge.

THEN: think about secondary actions. How important are they to users? Is there a risk that a user might accidentally do something unfortunate? If so, make that unfortunate thing have less visual impact, and place is less prominently.

It’s not really a matter of left or right of each other.

For a longer version of this discussion, see my post in the thread on http://www.ixda.org: Next and previous button order (Long)

Best
Caroline Jarrett

thx for the tip “interesting interview with Luke Wroblewski”

/chris