[Sigia-l] Form Usability - Search & Cancel location

[Christopher Fahey [askrom]]

> a question has come up about the
> placement of certain "action" buttons - namely the
> Submit and Cancel buttons. (note: Cancel is a required
> option for this application because of the multiple
> step nature of the form.) 

To me having Cancel on the left is plainly obvious, particularly in a
multi-step process. The dialog-box analogy several people have made is
sort of inappropriate: First, most dialog boxes are atrocious in terms
of usability, and secondly a multi-step web form is not really a dialog
box at all.

Also, I would suggest that you consider using GIF images (with
Javascript form-submittal code) for the buttons (instead of standard
browser form buttons) for two reasons:

First, you can control the appearance of the button images a little
better. For example, perhaps the "Submit" button can be a "Next" button
that has a hint of an arrow shape pointing to the right, while the
"Cancel" button may have a clear visual hint (like a red X) that it will
undo/destroy any work the user has attempted so far. See the difference
below, as primitive ASCII versions:

(just form buttons:)
   [ --Cancel-- ]         [ --Submit-- ]

(with GIF buttons:)
   [ X-Cancel- ]          [ --Next-> ]

(I would also suggest two other changes: have a "Previous" button closer
to the Next button, and make the last screen in the process say "finish"
instead of "next". 
   [ X-Cancel- ]          [ <-Previous-- ]   [ --Next-> ]

I think I just described a Wizard, actually.

Anyway, secondly (and I may be wrong about this) with GIF buttons you
can probably control the tab order as well.

You can also do stuff like use a Javascript dialog box to confirm the
Cancel button before the user screws up their form completely.

-Cf

[christopher eli fahey]
art: http://www.graphpaper.com
sci: http://www.askrom.com
biz: http://www.behaviordesign.com