it-swarm.com.de

Welche Recherchen, Muster oder Techniken helfen mir bei der Auswahl der richtigen Farben (oder Sättigungen) für die verschiedenen UI-Elemente einer Seite?

Ich baue ein Tool, das von Call-Center-Agenten verwendet wird. Es soll ihnen helfen, Produkte im Namen der Kunden zu unterstützen, die anrufen. Es fungiert als Portal zu vielen verschiedenen Arten von Produktinformationen - im Folgenden finden Sie ein vereinfachtes Drahtmodell. Ich habe ein Tab- und Suchmodell verwendet - dies war das Ergebnis von Usability-Tests mit einigen verschiedenen Prototypen.

enter image description here

In dieser bestimmten Ansicht zeigt der Agent Tools (stellen Sie sich diese als Portlets oder Widgets an) für ein bestimmtes Produkt an (z. B. ein Ferndiagnosetool). Tatsächlich befindet sich der Agent auf der Navigation der dritten Ebene (Startseite> Produktseite> Registerkarte Extras).

Bisher habe ich Kontrast verwendet, um die verschiedenen Ebenen (Produktseite, Registerkarten, Tools) hervorzuheben, aber dies basiert auf keiner Schulung oder Theorie.

Welche Recherchen, Muster oder Techniken helfen mir bei der Auswahl der richtigen Farben (oder Sättigungen) für die verschiedenen Benutzeroberflächenelemente der Seite? (z. B. Titelleiste, Navigation, Hintergrund, Werkzeuge, Registerkarten usw.)

Ich möchte sicherstellen, dass dem Benutzer klar ist, wo verschiedene Teile der Seite beginnen und enden und welche sich auf die verschiedenen Bereiche der Navigation beziehen, während die Seite für das Auge einfach und lesbar ist.

Für diese Frage können wir das Branding und die Farben meines Unternehmens ignorieren. Ich möchte lieber mit der Benutzerfreundlichkeit beginnen und das Branding dann nachrüsten. Wenn ich das richtige Modell in Graustufen finden könnte, wäre das eine ideale Vorlage.

11
Jon White

Farbseparation

Ich weiß nicht, wie viel Hilfe dies ist, aber ich werde Ihre Frage in etwas Spezifischeres umwandeln. Wenn Sie sich vorstellen, möchten Sie einen hohen Farbkontrast zwischen nicht verwandten Dingen und einen niedrigen Farbkontrast zwischen eng verwandten Dingen. Ihre Frage lautet also: Wie bestimmen Sie den wahrgenommenen Farbkontrast zwischen Farben?

Die Internationale Kommission für Beleuchtung (CIE) hat vor langer Zeit Gleichungen zur Berechnung des Farbkontrasts von beleuchteten Displays aufgestellt, und diese Gleichungen sind für moderne Displays immer noch weitgehend korrekt. Das Verfahren besteht darin, Ihre RGB-Farbwerte in CIE Luv-Farbraumkoordinaten umzuwandeln, die die wahrgenommene Helligkeit (L), den Farbton (flacher Winkel von der L-Achse) und die Sättigung (Abstand von der L-Achse) angeben. Der Grad des wahrgenommenen Farbkontrasts zwischen zwei Farben entspricht dem euklidischen Abstand zwischen den beiden Sätzen von Luv-Koordinaten.

