web-dev-qa-db-ja.com

参照の上または下にある数値を表す最良の方法は何ですか?

リソース管理Webアプリケーションを使用しています。数値のグリッド(リソース予測)があります。数値が参照(リソース容量)を上回っているか下回っているかをこのグリッドに表示する必要があります。

「オーバー予測」(=競合)の場合は、黄色から赤までの数字を表示することを考えました。次に、予測が容量と一致するとき(=すべてが完璧)に、緑を使用します。

しかし、「予測未満」(容量未満)を表示する方法がわかりません。これも実際のビジネス上の問題ですが、「予想外」とは区別する必要があります。ニュートラルカラーで十分かどうかはわかりません(青ですか?)

これが私のグリッドの例です:

mockup

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

ジョンスミスの6月のキャパシティが5だった場合、グリッドの予測12は赤になります。 6月にもミックジャガーのキャパシティが5だった場合、予測5はグリーンになります。容量が10の場合、予測5は青になります(この色には納得できません...)。

このグリッドでUXを改善し、予測不足および予測超過を表示するための提案はありますか?

6
Alex

私が最初に頭に浮かぶのは、株価表示器に表示される小さなインライン矢印です。

stock ticker

矢印は実際の値が予測より上か下かを示しますが、黄色から赤へのグラデーションを使用して、実際の値が予測からどれだけ離れているかを示すことができます。

7
Bobwise

矢印のアイデアは非常にいいですが、方向性を提供しますが、これは実際のユースケースには関係ありません。あなたは値がどこにあるかだけを気にするので、移動した方向は気にしません。

中点とドットの付いたシンプルなアイコンはどうですか?あなたはそれらを着色するか、それらを黒のままにすることができます。

enter image description here

7
Franchesca

会計の場合と同様に、赤はより密接に否定を表す場合があります。ポジティブには黒のシェードを、ネガティブには赤のシェードを使用することを検討してください。これは、ユーザーに情報を中継するための私のレポートでうまくいきました。このシートがこれらの色で視覚的にどのように通信するかを確認してください...

ユーザーエクスペリエンス閲覧リスト-2013 v.

もちろん、混乱させたくないので、色の設定を説明する「キー」を含めることを検討してください(この例では無視しました)...

enter image description here

この種の情報を伝えるために視覚に完全に依存している場合、視覚に障害のある人がインターフェースのアクセシビリティを制限している可能性があることも覚えておいてください。多くのスクリーンリーダーはフォントの色を解釈しません。

3
eeklipzz

ユーザーは、このグリッドを見ることによって、どのように目標が何であるかを知ることができますか?ユーザーが赤く見え、目標を覚えていない場合、特にその週/月にうまくいったと思った場合、ユーザーは苛立ちます。

私の意見では、彼らが達成した目標と数を表示する方が良いでしょう。そうすれば、色は必要ありません。また、色覚異常の人がいる場合は、色を使用しても効果がありません。多分次のようなもの:

  • 2/12
  • 6点中3点
  • 1-3

正直に表示する方法がわからない

1
Igor-G