web-dev-qa-db-ja.com

目標に向けた進捗状況を表示するにはどうすればよいですか?

イントラネットでは、従業員が業績目標を追跡できるように、いくつかの数値を表示しています。現在は単なるテーブルです。

enter image description here

もっと視覚的なものが欲しいのですが、これは私が最初に考えたものです。

enter image description here

YTDの目標に遅れているときのこのバリエーションに加えて:

enter image description here

しかし、これは乱雑に見えます。このタイプの視覚化はすでに解決済みの問題であるように感じますが、適切な検索用語を見つけて、エミュレートできるより良い例を見つけるのに苦労しています。

誰かが視覚化のためのより良いアイデアを持っていますか?または、リンク先の例ですか?

19
longneck

色を注釈として使用するだけでは、少し理解しにくいと思います。垂直ルールを使用して、日によって、YTDまたは年次目標のプレースホルダーとして機能できます。

あなたの焦点は目標であり、あなたがどれだけ上または下にいるかです。つまり、値の違いについて気になっているだけでは、実際の数値を表示するのに十分な値がないということです。 違いを強調し、進行状況と目標を背景に保ちます。ジョンはすでに色をテストしているので、私は彼を信頼しています;)そして色を使用しています。青は従業員の実際の値、赤は目標よりも少ない量緑は目標より多い量

アイデアは、人は自分が目標をどれだけ上回っているか、下回っているかを確認できる必要があります。

  • イチジク1:目標以上、緑
  • 図2:目標未満、赤
  • イチジク3:年間以上、再び緑

また、インタラクティブにすることも有益です。実際の値を表示するラベルの上にマウスを置くか、状況に応じてより多くの情報を追加するだけで、特別なことは何も必要ありません。

mockup

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

極端にしたい場合は、青の進捗状況をグレー表示して、垂直のルールと赤または緑のボックスを表示するだけです。進歩を必要としない違いを示すだけです。

15
rk.

私は最近、非常によく似た問題を抱えており、それについてユーザーテストを行いました。それから生まれた主なことは、共通の意味を持つ色を避けるべきだということでした。したがって、黄色は悪い選択肢であり、緑は「許容できる」ではなく「良い」を表しています。

最終的に、中間色の背景色として灰色を使用し、「期待」の進捗状況として青色を使用しました。 「期待を超える」として緑。そして「期待以下」として赤。これはユーザーとうまくテストされました。このようなもの:

enter image description here

こちらの色はデモ用です。 「顔」の少ない、より良い色合いを使用する必要があります。

11
JohnGB

主な問題は色ではありませんが、JohnGBにはこれに関していくつかの有効な点があります。

色との混乱を避けるために、このようなものを使います。

enter image description here

11
CB Du Rietz