Sélecteur de couleurs le plus convivial
Je conçois un site Web et je dois permettre à l'utilisateur de changer la couleur de certains éléments. Je vais devoir implémenter un sélecteur de couleurs. Quel type de sélecteur de couleurs est le plus convivial et le plus esthétique?
J'ai quatre types différents à ce jour, mais si vous en avez un autre meilleur, faites-le moi savoir.
Je suis totalement flexible avec l'apparence du design.
# 1: Sélecteur de couleurs carré 
# 2: Sélecteur de couleurs de la roue chromatique 
# 3: Roue chromatique - Sélecteur de couleurs carré 
# 4: Roue chromatique - Sélecteur de couleurs triangulaire 
Les utilisateurs de base d'abord
Je suppose que ce n'est pas une application de théorie des couleurs. Si cela est destiné à prendre en charge la sélection rapide des couleurs avec un sous-ensemble d'utilisateurs expérimentés, un sélecteur/constructeur de palette hybride fonctionnera bien.
Rendez "facile" facile
Commencez avec un sélecteur basé sur une palette avec des échantillons de taille raisonnable qui simplifie le travail de l'utilisateur de faire une sélection rapide. Google a fait du bon travail avec cela dans Docs.
Cette conception bénéficie de trois fonctionnalités clés:
Une sélection assez large mais pas écrasante.
Organisation réfléchie des options.
- Niveaux de gris
- Couleurs vives
- Gamme de valeurs des couleurs vives
Une section personnalisable pour les utilisateurs avancés.
Ce dernier point s'adresse à des utilisateurs plus particuliers qui sont prêts à faire des efforts avec vos commandes pour obtenir la palette qu'ils souhaitent.
Un point de discorde ...
Pour mémoire, je pense que les couleurs de base de Google (la deuxième rangée de nuances) sont inutiles. Combien en souhaiteriez-vous réellement dans vos documents sans modification? Voici un aperçu rapide de la façon dont je modifierais les sélections de couleurs de base. C'est subtil, mais je pense que la différence est significative à l'usage.
Rendre "difficile" possible
Vous ne pouvez pas anticiper toutes les couleurs possibles qu'un utilisateur peut vouloir, mais vous êtes sur la bonne voie pour essayer de les prendre en charge. Le motif familier (une zone cliquable d'un côté et un curseur de l'autre) peut prendre différentes formes, pour le meilleur ou pour le pire.
Google se trompe.
Le modèle de sélecteur avancé qu'ils ont choisi manque de précision sans améliorer la convivialité. En utilisant la "scène" principale pour la teinte et la saturation, les sélections de couleurs sont contraintes dans des colonnes verticales étroites. La valeur en elle-même nécessite très peu de précision mais revendique la propriété totale du contrôle du curseur à grain fin.
Conclusion hautement scientifique: Je n'aime pas ça.
Une meilleure façon
En dédiant le curseur à la teinte, les utilisateurs peuvent facilement accéder à la couleur générale qu'ils recherchent. La scène principale est alors disponible pour affiner la saturation et la valeur, créant facilement une variation subtile. Cet exemple provient d'un plug-in de sélection de couleur OSX que j'ai installé sur mes Mac (avec quelques modifications).
Conclusion hautement scientifique: Mo betta.
Nous remercions @ dberm22 pour l'observation pertinente que ce modèle devrait avoir le sélecteur de teinte en premier à gauche de la scène principale. Cela crée une progression logique de la tâche large (trouver la couleur), au détail (manipuler la valeur et la saturation), à l'avancée (Tweak ou copier les nombres).
Considérez également où vos valeurs de couleur commencent lorsque vous entrez dans l'état de création. Certains sélecteurs commencent avec une valeur et une saturation à 0 (noir), ce qui entraîne un curseur de teinte qui semble n'avoir aucun impact sur l'échantillon. Commencer par la valeur et la saturation quelque part dans le quadrant supérieur droit est susceptible d'être plus proche de ce que veut l'utilisateur.
N'oubliez pas le travail acharné de l'utilisateur
Quelle que soit la mise en forme du contrôle, assurez-vous de stocker des couleurs personnalisées pour les utilisateurs qui prennent le temps de les générer. Ensuite, ils auront leur propre bibliothèque d'échantillons au fil du temps et ils aimeront encore plus votre produit!
Le mérite de la philosophie "facile est facile, difficile est possible" revient à Larry Wall, créateur du langage de programmation Perl.
Je ne suis pas sûr qu'il y ait une réponse objective à celle-ci, car cela dépendra trop de la démographie de vos clients. Je donnerai cependant mes deux cents subjectifs!
Si ce ne sont pas des graphistes ou des experts en technologie, je voudrais opter pour la solution la plus intuitive, qui pour moi est la deuxième . Dans mon esprit, les pensées d'un utilisateur seraient probablement "Je veux un rouge, peut-être foncé", et non "Je veux une couleur sombre, peut-être rouge", donc Colour > Shade fonctionne mieux pour moi que Shade > Colour ou l'une des circulaires en 3 ou 4. Notez que cela s'appuie sur un style de lecture de gauche à droite pour donner un sens à l'utilisateur et peut ne pas fonctionner dans les dispositions de droite à gauche comme vous le trouverez en hébreu , par exemple.
Ce raisonnement peut ne pas être vrai, cependant - surtout si vous choisissez du texte sur un fond blanc et que vous devez choisir une couleur foncée. Si oui, peut-être retourner la première horizontalement?
De plus, je recommanderais d'avoir une barre pour entrer des codes hexadécimaux. Si vous savez exactement quelle couleur vous voulez, il peut être frustrant de devoir faire glisser un sélecteur sur une grande zone lorsque vous pouvez simplement le saisir. Quelque chose comme ceci:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
La mise à jour de l'élément graphique met à jour le texte immédiatement, et vice versa. Cela est également plus accessible aux personnes qui ne peuvent pas cliquer et faire glisser facilement, ou qui ont des problèmes de vision.
Tous les sélecteurs de couleurs que vous répertoriez sont basés sur des variations des représentations de couleurs HSL/HSV (teinte, saturation, luminosité/valeur). Ainsi, leurs principales différences ne résident pas dans la théorie des couleurs, mais simplement dans le placement et la forme des contrôles.
Cela dit, le deuxième sélecteur de couleurs de votre liste présente un inconvénient majeur par rapport aux autres: il n'a pas l'axe de teinte séparé des autres. Alors que toutes les autres interfaces vous permettent de choisir d'abord une teinte spécifique puis de choisir différentes teintes et nuances de cette teinte sans affecter la teinte de base, le deuxième sélecteur de couleur combine la saturation et les axes de teinte dans la même roue chromatique, de sorte que cliquer sur la roue modifiera à la fois la saturation et la teinte.
Ainsi, essayer de teinter une couleur tout en maintenant la teinte devient un exercice délicat d'acuité visuelle et de coordination main-œil-souris. Étant donné que la teinture et l'ombrage sont très courants lorsque vous travaillez avec des couleurs et des graphiques, cela peut facilement devenir très frustrant.
Le premier sélecteur de couleurs de votre liste possède un axe de teinte distinct, mais il est compressé dans un espace assez petit, ce qui rend difficile le choix précis d'un paramètre spécifique souhaité teinte juste en cliquant sur la plage. Il ne parvient pas non plus à représenter visuellement la nature circulaire de l'axe de teinte, introduisant une discontinuité arbitraire dans la partie rouge du spectre. Ainsi, je le classerais comme le deuxième pire du lot.
Les deux derniers sélecteurs de couleurs sont très similaires en apparence et en facilité d'utilisation. Je considérerais personnellement le dernier un peu plus naturel et élégant, car l'espace teinte/teinte est de nature fondamentalement triangulaire (composé de combinaisons de trois teintes "pures": noir, blanc et teinte saturée pure). Cela dit, je ne vois pas de différence d'utilisation pratique entre eux.
Ainsi, j'évaluerais personnellement vos sélecteurs de couleurs dans l'ordre suivant: # 4 (meilleur), # 3 (presque égal à # 4), # 1, # 2 (pire).
Enfin, je voudrais noter que tous les sélecteurs de couleurs que vous avez montrés partagent un défaut commun: puisque les modèles de couleurs HSL/HSV sont sur la base de simples reparamétrisations de l'espace colorimétrique RVB, qui n'est pas uniformément perceptuel, la modification de la teinte affecte la luminosité perçue de la couleur. (Vous pouvez facilement voir cela en regardant les roues de couleur: les parties bleues semblent beaucoup plus sombres que les parties vertes et jaunes.) Ainsi, alors que la plupart d'entre eux, il est facile de choisir différentes teintes et nuances de la même teinte, l'inverse - changer la teinte d'une couleur tout en conservant la même luminosité et saturation perçues - est assez difficile.
Hélas, je ne connais pas de conceptions de sélecteur de couleurs couramment utilisées qui éviteraient ce problème, et il existe des difficultés fondamentales: si vous par exemple commencez par choisir une couleur vert vif, puis essayez de changer la teinte en, disons, bleu, vous constaterez que ce n'est pas possible sans aucune teinte ou ombrage de la couleur - un moniteur RVB normal ne peut tout simplement pas produire un bleu saturé avec la même luminosité qu'un vert saturé, pas plus que les espaces colorimétriques RVB standard ne peuvent en représenter un. Ainsi, une sorte de compromis devrait être fait dans de tels cas.
@DavidGrinberg a un bon point sur la plupart des utilisateurs qui ne se soucient pas d'avoir plus d'un petit nombre de couleurs à choisir. Cependant, vous pouvez répondre à la fois à ce groupe et aux personnes qui souhaitent plus de choix avec une interface prenant en charge l'amélioration progressive.
Microsoft en a fourni un avec Windows pendant de nombreuses années. J'ai eu du mal à trouver de nouvelles captures d'écran en anglais; mais le look and feel est le même au moins via W7. Pour une conception entièrement nouvelle, je réduirais probablement le nombre total ou les couleurs standard et masquerais la section des couleurs personnalisées sur la petite version à moins que l'utilisateur n'ait déjà défini au moins une couleur personnalisée.
Si l'utilisateur peut sélectionner différentes couleurs pour différents éléments, pensez à leur donner une liste de palettes prédéfinies à choisir à la place - réduit l'interaction utilisateur et la possibilité de migraine induisant des schémas de couleurs jaune et violet
http://colorbrewer2.org/# ColorBrewer a une telle liste de palettes, dans ce cas spécifiquement pour la visualisation des données, mais il y en aura d'autres si elles ne conviennent pas
Voici deux idées qui ne sont pas des propositions complètes, juste des croquis très approximatifs.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Maquette gauche
Une représentation teinte-saturation-légèreté/luminosité/valeur/intensité /… d'un cube d'espace colorimétrique RVB donne lieu (généralement) à un cylindre, un "hexalinder" (prisme/cylindre à base hexagonale), une bipyramide hexagonale ou une sphère. Pour les deux types de bases, un disque ou un hexagone, les coordonnées simples peuvent être spécifiées par une combinaison des axes rouge – cyan, vert – magenta et bleu – jaune. (Il s'agit d'un cube aplati.) Il combine angular et la saturation radiale. La luminosité, la luminosité ou la valeur, c'est-à-dire la hauteur, est spécifiée par l'axe blanc-noir.
Maquette droite
De nombreux sélecteurs HSB/HSL/HSV/HSI ne rendent pas évident le lien entre la sélection visuelle et les valeurs numériques. Ce croquis tente de montrer comment cela pourrait être réalisé.
N'oubliez pas qu'il s'agit d'un widget d'entrée, les valeurs de sortie/export sont donc une préoccupation secondaire. Pourtant, certaines personnes voudront commencer par une couleur dont elles connaissent une représentation numérique: c'est à cela que servent les onglets et les entrées numériques et le collage fonctionnerait également, bien sûr.
Plusieurs réponses proposent ici des sélecteurs avec des commandes numériques distinctes pour RGB/HSL. Ces commandes sont bonnes à avoir, mais pas très visuelles et nécessitent quelques essais et erreurs pour fonctionner. Ci-dessous, une image avec des commandes visuelles + numériques à double mode pour RVB/HSL illustrées à droite.
Lorsque vous utilisez l'un des curseurs, le dégradé des autres doit changer. Cela donne six dimensions de support visuel pour changer la couleur, par opposition à une ou deux dans d'autres cueilleurs (les cueilleurs ont généralement trois dimensions, mais seulement une ou deux d'entre elles sont peintes avec la couleur utilisée).
Vous pouvez les inclure avec n'importe quel autre type de sélecteur, si l'espace le permet, mais cela pourrait mieux fonctionner avec une sorte de palette et une liste de couleurs récemment sélectionnées.
(source: eltima.com )
Pas complet car il ne permet pas d'utiliser l'hexagone, d'entrer les canaux séparément et aussi de se souvenir des couleurs.
Il a :
- Grandes rayures pour une meilleure sélection
- Un pour les teintes
- Un pour un dégradé vers le gris, une saturation variable
- Un pour un dégradé entre blanc et noir, valeur variable
- Un grand champ à prévisualiser
- La possibilité de faire varier la couleur du trait vers la couleur d'arrière-plan
- Un bouton de réinitialisation en noir et blanc
Il est plutôt mince, donc pas vraiment une boîte de dialogue de couleur mais un outil de sélection de couleur.