Components
Notifications
Format
All notifications have subject titles, which should be short and descriptive. Example: “Executive Report 7 is ready to view.”
We recommend the body of the Notification be contained within two lines. Be descriptive and include any troubleshooting actions or next steps. When possible, communicate the main message using just the title. You can include links within the Notification body that redirect the user to next steps.
We recommend that Toast Notifications automatically disappear after five seconds. Inline Notifications are persistent until the user dismisses them. All notifications have at least one method of dismissal (typically, it is a small “x” in the upper right hand corner).
Icons may provide additional clarity. Icons should be placed to the left of a title. These glyphs (16x16) can be found in the iconography library.
Users should be able to select the checkbox by clicking on the box directly or by clicking on its label.
Placement
All notifications have subject titles, which should be short and descriptive. Example: “Executive Report 7 is ready to view.”
We recommend the body of the Notification be contained within two lines. Be descriptive and include any troubleshooting actions or next steps. When possible, communicate the main message using just the title. You can include links within the Notification body that redirect the user to next steps.
We recommend that Toast Notifications automatically disappear after five seconds. Inline Notifications are persistent until the user dismisses them. All notifications have at least one method of dismissal (typically, it is a small “x” in the upper right hand corner).
Icons may provide additional clarity. Icons should be placed to the left of a title. These glyphs (16x16) can be found in the iconography library.
Notification Panel
Important actions
- 1. Header - includes the count of how many notifications there are. Notifications are only shown from the last 30 days.
- 2. Neon Updates - This is where we will house the link to the splash message with Neon's newest features.
- 3. Unread Count and Dismissal - This let's the user know how many unread messages they have AND allows them to bulk mark them all as read.
- 4. Filter - This let's us filter by type of notification ( Activity, Executive Report, and Duplicate Scan *so far*)
- 5. Indication icon - This icon indicates what type of notification it is (see "code") AND if the notification is read (gray) or unread (green). The background of the notification cell will also be slightly gray when unread.
- 6. Expansion panels - When a notification is clicked it will expand to show the entirety of the message. See below for variations on notification panel expansions.
When the user click a notification cell, the cell will expand to reveal the entirety of the message. There are *currently* three types of notifications in the notification panel:
- Activity
- Duplicate Scan
- Executive Report
Duplicate Scan
Clicking the title will take the user to the duplicate scan page.
Components
- Icon - "fa-copy"
- Type - "Duplicate Scan"
- Button - "Mark as Unread"
- Title (Large blue text) - "Your <<name of scan>> is Complete"
- Amount of duplicates found
- Time of completion (relative time)
Executive Report
Clicking the title will take the user to the Executive Report page.
Components
- Icon - "fa-trophy"
- Type - "Executive Report"
- Button - "Mark as Unread"
- Title (Large blue text) - "Your <<name of report>> Executive Report is Ready"
- Time of completion (relative time)
Activity
Clicking the title will take the user to the Activity page...maybe?
Components
- Icon - "fa-calendar-alt"
- Type - "Activity Reminder"
- Button - "Mark as Unread"
- Title (Large blue text)
- Date and Time stamp for when activity starts
- When reminder went out(relative time)