Farbkombination für drei Tasten

Welche Farbkombination eignet sich am besten für diese drei Tasten:

Sollen alle die gleiche Farbe haben?

Das sind meine Möglichkeiten:

Bild der ganzen Seite

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

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

Für mich ist der Schalter hat Knopf zu viel Präsenz sowohl in Größe und constrast. Ich würde es zwischen den Ursprungs-Ziel-Dropdowns positionieren, wo es "für sich" sinnvoller ist.

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

Nur zu Ihrer Information : Ich habe Font-Awesom e-Symbole verwendet, das im ersten Bild ist (abhängig von Ihrer Version) Icon-Exchange / Fa-Exchange und die Pfeile sind Icon- Arrow-Left / Right und Fa-Arrow-Left / richtig

BEARBEITEN - Beseitigung der Unordnung ( basierend auf dem Kommentar eines DA01 ):

Wenn die Löschen - Taste nur die beiden Felder löschen wird (von / bis) es scheint nicht notwendig zu sein , weil ohnehin die Benutzer auf jeder Dropdown - Liste anklicken und die Auswahl zu treffen und diese ändern sich nicht , wenn Sie eine Schaltfläche Löschen hinzufügen .
Wenn dies der Fall ist, empfehle ich, es zu entfernen, damit Sie eine übersichtlichere Benutzeroberfläche erhalten und Benutzer daran hindern, eine Aktion auszuführen, die ihnen keinen Wert hinzufügt (und darüber hinaus das, was sie ausgewählt haben, ungewollt entfernt).

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

Normalerweise verfügen Sie über Primär-, Sekundär- und manchmal auch über Tertiär- und / oder nicht bevorzugte Aktionsschaltflächen.

Für Primär und Sekundär schlage ich normalerweise Ihre bevorzugte Markenfarbe (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 gehe stattdessen mit einem völlig anderen visuellen Element, wie einem Link, um.

Wenn Sie also ein Beispiel geben und den Kontext so interpretieren, wie ich es kann, würde ich Folgendes vorschlagen:

Dies ist nur ein sehr kurzes Beispiel, und Sie müssen sicherstellen, dass der Kontrast den Richtlinien für Barrierefreiheit entspricht und nicht behindert aussieht (was bei mir irgendwie der Fall ist, es muss also optimiert werden), aber hoffentlich wird der Punkt klar.

UPDATE: Als ich das gepostet habe, ist mir gerade aufgefallen, dass dies das Muster ist, das StackExchange beim Erstellen eines neuen Posts verwendet. Die Schaltfläche SPEICHERN ist primär, die Schaltfläche ABBRECHEN ist tertiär und wird eher als Verknüpfung als als Schaltfläche angezeigt.

Kontrastreiche Farben (z. B. Schwarz-Weiß) sind immer am besten, wodurch die Option Orange entfällt. Und was ist das Farbschema, das für den Rest Ihrer Seite in Bezug auf Schaltflächen und Anwendung verwendet wird, wenn Sie dem Mix ein bisschen Marketing hinzufügen? Aber wenn ich wählen müsste: Los: grün; Schalter ...: marineblau; Klar: schwarz-weiß. Bedenken Sie, dass Farbe auch mit Präferenz zusammenhängt.

(Off-Topic: Sie können die lange Bezeichnung für das Umschalten durch eine mit einem Symbol gekennzeichnete Schaltfläche zwischen den beiden Feldern entfernen.)

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

Sie möchten Benutzer auch auf den beabsichtigten Pfad durch das System führen, damit die Schaltfläche "Los" dunkler wird. Sie könnten alle Schaltflächen scannen und verarbeiten oder eine dunklere oder größere Farbe haben, um sie auf die beabsichtigte oder 80% häufigste Auswahl zu ziehen. So sehen sie zuerst dort aus und sagen: Ja, das spart ihnen Zeit.

In diesem Artikel heißt es, man solle den wichtigsten Knopf so aussehen lassen

Siehe ihr Beispiel unten

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

In diesem Artikel wird auch erwähnt , wie Schaltflächen in eine sinnvolle Reihenfolge gebracht werden . Meiner Meinung nach würde ich also den Go-Button nach rechts setzen, da die englischsprachigen Benutzer von links nach rechts schauen (also natürlich nach rechts, um die Endzeichen zu sehen). Ich würde es für arabische Benutzer auf die linke Seite stellen. So würde ich es für einen englischen Markt arrangieren.

Ein letztes Thema in diesem Artikel ist " Erschweren Sie das Auffinden zerstörerischer Schaltflächen". In Ihrem Szenario würde ich Ihre Bestellung auf diese Weise ändern, wenn Sie auf "Los" klicken und versehentlich auf der linken Seite fehlen. Möglicherweise würden Sie den Versandort ändern, anstatt die Aktion zu zerstören. Sie können die destruktive Aufgabe auch bestätigen, wenn Sie dies für erforderlich halten (dh sind Sie sicher?).