it-swarm.com.de

Benutzerfreundlichster Farbwähler

Ich entwerfe eine Website und muss dem Benutzer erlauben, die Farbe einiger Elemente zu ändern. Ich muss einen Farbwähler implementieren. Welche Art von Farbwähler ist am benutzerfreundlichsten und sieht am besten aus?

Ich habe bisher vier verschiedene Arten, aber wenn Sie eine andere bessere haben, lassen Sie es mich bitte wissen.

Ich bin völlig flexibel, wie das Design aussieht.

# 1: Quadratischer Farbwähler
enter image description here

# 2: Farbrad-Farbwähler
enter image description here

# 3: Farbrad - Quadratischer Farbwähler
enter image description here

# 4: Farbrad - Dreieck-Farbwähler
enter image description here

64
Steve

Grundlegende Benutzer zuerst

Ich gehe davon aus, dass dies keine Farbtheorie-App ist. Wenn dies eine schnelle Farbauswahl mit einer Untergruppe von Hauptbenutzern unterstützen soll, funktioniert eine Auswahl/ein Builder für Hybridpaletten gut.

Machen Sie es sich einfach

Beginnen Sie mit einer palettenbasierten Auswahl mit Farbfeldern von angemessener Größe, die dem Benutzer die schnelle Auswahl vereinfacht. Google hat damit in Docs gute Arbeit geleistet.

