Astro includes a library of common Icons, Symbols, and Notification Symbols. Persistent use of these will help ensure users are presented with consistent and meaningful information across applications.
Each of these must be easily identifiable by users and also be immediately distinguishable from each other, eliminating confusion and mistakes.
Astro’s icons have been designed to utilize the Astro Status System.
Rules of Thumb
- Make the icons meaningful: Avoid using icons solely for visual interest. Make sure they'll be meaningful to the end user and have a purpose in the UI.
- Use the proper icon class: Icons are categorized into classes based on their intended use. Do not use an icon from the Utility set where a Monitoring icon should be used. Extending the set with new icons is preferred over scaling existing icons to fit.
- Follow the guidelines when extending: It's important for the iconography to feel like a family that belongs together in an application. If you choose to extend the set, follow the guidelines.
Astro Icon Classes
These icons represent objects, equipment, and concepts that are being administered or monitored. The purpose of these icons is to easily, concisely, and clearly visually communicate their status to users.
Percentage Monitoring Icons
Percentage Monitoring Icons depict a value between 0 and 100 as an arc and a numeric display. Ranges within the arc may be mapped to the standard Astro Status Colors. In this example the range containing 80% is mapped to Serious.
percentage monitoring graphic cms
Action Icons initiate actions or state changes to objects or processes.
Utility Icons represent access to tools used to modify the settings for a component, object or globally. Utility Icons are also accompanied by a descriptive name.
A Component Icon is a pictorial representation of an action associated with a screen component (i.e. - popup menu open/close or window expand/contract). The Component Icon graphic provides a guide to the action that will happen to the window component. Component Icon actions are enacted when selected or clicked.
Astro Symbol Classes
Astro Symbols are associated with something being monitored and whose state is being communicated to the user. A user may make a setting change based on an items status, but the Status Symbol will only change if the status of the thing being monitored changes.
A unique single purpose state indicator to identify whether an object or component is locked/unlocked.
Events that require some user attention, but no immediate response, may be indicated by changes to a Notification Symbol.
This Notification Symbol shows that five events related to a Satellite have occurred. You may hyperlink indicators to reveal a deeper view of relevant Notification information. You may also link to the general Log.
An Icon may also include a Label and Sub-Label.
An Icon Label provides the name of the item being represented. An Icon Label should not change.
An Icon Sub-Label provides additional information to the user and may be dynamic. Use Sub-Labels only as needed to avoid unnecessary distraction.