Webアプリのテーブルでは、同じタイプの複数のオブジェクトが集約されます。すべてのオブジェクトには、1から5までの数の条件があります。最初は、範囲が色付けされるプログレスバーのようなスタイルを使用することを考えました。ただし、ユーザーが範囲を単一の値(最大)と間違える可能性があるため、範囲に範囲が含まれている場合、これはおそらくユーザーにはわかりません。
たとえば、使用済みのシャツを格納するテーブルがあります。すべてのシャツには、条件が割り当てられています。これらのシャツをサイズ別にグループ化できるようになりました。中(3)から高(5)品質の範囲の条件のシャツが利用可能であることを示しようとしています。
画像を見てください:解釈が事前にわからないので、画像は1から4の範囲ではなく、値4を示していると思います。
これを防ぐにはどうすればよいですか?
範囲を設定するためにグラフィックコントロールに固執する場合、セグメント内に数値を表示すると役立ちます。それらは、単一の値ではなく、セットのアイデアを伝えています。
このUIをテストしてください。
[〜#〜] update [〜#〜]質問が編集された後
あなたの編集によると、私は範囲を使用することが最善の手段であるとは思いません。
Rangeは、主に下限と上限、または間隔内の要素として理解されます。範囲は連続値に適しています。価格が$ 100〜$ 200の商品。
あなたの場合、あなたは一連の個別の値を持っています、それらのいくつかはあなたのサブセットにあるかもしれません。
ケースを考えてみましょう:
靴のサイズに関するどの情報がユーザーにとってより意味があります:
利用可能なオプションを設定するためにトグルのようなボタンを使用することはおそらくより良い方法です:
範囲の表示が便利な追加かどうかを考えてください。そのように表示される評価の範囲を見たことがないので、特定のケースがそれを正当化することを確認してください。
(edit:範囲を表示することは確かに元の問題の良い解決策ではなかったことが判明したので、そのコンテキストではAKの回答の方が理にかなっていますが、それが必要な場合は、以下の答えが引き続き適用されます)
確実な場合は、 表示範囲 の一般的なパターンに従ってください。さらに、1と5のどちらかの側に少しマージンを追加して、スライダーがエンドポイントに到達しないようにし、単一の値と間違えないようにします。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
上記のモックアップで注意するには:
範囲の代わりに、チェックボックス(またはフォームの要素のように見えない類似のもの)を使用して、製品のさまざまな品質の可用性を表示します。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
このアイデアは Alexey Kolchenkoからの回答 の最後のアイデアに近いものです。