web-dev-qa-db-ja.com

否定的な(低いほど良い)目標の「進捗状況」を視覚的にどのように表現しますか?

用語が間違っているかもしれませんが、その考えは正しいと思います。

数値を増やして一定の数値に到達しようとする場合、進行状況を表すさまざまな方法があります。通常、これを表すために、ある種の進行状況バーが表示されます。これを前向きな目標と呼びます。測定する数値をできるだけ大きくしたい。

高い数値またはゼロから開始する目標についてはどうでしょうか。「目標」は、数値をできるだけ低くするか、ゼロのままにすることです。これは私がタイトルで否定的な目標として言及したものです。それはゴルフのスコアのようなものです-低いほど良いです。 「進行状況」をできるだけ少なくしたいので、進行状況バーは意味をなさないようです。プログレスバーの反対は何ですか?

ゴールを「逆転」させてポジティブゴール(大きな数値が必要な場合)として表すことができる可能性は常にありますが、常に可能であるか、または明確でさえないと私は確信していません。ユーザーにとって意味のある否定的な目標を表す方法を見つけようとしています。

実際のビジネスの例:

  • 平均通話時間が10分未満である
  • 返品が3未満
  • 72時間以上経過している未解決のケースがない

目標の簡潔なリストをダッシュ​​ボード形式で表示している場合、肯定的なものと否定的なものがあります。ユーザーがそれらを区別するのに役立つ、どのような設計要素を使用できますか?それらすべてにプログレスバーを表示するのは混乱しているように思えます。一部を埋める場所と、空にする場所があります。

色の手がかりを使用すると役立つ場合がありますが、色の手がかりを使用する最も一般的な方法は赤=悪い、緑=良いので、もちろん色覚異常に遭遇します。

13
Ryan Elkins

減量アプリがどのようにそれを行っているかを見てください-通常、ターゲット領域がマークされている折れ線グラフを使用します:

Example from the Withings app

6
Martin Mühl

私が感じているのは、KPI(主要業績評価指標)ダッシュボードを設計しようとしているということです。ポジティブとネガティブの結果に関する各要素は、緑、オレンジ、赤などの色で伝えることができます。ただし、これらのカラーコードは、有名なソリューションのUI要素に既に埋め込まれています 2

KPI

ダッシュボードのニーズに対するソリューション。

  • 会社の標準である明確な口頭メッセージ
  • エラーがない場合は既存の設計ガイドを使用する
  • データの3-30-300秒の深さ
5
Abektes

弾丸グラフ の使用を検討してください。

ブレットグラフは、従来の棒グラフを取り、ターゲットと範囲の情報を簡潔に表す要素を追加します。特にダッシュボード用に設計されています。

annotated bullet graph

否定的な目標をどのように表現しますか?

以下の費用と欠陥のグラフを見てください。ターゲットバーが0マークに向かって配置されていることに注意してください。これら2つのグラフの色の範囲も逆になっており、0に近い最も明るい「良好」な範囲と一番上の暗い「悪い」パフォーマンス範囲を示しています。

example of representing negative goals with bullet graphs

これが十分に明らかでない場合は、スケールを逆にグラフ化することもできます。

example of backwards bullet graphs

これで、従来どのグラフを読み取るべきか、どのグラフが逆のスケールを持つかが非常に明確になりました。

これは、Stephen Few(ブレットグラフの設計者)のブログ投稿から引用したものです。 http://kelsocartography.com/blog/?p=1682

4
nightning

私はこの非常に興味深い質問に完全な答えを持っていないので、いくつかの考えを投げ込みます:

  • Excelやスプレッドシートを使用している場合も、そのような状況があります。ときどき小さい方が良い(直帰率が低い=良い)。ここでは、肯定的な結果を色分けします。緑は良い、赤は悪いです。これにより、あなたが言ったように、私たちは前向きな進歩と一貫性を保つことができます。

たぶん、そのメカニズムを使用して、「反転した」陽性を視覚化することもできます negative progress

これにより、同じ種類のビジュアルを使用できますが、「残されたもの」と「達成されたもの」は明確に区別されます。色は「注意が必要なもの」の認識に役立ちます。技術的には、両方のアプローチでバーを下から上に「成長」させることもできます。正の場合は色付きのバー、負の場合は灰色のバーになります。

