Rückgängig machen statt Bestätigungsdialoge: Entwerfen einer weniger unterbrechenden Benutzeroberfläche
Warum die Routine „Sind Sie sicher?“ Dialoge scheitern, wenn eine Bestätigung noch richtig ist, und wie man Undo-Toasts klar, zugänglich und sicher gestaltet.
Kernaussage
Verwenden Sie „Rückgängig“ für Aktionen, die rückgängig gemacht werden können: Führen Sie die Aktion sofort aus und zeigen Sie dann eine kurze, nicht blockierende Nachricht mit einer Schaltfläche „Rückgängig“ an. Behalten Sie Bestätigungsdialoge für schwerwiegende, unumkehrbare Aktionen wie dauerhaftes Löschen oder große Zahlungen bei und machen Sie sie konkret: Benennen Sie das Objekt und die Konsequenz. Durch das Bestätigen routinemäßiger Aktionen werden Menschen darin trainiert, auf „OK“ zu klicken, ohne es zu lesen.
Warum Routinebestätigungen nicht mehr funktionieren
Die Anleitung von Nielsen Norman Group zu Bestätigungsdialogen ist klar: Verwenden Sie sie vor Aktionen mit schwerwiegenden Folgen und nicht für Routineaktionen. Wenn Menschen denselben Dialog mehrmals sehen, bestätigen sie dies aus Gewohnheit, und der Dialog verhindert nicht mehr die Fehler, die er abfangen sollte. Im selben Artikel wird empfohlen, wann immer möglich das Rückgängigmachen anzubieten, anstatt sich auf eine Warnung zu verlassen.
Bestätigen oder rückgängig machen: eine einfache Regel
Stellen Sie eine Frage: Kann dies rückgängig gemacht werden? Wenn ja, handeln Sie und bieten Sie das Rückgängigmachen an. Wenn nein, bestätigen Sie zuerst und machen Sie die Bestätigung konkret.
- Archivieren, verschieben, als gelesen markieren, aus einer Liste entfernen: Jetzt handeln, Rückgängigmachen anbieten.
- Senden Sie eine Nachricht: Viele Produkte verzögern den Versand kurzzeitig, sodass er rückgängig gemacht werden kann. Mit Gmail können Benutzer ein Rückgängig-Fenster von 5, 10, 20 oder 30 Sekunden wählen.
- Dauerhaft löschen, bezahlen, öffentlich veröffentlichen: Zuerst bestätigen, das Element und die Auswirkung benennen („142 Dateien löschen“).
- Besser noch: Machen Sie das Löschen rückgängig, indem Sie einen Papierkorb oder eine Wiederherstellungsperiode festlegen, und verwenden Sie dann „Rückgängig“.
Entwerfen der Rückgängig-Nachricht
Material Design nennt diese Komponente eine Snackbar: eine kurze, minimal unterbrechende Nachricht, die eine einzelne Aktion enthalten kann, im Gegensatz zu einem Dialog, der eine Antwort erfordert. Schreiben Sie in wenigen Worten auf, was passiert ist, geben Sie „Rückgängig“ als einzige Aktion ein und lassen Sie es lange genug auf dem Bildschirm, damit die Leute reagieren können. Verstecken Sie wichtige Rückgängig-Aktionen nicht in Nachrichten, die nach zwei Sekunden verschwinden.
Details zur Barrierefreiheit
Toasts, die von selbst verschwinden, können von Screenreader-Benutzern und Personen, die mehr Zeit benötigen, übersehen werden. Kündigen Sie die Nachricht über einen höflichen Live-Bereich an, ermöglichen Sie Tastaturbenutzern, die Schaltfläche „Rückgängig“ zu erreichen, halten Sie den Timer an, während sich die Nachricht mit der Maus bewegt oder fokussiert, und bieten Sie eine andere Möglichkeit, die Aktion rückgängig zu machen, z. B. eine Verlaufsliste oder einen Papierkorb.
Antrag auf Rückgängigmachung
Ein kurzer, ruhiger Eingang vom Rand des Bildschirms und ein klarer Ausgang helfen dabei, dass die Leute die Nachricht wahrnehmen, ohne unterbrochen zu werden. Wenn Sie auf „Rückgängig“ klicken, animieren Sie das Element wieder an seinen Platz, sodass die Umkehrung sichtbar ist. Berücksichtigen Sie bewegungsreduzierte Einstellungen mit einem einfachen Fade.
Wichtige Prinzipien
- Umkehrbare Aktionen: Sofort handeln und Rückgängigmachen anbieten
- Unumkehrbare, schwerwiegende Handlungen: eine konkrete Bestätigung, die die Auswirkungen benennt
- Routinebestätigungen werden aus Gewohnheit durchgeklickt
- Machen Sie Rückgängig-Nachrichten zugänglich: Live-Region, Tastaturfokus, genügend Zeit
- Animieren Sie die Umkehrung, damit die Leute sehen, dass es funktioniert hat
Häufige Fragen
Quellen
- Confirmation Dialogs Can Prevent User Errors — If Not Overused — Nielsen Norman Group
- Send or unsend Gmail messages — Gmail Hilfe
- Snackbar guidelines — Material Design 3