Problem Summary: Should a button or link be used?
Pattern Key: BUTTON-LINK
Example: None
Use When: Always
Solution:
Use buttons for
Capitalization
Problem Summary: Capitalization Rules
Pattern Key: CAP
Example:
Use Where: Everywhere
Solution:
| Use | For | Examples | Notes | |
| a | As entered by customer | All data | Contacts, Committee Names | There may be some exceptions where we automatically correct casing in data entered by customers, but what is in the database should always be what is displayed. |
| b | All lower case | Links inside a list | edit, delete | Proper nouns (unlikely) should still be capitalized. |
| c | Sentence case | Hints, tooltips, any lengthy text or text with sentences (including long field labels, although this is unlikely) | The first letter and proper nouns are capitalized. | |
| d | Title case | All other text, including buttons, links (not inside a list), headers, panel titles, menu or navigation items (including cluster menus, left menu, aux menu), tab headers and field labels (except as mentioned in c about long field labels) | Every word is capitalized except for prepositions and other small words. |
Rationale: NA
Accessibility: See Accessibility
Internationalization: See Internationalization
Supporting Examples: None
Where Used: NA
Coding: NA
Items of Note: None
Action Links
Problem Summary: Customer needs perform an action associated with a panel or list
Pattern Key: ACTION_LINK
Example:
A panel with its action-link menu dropped down:
Format of Booleans
Problem Summary: A Boolean value needs to be displayed
Pattern Key: BOOLEAN
Examples:
Use When: For all booleans
Solution:
- For read-only values, such as in a list, display Yes or No.
- If the customer can change the value (even if it is disabled at the moment), normally use a check box.
- If it is important not to have a default (so the customer is forced to make an explicit choice), use radio buttons with Yes and No.
Rationale: NA
Accessibility: See Accessibility
Internationalization: See Internationalization
Supporting Examples: None
Where Used: NA
Coding: NA
Items of Note: None
More
Problem Summary: Navigate from summary information to a page that displays all the data
Pattern Key: MORE
Example:
Use When: A summary or landing page displays only a part of the available data, so the customer needs to be able to navigate to where all the information is available.
Solution: Use a More link, as shown in the example.
Rationale: NA
Accessibility: See Accessibility
Internationalization: See Internationalization
Supporting Examples: None
Where Used: NA
Coding: NA
Items of Note: None
Related Page Cluster
Problem Summary: Customer needs to navigate among a group of pages that are all related to the same object or task.
Pattern Key: CLUSTER
Example:
A page from a cluster, as shown in iMIS
The same page viewed outside of iMIS. Note the cluster menu on the left, which is needed because iMIS is not providing a left nav.
Use When: There is a group of related pages that the customer will want to navigate among.
Solution: Use a Related Page Cluster, as shown above.
- The Cluster Menu
- goes in the Secondary Navigation (Left Nav) when the cluster is displayed in iMIS, and
- appears to the left of the content area when the cluster is used outside of iMIS.
- The menu callout (a down triangle) on the right of each panel header is shown only when a menu is present.
- "Configure" sets the parameters for the control, and is present only if the signed-in customer has permission to use it.
- "Layout" opens Content Manager in a new window, positioned to this panel or page. It is present only if the signed-in customer has permission to use it.
Rationale: NA
Accessibility: See Accessibility
Internationalization: See Internationalization
Supporting Examples: None
Where Used: NA
Coding: NA
Items of Note: None
Page Layout
Problem Summary: Need a pleasing and functional standard page layout
Pattern Key: PAGE-LAYOUT
Use For: Most pages in iMIS
Solution: Here are the elements of the standard page layout:
Key. In parentheses are a few words from the example above, so you can easily find each component in the example.
Format Rules
Problem Summary: Format rules
Pattern Key: FORMAT-RULES
Example: None
Use When: Always
Solution:
- Do not display internal codes (especially system-generated GUIDS) to the customer.
Examples:
- If 0 represents no selection, display something like "(None)," not "0."
- If 1-99999 represents a range of values starting at 1 with no maximum, display "1-", not "1-99999."
Note: Even if there is a physical limit to the maximum value, the customer only sees a value if he/she specified the value.
- Display fields in the order they are usually displayed and in the order they normally occur.
Example: On order forms, invoices, and throughout the system, the number of items precedes the unit of measure, so the user sees 1 Box, not Box 1. - Recommended: Controls that are not available (because of other parameter choices, security, roles, etc.) are shown disabled (gray).
Alternate: They may be hidden instead if a case can be made that the page would be too confusing or cluttered, taking into account the sophistication and training level of the user, and the likelihood that someone for whom controls are disabled or hidden would need those controls.
Exception: Surf-to-Edit controls are hidden from those not authorized to use them. - When a page is first displayed, the cursor is placed in the field where the customer is most likely to want to enter data, usually the first editable field on the page.
Rationale: NA
Accessibility: See Accessibility
Internationalization: See Internationalization
Supporting Examples: None
Where Used: NA
Coding: NA
Items of Note: None
Format of Numbers
Problem Summary: Display Numbers
Pattern Key: NUMBER
Example:
Use When:
- Numbers are displayed,
- Exception: ID numbers (such as zip codes, phone numbers, part numbers, SSN, and the like) are left aligned, even when they are entirely numeric.
Solution:
- Numeric values are displayed in a fixed-width font and right aligned.
Note: Alignment should be with other values, not with the right edge of the panel. See Format of Currency for an example.
Exception: See exception for ID numbers under "Use When." - For numeric values where the number of places varies (e.g. quantities, which could be pounds, ounces, gallons, each, etc.) trailing zeros after the decimal place are removed. For example, 3.00 shirts is changed to 3 shirts.
Rationale: This may cause misalignment, but it is not that important because it will rarely happen and is not all that confusing. Nobody is going to be scanning the column or trying to add 3 shirts to 2.5 pounds of nails, so alignment is not all that important in this case. - Recommended: Avoid different numbers of decimal places in the same column, or align to the decimal point.
Rationale: Right aligned numbers are easier to read and compare.
Accessibility: See Accessibility
Internationalization: See Internationalization
Supporting Examples: None
Where Used: NA
Coding: NA
Items of Note: None
Format of Currency
Problem Summary: Display Monetary Amounts
Pattern Key: CURRENCY
Example:
Use When: An amount of money is displayed
Solution: Currency values are displayed
- in a fixed-width font,
- with the proper number of decimal places for the currency (e.g. 2 places for US dollars),
- right aligned, and
- with no currency symbol.
The abbreviation for the currency in use (e.g. USD) is displayed somewhere on every page that has currency values. If a page displays amounts in multiple currencies, then the currency for each value must be unambiguous.