Eine andere Art von „Abbrechen“-Button

Eine andere Art von „Abbrechen“-Button
Ein anderer Abbrechen-Button 123WORDPRESS.COM
Der „Abbrechen“-Button ist nicht Teil des notwendigen Bedienvorgangs und erscheint auch nicht als tragendes Element im Design. Allerdings wird es häufig in tatsächlichen Popup-Fenstern oder einigen Betriebsanwendungen angezeigt. Was also ist das Geheimnis dieses kleinen Abbrechen-Buttons?
Zuerst müssen wir das Konzept der Stornierung verstehen.
Abbrechen: Beim Senden von Fragen, Auswahlmöglichkeiten, Fortschritten oder Informationen müssen wir eine Bestätigungsaktion anfordern. Zu diesem Zeitpunkt werden häufig zwei Schaltflächen angezeigt: „OK“ und „Abbrechen“. Die Schaltfläche „Abbrechen“ erscheint grundsätzlich nicht allein, sondern meist zusammen mit Operationen wie „OK“ und „Speichern“.
(Derartige Dialogfelder sind in Betriebssystemen üblich und enthalten zwei Schaltflächen: „Bestätigen“ und „Abbrechen“)
Zweitens: Entwerfen und verwenden Sie die Schaltfläche „Abbrechen“. Die Position der Schaltfläche „Abbrechen“ auf der Seite. Beim Entwerfen der Schaltfläche „Abbrechen“ (oder der Seite zur Bestätigung des Vorgangs) werden die Schaltflächen „Bestätigen“ und „Speichern“ häufig links platziert und mit einem auffälligen Format gekennzeichnet, oder das Element ist standardmäßig ausgewählt. Der „Abbrechen“-Button ist häufig rechts platziert. „Bestätigen“ und „Abbrechen“ sollten nicht zu weit auseinander liegen. Der Abstand zwischen den beiden Schaltflächen in Abbildung a ist zu groß, was die visuelle Bewegungsdistanz vergrößert und das Lesen erschwert. Die Leseleistung von Abbildung b ist viel höher als die von Abbildung a.
(A)
(B)
Die Art und Weise, wie „Abbrechen“ von anderen Schaltflächen unterschieden und abgeschwächt wird, hängt von der Bedienung des Produkts ab. Einige Vorgänge, die Benutzer zur Ausführung auffordern, werden implementiert, wobei der Vorgang „Abbrechen“ weniger betont wird. In den folgenden Lösungen wird beispielsweise zwischen den Schaltflächen „OK“ und „Abbrechen“ unterschiedlich differenziert.
Der Vorteil hierbei besteht darin, dass sekundäre Vorgänge weniger deutlich sichtbar sind, fehlerhafte Vorgänge minimiert werden und Benutzer beim Erreichen ihrer Ziele unterstützt werden. Machen Sie die beiden Schaltflächen deutlich unterscheidbar und heben Sie die Bestätigungsseite hervor. Erleichtern Sie den Benutzern die Urteilsbildung.
Beim Entwerfen von Schaltflächen können Sie die primären und sekundären Beziehungen basierend auf dem tatsächlich ausgedrückten Inhalt hervorheben. Leiten Sie die Benutzer angemessen, versuchen Sie, Fehlbedienungen zu vermeiden und gestalten Sie die Bedienung bequemer und klarer. Sie können auch humanisierte beschreibende Wörter verwenden, um die Schaltfläche hervorzuheben und das Wort „Abbrechen“ abzuschwächen. Die Funktion von „Abbrechen“ besteht darin, Benutzern die Rückkehr zum vorherigen Vorgang zu ermöglichen. Der Hauptzweck der Schnittstelle darf dadurch jedoch nicht übermäßig beeinträchtigt werden. Vermenschlichte, beschreibende Worte können genügend Aufmerksamkeit von Benutzern erregen und ihnen ein Gefühl von Fürsorge und Freundlichkeit vermitteln. Die Seite zum Posten von Filmkritiken auf Douban im Bild unten verwendet blaugraue und kleine Schriftarten und das Format unterscheidet sich auch von anderen Schaltflächen. Auf der gesamten Seite wird nur eine Schaltfläche „Okay, Kommentar hinzufügen“ hervorgehoben.
Auf dieser Seite müssen Benutzer Inhalte eingeben und der Vorgang „Abbrechen“ führt zu negativen Ergebnissen. Insbesondere wenn der Benutzer versehentlich auf „Abbrechen“ klickt, ist der ausgefüllte Inhalt nicht mehr vorhanden. Im Design dieser Seite wird der „Abbrechen“-Button durch die Verwendung eines Links anstelle eines Buttons abgeschwächt und der Bestätigungsbutton „OK, Kommentar hinzufügen“ hervorgehoben. Es dient als sehr gute optische Hervorhebung. Aber denken Sie daran: Der Text sollte prägnant und die Idee klar sein.
Verwendung von „OK“ und „Abbrechen“ in Dialogfeldern.
Bei Fragendialogfeldern, deren Haupttiteltext ein Satz wie „Sind Sie sicher, dass Sie… möchten“, können Sie die Kombination „OK“ und „Abbrechen“ verwenden. Verwenden Sie „OK“ und „Abbrechen“ jedoch nicht zum Beantworten von Ja/Nein-Fragen. Abbildung a ist ein Fehlerbeispiel. Zusätzlich zu den oben genannten Situationen ist die Bedeutung von „OK“ gleichbedeutend mit „Senden“, wenn „OK“ und „Abbrechen“ kombiniert werden. Beispielsweise bedeutet die Option in Abbildung b tatsächlich „OK“ bedeutet Senden.
Abbildung c: Verwenden Sie bei Fehler- oder Warnmeldungen keine zu aufdringlichen Warnsymbole, da sich Benutzer hierdurch schnell überfordert fühlen können. Beim Entwerfen von Fehler- oder Warnmeldungen können Sie ein gelbes „!“ verwenden.
; Die Schaltfläche kann „OK“ oder „Unterstützte empfohlene Aktion“ + „Ich verstehe“ sein.
Bei der Frage „Ist…?“ können Sie direkt die Kombination „ja“ und „nein“ verwenden. Abbildung d
Ob „Abbrechen“ als Standardschaltflächenoption verwendet wird. Wenn in einem normalen Dialogfeld mehrere Schaltflächen vorhanden sind, wird eine der Schaltflächen als Standardoption festgelegt. Die Schaltfläche „Abbrechen“ wird immer unmittelbar nach der Ausführung einer Aktion angezeigt. Zu diesem Zeitpunkt ist der Kopf noch voll mit der vorherigen Aktion, sodass Sie natürlich ohne nachzudenken „OK“ wählen (normalerweise die Standardoption) und es dann bereuen. Daher ist den Benutzern oft nicht einmal bewusst, dass ihnen „möglicherweise ein Fehler bei der Bedienung unterlaufen ist“, weil das Popup-Fenster zu schnell erscheint. Daher sollte die Standardoption auf einer Schaltfläche liegen, die dem Benutzer nicht schadet.
In der folgenden Abbildung beispielsweise befindet sich beim Schließen eines nicht gespeicherten Dokuments das Standardelement für diese Eingabeaufforderung auf der Schaltfläche „Speichern“. Denn das Speichern ist verlustfreier als die anderen beiden Buttons.
Das Bild unten zeigt ein Eingabeaufforderungsfeld, das Spieler auffordert, die Spielversion zu aktualisieren. Hier müssen wir den Spielern empfehlen, die Spielversion zu aktualisieren. Daher sollte das Standardelement die Schaltfläche „OK“ sein.
Wenn wir das Standardelement für eine Eingabeaufforderungsschaltfläche festlegen, sollten wir berücksichtigen, ob es für den Benutzer von Vorteil oder schädlich ist, wenn er nach dem Festlegen als Standard einen Fehler ausführt. Darüber hinaus müssen wir darüber nachdenken, Benutzeraktionen zu empfehlen und zu fördern und den Benutzern entsprechende Anleitungen zu geben.
3. Fallanalyse: Im ursprünglichen Design wird, wenn der Spieler auf ein Element in der Elementleiste des Spiels klickt, ein Dialogfeld mit zwei Schaltflächen angezeigt: „Kaufen“ und „Abbrechen“.
(Dialogfeld zum Kauf von Hero Killer-Gegenständen)
Problem:
Die Schaltflächen scheinen keine Priorität zu haben. Aus betrieblicher Sicht können sie die Absicht, Spieler zum Kauf zu animieren, nicht hervorheben. Spieler können nicht zwischen gekauften und nicht gekauften Artikeln unterscheiden. Je nach Bedarf müssen wir die Priorität der Schaltflächen festlegen und sie in der Leistung unterscheiden. Zu diesem Zeitpunkt sollten wir die Schaltfläche „Abbrechen“ abschwächen, die Aufmerksamkeit auf die Schaltfläche „Kaufen“ erhöhen und die Spieler zum Kauf anregen.
Nach der Optimierung wurde der „Abbrechen“-Button entfernt und für ein differenziertes Design die Wirkung der Kaufen- und Nicht-Kauf-Buttons differenziert. Das Bild unten zeigt das überarbeitete Design. Sieht es nicht übersichtlicher aus als der bisherige Inhalt?
Zusammenfassend lässt sich sagen, dass die Lösung mit der „Abbrechen“-Taste darin besteht, dass die „Abbrechen“-Taste bei einem PC häufig rechts platziert ist. Unter iOS befindet sich die hervorgehobene Schaltfläche jedoch auf der rechten Seite.
Unterscheiden Sie die primären und sekundären Schaltflächen deutlich und heben Sie das Thema hervor. Die Abbrechen-Schaltfläche kann je nach Inhalt des Ausdrucks entsprechend abgeschwächt werden.
Verwenden Sie Wörter, die das Ergebnis der Aktion beschreiben und den Benutzer zum Lesen zwingen.
Verwenden Sie „OK“ und „Abbrechen“ nicht zum Beantworten von Ja/Nein-Fragen.
Sie können „Abbrechen“ als Standardoption verwenden oder manchmal die Schaltfläche wählen, die keinen Schaden anrichtet.
Zusammenfassend lässt sich sagen, dass „Abbrechen“ zwar kein wichtiges Schaltflächenelement ist, es aber nicht unbedingt richtig ist, es dort zu platzieren. Es muss dennoch entsprechend der tatsächlichen Situation sinnvoll gestaltet und standardisiert werden. Ignorieren Sie diesen Button nicht, nur weil er unauffällig ist. Beim Interaktionsdesign geht es oft um Details, die über Erfolg oder Misserfolg entscheiden!
Quelle: Tencent GDC

