A previous post shows how form buttons can be used for in-progress feedback.
Buttons can also be used for selection feedback, as shown in this example from FriendFeed:
This approach can be particularly helpful when users are selecting from a long scrolling list or over multiple pages.
Where there is a clear primary action (and related secondary actions) using a segmented button lets you present the actions together in a compact manner.
The primary action in the example below (from Microsoft Excel 2007) is Paste:
Clicking the upper segment of the button initiates the primary command.
Clicking the lower segment of the button displays related secondary commands, with the primary command repeated at the top of the list. The primary command is visually emphasized with an icon:
Yahoo Mail uses the same approach with a horizontally-oriented New button. The primary action is creating a new email message.
Secondary actions are creating a new chat and creating a new text message. These are displayed by clicking the right end of the button. The primary action (email message) is emphasized at the top of the list with bold text.
Clients often ask us about button placement on forms. Button placement sometimes causes confusion because on the Web a variety of conventions are used. And there are also different button placement conventions between the Mac and Windows.
The standard Windows dialog box places the buttons on the right side of the dialog, with the primary action (OK) on the left.
Windows XP wizards place the primary action (Next) as the middle button, between Previous and Cancel.
Wizard layout in Vista is slightly different, with the Previous button placed at the top of the dialog--essentially in the same position as a browser back button.
In the standard Mac OS X dialog, the primary action (OK) is on the right.
The Mac OS X wizard also places the primary action (Next) is on the right.
Web forms tend to place the primary action on the right, as shown in the examples below.
But application-like functionality on the Web sometimes follows the Windows convention of putting the primary action on the left.
But, then again, sometimes the primary action is placed on the right.
For web-based system, we generally place the primary action on the right because this seems to be more of a convention on the web than left placement. Of course, for Windows or Mac applications, we follow the appropriate OS standard.
Adobe changes the label of the download button depending upon what options are selected.
The default selection includes both Adobe Reader and the Google Toolbar. The button label helped alert me to the fact that the option for the Toolbar was selected by default:
When I de-selected the Toolbar option, the button label dynamically changed:
Though I would have preferred not to have the Toolbar selected by default, this seems to be an effective strategy for preventing unwanted consequences where users must "opt out" of pre-selected items.
This is a great, uncluttered layout. There is a clear primary action and a set of secondary actions below it. The left navigation doesn't carry all sorts of links from previous levels - just a few suggested on related items.
From: Target
I like the big, clearly labeled buttons here - and the fact that all the form controls are located all together on the right side of the page. The background shading of the rows - and blue shading of the column containing the checkboxes makes this form easy to scan and read.
From: Amazon.com
This form has buttons that are in the right position and with the right visual emphasis. Cancel is gray to give it the least visual emphasis; the larger blue Continue button has the most visual emphasis. Small arrows on the Back and Continue buttons further clarify their function.
From: Princess Cruises
The positioning and visual weight of this button makes it looks like "Submit" or "Continue" - but, alas, it's a "Clear Fields" button. How many users to you think accidently clicked this and wiped out all their shipping info? There is usually no reason to provide a "Clear" button on a form - the risks outweigh the advantages.
