Farbkombination für drei Knöpfe

Welche Farbkombination würde für diese drei Tasten am besten funktionieren:

Geben Sie hier die Bildbeschreibung ein

Sollen alle die gleiche Farbe behalten?

Dies sind meine Optionen:

Geben Sie hier die Bildbeschreibung ein

Bild der ganzen Seite

Geben Sie hier die Bildbeschreibung ein

Primär vs. Default und Default vs. Erfolg scheinen ablenkend.
Wenn ich mir die größere Seite ansehe, würde ich fragen, was die Schaltfläche „Löschen“ bewirken soll. Ist es wirklich eine notwendige Option?

Antworten (4)

Die Go - Taste sollte größer sein und den höchsten Kontrast von allen haben , da sie die primäre ist.

Die Schaltfläche „ Löschen “ ist in Ordnung, da es sich um eine sekundäre Aktion handelt , die neutral sein sollte .

Für mich hat der Switch- Button sowohl in Größe als auch Kontrast zu viel Präsenz . Ich würde es zwischen den Origin-Destination-Dropdowns positionieren, wo es "von selbst" mehr Sinn macht.

Hier zwei ähnliche Lösungen, die für mich viel sauberer sind und für diesen speziellen Zweck eine bessere Benutzerfreundlichkeit bieten (ich persönlich würde die erste wählen ):

Geben Sie hier die Bildbeschreibung ein

Unordnung beseitigen :

Wenn die Schaltfläche „Löschen“ nur diese beiden Felder (von/bis) löscht, scheint dies nicht erforderlich zu sein, da die Benutzer sowieso auf jedes Dropdown klicken und die Auswahl treffen müssen, und dies ändert sich nicht, wenn Sie eine Schaltfläche „Löschen“ hinzufügen .
Wenn dies der Fall ist, empfehle ich, es zu entfernen, damit Sie eine sauberere Benutzeroberfläche erhalten und verhindern, dass Benutzer eine Aktion ausführen, die keinen Mehrwert für sie bringt (und außerdem unbeabsichtigt entfernen, was sie ausgewählt haben).

Geben Sie hier die Bildbeschreibung ein

Die Pfeile ↔︎ waren auch mein erster Gedanke. Sehen Sie, wie translate.google.com es macht: eine ↔︎-Schaltfläche mit einem Tooltip.
Wenn klar wirklich zweitrangig ist, stimme ich zu. Wenn es andererseits destruktiv ist (eingegebene Arbeit wird entfernt), würde ich argumentieren, dass es wirklich anders gehandhabt werden sollte.
@DA01 Könnten Sie Ihren letzten Kommentar näher erläutern? Welche Option wäre besser, wenn sie destruktiv ist und warum? Dein POV interessiert mich sehr.
@rewobs Ich empfehle normalerweise, überhaupt keine destruktiven Optionen zu haben, obwohl sie immer noch in vielen Systemen vorhanden sind. Da es destruktiv ist, sollte es IMHO nicht wie eine Schaltfläche aussehen, da Schaltflächen gewohnheitsmäßig angeklickt werden können. Leute füllen oft ein Formular aus und klicken dann auf die „offensichtlichste“ Schaltfläche unten, in der Annahme, dass es SENDEN ist. Daher empfehle ich zumindest im Formulardesign normalerweise, dass die einzige Schaltfläche „Senden“ ist . Wenn es andere Aufgaben gibt, machen Sie sie visuell anders und gedämpft im Vergleich zur primären Schaltfläche.
Ich werde sagen, Sie haben einen großen Kontrast zwischen GO und CLEAR, also ist das Problem in Ihrem speziellen Beispiel wirklich nicht vorhanden.
@ DA01 Ich habe deinen Punkt verstanden, danke für die Klarstellung. Außerdem habe ich Ihren Kommentar in der Frage gelesen und gefragt, ob die Schaltfläche „Löschen“ wirklich notwendig ist, und ich denke, dies ist nicht der Fall, da der Benutzer den Wert sowieso durch erneute Auswahl aus den Dropdowns ersetzt, sodass das Hinzufügen einer Schaltfläche „Löschen“ eine unnötige hinzufügt Aktion „Mittendrin“.

Eine Lösung besteht darin, Ihre Schaltfläche visuell nach Priorität zu trennen.

Sie haben normalerweise primäre Schaltfläche(n), sekundäre Schaltfläche(n) und manchmal tertiäre Schaltfläche(n) und/oder nicht bevorzugte Aktionsschaltflächen.

Für Primär und Sekundär schlage ich normalerweise Ihre bevorzugte Branding-Farbe (rein subjektiv) in zwei Kontraststufen vor. Hoher Kontrast für primär, etwas weniger Kontrast für sekundär.

Tertiäre Schaltflächen versuche ich normalerweise zu vermeiden und verwende stattdessen ein völlig anderes visuelles Element, z. B. einen Link.

