EGS Design Compliance

Version 3.2.0

Design Compliance

Applications adopted by EGS 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 EGS 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 EGS 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.

  1. Tier 1
    Basic status icons, status colors, really important things for operators to quickly become familiar with the application
  2. Tier 2
    Tier 1 + Astro colors to make it look like an Astro application (visual)
  3. Tier 3
    Tier 2 + interaction patterns (behavioral)
  1. 1.0 General
    1. 1.1
      ASTRO UXDS provides developers with guidance to develop user interfaces. User interfaces must comply with the guidance in this section to be EGS 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. 2.0 Design Guidelines
    1. 2.1.0 Color View Color Page
      1. 2.1.1 Tier 2
        Components and backgrounds shall conform to the colors specified in Astro's color palettes.
        updated
      2. 2.1.2 Tier 2
        The colors specified in the Tag 1, Tag 2, Tag 3, and Tag 4 palettes shall be used when distinct colors are needed to indicate data categories or groups.
    2. 2.2.0 Typography View Typography Page
      1. 2.2.1 Tier 2
        The Roboto typeface or system fonts shall be used for content and components.
        updated
      2. 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
      3. 2.2.3 Tier 2
        Text shall conform to the specified typography for Heading, Body, and Inline Text.
      4. 2.2.4 Tier 3
        Text within Astro components will use sentence case capitalization unless otherwise stated.
        under review
  3. 3.0 Patterns
    1. 3.1.0 Status System View Status System Page
      1. 3.1.1 Tier 1
        Elements indicating state or status shall use only the specified Status Symbols.
      2. 3.1.2 Tier 1
        Elements indicating state or status shall use only the specified Status Colors.
    2. 3.2.0 Data Visualization View Data Visualization Page
      1. 3.2.1 Tier 3
        Data Visualizations shall have no more than 8 colors per data set.
        under review
      2. 3.2.2 Tier 3
        Data Visualizations shall use sentence case capitalization for titles, labels, and legends.
    3. 3.3.0 Tables View Tables Page
      1. 3.3.1 Tier 3
        Table titles, legends, and column labels shall use sentence case capitalization.
    4. 3.4.0 Forms and Validation View Forms and Validation Page
      1. 3.4.1 Tier 3
        Form controls shall not use placeholder text in place of help text.
      2. 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. 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
      4. 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
      5. 3.4.5 Tier 3
        Help Text shall use sentence case capitalization.
      6. 3.4.6 Tier 3
        Validation Text shall use sentence case capitalization.
      7. 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.
      8. 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.
  4. 4.0 Components
    1. 4.1.0 Button View Button Page
      1. 4.1.1 Tier 3
        Buttons shall act as actionable elements, not as state indicators.
      2. 4.1.2 Tier 3
        Buttons shall not activate Pop Up Menus.
        under review
      3. 4.1.3 Tier 2
        Grouped Buttons shall have the same width and even spacing.
        deprecated
      4. 4.1.4 Tier 3
        Button titles shall be verbs that describe the action performed.
      5. 4.1.5 Tier 1
        Button widths shall accommodate the full title without truncating or abbreviating.
        under review
      6. 4.1.6 Tier 1
        Buttons shall be clearly titled, with no outside label.
      7. 4.1.7 Tier 2
        An ellipsis (…) shall follow the Button title when further action is required to complete the command.
        under review
      8. 4.1.8 Tier 2
        Outline Button style shall indicate the less preferred option in grouped Buttons.
        under review
      9. 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.
      10. 4.1.10 Tier 3
        Button text shall use sentence case capitalization.
    2. 4.2.0 Checkbox View Checkbox Page
      1. 4.2.1 Tier 3
        Checkboxes shall set values, not initiate actions.
      2. 4.2.2 Tier 3
        Checkboxes shall act independently of others in a group.
        curent
      3. 4.2.3 Tier 2
        Checkboxes shall align vertically when in a group.
      4. 4.2.4 Tier 1
        Checkboxes shall have a corresponding label.
      5. 4.2.5 Tier 3
        Checkbox labels shall use sentence case capitalization.
      6. 4.2.6 Tier 2
        Checkbox list item Help Text shall be left-aligned to the item’s text and not its icon.
      7. 4.2.7 Tier 2
        Inline Validation Text shall be left-aligned under the relevant checkbox list, regardless of location of the label.
    3. 4.3.0 Dialog View Dialog Page
      1. 4.3.1 Tier 3
        Dialogs shall use text Buttons for confirm or cancel actions, not links or other components.
      2. 4.3.2 Tier 3
        The confirm Button shall be to the right of the cancel Button, and right aligned within the Dialog Box.
      3. 4.3.3 Tier 3
        Dialogs shall be closed only with confirm or cancel Buttons.
      4. 4.3.4 Tier 2
        Button titles shall be verbs that describe their actions, or the generic titles “OK” and “Cancel”.
      5. 4.3.5 Tier 2
        Dialog text shall be clear, brief, and actionable.
      6. 4.3.6 Tier 3
        Dialog title and button labels shall use sentence case capitalization.
    4. 4.4.0 Select View Select Page
      1. 4.4.1 Tier 3
        Menu items shall use sentence case capitalization.
      2. 4.4.2 Tier 3
        An ellipsis (…) shall follow a menu item when further action is required to complete the command.
        under review
      3. 4.4.3 Tier 3
        Select Menus shall not exceed 25 menu items. For longer lists, use a Table instead.
      4. 4.4.4 Tier 2
        Help Text shall be left-aligned under the relevant Select Menu, regardless of location of the label.
      5. 4.4.5 Tier 2
        Inline Validation Text shall be left-aligned under the relevant Select Menu, regardless of location of the label.
    5. 4.5.0 Global Status Bar View Global Status Bar Page
      1. 4.5.1 Tier 3
        The Global Status Bar shall be reserved for global elements that appear on every screen.
      2. 4.5.2 Tier 2
        The Global Status Bar shall include the application name. Other elements are optional.
        under review
      3. 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. 4.5.4 Tier 2
        Global Status Bar shall use dark theme styling even when the application is light themed.
    6. 4.6.0 Icons and Symbols View Icons and Symbols Page
      1. 4.6.1 Tier 1
        Monitoring Icons shall include a label and a Status Symbol.
      2. 4.6.2 Tier 1
        Monitoring Icons shall be colored with one of the six standard status colors.
      3. 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. 4.6.4 Tier 1
        Status Symbols shall not be altered. They are required for ADA 508 and WCAG 2.0 compliance.
      5. 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
      6. 4.6.6 Tier 2
        Grouped Icons shall be equally sized.
      7. 4.6.7 Tier 3
        Icon labels shall use sentence case capitalization.
    7. 4.7.0 Input Field View Input Field Page
      1. 4.7.1 Tier 2
        Stacked Input Fields shall be left-aligned.
      2. 4.7.2 Tier 2
        Input Fields shall use the mimimum text size defined in the CSS.
        under review
      3. 4.7.3 Tier 2
        Input Field labels shall be aligned to the top left, or to the left, of the field.
      4. 4.7.4 Tier 2
        Input Fields shall have a corresponding label.
        under review
      5. 4.7.5 Tier 2
        Help Text shall be left-aligned under the relevant Input Field, regardless of location of the label.
      6. 4.7.6 Tier 3
        Input Fields shall use sentence case capitalization.
      7. 4.7.7 Tier 3
        Input Field labels shall not use placeholder text in place of labels.
        under review
      8. 4.7.8 Tier 3
        Automatically formatted Input Fields shall use consistent, recognizable formatting.
    8. 4.8.0 Link View Link Page
      1. 4.8.1 Tier 2
        Links shall use the color defined in the CSS.
      2. 4.8.2 Tier 2
        Links shall not use underlined text.
        under review
      3. 4.8.3 Tier 2
        Linked text shall indicate what will happen when the link is clicked, not "Click Here" or "Link".
        under review
    9. 4.9.0 Log View Log Page
      1. 4.9.1 Tier 3
        Log entries shall include a timestamp.
      2. 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.
      3. 4.9.3 Tier 3
        When Log is scrolled to view older events, incoming events shall not change the scrolling position.
      4. 4.9.4 Tier 3
        Log component text shall use sentence case capitalization.
    10. 4.10.0 Pagination View Pagination Page
      1. 4.10.1 Tier 3
        Pagination shall not use underlined text except for in hovered elements.
        under review
      2. 4.10.2 Tier 3
        Pagination shall display Prev and Next links when the entire page range cannot be displayed.
      3. 4.10.3 Tier 3
        Pagination shall remove the Prev link when there are no more pages before the first numeral displayed.
      4. 4.10.4 Tier 3
        Pagination shall remove the Next link when there are no more pages after the last numeral displayed.
        under review
    11. 4.11.0 Pop Up View Pop Up Page
      1. 4.11.1 Tier 3
        Menu items shall use sentence case capitalization.
      2. 4.11.2 Tier 3
        An ellipsis (…) shall follow a menu item when further action is required to complete the command.
      3. 4.11.3 Tier 2
        Related groups of menu items shall be indicated by separator lines.
        under review
      4. 4.11.4 Tier 3
        Pop Ups shall not exceed 25 menu items.
    12. 4.12.0 Progress View Progress Page
      1. 4.12.1 Tier 2
        A Determinate Progress indicator shall indicate an operation that has a well-defined duration.
      2. 4.12.2 Tier 2
        An Indeterminate Progress indicator shall indicate an operation that has unknown duration.
      3. 4.12.3 Tier 3
        A Progress indicator shall be displayed when a operation takes longer than one second to complete.
        under review
    13. 4.13.0 Radio Button View Radio Button Page
      1. 4.13.1 Tier 2
        Radio Buttons shall be used for mutually exclusive choices.
      2. 4.13.2 Tier 3
        A Radio Button group shall always have one option selected.
      3. 4.13.3 Tier 3
        A Radio Button group shall not exceed 6 items. For longer lists, use a Select Menu.
      4. 4.13.4 Tier 3
        A Radio Button shall not initiate an action.
      5. 4.13.5 Tier 3
        Radio Button labels shall use sentence case capitalization.
      6. 4.13.6 Tier 1
        Radio Buttons shall have a corresponding label.
      7. 4.13.7 Tier 3
        A Radio Button shall not initiate an immediate state change.
      8. 4.13.8 Tier 2
        Radio Button list item Help Text shall be left-aligned to the item’s text and not its icon.
    14. 4.14.0 Search View Search Page
      1. 4.14.1 Tier 2
        Search Fields shall contain placeholder text, defaulting to "Search ... "
        under review
      2. 4.14.2 Tier 3
        When a Search Field has keyboard focus, the clear button shall be enabled.
        under review
      3. 4.14.3 Tier 3
        Search text shall use sentence case capitalization.
      4. 4.14.4 Tier 2
        Help Text shall be left-aligned under the relevant Search field, regardless of location of the label.
      5. 4.14.5 Tier 2
        Inline Validation Text shall be left-aligned under the relevant Search field, regardless of location of the label.
    15. 4.15.0 Segmented Button View Segmented Button Page
      1. 4.15.1 Tier 3
        Segmented Buttons shall be used for mutually exclusive choices.
      2. 4.15.2 Tier 3
        A Segmented Button shall always have one option selected.
      3. 4.15.3 Tier 3
        Segmented Buttons shall be limited to two to four choices.
      4. 4.15.4 Tier 3
        Segmented Buttons shall use sentence case capitalization.
      5. 4.15.5 Tier 2
        Help Text shall be left-aligned under the relevant Segmented Button, regardless of location of the label.
        under review
    16. 4.16.0 Status Symbol View Status Symbol Page
      1. 4.16.1 Tier 1
        Status Symbols shall be displayed with the specified shapes.
      2. 4.16.2 Tier 1
        Status Symbols shall be displayed with the specified colors.
      3. 4.16.3 Tier 3
        Switch labels shall use sentence case capitalization.
        under review
    17. 4.17.0 Tabs View Tabs Page
      1. 4.17.1 Tier 3
        Tabs shall be arranged in a single row or column.
      2. 4.17.2 Tier 3
        Tabs shall use sentence case capitalization.
        deprecated
      3. 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. 4.17.4 Tier 2
        Small Tabs shall be used within the content area, for sub level navigation or view switching.
        under review
    18. 4.18.0 Switch View Switch Page
      1. 4.18.1 Tier 3
        Switch shall be used when the action takes immediate effect, without further user confirmation.
      2. 4.18.2 Tier 1
        Switches shall have a corresponding label.
      3. 4.18.3 Tier 3
        Switch labels shall use sentence case capitalization.
      4. 4.18.4 Tier 2
        Help Text shall be left-aligned under the relevant Switch, regardless of location of the label.
        under review
    19. 4.19.0 Accordion View Accordion Page
      1. 4.19.1 Tier 3
        Accordion titles shall use sentence case capitalization.
    20. 4.20.0 Classification & Control Markings View Classification & Control Markings Page
      1. 4.20.1 Tier 1
        Classification and control markings shall follow all applicable laws and government standards.
      2. 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.
      3. 4.20.3 Tier 1
        Only government-approved control or classification text shall be included in Overall Marking banners and Portion Markings.
        curent
      4. 4.20.4 Tier 1
        Only Astro's defined background and text colors shall be used for classification and control markings.
        under review
      5. 4.20.5 Tier 1
        No other UI elements shall occlude the Overall Marking banner.
      6. 4.20.6 Tier 1
        Marking text shall follow the standard marking structure with bold, centered text in all capital letters.
      7. 4.20.7 Tier 1
        Portion Markings shall be placed at the top or top-left of the classified or controlled portion.
      8. 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.
      9. 4.20.9 Tier 1
        The classification level itself (excepting CUI) in Overall Marking banners must be spelled out completely.
    21. 4.21.0 Slider View Slider Page
      1. 4.21.1 Tier 3
        Slider labels shall use sentence case capitalization.
      2. 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
      3. 4.21.3 Tier 2
        Sliders shall have a visual indicator of the currently selected value.
        under review
      4. 4.21.4 Tier 2
        Sliders shall have a corresponding label.
        under review
    22. 4.22.0 Clock View Clock Page
      1. 4.22.1 Tier 3
        Clock labels shall use sentence case capitalization.
    23. 4.23.0 Notification Banner View Notification Banner Page
      1. 4.23.1 Tier 3
        Notification Banner titles shall use sentence case capitalization.
    24. 4.24.0 Timeline View Timeline Page
      1. 4.24.1 Tier 3
        Timeline header and track titles shall use sentence case capitalization.
    25. 4.25.0 Tree View Tree Page
      1. 4.25.1 Tier 3
        Tree labels shall use sentence case capitalization.
    26. 4.26.0 Application State View Application State Page
      1. 4.26.1 Tier 3
        Application State shall be visible at all times when present.
      2. 4.26.2 Tier 2
        Application State shall only use the default background color or a color from the Astro Tag palettes.
        under review
      3. 4.26.3 Tier 2
        Application State text shall meet WCAG AA color compliance for contrast against the component’s background color.
      4. 4.26.4 Tier 3
        Application State text shall use sentence casing.
      5. 4.26.5 Tier 3
        Application State text shall not wrap within the component.