<<:  So legen Sie einen gepunkteten Rahmen in HTML fest

>>:  CSS sorgt dafür, dass der untergeordnete Container das übergeordnete Element übersteigt (der untergeordnete Container schwebt im übergeordneten Container).

Artikel empfehlen

Detaillierte Erklärung der Routenkonfiguration von Vue-Router

Inhaltsverzeichnis einführen Objektattribute in R...

Docker-Installationsschritte für Redmine

Laden Sie das Image herunter (optionaler Schritt,...

Das mobile Vue-Terminal realisiert den Finger-Gleiteffekt

In diesem Artikelbeispiel wird der spezifische Co...

Verwenden Sie .Htaccess, um böswillige IP-Angriffe auf Websites zu verhindern, den Zugriff auf bestimmte Domänennamen zu untersagen, Maschinencrawler zu untersagen und Hotlinking zu untersagen

Vor einigen Tagen habe ich festgestellt, dass mei...

HTML Tutorial: Sammlung häufig verwendeter HTML-Tags (4)

Verwandte Artikel: Anfänger lernen einige HTML-Ta...

Detaillierte Erläuterung spezieller Phänomene, Beispiele für die Sleep-Funktion in MySQL

Vorwort Die Schlafsystemfunktion in MySQL hat nur...

Detaillierte Erklärung der Fallstricke bei der Aufzeichnung von lower_case_table_names in MySQL

1 Ursache Nachdem das Projekt die Datenbank migri...

Zusammenfassung der verschiedenen Verwendungsmöglichkeiten von JSON.stringify

Vorwort Jeder, der schon einmal JSON verwendet ha...

Schritte eines hervorragenden Registrierungsprozesses

Für eine Website ist dies die grundlegendste Funkt...

Detaillierte Erklärung der mysql.user-Benutzertabelle in Mysql

MySQL ist eine von mehreren Benutzern verwaltete ...

Asynchrone Programmierung in Javascript: Verstehen Sie Promise wirklich?

Inhaltsverzeichnis Vorwort Grundlegende Verwendun...

Detailliertes Tutorial zur Installation von Docker und der Docker-Compose-Suite unter Windows

Inhaltsverzeichnis Einführung Herunterladen und i...

So implementieren Sie „insert if none“ und „update if yes“ in MySql

Zusammenfassung In einigen Szenarien kann eine so...

Detaillierte Erläuterung der FTP-Umgebungskonfigurationslösung (vsftpd)

1. Installieren Sie die vsftpd-Komponente Install...

Detaillierte Schritte zur Installation und Konfiguration von MySQL 5.6.21

1. Übersicht MySQL-Version: 5.6.21 Download-Adres...