Farbkombination für drei Tasten

13

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

Bildbeschreibung hier eingeben

Sollen alle die gleiche Farbe haben?

Das sind meine Möglichkeiten:

Bildbeschreibung hier eingeben

Bild der ganzen Seite

Bildbeschreibung hier eingeben

Methusalem
quelle
Der primäre vs. Standard und der Default vs. Erfolg scheint abzulenken.
Danny Varod
Wenn ich die größere Seite betrachte, würde ich fragen, was die Schaltfläche "Löschen" bewirken soll. Ist es wirklich eine notwendige Option?
DA01,

Antworten:

52

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 ):

Bildbeschreibung hier eingeben

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).

Bildbeschreibung hier eingeben

Alejandro Veltri
quelle
Die ↔︎ Pfeile waren auch mein erster Gedanke. So funktioniert translate.google.com : Eine ↔︎-Schaltfläche mit einem Tooltip.
200_success
Wenn klar wirklich zweitrangig ist, stimme ich zu. Wenn es andererseits destruktiv ist (Entfernen der eingegebenen Arbeit), würde ich argumentieren, dass es wirklich anders gehandhabt werden sollte.
DA01,
@ DA01 Könntest du deinen letzten Kommentar noch näher erläutern? Welche Option ist besser, wenn sie destruktiv ist und warum? Ihr POV interessiert mich sehr.
Alejandro Veltri
@rewobs Ich empfehle normalerweise, überhaupt keine destruktiven Optionen zu haben, obwohl sie in vielen Systemen noch vorhanden sind. Da es destruktiv ist, sollte es nicht wie eine Schaltfläche aussehen, IMHO, da Schaltflächen normalerweise angeklickt werden können. Die Leute füllen oft ein Formular aus und drücken dann den "offensichtlichsten" Knopf am unteren Rand, vorausgesetzt es ist SUBMIT. Zumindest im Formularentwurf empfehle ich daher normalerweise, dass die einzige Schaltfläche "Senden" ist . Wenn es andere Aufgaben gibt, machen Sie sie visuell anders und gedämpft als die primäre Schaltfläche.
DA01,
1
@ DA01 Ich verstehe, danke für die Klarstellung. Außerdem habe ich Ihren Kommentar in der Frage gelesen und gefragt, ob die Schaltfläche zum Löschen wirklich erforderlich ist, und ich denke, dass dies nicht der Fall ist, da der Benutzer den Wert ohnehin durch eine erneute Auswahl aus den Dropdown-Listen ersetzt. Das Hinzufügen einer Schaltfläche zum Löschen ist daher nicht erforderlich Aktion "in der Mitte".
Alejandro Veltri
12

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:

Bildbeschreibung hier eingeben

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.

DA01
quelle
1

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.)


quelle
1
Willkommen bei UX.stackexchange. Welchen Beweis haben Sie dafür, dass hoher Kontrast immer der beste ist?
Mayo
1
Nun, es ist vielleicht nicht die beste Lösung für jeden Kontext, aber kontrastreich verbessert die Lesbarkeit, da es den Text vom Hintergrund unterscheidet. Sonst wird es eine Unschärfe. Betrachten Sie Farbenblindheit (am häufigsten: grün-rot): Mit rotem Text auf grünem Hintergrund oder umgekehrt können Sie diese Form der Farbenblindheit erkennen.
1
Hier ist ein Artikel, der verschiedene Argumente für Farben auflistet
Es gibt einen Punkt, an dem der Kontrast nicht groß genug ist und die Lesbarkeit abnimmt. Ich habe mich wohl zu sehr auf das Schwarz-Weiß-Beispiel im ersten Satz konzentriert. Es kommt ein Punkt, an dem die Lesbarkeit "erreicht" wird und "mehr" die Benutzerleistung nicht erhöht. Nochmal. Willkommen bei UX
Mayo
1

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

Bildbeschreibung hier eingeben

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

Bildbeschreibung hier eingeben

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.

Bildbeschreibung hier eingeben

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?).


quelle
"Weil englischsprachige Benutzer von rechts nach links lesen" - oder? Sprechen wir über dasselbe Englisch?
BlueRaja - Danny Pflughoeft
bearbeitet ... whoops