R2C2 Design Compliance

Design Compliance

Applications adopted by R2C2 are required to meet the Design Compliance set forth by Astro UXDS. Design Compliance improves operator efficiency, engagement and reduces training time. When applications across the Enterprise have a common and consistent user interface Guardians can focus learning the mission unique needs rather than learning new interface paradigms.

Tiered Compliance

Astro can be adopted incrementally though the tiered compliance system outlined below. Projects can achieve progressively higher levels of compliance with each iterative release. It is important to note that adherence to the R2C2 Design Compliance is only one factor in accomplishing a successful user interface. Be sure to employ a user centered design practice like Traditional UX or Lean UX . For assistance please contact support@astrouxds.com.

The R2C2 Design Compliance rules are a living document and version with the principles of Semantic Versioning. Contribution back to Astro and the Tiered Compliance model to address issues, propose new rules or contribute additional research or guidance can be made through Astro’s GitHub page.

Tier 1 Basic status icons, status colors, really important things for operators to quickly become familiar with the application
Tier 2 Tier 1 + Astro colors to make it look like an Astro application (visual)
Tier 3 Tier 2 + interaction patterns (behavioral)

1.1

ASTRO UXDS provides developers with guidance to develop user interfaces. User interfaces must comply with the guidance in this section to be R2C2 Design Compliant. Developers are encouraged to conform to guidance in other sections identified as “Rules of Thumb”, “Do” examples, and “Don't” examples as described on individual component pages.

2.1.1; Tier 2
Components and backgrounds shall conform to the colors specified in Astro’s color palettes. updated

2.2.1; Tier 2
The Roboto typeface or system fonts shall be used for content and components. updated

2.2.2; Tier 2
The tabular number variant or system ui-monospace font shall be used when numeric values are intended to align vertically with content above or below updated

2.2.3; Tier 2
Text shall conform to the specified typography for Heading, Body, and Inline Text.

2.2.4; Tier 3
Text within Astro components will use sentence case capitalization unless otherwise stated. under review

3.1.1; Tier 1
Elements indicating state or status shall use only the specified Status Symbols.

3.1.2; Tier 1
Elements indicating state or status shall use only the specified Status Colors.

3.2.1; Tier 3
Data Visualizations shall have no more than 8 colors per data set. under review

3.2.2; Tier 3
Data Visualizations shall use sentence case capitalization for titles, labels, and legends.

3.3.1; Tier 3
Table titles, legends, and column labels shall use sentence case capitalization.

3.4.1; Tier 3
Form controls shall not use placeholder text in place of help text.

3.4.2; Tier 2
Help Text shall be left-aligned under the relevant form element, regardless of location of the form element’s label. The only exception is for Radio Button and Checkbox list item Help Text which shall be left-aligned to the item’s text and not its icon.

3.4.3; Tier 2
Required fields shall be marked with an asterisk to the right of the label when the majority of a form is optional. under review

3.4.4; Tier 2
Optional fields shall be marked with an asterisk to the right of the label when the majority of a form is required. under review

3.4.5; Tier 3
Help Text shall use sentence case capitalization.

3.4.6; Tier 3
Validation Text shall use sentence case capitalization.

3.4.7; Tier 2
Inline Validation Text shall be left-aligned under the relevant form element or group, regardless of location of the form element’s label.

3.4.8; Tier 3
Inline Validation Text shall replace Help Text when Help Text is present under a form element and an error state is triggered.

3.5.1; Tier 2
There shall be only one Focus State displayed on the screen at any time. new

3.5.2; Tier 3
The Focus State shall encompass only the part of the target UI element that is interactive. new

Note: Compliance section previously known as 4.11.0 before Pop Up Menu was revised from a component to a pattern.

3.6.1; Tier 3
Menu items shall use sentence case capitalization.

3.6.2; Tier 3
An ellipsis (…) shall follow a menu item when further action is required to complete the command.

3.6.3; Tier 2
Related groups of menu items shall be indicated by separator lines. under review

3.6.4; Tier 3
Pop Ups shall not exceed 25 menu items.

