web-dev-qa-db-ja.com

ユーザーフレンドリーなカラースライダー

私はウェブサイトをデザインしていて、ユーザーがいくつかの要素の色を変更できるようにする必要があります。カラースライダーを実装する必要があります。私は2種類ありますが、どちらが最もユーザーフレンドリーか知りたいです。また、彼らには名前がありますか?どうすれば参照できますか?

enter image description here

enter image description here

私はデザインについて話しているのではありません。最初の画像では、スライドするにつれて色が変化しますが、2番目の画像では、色は常に「正しい」色のままです。どちらが使いやすく、よりユーザーフレンドリーですか?

2
Steve

要するに:どちらもユーザーフレンドリーではありません。

コンピュータの演算...

RGBカラーモデルは、赤、緑、青の強度を0〜255のスケールで指定します。0(ゼロ)は最小強度を示します。 3つの色の設定は、次の式を使用して単一の整数値に変換されます。

RGB value= Red + (Green*256) + (Blue*256*256)

ほとんどのユーザーは頭の中で色がどのように見えるかを計算して予測することはできません。カラープレビューコントロールでは、選択したカラー(R、G、またはB)が結果にどのように影響するかを予測する必要があるため、タスクもそれほど簡単ではありません。

...人間のためのビジュアル
色相を選択し、インタラクティブツールで他のパラメーター(彩度、明度/明度)を調整することは、非常にユーザーフレンドリーです。いくつかの良い例は:

enter image description here
enter image description here

5

最初のオプションは、スライドするときにユーザーにより多くの色を提供するためですが、その横にカラーコードを示す入力ラベルを配置して、スライドするときにユーザーが色のカラーコードを確認できるようにすることをお勧めします。また、自分でカラーコードを配置できるので、スライドさせて選択するのに最適なカラーコードを見つける必要がありません。

ユーザーフレンドリーの場合、最初にもう1つユーザーフレンドリーだと思います。というのも、(photoshopやその他の画像処理アプリケーションで)この種類のスライダーに既に慣れているからです。

1
dannyrizal

上記はどちらもユーザーフレンドリーではないことに同意します

また、最初のものはストループ効果テストのようなものです。赤でマークされたバーはシアン、緑でマークされたバーはマゼンタなどです-これは本当に混乱する可能性があります https://www.math.unt.edu/~tam/SelfTests/StroopEffects.html

私自身の提案-これがペイント/写真編集アプリケーションでない限り-ColorBrewerなどのどこかから選択した、またはグラフィックアーティストから提供された、選択可能な色/パレットの固定セットをユーザーに提供することです。それが単なるスタイリングアドオンである場合、ユーザーに複数の属性を設定する機会を与え、情報を識別できなくする色(同じ色の背景に同じ色のテキスト)を選択する可能性があり、片頭痛を誘発する配色は有利ではありません。

1
mgraham