Register
Quick and easy! Create patterns and join discussions on draft patterns! Go here to RegisterLogin
Already a member? Go here to Login now.Browse Patterns
Top Rated Patterns
Contact Us
Submit button in righthand column
Design Problem
Improve workflow. You have a form with labels on the left and inputs on the right. As users work their way down the page, most of their attention is on the input column.
Solution
Place submit/cancel buttons in the column where the users' attention is focused – as opposed to placing buttons hard against the left-hand margin. This especially applies when you have right-aligned the input labels, since this label/input arrangement does not force the user's attention back to the far left.
Use When
Input fields are vertically aligned. Use this pattern when your form has a column of input fields aligned vertically. (With a more carefully-designed layout where fields aren't all stacked vertically, you should still pay close attention to where users' attention will be when the form has been fully filled out prior to "submission".) It's easiest to overlook this pattern when form labels are in a separate column to the left of inputs, rather than above each input field.
How
Place the Submit button – and associated buttons, usually Cancel – in the same column as the form inputs, left-aligned in that column as the inputs are.
A common but problematic convention, especially on shorter forms, is to place the Submit button at the bottom right of the page, or of its visually active area. This is problematical in Sakai for two reasons:
- One is that Sakai has a legacy of aligning these buttons on the extreme left, and users shouldn't have to guess whether a tool places important buttons at one edge of a page or at the opposite one.
- The other is that Sakai's fluid layout can position righthand buttons far to the right of other elements on the page, and i-frames can make things at the edge disappear behind scrollbars.
It's safer and less startling to position Submit buttons in immediate proximity to other active elements on the page, so that users will find they're looking at it, being the next natural item in their workflow sequence, when they've finished filling out the last field in the form.
Rationale
Cognitive overload. You save users mental effort by placing final buttons where their attention is already focused. Submit/Cancel is usually the last action users take on a page, so you save them work by putting the button where they are already looking, instead of having to hunt for it back to the left. Whether using a mouse or keyboard to choose selections, the focus is on the last field; the direction of movement has been "south" (down) on the page, so the logical place for the submit/cancel buttons would be directly beneath the final input field.
Cultural expectations. Most Sakai users are reading from left to right; the left hand-side of the page is where they start, not where they finish, so why send them back to "Go" in order to leave?
Accessibility Considerations
Though there are no immediate accessibility concerns related to this specific pattern, the same form accessibility issues apply.
Post new comment