Differences between revisions 5 and 6
Revision 5 as of 2010-12-23 00:02:42
Size: 1779
Editor: shoobe01
Comment:
Revision 6 as of 2010-12-23 00:06:59
Size: 2087
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 25: Line 25:
Size: Normally must be very easy to see and activate (especially for touch/pen devices), but smaller ones can be used for less-important or less-used items. Vertical size is the variable. In many cases, the width can vary based on the size of the text. Try not to have too much empty space. Vertical size must be the same for equivalent actions. "OK" and "Cancel" must be the same vertical size. SIZE Normally must be very easy to see and activate (especially for touch/pen devices), but smaller ones can be used for less-important or less-used items. Vertical size is the variable. In many cases, the width can vary based on the size of the text. Try not to have too much empty space. Vertical size must be the same for equivalent actions. "OK" and "Cancel" must be the same vertical size.

Use the writing styles already defined for the rest of the OS, or your application or site. Be consistent with capitalization. Be clear about terminology, and avoid labels that require reading. Rarely should buttons say "Submit" or "OK." Descriptive, free-standing labels like "Connect" are always better.

size, indicator of priority. Still like BOA old ones with color/shape icons alongside. Apple arrowed button bars are good examples of this.

Problem

Provide access t

Solution

With a command button, users initiate an immediate action.

The default command button is invoked when users press the Enter key. It is assigned by the developer, but any command button becomes the default when users tab to it.

Variations

Standalone - does something out of the blue...

In-conjunction. With radios, checks or any other user inputs or controls, to commit these user selections. Within websites, buttons are used to submit (or cancel submission of) forms to remote servers.

Interaction Details

Presentation Details

SIZE Normally must be very easy to see and activate (especially for touch/pen devices), but smaller ones can be used for less-important or less-used items. Vertical size is the variable. In many cases, the width can vary based on the size of the text. Try not to have too much empty space. Vertical size must be the same for equivalent actions. "OK" and "Cancel" must be the same vertical size.

Use the writing styles already defined for the rest of the OS, or your application or site. Be consistent with capitalization. Be clear about terminology, and avoid labels that require reading. Rarely should buttons say "Submit" or "OK." Descriptive, free-standing labels like "Connect" are always better.

ellipsis indicate more info is needed, usually in a modal dialogue.

borders and so on to indicate it's default. Background colors???

Graying out when inactive

icons inside the button... mention the text icons which port across all of them. Use a couple examples, like the "check" and "X"

Antipatterns

Avoid color schemes that can be misconstrued as being "grayed out," and inaccessible.

Avoid making the default button perform an unrecoverable, destructive action. Users must make deliberate choices instead. See Exit Guard for more on this behavior.

Examples

Button (last edited 2011-08-29 10:08:55 by shoobe01)