Truncation
Last Updated 06.25.02
General Description
Truncating Character Data
Truncation is the intentional removal of character data in order to shorten strings, making them fit in a given visual area in the UI. In general, the following principles describe truncation in the application design context:
- Truncation, as with any abbreviating method, should be applied only when necessary. Abbreviation does not always contribute to ease of comprehension.
- BLAF applications use ellipses (...) to signify truncated characters.
- The signification of truncated strings through employment of the ellipses symbol, is intended to indicate the availability of the complete, expanded string through drill down or other local user action in the UI.
- Truncation in BLAF applications is not dynamic. Strings will not be truncated based on the browser window size, and/or change in browser window size.
The following sections of this Guideline specification address the BLAF Truncation standards. Click the links to jump to the rules and heuristic guidance for each section.
Guideline Attributes
Spec Version # - 3.1
Spec Contributors - Betsy Beier, Craig Louis
UI Models - all models
Example Products - all products
Related Guidelines - Common Formats,
Language in UI, Locator
Train
Interaction and Usage Specifications
Overview
- Truncation should be used ONLY when necessary. Truncation of items may hinder usability since items become harder to recognize.
- Ellipses are used to symbolize truncation (Note: Ellipses = 3 Characters)
- Truncation and Internationalization - Ellipses are an "accepted" UI metaphor for translation. Data is truncated in translated form.
- Truncation in HTML is different than truncation in GUI applications:
- Truncation is not dynamic.
- Strings will not be truncated based on the browser window size, and/or change in browser window size. Strings are truncated before the UI is rendered.
Valid Methods
There are two valid truncation methods:
- Truncation at end of String
- Use most often.
- Use when beginning of string is unique.
- Truncation in Middle of String
- Use only when necessary.
- Use when either beginning AND end of string is most unique, or if only END of string is unique.
Truncation is not allowed at the beginning of a string. That would inhibit readability and usability of functions such as column sort.
Truncation Algorithm
Data is truncated before it is rendered according to a specific algorithm, defined in the following points. For truncation examples, see the Design Rules & Visual Specifications section, later in this guideline.
- Total number of characters are stored with each item.
- End of String Truncation:
- Maximum number of characters is given as an attribute, Total Base Max. (maximum number BEFORE truncation begins.)
- Total Base Max. = 13. This maximum number can be set to something ONLY HIGHER than base maximum.
- Algorithm counts number characters:
- If less than or equal to 13, all characters are displayed.
- If 14 or greater, then 10 characters plus ellipse (…) are displayed.
- Middle of String Truncation:
- Maximum number of characters is given as an attribute, Total Base Max. (maximum number BEFORE truncation begins.). Leading Base Max. defines number of characters in beginning portion of string to be retained after truncation. Trailing Base Max. defines number of characters in end or trailing portion of string to be retained after truncation.
- Total Base Max. =23. Leading Base Max. =10; 3 ellipse; Trailing Base Max at end = 10. The maximum numbers at beginning and at end can be set to something ONLY HIGHER than base maximum.
Algorithm counts number characters:
- If less than or equal to 23, then all characters are displayed
- If 24 or higher, then 10 characters are displayed at beginning plus ellipse (...) plus 10 characters at end.
- If a higher total base maximum number is required, the extra characters may go to the beginning base max., the end base max., or both, at developer discretion. See rules for asymmetric mid-string truncation, below.
- Middle of String Truncation, Asymmetric:
- Asymmetric assignment of Leading and Trailing Base Max. values may be required when the leading or trailing parts of the full string bear greater relative importance in user comprehension.
- This occurs when the leading portions of similar strings are verbose and equivalent, with the meaningful differentiating information falling toward the trailing end of the strings; or, the converse case, with the differentiating data falling toward the leading portion of the string, and the verbose repetitive information toward the trailing portion.
- Asymmetric mid-string truncation follows rules for mid-string truncation, above, with the following exceptions.
- When beginning portion of string is verbose and repetitive, and total string length is greater than Total Base Max, designer assigns a Leading Base Max value to beginning portion of string sufficient to show identifying information, but not showing entire verbose leading portion.
- When ending portion of string is verbose and repetitive, and total string length is greater than Total Base Max, designer assigns a Trailing Base Max value sufficient to show identifying information, but not showing entire verbose trailing portion.
All characters are counted, including spaces and other horizontal area occupying symbols (i.e., underscores - "_", periods - ".", etc.). The truncation signifying ellipses (…) must be included in the count when calculating final truncated string lengths.
For truncation examples, see the Design Rules & Visual Specifications section, later in this guideline.
Valid Truncation Usages
The following BLAF application components and elements are valid for truncation:
Standard Web Widgets
Used in cell of table, or as form element on transactional page:
- Read-Only:
- Field, Choice List Selection, List Box Selection
(Note: Choice list and list box selections are displayed as read only data)
- Text Area
- Updatable:
- Choice List - Items in choice list
- List Box - Items in list box
Read-Only (Character Only) Data in Table Cells
These might include:
- Table Object Name
- HGrid Parent or Node Name
- Tree Parent or Node Name
- Read-only LOV field value
Shuttle/Reorder
Items within list boxes may be truncated as necessary.
Breadcrumb Links
Breadcrumb links are comprised of the links of previous pages in the application hierarchy, and a link representing the current viewable page. Because it is important for the hierarchy of visited pages to remain clear, truncation is not applied to the complete trail as a unit. If necessary, truncation may be applied to the invidiual breadcrumb links within the trail.
- Truncation is applied to individual breadcrumb links within the complete breadcrumb trail.
- Truncation rules are not applied to complete breadcrumb trails as a unit, since it is important that no breadcrumb links be removed from view.
HGrid Breadcrumbs
- Within a single breadcrumb link.
- Total Hgrid breadcrumb trail string should not be truncated, since it provides links to higher level nodes within Hgrid.
Context Switcher
Contextual ObjectNames within the context switcher choice list may be truncated:
A link within an HGrid breadcrumb may be truncated:
- Only if absolutely necessary, and context is in choice list.
- Context switcher that uses LOV field cannot be truncated.
Application Switcher
Application names in the application switcher choice list may be truncated:
- Only if absolutely necessary
- Try to avoid.
Invalid Truncation Usages
Labels, Invalid for Truncation
- Read only label for any standard web widget should not be truncated
- Including radio item or check box item
Particular Types of Data in Standard Web Widgets, Invalid for Truncation
- Numeric Data: Amount, Count
- Alphanumeric Data: Account #, Social Security #, PO#
Specific Standard Web Widgets and BLAF Components or Elements, Invalid for Truncation
- Updatable Text Field
- Updatable Text Area
- Radio or Check Box Item
- Specific Standard Web Widgets with Context:
- Choice List, Text Field, Text Area, Radio/Check Box items for Search Criteria (Simple or Advanced)
- Choice List for Filter Criteria
- Date Text Field
- Choice List with Record Navigation: Set Choice List
- Choice List Locator Element: Set Choice List
- LOV Text Field
- Instruction Text
- Tip text
- Hint text
- Message Box Text
- Header, Sub Header, Sub-Sub Header Text
- Footer Links
- Key Notation Term or Definition
- Action/Navigation Button Label
- Return-to Link
- Global Button Label
- Tab/Navigation Item (Tab, Horizontal Section, Side Nav. Section, SubTab Section)
- QuickLink
- Branding
- Browser Window Title - Truncated automatically by Browser App. based on browser window size
- HGrid Controls and Table Controls (Select All, Expand All, etc)
- Hide/Show Link Label
- Step Names in a Train
- Browse Catalog Menu Items
- Common Format Data: Address, Phone, WebSite, Person Name
There are two valid truncation methods:
- Truncation at end of String
- Truncation in Middle of String
Truncation is not allowed at the beginning of a string. That would inhibit readability and usability of functions such as column sort.
Truncation At End Of String
- Use most often.
- Use when beginning of string is unique.
- Format: [# of Chars][...]
- Max # of characters to be retained after truncation = 13 = (10 + 3 for elipsis)
Examples
Truncation At End Of String - Examples
|
Example Type
|
Full String
|
Truncation
|
File Name
|
customization_template.psd
|
customizat...
|
Meeting Name
|
Robert's Weekly Budget Update
|
Robert's W...
|
Customer Name
|
Larry's Plumbing and Supplies
|
Larry's Pl...
|
Expense Report Name
|
DIS2002 Conference Trip
|
DIS2002 Co...
|
Truncation In Middle Of String
- Use only when necessary
- Use when either beginning AND end of string is most unique, or if only END of string is unique
- Format: [# of Chars][...][# of Chars]
- For Symmetric Truncation: Max # of characters to be retained after truncation = 23 = (10 + 3 for elipsis + 10)
- For Asymmetric Truncation: Max # of characters to be retained after truncation = 23 = X + (3 for elipsis) + Y,
Where X = Leading Base Max. and Y=Trailing Base Max. and X+Y=20)
Examples
Truncation In Middle Of String - Examples
|
Example Type
|
Full String
|
Truncation
|
File Name
|
customization_template.psd
|
customizat...mplate.psd
|
Meeting Name
|
Robert's Weekly Budget Update
|
Robert's W...get Update
|
Customer Name
|
Larry's Plumbing and Supplies
|
Larry's Pl...d Supplies
|
Expense Report Name
|
GRAPHICS2002 Conference Trip
|
GRAPHICS20...rence Trip
|
Asymmetric Truncations
|
GRAPHICS Conference Trip Report Nov 2002
GRAPHICS Conference Trip Report Dec 2002
GRAPHICS Conference Trip Report Jan 2003
Nov 2002 GRAPHICS Conference Trip Report
Dec 2002 GRAPHICS Conference Trip Report
Jan 2003 GRAPHICS Conference Trip Report
|
GRAPH...Report Nov 2002
GRAPH...Report Dec 2002
GRAPH...Report Jan 2003
Nov 2002...Trip Report
Dec 2002...Trip Report
Jan 2003...Trip Report
|
A Note on Bubble Text (Tool Tips)
Bubble text should not be relied upon to identify truncated strings. The complete, expanded string should be made available through drill down or other local user action in the UI.
For controls/text that have truncation AND Bubble Text, the full text should
appear on the Bubble Text. Even so, limitations should be placed on Bubble
Text length to avoide HTML bloat. See the Language
in UI guideline for advice on writing Bubble Text.
Note: Bubble text on links is NOT supported in Netscape 4.x
Open/Closed Issues
Open Issues
14-Jan-2001 - In 2003(+) time frame, will continue to reevaluate possible enhancements to HTML and/or possible ways to make truncation more dynamic (i.e., based on browser window size.) Technically, there is no solution for this at this time. There may be advanced in browser and CSS capabilities in the coming years to reevaluate.
15-May-2002 - Are there accessibility issues with truncation not addressed in this guideline?
Closed Issues
None