You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Dialogs

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.

Toolbar: The toolbar contains all actions for the body as well as the modal or dialogue. More Infos you will find in the [Action Placement]. When using modals, the toolbar is optional.

Body: Contains the information and/or controls needed to complete the dialogue’s task. It can include message text and components.

Actions: The main actions needed to complete or cancel the dialogue task. Use descriptive words for the actions like Add, Delete, Save and avoid vague words like Done or OK.

[Image Placeholder]

Dialog

A dialogue 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.

When a dialogue is active, the content of the underlying page is hidden and not accessible until the user completes the task or closes the modal dialogue.

The Inspire UI kit separates all its dialogues into two types: Basic and Process Dialog.

Basic Dialog

The basic dialogue consists only of a dialogue without a sidebar. This type of dialogue may be used for all conceivable simple interactions.

[Image Placeholder]

01 - Dialog title The title must be present in each dialog. all assets are set. 02 - Content area Here you can perform all the necessary content. In modal it is not allowed to position actions to another place. 03 - Action area Here you can perform all the necessary actions.

Process Dialog

The process dialogue may only be used for interactions that specify a sequence of different interaction sections. The different sections are shown in the sidebar, and the user can move backwards and forwards within the process sections.

[Image Placeholder]

01 - Dialog title The title must be present in each dialog. all assets are set. 02 - Content area Here you can perform all the necessary content. In modal it is not allowed to position actions to another place. 03 - Action Icons In the process dialog the action icons are always located in the sidebar 04 - Process area A process can be represented by different assets. these assets are always located in the process area. 05 - Action area Here you can perform all the necessary actions.

Alignment

wip

Dismissing non-modal Dialogues

There are several possible ways to exit a non-modal dialog.

  • x: Clicking the close x icon in the upper right will close the modal without submitting any data.
  • Cancel button: If a cancel button is used then clicking it will close the modal. Cancel undoes all applied changes.
  • Esc: Press ESC on the keyboard

Modals

A modal dialogue triggers a state that focuses the user's attention exclusively on a task or relevant information. Modals interrupt a user's workflow by design. When active, a user is blocked from the one-page content and cannot return to their previous workflow until the modal task is completed or the user dismisses the modal. While effective when used correctly, modals should be used sparingly to limit disruption to the user.

[Image Placeholder]

  • 01 Content Area - Here you can place all your content.
  • 02 Action Area - Here you can perform all the necessary actions. In modal it is not allowed to position actions to another place.

Alignment

A Modal can vary in the height and width. The dimensions of the modal depend on the content. The width of the modal is based on the 16 column grid of the dashboard. The height is based on the rows of the grid.

The Modal always has a margin of 8px.

[Image Placeholder]

Dismissing a Modal

wip

Best Practices

wip

When to use a dialogue

Use it to focus the user's attention. For completing non-simple to complex tasks. To collect input from the user. To display relevant information.

When not to use a dialogue

Do not use if the content is unrelated to the current workflow. Do not use for displaying complex or large amounts of data. Do not display a sub-application or other dashboard in a dialogue box. Do not use if the user has not triggered the dialogue.

Button Placement

Look for Footerbar actions

When placing buttons, Cancel is always the outmost left button option and the primary action is always the outmost right button. There should only ever be one primary action per dialog. Dialog buttons are always full bleed and attached to the bottom of a dialog.

[Image Placeholder]

Single buttons are placed across the entire page. The single button format is most commonly used for confirmation dialogues. In most scenarios, a primary button is used when only one button is needed.

[Image Placeholder]

When using two buttons, the secondary button is on the left and the primary button is placed on the right. Each button spans 50% of the dialog and are full bleed to the edge.

[Image Placeholder]

If three buttons are required, each takes up 33.33 % of the dialogue width. Only the rightmost button may be a primary button, the other two are secondary buttons. If all three actions have the same weight, all three should be secondary buttons.

[Image Placeholder]

Modals

  • Passiv: Presents information the user needs to be aware of concerning their current workflow. Contains no actions for the user to take.
  • Active: Requires an action to be taken in order for the modal to be completed and closed. Contains a cancel and primary action button
  • Acknowledgement: System requires an acknowledgement of the information from the user. Contains only a single button, commonly "OK".
  • Fokus: Focused and action to be taken. Contains a Secondary and Primary action button.
  • Progress: Requires several steps to be completed bevor it can be closed. Contains a cancel, previous, and next/completion button.

Dialog Behaviors

Trigger

Dialogues are triggered by a user's action and not generated by the system. Common components that can trigger a dialogue include buttons, links or icons.

[Image Placeholder]

Focus

Once the dialogue box is open, set the initial focus to the first location that allows user input. The focus should then remain in the dialogue until it is closed.

[Image Placeholder]

Process

The modal component has a fixed maximum height. If the content of the dialogue is longer than the height of the dialogue, the main part should be divided into so that the user can scroll through the process. For this case, only the process dialogue may be used.

[Image Placeholder]

Validation

Validate a user's input before closing the dialogue. If an input is invalid, the dialogue should remain open with the input marked with an error status and an inline error message. The message should inform the user what has happened and give advice on next steps or possible solutions. An effective and immediate error message can help the user understand and resolve the problem.

[Image Placeholder]

Modal Variant

Passiv

Passive modals present information the user needs to be aware of concerning their current workflow. It contains no actions for the user to take and should not include any data that needs to be submitted. They should serve as a type of notification alerting the user to urgent information such as reporting system errors or conveying a consequence of a user's action. [Link to Notifications]

[Image Placeholder]

Dismissing a Passive Modal

  • X: Clicking the close c icon in the upper right will close the modal without submitting any data and return the user to their previous context.
  • Click Elsewhere: Clicking outside the passive modal will Automatically close the modal.
  • Esc: Pressing ESC on the keyboard will close the modal and send user to the previous context.

Active

Active modals are used to validate user decisions it to gain secondary conformation from the user. Active modals require an action to be taken in order for the modal to be completed and closed. It contains a cancel and primary action button.

[Image Placeholder]

Dismissing an Active Modal

  • X: Clicking the close x icon in the upper right corner will close the modal and return the user to their previous context.
  • Cancel Button: Clicking the cancel button will close the modal and return the user to their previous context. Cancel undoes all applied changes.
  • Esc: Pressing ESC on the keyboard will close the modal and send user to the previous context.

Acknowledgement

Acknowledgement modals are used to validate user decisions or to gain secondary confirmation form the user. Transactional modals require an action to be taken in order for the modal to be completed and closed. It contains a cancel and primary action button.

[Image Placeholder]

Dismissing a Acknowledgement Modal

  • X: clicking the close x icon in the upper right will close the modal without submitting any data and return the user to their previous context.
  • Task Complete: clicking the primary action will complete the task and automatically close the modal.
  • Esc: Pressing ESC on the keyboard will close the modal and send user to the previous context.

Focus

Focus modals are used to contain very important user decisions. The focus here is the focused headline. The focused modals have only ghost buttons. After confirming, the user will be informed about their conformation via inline notification.

[Image Placeholder]

Dismissing a focus modal

  • Task Completion: clicking the primary action will complete the task and automatically close the modal.
  • Cancel Button: clicking the cancel button will close the modal and return the user to their previous context. Cancel undoes all applied changes.
  • No labels