PanelList Usage Guideline
RCUX Document Version 5.0.0 for Oracle Fusion Middleware 11g Release 1 Patch Set 1 (11.1.1.2.0)
Last Updated 01-June-2010
The panelList component is used to display unordered and ordered lists.
Guideline Contents
Related Guidelines
| Guideline | Section | For Information About |
|---|---|---|
| Language in UI | All | Recommendations on the use of language in application pages. |
Related ADF Elements
| ADF Element | Notes |
|---|---|
| af:panelList | PanelList component. |
General Principles
Purpose:
Calls attention to certain information by presenting it in an unordered or ordered list.
Description:
- Panel lists follow the conventions of HTML unordered and ordered list tags. See Lists in the W3C HTML 4.01 Specification for details.
- Unordered lists typically use bullet symbols as markers, and are often referred to as bulleted lists.
- Ordered lists use sequential numbers or letters as markers, and are often referred to as numbered lists.
- See List Formats for more details.
Unordered List
Ordered List
Usage:
- Panel lists are typically placed in the main or auxiliary content regions of a page, and in dialogs.
- Panel lists may be used in a form layout or a panel box, but should not be placed in table cells, where space is usually too limited for a list.
- To identify a panel list, introduce it with a lead-in sentence fragment, sentence, or paragraph of instruction text, unless the purpose of the list is obvious in the context.
- Panel lists should not be nested more than three levels deep, except for certain types of ordered lists.
Unordered List with Lead-In Sentence
Elements
The following image shows the elements of a panel list:
Panel List Elements
Marker
Purpose:
Determines the list format, and draws attention to each item in the list.
Description:
- The following marker styles are used in unordered lists (default is disk):
- Disk (
) - Circle (
) - Square (
) - None
- The following marker styles are used in ordered lists (default is decimal):
- Decimal: Numbers (1, 2, 3, . . .)
- Upper-Roman: Uppercase Roman numerals (I, II, III, . . .)
- Lower-Roman: Lowercase Roman numerals (i, ii, iii, . . .)
- Upper-Alpha: Uppercase letters (A, B, C, . . .)
- Lower-Alpha: Lowercase letters (a, b, c, . . .)
- The marker appearance depends on the browser or user agent. For example, a "square" may be presented as a filled-in square or a square outline.
- Marker styles cannot be mixed within a single panel list, but a panel list nested within another panel list may have a different marker style. For instance, an ordered list may contain a nested, unordered list, and vice versa.
- Product teams cannot replace markers with other symbols or characters.
Unordered List with Square Markers
Ordered List with Upper-Roman Markers
Usage:
- Markers may be omitted from unordered lists, but should always be present in ordered lists.
- The choice of marker depends on the type of information presented in the panel list and the list format that best corresponds to that information. See List Formats for details.
- The "None" option should be used only for lists of links or a nested list containing a single list item.
Unordered List of Links without Markers
List Item
Purpose:
Displays a single item of information within a set of peer or ordered items.
Usage:
- A panel list should contain at least two list items, unless it is nested within another panel list. If there is only one item, consider removing the marker from the single nested item.
- If the panel list is preceded by lead-in text, each list item should be grammatically consistent with the lead-in text.
- Limit nested lists to no more than three levels (two levels below the parent list).
- Panel lists can be displayed in columns. See Panel List Layout for details.
- Panel list items may include the same basic HTML formatting used in instruction text. See the Help Framework guideline for details.
- Use parallel sentence or phrase construction for list items:
- Example of nonparallel construction:
- Write clear and concise sentences
- Spell-check your work before submission
- Document control
- Example of parallel construction:
- Write clear and concise sentences
- Spell-check your work before submission
- Track changes to the document
List Formats
Unordered (Bulleted) Lists
Purpose:
Draw attention to a set of items of equal importance.
Unordered List with Circle Markers
Usage:
- Do not use unordered lists for items in a sequence or items which are ordered by priority.
- When nesting unordered lists, it is recommended to set a different marker for each level of bullet, so it is easier to determine the level of any particular list item. The following sequence of markers is recommended to distinguish each level of bullets:
- Level 1 - Disc
- Level 2 - Circle
- Level 3 - Square
- Excessive use of unordered lists reduces their effectiveness. Avoid using more than one unordered list per page where possible. If it is necessary to display lists with different types of content, consider using different marker styles to distinguish them.
- Long unordered lists are difficult to scan. As a general rule of thumb, an unordered list should contain no more than seven items unless the list contains more than one level of items, or the items are ordered alphabetically or numerically, such as a list of area codes.
- Unordered lists may contain separators to divide the list into groups of related items.
- Unordered lists may contain a nested ordered list if the nested items represent a sequence (unusual).
Unordered List with Three Levels of Items
Ordered (Numbered) Lists
Purpose:
Draw attention to a set of steps or items with an inherent sequence.
Ordered List with Lower-Alpha Markers
Usage:
- It is recommended to use decimal markers when an ordered list shows a sequence of steps or tasks, and to use alpha markers when displaying a list of priorities or other type of sequence. However, product teams may use decimal markers for other purposes when it makes sense in the context, such as a list of "Top 10 Performers."
- Excessive use of ordered lists reduces their effectiveness. Avoid using more than one ordered list per page where possible. If it is necessary to display lists with different types of content, consider using different marker styles to distinguish them.
- When nesting ordered lists, it is recommended to set a different marker style for each level of the list, so it is easier to determine the level of any particular list item:
- U.S. English documentation typically uses the following standard sequence to distinguish levels in lists, alternating between numbers and letters: Upper-Roman, Upper-Alpha, Decimal, Lower-Alpha, Lower-Roman.
- Depending on the number of levels needed, ordered lists may use any marker for the first level, as long as they respect the standard sequence when assigning markers to lower levels. For example, a three-level list of tasks could use the sequence Upper-Alpha, Decimal, and Lower-Alpha, whereas a two-level list of priorities could use the sequence Decimal and Lower-Alpha.
- If information structure requires nesting an ordered list beyond three levels, product teams can reuse the first three markers in the same sequence, or assign any unused marker for the lower levels.
- An ordered list may contain a nested, unordered list if the nested items do not represent a sequence or levels of priority.
- Long ordered lists are difficult to follow, especially if each list item is also lengthy. As a general rule of thumb, an ordered list should not contain more than nine items. If it is necessary to document a lengthy process, consider dividing the process into multiple shorter sections.
Ordered List with Three Levels of Items
Panel List Layout
By default, all panel list items are arranged in a single column. Product teams can divide the list into multiple columns by specifying the number of columns and number of rows in each column.
Unordered List in Three Columns
Usage:
- Multi-column lists save vertical space by using more horizontal space. Consider dividing a list into multiple columns when the list contains more than five items and the items are relatively short.
- When a panel list is divided into columns, product teams should distribute items evenly among the columns wherever possible.
- It is recommended to use no more than three columns to avoid horizontal scrolling.