3.7.1; Tier 2
Breadcrumbs shall not replace the primary navigation. new

3.7.2; Tier 3
Breadcrumbs shall not extend past seven items. deprecated

3.8.1; Tier 3
Interface feedback shall use notification patterns that cause the least disruption possible. new

3.8.2; Tier 3
Toast notifications shall not be placed over interface elements that need to remain visible. new

3.8.3; Tier 3
Toast notifications should stack vertically, with the most recent appearing at the top of the list. new

3.8.4; Tier 3
Banner notifications should not block other interactions or obscure interface elements. new

4.1.1; Tier 3
Buttons shall act as actionable elements, not as state indicators.

4.1.2; Tier 3
Buttons shall not activate Pop Up Menus. under review

4.1.3; Tier 2
Grouped Buttons shall have the same width and even spacing. deprecated

4.1.4; Tier 3
Button titles shall be verbs that describe the action performed.

4.1.5; Tier 1
Button widths shall accommodate the full title without truncating or abbreviating. under review

4.1.6; Tier 1
Buttons shall be clearly titled, with no outside label.

4.1.7; Tier 2
An ellipsis (…) shall follow the Button title when further action is required to complete the command. under review

4.1.8; Tier 2
Secondary Button style shall indicate the less preferred option in grouped Buttons. under review

4.1.9; Tier 3
Primary Buttons indicating preferred user actions shall be placed to the right of buttons used for secondary user actions when in Button groups.

4.1.10; Tier 3
Button text shall use sentence case capitalization.

4.2.1; Tier 3
Checkboxes shall set values, not initiate actions.

4.2.2; Tier 3
Checkboxes shall act independently of others in a group.

4.2.3; Tier 2
Checkboxes shall align vertically when in a group.

4.2.4; Tier 1
Checkboxes shall have a corresponding label.

4.2.5; Tier 3
Checkbox labels shall use sentence case capitalization.

4.2.6; Tier 2
Checkbox list item Help Text shall be left-aligned to the item’s text and not its icon.

4.2.7; Tier 2
Inline Validation Text shall be left-aligned under the relevant checkbox list, regardless of location of the label.

4.3.1; Tier 3
Dialogs shall use text Buttons for confirm or cancel actions, not links or other components.

4.3.2; Tier 3
The confirm Button shall be to the right of the cancel Button, and right aligned within the Dialog Box.

4.3.3; Tier 3
Dialogs shall be closed only with confirm or cancel Buttons.

4.3.4; Tier 2
Button titles shall be verbs that describe their actions, or the generic titles “OK” and “Cancel”.

4.3.5; Tier 2
Dialog text shall be clear, brief, and actionable.

4.3.6; Tier 3
Dialog title and button labels shall use sentence case capitalization.

4.3.7; Tier 3
Dialogs must be actively closed by the user — self-dismissing dialogs shall not be used. new

4.4.1; Tier 3
Menu items shall use sentence case capitalization.

4.4.2; Tier 3
An ellipsis (…) shall follow a menu item when further action is required to complete the command. under review

4.4.3; Tier 3
Select Menus shall not exceed 25 menu items. For longer lists, use a Table instead.

4.4.4; Tier 2
Help Text shall be left-aligned under the relevant Select Menu, regardless of location of the label.

4.4.5; Tier 2
Inline Validation Text shall be left-aligned under the relevant Select Menu, regardless of location of the label.

4.5.1; Tier 3
The Global Status Bar shall be reserved for global elements that appear on every screen.

4.5.2; Tier 2
The Global Status Bar shall include the application name. Other elements are optional. under review

4.5.3; Tier 2
Optional Global Status Bar elements shall be arranged left to right in this order: navigation Tabs, Clock, Monitoring Icons, Action Icons, Emergency Shut Off Button.

4.5.4; Tier 2
Global Status Bar shall use dark theme styling even when the application is light themed.

4.6.1; Tier 1
Monitoring Icons shall include a label and a Status Symbol.

4.6.2; Tier 1
Monitoring Icons shall be colored with one of the six standard status colors.