Angesichts Ihres Beispiels und der Interpretation des Kontexts nach bestem Wissen und Gewissen würde ich Folgendes vorschlagen:

Geben Sie hier die Bildbeschreibung ein

Das ist nur ein wirklich schnelles Beispiel, und Sie müssten bestätigen, dass der Kontrast den Zugänglichkeitsrichtlinien entspricht und nicht deaktiviert aussieht (was bei mir irgendwie der Fall ist, also muss es optimiert werden), aber hoffentlich bringt es den Punkt auf den Punkt.

UPDATE: Ich habe gerade bemerkt, als ich dies gepostet habe, dass dies das Muster ist, das StackExchange beim Erstellen eines neuen Posts verwendet. Die SAVE-Schaltfläche ist primär, CANCEL ist tertiär und wird eher als Link als als Schaltfläche angezeigt.

Kontrastreiche (z. B. schwarz-weiße) Farben sind immer am besten, was die orange Option irgendwie eliminiert. Und wenn Sie dem Mix ein bisschen Marketing hinzufügen, welches Farbschema wird für den Rest Ihrer Seite in Bezug auf Schaltflächen und Anwendungen verwendet? Aber wenn ich mich entscheiden müsste: Go: grün; Schalter...: marineblau; Klar: schwarz-weiß. Denken Sie daran, dass die Farbe auch mit der Präferenz zusammenhängt.

(Off-Topic: Sie könnten die lange Beschriftung zum Umschalten durch eine mit Symbolen beschriftete Schaltfläche zwischen den beiden Feldern eliminieren.)

Willkommen bei UX.stackexchange. Welche Beweise haben Sie dafür, dass ein hoher Kontrast immer der beste ist?
Nun, es ist vielleicht nicht die beste Lösung für jeden Kontext, aber ein hoher Kontrast verbessert die Lesbarkeit, da er den Text vom Hintergrund unterscheidet. Sonst wird es unscharf. Denken Sie an Farbenblindheit (am häufigsten: Grün-Rot): Roter Text auf grünem Hintergrund oder umgekehrt, daran erkennen Sie diese Form der Farbenblindheit.
Hier ist ein Artikel, der verschiedene Argumente für Farben auflistet: usertesting.com/blog/2014/12/02/color-ux-conversion-rates
Es gibt einen Punkt, an dem der Kontrast nicht groß genug ist und die Lesbarkeit abnimmt. Ich nehme an, ich habe mich zu sehr auf das Schwarz-Weiß-Beispiel im ersten Satz konzentriert. Irgendwann ist die Lesbarkeit „erreicht“ und dann erhöht „mehr“ die Benutzerleistung nicht mehr. Wieder. Willkommen bei UX

Ich würde sagen, ändern Sie den Kontrast eines ähnlichen Farbtons, um Betonung zu zeigen . Wieso den? ( 1 von 12 Männern ist farbenblind und 1 von 200 Frauen ist auch farbenblind

Sie möchten Benutzer auch zum beabsichtigten Pfad durch das System führen, daher würde ich die Schaltfläche "Los" dunkler machen. Sie könnten alle Schaltflächen scannen und bearbeiten oder sie könnten etwas wie eine dunklere Farbe oder eine größere Größe haben, um sie zur beabsichtigten oder zu 80% häufigsten Wahl zu locken, so dass sie zuerst dort hinschauen und sagen, ja, das ist es, was ihnen Zeit spart.

Dieser Artikel sagt, dass man den wichtigsten Button so aussehen lassen sollte

Siehe ihr Beispiel unten

Geben Sie hier die Bildbeschreibung ein

Sieht nicht so gut aus wie das Bild unten (Meiner Meinung nach)

Geben Sie hier die Bildbeschreibung ein

In diesem Artikel wird auch erwähnt , Schaltflächen in einer vernünftigen Reihenfolge anzuordnen . Meiner Meinung nach würde ich also die Go-Taste rechts platzieren, weil englischsprachige Benutzer von links nach rechts (also schauen sie natürlich nach rechts nach Endzeichen). Ich würde es für arabische Benutzer auf die linke Seite setzen. So würde ich es für einen englischen Markt arrangieren.

Geben Sie hier die Bildbeschreibung ein

Ein letztes Thema in diesem Artikel ist Machen Sie es schwieriger, destruktive Schaltflächen zu finden . In Ihrem Szenario würde ich Ihre Bestellung so ändern, wenn Sie auf „Los“ klicken und versehentlich links daneben liegen, würden Sie möglicherweise den Versandort ändern, anstatt die Aktion zu zerstören. Sie können die destruktive Aufgabe auch bestätigen, wenn Sie es für notwendig halten (dh sind Sie sicher?).

"weil englischsprachige Benutzer von rechts nach links lesen" - huh? Reden wir vom gleichen Englisch?
bearbeitet ... hoppla