(Simple color swatch chooser

Dieses Design profitiert von drei Hauptmerkmalen:

  1. Eine einigermaßen breite, aber nicht überwältigende Auswahl.

  2. Durchdachte Organisation von Optionen.

    1. Graustufen
    2. Helle Farben
    3. Wertebereich der hellen Farben
  3. Ein anpassbarer Abschnitt für fortgeschrittene Benutzer.

Dieser letzte Punkt richtet sich an bestimmte Benutzer, die bereit sind, sich mit Ihren Steuerelementen zu befassen, um die gewünschte Palette zu erhalten.

Ein Streitpunkt ...

Ich halte die Grundfarben von Google (die zweite Farbfeldreihe) für nutzlos. Wie viele davon möchten Sie tatsächlich ohne Änderung in Ihren Dokumenten haben? Hier ist ein kurzer Überblick darüber, wie ich die Auswahl der Grundfarben ändern würde. Es ist subtil, aber ich denke, der Unterschied ist im Gebrauch von Bedeutung.

(A new set of base color swatches

Machen Sie "hart" möglich

Sie können unmöglich jede mögliche Farbe vorhersehen, die ein Benutzer haben möchte, aber Sie sind auf dem richtigen Weg, wenn Sie versuchen, sie zu unterstützen. Das bekannte Muster (ein anklickbarer Bereich auf der einen Seite und ein Schieberegler auf der anderen Seite) kann verschiedene Formen annehmen, zum Guten oder Schlechten.

Google versteht das falsch.

Das von ihnen gewählte fortschrittliche Picker-Modell ist nicht präzise genug, ohne die Benutzerfreundlichkeit zu verbessern. Durch die Verwendung der Haupt- "Stufe" für Farbton und Sättigung wird die Farbauswahl auf schmale vertikale Spalten beschränkt. Der Wert für sich allein erfordert nur sehr wenig Präzision, beansprucht jedoch das vollständige Eigentum an der feinkörnigen Schiebereglersteuerung.
Sehr wissenschaftliche Schlussfolgerung : Ich mag es nicht.

(Google's advanced color picker

Ein besserer Weg

Wenn Sie den Schieberegler dem Farbton zuordnen, können Benutzer problemlos zu der allgemeinen Farbe gelangen, nach der sie suchen. Die Hauptbühne steht dann zur Feinabstimmung von Sättigung und Wert zur Verfügung, wodurch leicht subtile Variationen erzeugt werden. Dieses Beispiel stammt von einem OSX-Farbauswahl-Plug-In, das ich auf meinen Macs installiert habe (mit einigen Änderungen).
Hochwissenschaftliche Schlussfolgerung : Mo betta.

(Modified Antetype color picker for Mac OSX

Dank an @ dberm22 für die aufschlussreiche Beobachtung, dass dieses Modell den Farbtonwähler zuerst links von der Hauptbühne haben sollte. Dies führt zu einem logischen Übergang von der allgemeinen Aufgabe (Finden der Farbe) über die detaillierte Aufgabe (Wert und Sättigung manipulieren) bis zur erweiterten Aufgabe (Ändern oder Kopieren der Zahlen).

Überlegen Sie auch, wo Ihre Farbwerte beginnen, wenn Sie in den Erstellungsstatus wechseln. Einige Picker beginnen mit Wert und Sättigung bei 0 (schwarz), was zu einem Farbtonregler führt, der anscheinend keinen Einfluss auf das Farbfeld hat. Wenn Sie mit Wert und Sättigung irgendwo im oberen rechten Quadranten beginnen, ist dies wahrscheinlich näher an den Wünschen des Benutzers.

Denken Sie an die harte Arbeit des Benutzers

Wenn Sie das Steuerelement formatieren, stellen Sie sicher, dass Sie benutzerdefinierte Farben für Benutzer speichern, die sich die Zeit nehmen, diese zu generieren. Dann haben sie im Laufe der Zeit eine eigene Farbfeldbibliothek und lieben Ihr Produkt noch mehr!

Die Philosophie "Einfach ist einfach, schwer ist möglich" geht an Larry Wall, den Schöpfer der Perl-Programmiersprache.

85
plainclothes

Ich bin mir nicht sicher, ob es eine objektive Antwort auf diese Frage gibt, da dies zu stark von der Demografie Ihrer Kunden abhängt. Ich werde aber meine subjektiven zwei Cent geben!

Wenn sie keine Grafikdesigner oder extrem technisch versierte sind, würde ich mich für die intuitivste Lösung entscheiden, die für mich die zweite ist . In meinen Gedanken würden die Gedanken eines Benutzers wahrscheinlich lauten: "Ich möchte eine rote, vielleicht dunkle", nicht "Ich möchte eine dunkle Farbe, vielleicht rot", also Colour > Shade funktioniert besser für mich als Shade > Colour oder eines der kreisförmigen in 3 oder 4. Beachten Sie, dass dies von einem Lesestil von links nach rechts abhängt, um für den Benutzer einen Sinn zu ergeben, und möglicherweise nicht in Layouts von rechts nach links funktioniert, wie Sie sie auf Hebräisch finden würden , zum Beispiel.

Diese Argumentation trifft jedoch möglicherweise nicht zu - insbesondere, wenn Sie Text auf weißem Hintergrund auswählen und eine dunkle Farbe auswählen müssen. Wenn ja, vielleicht den ersten horizontal umdrehen?

Außerdem würde ich empfehlen, einen Balken für die Eingabe von Hex-Codes zu haben. Wenn Sie genau wissen, welche Farbe Sie möchten, kann es frustrierend sein, einen Selektor über einen großen Bereich schieben zu müssen, wenn Sie ihn einfach eingeben können.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Durch das Aktualisieren des grafischen Elements wird der Text sofort aktualisiert und umgekehrt. Dies ist auch für Personen zugänglicher, die nicht einfach klicken und ziehen können oder Probleme mit der Sicht haben.

28
A. Sim

Alle von Ihnen aufgelisteten Farbwähler basieren auf Variationen der HSL/HSV (Farbton, Sättigung, Helligkeit/Wert) Farbdarstellungen. Ihre Hauptunterschiede liegen also nicht in der Farbtheorie, sondern lediglich in der Platzierung und Form der Steuerelemente.

Der zweite Farbwähler in Ihrer Liste hat jedoch einen großen Nachteil gegenüber den anderen: Die Farbtonachse ist nicht von den anderen getrennt. Während Sie bei allen anderen Schnittstellen zuerst einen bestimmten Farbton und dann einen anderen Farbtöne und Schattierungen dieses Farbtons auswählen können, ohne den Grundfarbton zu beeinflussen, kombiniert der zweite Farbwähler die Sättigung und die Farbtonachsen im selben Farbrad, sodass durch Klicken auf das Rad sowohl die Sättigung als auch der Farbton geändert werden.

Der Versuch, eine Farbe unter Beibehaltung des Farbtons zu tönen, wird daher zu einer schwierigen Übung für die Sehschärfe und die Hand-Auge-Maus-Koordination. Da das Tönen und Schattieren bei der Arbeit mit Farben und Grafiken sehr häufig vorkommt, kann dies leicht sehr frustrierend werden.

Der erste Farbwähler in Ihrer Liste hat eine separate Farbtonachse, ist jedoch auf einen relativ kleinen Bereich komprimiert, sodass es schwierig ist, einen bestimmten gewünschten Farbton durch Klicken auf den Bereich genau auszuwählen . Es kann auch die kreisförmige Natur der Farbtonachse nicht visuell darstellen, was zu einer willkürlichen Diskontinuität im roten Teil des Spektrums führt. Daher würde ich es als das zweitschlechteste bewerten.

Die letzten beiden Farbwähler sind in Aussehen und Benutzerfreundlichkeit sehr ähnlich. Ich persönlich würde den letzten etwas natürlicher und eleganter betrachten, da der Farbton grundsätzlich dreieckig ist (bestehend aus Kombinationen von drei "reinen" Farbtönen: Schwarz , weiß und der reine gesättigte Farbton). Trotzdem sehe ich keinen praktischen Unterschied in der Benutzerfreundlichkeit zwischen ihnen.

Daher würde ich Ihre Farbwähler persönlich in der folgenden Reihenfolge bewerten: # 4 (am besten), # 3 (fast gleich # 4), # 1, # 2 (am schlechtesten).


Abschließend möchte ich darauf hinweisen, dass alle der von Ihnen gezeigten Farbwähler einen gemeinsamen Fehler aufweisen: Da die HSL/HSV-Farbmodelle, auf denen sie basieren, einfache Reparametrisierungen von sind Der RGB-Farbraum, der nicht wahrnehmungsmäßig einheitlich ist und den Farbton ändert, wirkt sich auf die wahrgenommene Helligkeit der Farbe aus. (Sie können dies leicht erkennen, indem Sie sich die Farbräder ansehen: Die blauen Teile sehen eine Menge dunkler aus als die grünen und gelben Teile.) Während die meisten von ihnen es einfach machen Wählen Sie verschiedene Farbtöne und Schattierungen mit demselben Farbton. Umgekehrt ist es ziemlich schwierig, den Farbton einer Farbe zu ändern und dabei die gleiche wahrgenommene Helligkeit und Sättigung beizubehalten.

Leider sind mir keine häufig verwendeten Farbwähler-Designs bekannt, die dieses Problem vermeiden würden, und es gibt einige grundlegende Schwierigkeiten: Wenn Sie z. Wählen Sie zunächst eine hellgrüne Farbe aus und versuchen Sie dann, den Farbton beispielsweise in Blau zu ändern. Sie werden feststellen, dass dies nicht möglich ist, ohne die Farbe zu tönen oder zu schattieren - a Ein normaler RGB-Monitor kann weder ein gesättigtes Blau mit der gleichen Helligkeit wie ein gesättigtes Grün erzeugen, noch können Standard-RGB-Farbräume eines darstellen. In solchen Fällen müsste also ein Kompromiss eingegangen werden.

19
Ilmari Karonen

@DavidGrinberg hat ein gutes Argument dafür, dass die meisten Benutzer sich nicht darum kümmern, mehr als eine kleine Anzahl von Farben zur Auswahl zu haben. Sie können jedoch sowohl diese Gruppe als auch Personen ansprechen, die mehr Auswahlmöglichkeiten mit einer Benutzeroberfläche wünschen, die eine progressive Verbesserung unterstützt.

Microsoft hat viele Jahre lang Windows zur Verfügung gestellt. Ich hatte Probleme, neuere Screenshots auf Englisch zu finden. Aber das Erscheinungsbild ist zumindest bei W7 dasselbe. Für ein Greenfield-Design würde ich wahrscheinlich die Gesamtzahl oder die Standardfarben reduzieren und den Abschnitt für benutzerdefinierte Farben in der kleinen Version ausblenden, es sei denn, der Benutzer hat bereits mindestens eine benutzerdefinierte Farbe definiert.

(http://www.functionx.com/dlgboxes/color1.gif

(enter image description here

Wenn der Benutzer verschiedene Farben für verschiedene Elemente auswählen kann, sollten Sie ihm stattdessen eine Liste vordefinierter Paletten zur Auswahl geben. Dies reduziert die umständliche Benutzerinteraktion und die Möglichkeit, dass Migräne gelbe und violette Farbschemata hervorruft

http://colorbrewer2.org/# ColorBrewer verfügt über eine solche Liste von Paletten, in diesem Fall speziell für die Datenvisualisierung, aber es gibt andere, wenn diese nicht geeignet sind

5
mgraham

Hier sind zwei Ideen, die keine vollständigen Vorschläge sind, sondern nur sehr grobe Skizzen.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Linkes Modell

Eine Farbton-Sättigungs-Helligkeit/Helligkeit/Wert/Intensität /… Darstellung eines RGB-Farbraumwürfels führt entweder (typischerweise) zu einem Zylinder, einem „Hexalinder“ (Prisma/Zylinder mit Sechseckbasis), einer hexagonalen Bipyramide oder einer Kugel. Für beide Arten von Basen, eine Scheibe oder ein Sechseck, können die einfachen Koordinaten durch eine Kombination der Rot-Cyan-, Grün-Magenta- und Blau-Gelb-Achsen angegeben werden. (Es handelt sich um einen abgeflachten Würfel.) Dies kombiniert angular Farbton und radiale Sättigung). Die Helligkeit, Helligkeit oder der Wert, d. H. Die Höhe, wird durch die Weiß-Schwarz-Achse angegeben.

(HSL cylinder

Richtiges Modell

Viele HSB/HSL/HSV/HSI-Picker machen den Zusammenhang zwischen visueller Auswahl und numerischen Werten nicht offensichtlich. Diese Skizze versucht zu zeigen, wie dies erreicht werden kann.

Denken Sie daran, dass dies ein Eingabe-Widget ist, sodass die Ausgabe-/Exportwerte von untergeordneter Bedeutung sind. Einige Leute möchten jedoch mit einer Farbe beginnen, von der sie eine numerische Darstellung kennen: Dafür sind die Registerkarten und numerischen Eingaben gedacht, und das Einfügen würde natürlich auch funktionieren.

4
Crissov

In mehreren Antworten werden Auswahlmöglichkeiten mit separaten numerischen Steuerelementen für RGB/HSL vorgeschlagen. Diese Steuerelemente sind gut zu haben, aber nicht sehr visuell und erfordern einige Versuche und Irrtümer, um zu funktionieren. Unten sehen Sie rechts ein Bild mit visuellen und numerischen Dual-Mode-Steuerelementen für RGB/HSL.

Wenn Sie einen der Schieberegler bedienen, sollte sich der Verlauf der anderen ändern. Dies bietet sechs Dimensionen visueller Unterstützung für das Ändern der Farbe im Gegensatz zu einer oder zwei in anderen Pickern (die Picker haben im Allgemeinen drei Dimensionen, aber nur eine oder zwei von ihnen werden mit der zu bedienenden Farbe bemalt).

Sie können sie mit jedem anderen Auswahltyp einschließen, sofern der Platz dies zulässt. Dies funktioniert jedoch möglicherweise am besten mit einer Palette und einer Liste der kürzlich ausgewählten Farben.

(Absolute Color Picker example
(Quelle: eltima.com )

4
Eugene Ryabtsev

(enter image description hereenter image description here

Nicht vollständig, da es nicht möglich ist, Hex zu verwenden, die Kanäle separat einzugeben und sich auch Farben zu merken.

Es hat :

  • Große Streifen für eine bessere Auswahl
  • Eine für Farbtöne
  • Eine für einen Gradienten in Richtung Grau mit variierender Sättigung
  • Eine für einen Farbverlauf zwischen Weiß und Schwarz mit variierendem Wert
  • Ein großes Feld zur Vorschau
  • Die Option, die Strichfarbe in Richtung Hintergrundfarbe zu variieren
  • Ein Reset auf Schwarz-Weiß-Taste

Es ist ziemlich schlank, also nicht wirklich ein Farbdialog, sondern ein Farbauswahlwerkzeug.

2
TaW