Eine für Smartphones optmierte Version wird in Kürze verfügbar sein
3.0.Komponenten    3.4.Dialoge

3.4.Dialoge

Dialogfenster dienen hauptsächlich zwei Zwecken. Erstens können zusätzliche Inhalte angezeigt werden, wenn dies durch einen Button oder einen Tooltip-Icon ausgelöst wird. Zweitens kann ein Dialogfenster als ein unterbrechendes Schnittstellenelement genutzt werden, wenn eine Nutzeraktion erforderlich ist, um die aktuelle Aufgabe fortzuführen. Diese Methode wird meist genutzt, um destruktive Aktionen wie das Löschen von Dateien zu bestätigen.

3.0.Komponenten      3.4.Dialoge      3.4.1.Nutzung

3.4.1.Nutzung

Ein Dialog ist ein modales Fenster, das ausgelöst wird, um dem Nutzer wichtige Informationen zu liefern oder ihn zu einer Aktion aufzufordern, um mit einer Anfrage fortzufahren (z.B. wenn eine Formularseite geschlossen wird und gefragt wird, ob die eingegebene Information gespeichert werden soll).

Sobald Dialogfenster erscheinen, sind alle laufende Funktionen deaktiviert und ein Dialogfenster bleibt so lange auf dem Bildschirm, bis es bestätigt oder abgebrochen oder eine erforderliche Aktion durchgeführt wurde.

Dialoge werden bewusst zur Unterbrechung verwendet, deshalb sollten sie nur in Maßen eingesetzt werden.

Hier einige Hinweise:

  • Bestätigungsdialoge verwenden - nutzen Sie diese Funktion, wenn der Nutzer Aktionen innerhalb eines Prozesses durchführen, Entscheidungen treffen oder Bestätigungen geben muss, bevor er fortfährt.
  • Nutzen Sie nicht übermäßig viele Dialogfenster - das kann zu Frustration führen, wenn der Nutzer ständig weitere Fenster schließen muss.
  • Verwenden Sie vertraute, verständliche Formulierungen - denken Sie daran, wer Ihre Zielgruppe ist - und vermeiden Sie komplizierte (Fach-) Begriffe.
  • Inhalte der Dialogfenster sollten immer vollständig sichtbar sein - Scrollen innerhalb einer Dialogbox sollte unbedingt vermieden werden.
  • Dialogfenster sollten maximal 2 Aktionen erfordern - Sie können einen "Erfahren Sie mehr"-Link nutzen, mit der Nutzer auf eine andere Seite geleitet werden und die Aufgabe als noch nicht abgeschlossen stehen bleibt. 
  • Ein abgedunkelter Hintergrund (Beispiel: schwarzer Layer mit 45% Transparenz) - lenkt die Aufmerksamkeit stärker auf den Inhalt und verdeutlicht, was aktiv ist. 
  • Einfaches Verlassen des Dialogfensters - verwenden Sie einen klar erkennbaren Schließen-Button.

 

Some Image
Abbildung

Dialogfenster auf der daimler.com 

    3.0.Komponenten      3.4.Dialoge      3.4.2.Download-Ressourcen

    3.4.2.Download-Ressourcen

    Die Designs der Dialogfenster-Komponente gibt es für Sketch und sind im Daimler Design Kit enthalten. Sie können diese entweder kopieren und in Ihre Designs einfügen, oder die Sketch-Datei als verlinkte Sammlung nutzen und die Symbole importieren.

    Siehe Sketch Design Kit (Steht ab August 2019 zur Verfügung)