justinteractive

I get asked this question on many occasions, in which order does one sequence action buttons that are usually attached to forms or step by step processes. I guess the answer is, it depends. Jakob Neilsen touches on the subject on useit.com and makes some similarly ambiguous suggestions, so I’ll attempt to elucidate just a little.

I believe that the real answer is not to focus on the sequence but the presentation and consitency. Making a significant difference to the way the buttons are presented will have far more influence on how they are understood than in which order they are presented. Then you have to make sure you are consistent across your site or application.

I’m assuming you want the person to choose ok, save, order or whatever the action is over cancel. With this in mind then focus on presenting your positive action as the primary action, make it look like a button and knock back the cancel as a simple hyperlink. Give enough padding between them to make them distinct but don’t loose their relationship by proximity. Here’s a snippet from a wireframe I’m marking up right now.

There is some research to suggest that, along with field labels being best placed above and flush left with their respective fields, your buttons should also be flush left with the fields and the primary call to action should come first. I’m speaking from a completely western’eyesed perspective here, top down, left right.

Finally, spend some time thinking about the buttons label,  don’t commit a “click here” sin and give it “ok”. What does the button do? If it signs in, signs up, saves, deletes or calls your mom then that’s its label. A little justin-time design if you will.

Your creative director might argue the toss over placement and alignment, but fundamentally I think you want to focus on consistency,  labeling and contrast/proximity rather than fussing over the chicken or the egg.