少し考え直します。それは非常に興味深いなぞなぞです:)

1
Jan

私が正しく理解している場合、主な目的は、現在のスコアを一種の「回帰」バーに投影することにより、ベンチマーク(または目標)を超えたユーザーの間で覚醒の感覚を作り出すことです/グラフ(そう言えば)。私が関連付けることができる最も速い参照は次のとおりです:

  1. 毎月の節約/支出トラッカー-節約が多いほど、支出が少なくなり、その逆も同様です。したがって、ユーザーの目標は、毎月の支出を最小限に抑えて節約を増やすことにより、バーをできるだけ緑っぽく保つことです。月が進むにつれて、バーは長くなり続け、色は緑がかった(節約)または赤みがかった(費用)または両方になります。

Savings/Expenditure Tracker

  1. デバイス温度インジケータ-デバイスの最適温度が摂氏42度であると仮定すると、スライダーは現在のデバイス温度を示します。現在の温度が最適な温度を超えると、警告メッセージが点滅します。ユーザーの目標は、スライダーをできるだけ最適温度に近づけることです。 SAFEおよびDANGERラベルは、インジケーターをよりわかりやすく理解しやすくします。

Device Temperature Tracker

  1. 直帰率%トラッカー-これは私のお気に入りの1つです。サイトの直帰率%を一目で確認したい場合は、この種の速度計ウィジェットが役立つ場合があります。ウェブマスターは、メインの読み取り値のほかに、前日の%または最適な%と比較したバウンス%の増加/減少%のメモを取ることもできます。

Bounce Rate % Tracker

  1. リアルタイムユーザーとデバイスタイプ-良い例かどうかはわかりませんが、これはGoogle Analytics内で利用できるリアルタイムダッシュボードのスナップショットです。赤と緑の色の使い方から、私はGoogleがデスクトップからウェブをサーフィンするユーザーよりもモバイルパワーのユーザーを獲得することをウェブマスターに望んでいると想定しています!

Real-Time Users & Device Type

1
Ramnath

私はそれらの3つのターゲットを呼び出して、プログレスバーの真ん中に正確に配置します
ターゲットの上にあり、バーが真ん中で始まり、赤で右に移動します
ターゲットの下にある場合、バーは左に移動して緑色になります

1
paparazzo

ターゲットをシンプルに保つ

私は似たようなものに取り組み、シンプルなダッシュボードのアプローチを取ることが最善であるという結論に達しました。 「私は上、下、または横に移動していますか?」というセマンティクスにユーザーを巻き込まないでください。

これは、ユーザー(電話エージェント)が管理者定義のターゲットにヒットしようとしている通話時間メトリックの例です。そのターゲットは、パーセンテージスコアで表されます。色付きのリングは、ターゲットに当たると「ドーナツ」を満たします。さまざまなマイルストーン値によって色が変化し、ユーザーの進行または衰退を強化するのに役立ちます。

Doughnut chart - badDoughnut chart - goodDoughnut chart - average

シンプルでスキャン可能なビジュアルビジュアルキュー大量の解読を必要とせずに高レベルの評価を提供します。問題がある場合は明らかであり、ユーザーは他のデータにドリルダウンして詳細を確認できます。

1
plainclothes

マイナスの進行状況の進行状況バー
典型的な進行状況バーは空から始まり、いっぱいになります。または、ダウンしてヘッドアップします。

高い数値またはゼロから開始するという目標があり、進行状況を下方に表示したい場合は、進行状況バーの反対を求めます。

反対は、完全に始まり、空になるバーです。または「アップ」を開始し、徐々にダウンします。

もう1つの考え方は、カセットプレーヤーやWinAmpにあったボリュームバーです。

Volume meter

スケールの最初の60%〜70%で緑色に点灯し、次にスケールの次の20%-25%で黄色になり、最後のセクションで赤色になるバー。これらは上下にちらついて、物事が良かったとき、不良に近づいたとき、不良だったときに通知します。

実際のビジネスの例:
平均通話時間が10分未満である

