Problem Summary: Need to initiate an action
Pattern Key: BUTTON
Example:
Use When: The customer needs to initiate an action
Solution: Use a button
- For a text button that does not perform the action immediately, but opens a popup or another page where the action is performed, the text ends with three dots (an ellipsis). Although recommended, this is not required if it is clear (e.g. from the button text) that the action is not performed immediately.
Rationale: Customer is free to explore because it is clear that the action will not be committed immediately. - The name of a button that opens a popup or goes to a different page is the essentially same as the title of the page it goes to. It is acceptable if one is plural and the other singular, if there is a difference in tense, case, articles, or the like, as long as the customer perceives that he got to the right place.
Rationale: Customers are confident that they are being taken to the correct page; terminology is consistent. - Multiple buttons should be arranged in logical groups, and ordered according to Windows standards.
Example: Save or OK goes to the left of Cancel. - Buttons respond to mouse clicks anywhere within the visual boundaries of the button. It is not acceptable to respond only to clicks on the text of the button.
- When the mouse is over a button, the pointer changes to a hand, to indicate that a click will cause navigation. The area where the mouse pointer is a hand corresponds exactly to where a click will cause navigation.
Note: Links can also be used to perform actions, especially in a list or menu. See Link.
Rationale: See embedded Rationale notes.
Accessibility: See Accessibility
Internationalization: See Internationalization
Supporting Examples: None
Where Used: Many places
Coding: <asp:Button> controls and HTML <button> controls will automatically be styled to match this pattern using a skin file and a css style sheet respectively. However, for other controls (e.g., <input type="submit">) use the CSS class "Button".
Items of Note: None
Put to Use
Status: Review
Used in Conjunction with: None
Related Patterns:
Technical "How To Use" section?
We have this "Code Base Solution" section in the top right corner to point out what programmers need to do to implement the pattern. For most cases, a single short sentance or control name will suffice. But maybe we need an optional larger section in the main body for where the answer is not a short sentance?
So, we might call the new section "How To Use" or something, and under "Code Base Solution" say "See How To Use section".
For this particular pattern, I'd want to say:
<asp:Button> controls and HTML <button> controls will automatically be styled to match this pattern using a skin file and a css style sheet respectively. However, for other controls (e.g., <input type="submit">) use the CSS class "Button".