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.

www.designhotels.com - a mention from the fine chap at Konigi got me browsing my way over to designhotels.com because on the face of it the site looked pretty cute from the screenshot. Unfortunately that was where the affair ended.

Pretty and nicely decorated, sure, but the ux is naff. I choose France as a destination, why do I see just 3 categories, why do none of the categories suggest how many hotels are included therein, there are not even a dozen in total so why this waste of time interim screen?

I view Paris on the map, click a hotel, no visual feedback (tooltip) on which hotel marker I’m clicking, and if i go back - tada - the page has defaulted to it’s view images state. Now I have to re-select the map and trudge through this quagmire of an interface.

A fine example of a designer thinking just making it pretty is design. It’s not, it’s about communication, function, form all working harmoniously. A fine example of good design this website is not.

I could go into way more detail but I won’t life’s too short to waste on bad design