平均時間と目標時間を表示します。呼び出しごとに更新します。これにより、時間に対する進行状況がわかります。

返品が3未満

これは通常、比率の目標です。現在の返品率を表示します。目標返品率を表示します。スケールの大部分を排除します。

例えば3回の返品は、たとえば、バッチの0.5%/ 1週間の生産です。現在の返品率はあたり12です。現在の返品率を0%から2.5%までの範囲でのみ表示します。

72時間以上経過している未解決のケースがない

その年齢はいくつのオープンケースですか?昨日は何人いましたか?先週?公演?

重要な点は、進行状況バーは一般的に一方向を示しているということです。あなたはフィニッシュに進むか、おそらく一時停止します。

これらの実際の例のほとんどでは、バックスライドが実際の可能性です。

色の使用について:
私は常に淡い緑と濃い赤を使用するようにしています。私は赤を「純粋な」赤に保ち、緑に青っぽい色合いを取り入れようとします。

これにより、赤と緑の2つの違いがわかります。青の量と暗さです。

Red and Green, perceptible by the colour blind

色覚異常がユーザーエクスペリエンスに及ぼす影響に関する多くの有用な情報は、次の場所にもあります: 色覚異常のユーザーがサイトを見ることができますか?

サイトに表示されている色の時計ダイアルでは、通常5時と正午または午前11時に表示される色を使用します。そして、午前11時/正午の色を暗くします。

1
Euan M

これには赤のマイナスプログレスバーを使用しません。

負の進歩は常に心理的に損失と関連しています。特に、警告を発する赤いバーや他の種類の赤い看板で描かれている場合はそうです。ポジティブに戻すと、通常のプログレスバーや他のゲーミフィケーション要素を使用できるだけでなく、ダブルネガティブではなくポジティブな強化をユーザーに奨励することもできます。

元に戻す:

  1. 平均通話時間が10分未満>「超高速通話」カテゴリの平均通話時間。

  2. 返品が3回未満の場合>「キーパー」バッジを付けます。

  3. 72時間以上経過している未解決のケースがない> 72時間以内に7つのケースが終了している。あなたは10ケースのストライキをしています!

0
Zoe K

このページではすでに多くのことを取り上げています。

潜在的に否定的な目標を肯定的な目標に変換することは、問題を解決する1つの方法である可能性があることに同意します。

差別化したい場合、別の解決策は、わずかに異なるデザインパターンを選択して、これらの「否定的な目標」を示すことです。

いくつかの例については、以下の画像を参照してください:

純粋に色に依存することはできません。これらのギャップをカバーするために直感的なコンテンツや視覚効果を追加する限り、あなたは良い形になっているはずです。

Negative Goals

0
Igorek

これらの多くは否定的な進歩を促すように設計されているため、カウントダウンを検討することを検討してください。 countdown

0
Josiah Tullis

それでも、ユーザーにとって「肯定的な」方法で「否定的な」方向に進む目標を表すことができます。

あなたが提起した実際のケースを見てみましょう:

  • 平均通話時間が10分未満である
    • ユーザーの通話平均時間を表示し、進行状況の「ゾーン」を指定できます。たとえば、ユーザーの移動平均が10分未満の場合、ユーザーはグリーンゾーンにいます。平均が10〜20分である場合、オレンジ色などです。そのため、数値は負の方向に進んでいる可能性がありますが、ユーザーはまだ正のフィードバックを得ています。 :)
0

多分温度計のようなものですか?あなたの数が少ない場合、それは青であり、あなたはクールです。数が増えると、垂直バーのサイズが大きくなり、黄色、オレンジ、赤になり、注目を集めます。

あなたが物事を置く方法は私にゲーミフィケーションを思い出させます。それが数字ではなく欠点である場合、人生の概念を使用することもできます(マリオブラザーズの1アップなど)。ユーザーは、たとえば、5つの人生から始めます。彼らが「間違った」ことをした場合(たとえば、1つの未解決のケースを3日以上応答しなかった場合)、彼らは人生を逃します。ゲームには、残りのライフ数を表す多くの方法があり、1つを選択できます。 (それが役に立てば幸い)

0
Heitor