4.6.3; Tier 1
Percentage Monitoring Icons shall depict a value between 0 and 100 as both an arc and numeric display. under review

4.6.4; Tier 1
Status Symbols shall not be altered. They are required for ADA 508 and WCAG 2.0 compliance.

4.6.5; Tier 3
Icon labels shall identify the item represented, and shall not change. A Sub-Label may provide dynamic information. under review

4.6.6; Tier 2
Grouped Icons shall be equally sized.

4.6.7; Tier 3
Icon labels shall use sentence case capitalization.

4.7.1; Tier 2
Stacked Input Fields shall be left-aligned.

4.7.2; Tier 2
Input Fields shall use the minimum text size defined in the CSS. under review

4.7.3; Tier 2
Input Field labels shall be aligned to the top left, or to the left, of the field.

4.7.4; Tier 2
Input Fields shall have a corresponding label. under review

4.7.5; Tier 2
Help Text shall be left-aligned under the relevant Input Field, regardless of location of the label.

4.7.6; Tier 3
Input Fields shall use sentence case capitalization.

4.7.7; Tier 3
Input Field labels shall not use placeholder text in place of labels. under review

4.7.8; Tier 3
Automatically formatted Input Fields shall use consistent, recognizable formatting.

4.8.1; Tier 2
Links shall use the color defined in the CSS.

4.8.2; Tier 2
Links shall not use underlined text. under review

4.8.3; Tier 2
Linked text shall indicate what will happen when the link is clicked, not “Click Here” or “Link”. under review

4.9.1; Tier 3
Log entries shall include a timestamp.

4.9.2; Tier 3
When Log is scrolled to the top, it shall remain locked to the top, allowing users to always see the latest event.

4.9.3; Tier 3
When Log is scrolled to view older events, incoming events shall not change the scrolling position.

4.9.4; Tier 3
Log component text shall use sentence case capitalization.

4.10.1; Tier 3
Pagination shall not use underlined text except for in hovered elements. under review

4.10.2; Tier 3
Pagination shall display Prev and Next links when the entire page range cannot be displayed.

4.10.3; Tier 3
Pagination shall remove the Prev link when there are no more pages before the first numeral displayed.

4.10.4; Tier 3
Pagination shall remove the Next link when there are no more pages after the last numeral displayed. under review

Note: Pop Up Menu has been revised from a component to a pattern. See 3.6.0 for updates.

4.12.1; Tier 2
A Determinate Progress indicator shall indicate an operation that has a well-defined duration.

4.12.2; Tier 2
An Indeterminate Progress indicator shall indicate an operation that has unknown duration.

4.12.3; Tier 3
A Progress indicator shall be displayed when an operation takes longer than one second to complete. under review

4.13.1; Tier 2
Radio Buttons shall be used for mutually exclusive choices.

4.13.2; Tier 3
A Radio Button group shall always have one option selected.

4.13.3; Tier 3
A Radio Button group shall not exceed 6 items. For longer lists, use a Select Menu.

4.13.4; Tier 3
A Radio Button shall not initiate an action.

4.13.5; Tier 3
Radio Button labels shall use sentence case capitalization.

4.13.6; Tier 1
Radio Buttons shall have a corresponding label.

4.13.7; Tier 3
A Radio Button shall not initiate an immediate state change.

4.13.8; Tier 2
Radio Button list item Help Text shall be left-aligned to the item’s text and not its icon.

4.14.1; Tier 2
Search Fields shall contain placeholder text, defaulting to “Search … ” under review

4.14.2; Tier 3
When a Search Field has keyboard focus, the clear button shall be enabled. under review

4.14.3; Tier 3
Search text shall use sentence case capitalization.

4.14.4; Tier 2
Help Text shall be left-aligned under the relevant Search field, regardless of location of the label.

4.14.5; Tier 2
Inline Validation Text shall be left-aligned under the relevant Search field, regardless of location of the label.

4.15.1; Tier 3
Segmented Buttons shall be used for mutually exclusive choices.

4.15.2; Tier 3
A Segmented Button shall always have one option selected.

