Feedback & Alerts

Anatomy

Usage

• Toast appear on the screen for a few seconds and disappear.
• Toasts should appear one at a time.
• Toast appear above the screen layout
• Placement guidelines: Toasts should be placed 24 pixels from the bottom left side of the screen. Another option is 24 pixels from the bottom, aligned to the screen center. Toasts should not block important actions. If the above positions doesn’t suit the UI, choose a different position, but keep consistent.

Do’s & Don’ts

Examples & use cases

Progress toast
Let the users know they can continue working with a ‘progress’ toast. After the request is completed, replace the toast to a ‘success’ toast.

Toast position – bottom left
Toasts default position is 24 pixels from the bottom left side of the screen.

Toast position – bottom center
Toasts shouldn’t block important actions. another option for positioning is 24 pixels from the bottom, aligned to the screen center.

Anatomy

Usage

• Inlines are placed within the layout, as close as possible to the content it’s about, and “pushes” all content below it.
• Inlines width can stretch from edge to edge, or appear as a box with rounded corners
• Inlines do not dismiss automatically

Examples & use cases

Inline box in a side panel
The Inline is placed as close as possible to the field it refers to, and has the same padding as other near elements.

Inline box on top of a content area

Inline edge-to-edge on top of a widget
Messages that refers to a widget, can be placed below the widget header and push down the elements inside the given content area.

Inline edge-to-edge on top of a screen
Messages that refers to a tab are placed below the tab.

Inline edge-to-edge on top of ‘masthead’
Global messages that refers to the whole system are placed above the ‘masthead’.

Inline edge-to-edge on screen level
Messages that refers to the whole screen are placed below the ‘masthead’.

Anatomy

Usage

• Notifications are placed above the screen layout.
• Their appearance can be time-based or fixed until dismissal.
• They can be actionable, or passive, and should include the next steps needed to address their issue.
• Consider using a notification board, where they user can review the notification. for reference, view Arcsight case-study.
• Placement guidelines: Notifications can be placed at: top right side, bottom left side, or bottom right side of the screen, depending on your product’s UI. Notifications should not block important actions. If the above positions doesn’t suit the UI, choose a different position, but keep consistent.
• Accessibility guidelines: Whenever a notification is created the browser informs assistive technologies, such as screen readers about this. By default, the notification is read as soon as possible. Use notifications to tell the users only important and relevant issues.

Types
Micro focus supports two types of buttons: Flat & Raised.
It is recommended to use the Raised buttons, which are more accessible. However, if your product uses Flat type buttons, keep consistent with this style.

Examples & use cases

Success notification, top right corner

Notification with avatar, bottom left corner

Stacked notification board on Arcsight

Anatomy

Usage

• Dialogs are very disruptive, use only when absolutely necessary. When the issue is not critical, consider using a ‘notification‘ or an ‘inline‘.
• Dialogs can be neutral, or associated with status and severity.
• Placement guidelines: Dialogs are placed on the center of the screen, above all content. Use a ‘blanket’ component to dim the screen beneath the dialog.

Types
Micro focus supports two types of buttons: Flat & Raised.
It is recommended to use the Raised buttons, which are more accessible. However, if your product uses Flat type buttons, keep consistent with this style.

Extra severity
Extra severity option is available for the Warning and Error dialogs. Use the extra severity line only in extremely critical cases.

Do’s & Don’ts

Examples & use cases

Dialog with flat button

Dialog with dismiss icon

Dialog with link

Dialog with a destructive action button and a checkmark

Anatomy

Usage

• Tooltips appear above the screen layout, only when the user ‘hover’ or ‘focus’ on a component.
• The tooltip’s pointer can appear from top, bottom, left or right.
• The tooltip comes in two possible contrasts (for each theme): high and low contrast.
• Use tooltips when the content is too long to include inline or creates too much clutter. For example: on icon buttons that don’t include the button name, or in a multi-select input field ,when there’s not enough space to show all the selected options.
• Content guidelines: keep tooltip text short and concise, start each text with a capital letter. If the tooltip is written in a full sentence, include a period at the end, if it’s only a short phrase or a word, don’t include period at the end.

Variants

Do’s & Don’ts