Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • For basic popup structure see Popups.

  • The message popup may contain a checkbox, allowing the user to declare a statement, e.g. I understand or Don’t show this again.

Image Removed

Placement and Positioning

  • Message popups have a fixed width.

  • The height of the popup may vary from a minimum of 260 pixels, and up to 600 pixels, depending on the amount of content.

  • If the content does not fit within the content area, a Scrollbar will appear.

Content

  • Popup header will contain the name of the object that triggered it. This can be either a noun or a verb.

  • The least destructive action will be default button, located on the right-end of the popup.

Best practices

  • 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 Removed

Design

Zeplin link

Screen thumbnail

https://zpl.io/bP6mg6V

...