4.15.3; Tier 3
Segmented Buttons shall be limited to two to four choices.

4.15.4; Tier 3
Segmented Buttons shall use sentence case capitalization.

4.15.5; Tier 2
Help Text shall be left-aligned under the relevant Segmented Button, regardless of location of the label. under review

4.16.1; Tier 1
Status Symbols shall be displayed with the specified shapes.

4.16.2; Tier 1
Status Symbols shall be displayed with the specified colors.

4.16.3; Tier 3
Switch labels shall use sentence case capitalization. under review

4.17.1; Tier 3
Tabs shall be arranged in a single row or column.

4.17.2; Tier 3
Tabs shall use sentence case capitalization. deprecated

4.17.3; Tier 2
Large Tabs shall be used within the Global Status Bar, or top of the content area, for top level navigation. under review

4.17.4; Tier 2
Small Tabs shall be used within the content area, for sub level navigation or view switching. under review

4.18.1; Tier 3
Switch shall be used when the action takes immediate effect, without further user confirmation.

4.18.2; Tier 1
Switches shall have a corresponding label.

4.18.3; Tier 3
Switch labels shall use sentence case capitalization.

4.18.4; Tier 2
Help Text shall be left-aligned under the relevant Switch, regardless of location of the label. under review

4.19.1; Tier 3
Accordion titles shall use sentence case capitalization.

4.20.1; Tier 1
Classification and control markings shall follow all applicable laws and government standards.

4.20.2; Tier 1
If classified or controlled information is present on a screen, the screen shall include a fixed Overall Marking banner at the top.

4.20.3; Tier 1
Only government-approved control or classification text shall be included in Overall Marking banners and Portion Markings. curent

4.20.4; Tier 1
Only Astro’s defined background and text colors shall be used for classification and control markings. under review

4.20.5; Tier 1
No other UI elements shall occlude the Overall Marking banner.

4.20.6; Tier 1
Marking text shall follow the standard marking structure with bold, centered text in all capital letters.

4.20.7; Tier 1
Portion Markings shall be placed at the top or top-left of the classified or controlled portion.

4.20.8; Tier 1
Text in the Overall Marking banner shall be as specific as possible to the highest level of classified information contained in that system or view.

4.20.9; Tier 1
The classification level itself (excepting CUI) in Overall Marking banners must be spelled out completely.

4.21.1; Tier 3
Slider labels shall use sentence case capitalization.

4.21.2; Tier 2
Slider labels shall be aligned to the top left of the Slider’s track or vertically centered with the track to the left of the Slider. under review

4.21.3; Tier 2
Sliders shall have a visual indicator of the currently selected value. under review

4.21.4; Tier 2
Sliders shall have a corresponding label. under review

4.22.1; Tier 3
Clock labels shall use sentence case capitalization.

4.23.1; Tier 3
Notification Banner titles shall use sentence case capitalization.

4.24.1; Tier 3
Timeline header and track titles shall use sentence case capitalization.

4.25.1; Tier 3
Tree labels shall use sentence case capitalization.

4.26.1; Tier 3
Application State shall be visible at all times when present.

4.26.2; Tier 2
Application State shall only use the default background color or a color from the Astro Tag palettes. under review

4.26.3; Tier 2
Application State text shall meet WCAG AA color compliance for contrast against the component’s background color.

4.26.4; Tier 3
Application State text shall use sentence casing.

4.26.5; Tier 3
Application State text shall not wrap within the component.

4.27.1; Tier 3
A Pop Up shall be visible in its entirety and never exceed the constraints of the window frame.

4.27.2; Tier 3
Pop Ups shall never obscure screen items that require persistent visibility (such as Classification Banners or Application States).

4.27.3; Tier 3
Pop Ups shall not be activated by Buttons. new

4.28.1; Tier 1
Tooltips shall not contain information essential for the tasks the user needs to accomplish in their application.

4.28.2; Tier 2
Tooltips shall not include icons, rich text, images, links, or actions.

Design Compliance

Tiered Compliance

Help us improve Astro