Related pages: Popups, Dialogs, Toast

Lead:  Liav Nadler 

...

Type	Usage	Image
Help	A help message contains an explanation of something relevant to the primary screen. Usually appears after a user clicks a help icon (?).
Information	An information message contains additional information about something relevant to the primary screen.
Warning	A warning message informs the user about a potential problem or error, particularly one that could occur if the user continues with an action.
Error	An error message informs the user about an error that has occurred or may occur if the user continues with an action.

Usage & Behaviour

General guidelines

...

• A colored header, including:

  • a title, such as Warning.

  • a close button (X).

• A content area, containing the message text.

• Buttons, including:

  • a primary action button (usually OK).

  • a secondary action button (usually Cancel), if relevant.

• (Optional) A checkbox, allowing the user to declare something, such as I understand or Don’t show this again. For example:

Image Added

...

Image Added

Placement and Positioning

...

• A message popup is very intrusive. Use it only for important messages or long help messages. For lower-priority messages → use a Toast.

• Keep the title short and informative.

• Keep the message text short and informative.

• A common use is when the user tries to leave a page without saving their work. In this case, a warning popup will appear:

...

Image Added

Design

...