it-swarm.com.de

Wie kann ich Fehler hervorheben, wenn leuchtendes Rot die Hauptfarbe der Marke ist?

Ich arbeite an einer mobilen Website für einen Kunden, dessen Hauptmarkenfarbe Rot ist. Der Header und die Überschriften der Website sind alle rot. CTA-Tasten sind ebenfalls rot. Wie kann ich Fehler (meist in Formularprozessen) effektiv vom Inhalt trennen?

46
bernk

Nur weil Ihre Markenfarbe Rot ist, ist die Verwendung von Rot für Fehler nicht überflüssig, sondern nur eine Frage des Ausmaßes.

Nehmen Sie zum Beispiel das Viaplay-Anmeldeformular :

enter image description here

Viaplay hat Rot als Hauptakzentfarbe, die auf der gesamten Website für Aktionsschaltflächen, Symbole, Kopfzeilen, grafische Elemente usw. verwendet wird. In der Form, in der sie die Verwendung abschwächen. Sie lassen nicht zu, dass der Hintergrund rot ist oder dass die Beschriftungen für die Eingabe rot sind. Im Kontext fallen also immer noch die roten Fehlermeldungen auf.

Um es kurz zu machen, es ist eine Frage des Kontexts, auch innerhalb eines Kontexts. Wenn es um Benutzereingaben geht, z. Vermeiden Sie bei einem Anmeldeformular einfach die weitgehende Verwendung von Rot, und die typischen Inline-Fehlermeldungen werden weiterhin im Hintergrund angezeigt.

44
AndroidHustle

Im Allgemeinen ist es aus Gründen der Barrierefreiheit schlecht, nur Farbe zur Anzeige von Informationen zu verwenden. Rot/grüne Farbenblindheit ist die häufigste und tritt bei 8% der Männer auf. Die Verwendung eines Symbols wie eines X oder eines Warnzeichens ist der beste Weg.

Wenn Sie die Farbe aus geschäftlichen Gründen unterscheiden müssen (d. H. Die oberen Personen sind der Meinung, dass es sich um eine andere Farbe handeln sollte), wählen Sie eine Farbe aus, die sich vom Rest Ihres Farbschemas unterscheidet, verwenden Sie jedoch ein Symbol als Hauptindikator. Stellen Sie sicher, dass die Farbe einen ausreichend hohen Kontrast zu Ihrer Standardtextfarbe aufweist, damit der Unterschied auch dann sichtbar wird, wenn ein Benutzer nicht erkennen kann, um welche Farbe es sich handelt.

26
elemjay19

Anstatt Farben zu verwenden, können Sie die visuelle Betonung auf andere Weise erzielen, z. B. durch Verwendung von Gefahrensymbolen, Schriftgröße und/oder gezackten Konturen.

Hier ist ein Beispiel, übermäßig unter Verwendung aller drei dieser Hinweise: enter image description here

BEARBEITEN: Die folgenden Kommentare deuten darauf hin, dass ich in meinem ursprünglichen Beitrag nicht klar genug gemacht habe, dass es übermäßig wäre, alle drei dieser Hinweise zusammen zu verwenden. (Ich hatte gedacht, dass meine Fettschrift des Wortes "übermäßig" ausreichen würde, um dies zu zeigen.) Ich werde klarstellen: die Verwendung eines dieser drei Hinweise sollte ausreichen, um auf einen Fehler aufmerksam zu machen Meldung, die neben der Eingabe des Benutzers angezeigt wird. (Wenn Sie sich auf einen der oben genannten Punkte als primären Hinweis verlassen, wird die Farbe nur zu einem sekundären Hinweis, der weitere Aufmerksamkeit erregen kann. Dies ist jedoch nicht erforderlich, um die Nachricht zu bemerken.) Ich habe alle drei Hinweise schnell in ein Beispiel eingefügt, um die starke Wirkung solcher Änderungen zu demonstrieren, und es tut mir leid, wenn das Zusammensetzen die Leute verwirrt hat.

14
Graham Herrli

Sie können einen gelben Rand verwenden.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

3
rk.

Dies hängt davon ab, welche andere Farbe Sie auf der Website verwenden. Sind die Schriftarten schwarz?

Einige Optionen, die Sie haben, sind: - Anzeigen eines weißen Hintergrundfelds mit einem roten Symbol. d.h. Ausrufezeichen - dunkelroter Rand - weiße gepunktete Linie

Wenn Sie eine gute Symbol- - auffällige Rand- - Kontrastfarbe erhalten und diese konsistent und klar ist, dass es sich um einen Fehler handelt, sollte dem Benutzer klar sein, dass es sich um einen Fehler handelt.

2
Rosie

@ AndroidHustle hat es in seiner Antwort perfekt ausgedrückt. Der Kontext ist der Schlüssel in allem. Wenn ein Benutzer ein Formular ausfüllt und versucht, es zu senden, und Sie ihm Fehler geben, die ihm genau sagen, was falsch ist, hat er kein Problem damit, die roten Linien zu verstehen, die gerade neben dem Formular angezeigt wurden sind Validierungsnachrichten.

Versuchen Sie, die Form nicht zu brechen, indem Sie für Validierungsfehlermeldungen unterschiedliche Farben verwenden. Rot hat viele Bedeutungen, aber eine Sache, die Rot tut, ist unsere Aufmerksamkeit zu erregen, sodass die Verwendung von Farben wie Gelb möglicherweise nicht so viel Aufmerksamkeit erregt wie Rot.

0
Jason Frade