Hier sind die Luv-Gleichungen für das sRGB-Farbmodell, die eine allgemein geeignete Schätzung für typische Consumer-Displays darstellen:

  1. Konvertieren Sie Ihre RGB-Werte in "RGB" -Werte:

    r = (R/255) ^ 2.2

    g = (G/255) ^ 2,2

    b = (B/255) ^ 2.2

  2. Multiplizieren Sie Ihre RGB-Werte mit einer konstanten Matrix, um sie in XYZ-Farbkoordinaten umzuwandeln. Als drei Formeln (auf vier Dezimalstellen gerundet) gilt Folgendes:

    X = 0,4124 * r + 0,3576 * g + 0,1805 * b

    Y = 0,2126 * r + 0,7151 * g + 0,0721 * b

    Z = 0,0193 * r + 0,1192 * g + 0,9505 * b

  3. Berechnen Sie L, die Graustufenhelligkeit:

    WENN Y/0,9999> 216/24389, L = (Y/0,9999) ^ (1/3) * 116-16

    ELSE, L = 24389 * Y/0,9999/27

  4. Berechnen Sie u 'und v' für die beiden Farbtondimensionen (wenn X, Y und Z alle 0 sind, setzen Sie u 'und v' auf 0):

    u ’= 4 · X/(X + 15 · Y + 3 · Z)

    v ’= 9 * Y/(X + 15 * Y + 3 * Z)

  5. Konvertieren Sie u und v in die Koordinaten u und v.

    u = 13 * L * (u '- 0,1978)

    v = 13 * L * (v '- 0,4683)

Der wahrgenommene Farbunterschied D zwischen zwei Farben (L1 u1 v1 gegenüber L2 u2 v2) wird mit der dreidimensionalen pythagoreischen Gleichung gefunden:

D = sqrt[ (L1 - L2)^2 + (u1 - u2)^2 + (v1 - v2)^2 ]

Als Faustregel gilt, dass für die Verwendung von Verbraucherdisplays in Innenräumen ein Farbunterschied von 100 eine ganze Menge und 20 eine sehr kleine ist.

Es gibt eine Vielzahl von Helligkeits-, Farbton- und Sättigungsunterschieden, die den gleichen Farbunterschied erzielen. Die gute Nachricht ist, dass Sie viel Spielraum für die Auswahl Ihrer genauen Farben haben, damit Sie andere Ziele für die Benutzererfahrung erreichen können. Die schlechte Nachricht ist, dass Sie viel Spielraum für die Auswahl Ihrer Farben haben, sodass Sie ziemlich alleine sind.

Ich beschäftige mich mehr mit der Verwendung von Farben, mit Beispielen und Tabellen unter Breaking the Color Code . Bruce Lindbloom bietet Online-Rechner und mehr zur Farbtheorie .

Nichtfarbentrennung

Trotzdem sollten Sie bedenken, dass die Farbauswahl möglicherweise nicht das Problem ist. Im Allgemeinen eignen sich Farben, insbesondere die Farbton- und Sättigungskomponenten, nicht so gut für die Anzeige von Ebenen oder einer Hierarchie. Zumindest möchten Sie, dass es mit einer anderen grafischen Dimension redundant ist. Zum Beispiel:

Räumliche Position. Der Benutzer geht davon aus, dass die Informationen von links oben nach rechts unten von allgemein bis spezifisch geordnet sind. Inhalte, die nahe beieinander liegen und durch Leerzeichen von anderen Inhalten getrennt sind, werden als ähnlich angesehen. Einrückter Inhalt ist "unter" veraltetem Inhalt.

Zeile. Wenn kein Platz für Leerzeichen vorhanden ist, können Linien und Kästchen verwendet werden, um die Trennung und Verschachtelung anzuzeigen.

Größe. Größere Dinge, insbesondere Überschriften in größerer Schrift, weisen auf höhere Ebenen in einer Hierarchie hin.

Ehrlich gesagt scheint mir Ihre derzeitige Verwendung dieser Elemente in Ihrem Drahtmodell ausreichend zu sein - auch in der aktuellen Graustufenform. Die Verwendung von Farbe zur weiteren Unterscheidung der Ebenen kann zu einer Übertreibung führen, was zu einem überladenen Design führt. Warum brauchen Sie Ihrer Meinung nach einen Farbkontrast, um die Hierarchie zu unterscheiden? Haben Sie dieses Design getestet? Welche Probleme sehen Sie genau? Vielleicht ist Farbe nicht die Lösung für Ihr Problem. Vielleicht solltest du Farbe für etwas anderes verwenden.

11

Entschuldigung, unmöglich. Sie fragen tatsächlich nach einem Einführungskurs in Grafikdesign/visuelle Kommunikation. Angesichts der Tatsache, dass dies normalerweise mindestens ein Jahr des meisten intensiven Trainings beträgt, kann dies in diesem Zusammenhang leider nicht durchgeführt werden.

Um Ihr Problem gut zu lösen, benötigen Sie praktisch geschult, anwendbar Kenntnisse der Gestalttheorie, der Farbtheorie (sowohl in Bezug auf physiologische Wahrnehmung als auch kulturelle Konnotationen/Semantik), visuelle Komposition und einige Mehr. Zusammen mit der verfeinerten visuellen Sensibilität, die nur mit der Übung einhergeht.

Siehe für den Anfang e. G.

  • Wong, W.: Prinzipien von Form und Design.
  • Lidwell, W./Holden K./Butler, J.: niversal Principles of Design.

… Und für Teile der Gründe, die hinter meiner obigen Aussage stehen

  • Schoen, D.: The Reflective Practitioner.

Übrigens: Farben beeinflussen sich stark in Bezug darauf, wie sie tatsächlich wahrgenommen werden. Sie würden zumindest einen Teil des konkreten Inhalts für Ihre Drahtgitterboxen benötigen, um eine fundierte Vermutung darüber anzustellen, welche Farben gut genug funktionieren könnten. Sie können nicht treffen eine gute Entscheidung auf der gegebenen Abstraktionsebene.

7

Sascha ist ziemlich richtig. Einige schnelle Tipps:

  • Wählen Sie eine Farbpalette mit überwiegend neutralen Farben und einer Handvoll Hervorhebungsfarben aus. Verwenden Sie die Hervorhebungsfarben sparsam.

  • Nimm eines von Tuftes Büchern. Obwohl er nicht direkt auf das Design von Benutzeroberflächen abzielt, ist vieles, worüber er spricht, auf Benutzeroberflächen anwendbar (nämlich sein berechtigter Hass auf „Chart Junk“).

  • Err auf der Seite von weniger Farben als mehr.

  • arbeiten Sie mit Ihren Benutzern daran, was ihrer Meinung nach die Schlüsselelemente sind. Machen Sie mit ihnen einige Sortierübungen, um eine Vorstellung davon zu bekommen, was ihre Hauptbedürfnisse sind.

1
DA01

schauen Sie sich Adobe Kuler an, um Inspiration für Farbkombinationen zu erhalten.

1
zuko