Versions Compared

Key

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

...

A dialog is a interaction between the system and the user. It is prompted when the system urgently needs input or confirmation from the use. There are two types of dialogs, modal and dialog.

Dialogs work best when used for singular, short tasks or to notify the user of task-relevant information. They keep the user anchored on the current page and allow for easy snap back once the purpose of the dialog is completed. However, dialogs are disruptive to the workflow they inhabit and thereby should be used sparingly. They should only be used for the most necessary interactions.

A dialog is triggered by an action of the user, appears above the main content of the page and remains until it is closed. The purpose of a dialog should be immediately apparent to the user, with a clear and obvious path to completion.

Dialogs always have an overlay. The overlay has the same color as the BG of the dashboard, but only in 70% transparency. The entire background behind the dialog or modal is 15% blurred. The header of the dashboard is always excluded.

Anatomy

Title: The title should be brief and clearly describe the dialogues’s task or purpose. Use the optional label above the title set the context for the information in the dialogue. When using modals, the title is optional.

...

A Dialog can vary in the height and width, with the dimensions depending on the context. The width of the modal is based on breakpoints within the window while the content.

Dialogs always have an overlay. The overlay has the same color as the BG of the dashboard, but only in 70% transparency. The entire background behind the dialog or modal is 15% blurred. The header of the dashboard is always excluded.

Rules on the maximum height of dialogs will follow soon.

Dialog

A dialogue Dialog is used when the system requires the user to enter data or perform tasks. The body of the dialogue is variable and can be freely edited. It is only important that the dialogue does not become too long. In such a case, please separate the interaction into partial interactions.

...