web-dev-qa-db-ja.com

さまざまな評価を表示する

Webアプリのテーブルでは、同じタイプの複数のオブジェクトが集約されます。すべてのオブジェクトには、1から5までの数の条件があります。最初は、範囲が色付けされるプログレスバーのようなスタイルを使用することを考えました。ただし、ユーザーが範囲を単一の値(最大)と間違える可能性があるため、範囲に範囲が含まれている場合、これはおそらくユーザーにはわかりません。

たとえば、使用済みのシャツを格納するテーブルがあります。すべてのシャツには、条件が割り当てられています。これらのシャツをサイズ別にグループ化できるようになりました。中(3)から高(5)品質の範囲の条件のシャツが利用可能であることを示しようとしています。

enter image description here

画像を見てください:解釈が事前にわからないので、画像は1から4の範囲ではなく、値4を示していると思います。

これを防ぐにはどうすればよいですか?

5
chaosflaws

範囲を設定するためにグラフィックコントロールに固執する場合、セグメント内に数値を表示すると役立ちます。それらは、単一の値ではなく、セットのアイデアを伝えています。

enter image description here

このUIをテストしてください。

[〜#〜] update [〜#〜]質問が編集された後

あなたの編集によると、私は範囲を使用することが最善の手段であるとは思いません。

Rangeは、主に下限と上限、または間隔内の要素として理解されます。範囲は連続値に適しています。価格が$ 100〜$ 200の商品。

あなたの場合、あなたは一連の個別の値を持っています、それらのいくつかはあなたのサブセットにあるかもしれません。

ケースを考えてみましょう:
enter image description here
靴のサイズに関するどの情報がユーザーにとってより意味があります:

  1. 28〜37の利用可能な範囲
  2. 28/29、36/37利用可能なセット

利用可能なオプションを設定するためにトグルのようなボタンを使用することはおそらくより良い方法です:

enter image description here

6

範囲の表示が便利な追加かどうかを考えてください。そのように表示される評価の範囲を見たことがないので、特定のケースがそれを正当化することを確認してください。

edit:範囲を表示することは確かに元の問題の良い解決策ではなかったことが判明したので、そのコンテキストではAKの回答の方が理にかなっていますが、それが必要な場合は、以下の答えが引き続き適用されます)

確実な場合は、 表示範囲 の一般的なパターンに従ってください。さらに、1と5のどちらかの側に少しマージンを追加して、スライダーがエンドポイントに到達しないようにし、単一の値と間違えないようにします。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

上記のモックアップで注意するには:

  • 範囲の制限は、色、三角形のインジケーター(円など)で明確に示され、値1と5が下に報告されます(認知負荷も軽減されます)。
  • 表示されるものが単一の値ではないことを明確にするために、1と5の両側にかなりのマージンが残されています
  • ボーナスポイントの場合、平均評価が上部にとともに「平均」という言葉とともに表示されます。これを要件として指定していませんが、範囲と値のあいまいさを取り除くのにさらに役立つと思います。
8
LS97

範囲の代わりに、チェックボックス(またはフォームの要素のように見えない類似のもの)を使用して、製品のさまざまな品質の可用性を表示します。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

このアイデアは Alexey Kolchenkoからの回答 の最後のアイデアに近いものです。

3
A.L