EN: Eine für Smartphones optmierte Version wird in Kürze verfügbar sein
3.0.Components    3.4.Dialogs

3.4.Dialogs

Dialog boxes serve two main purposes. First, additional content can be displayed on top of the website if triggered by a button or tooltip icon. Second, a dialog box can be used as an interruptive interface element if a user action is required to proceed with the current task. This pattern is commonly used to confirm destructive actions like deleting files.

3.0.Components      3.4.Dialogs      3.4.1.Usage

3.4.1.Usage

A dialog is a modal window that is triggered to provide critical information to the user or to request an action in order to proceed with a request (e.g. when a form page is closed and it is asked if the input information should be saved).

Dialog boxes disable all current functionalities when they appear, and remain on screen until it is confirmed, dismissed, or a required action has been taken.

Dialogs are purposefully interruptive, so they should be used moderately.

Here are some pointers:

  • Requiring Acknowledgement - use it when you need the user to take a decision before continuing.
  • Avoid overuse - intrusive dialog boxes can generate frustration as they require user´s action to be closed.
  • Use a familiar language - keep in mind who your audience is and avoid complicated technical system terms.
  • Avoid scrolling amount of content - content should appear on the dialog box and should not be hidden.
  • Dialog boxes should not present more than 2 actions - you can include a "Learn More" option that will drive the user outside the page and leave the task unfinished.
  • Darken the background - draws more attention to the content and makes it more clear about what is active.
  • Allow an easy exit - have a very clear Close button.
Some Image
Illustration

Dialog Box in daimler.com

    3.0.Components      3.4.Dialogs      3.4.2.Download Resources

    3.4.2.Download Resources

    Designs of the Dialog Box component are available for Sketch and integrated in the Daimler Design Kit. You can either copy paste them into your designs or use the Sketch file as a linked library and import the symbols.

    See the Sketch Design Kit