web-dev-qa-db-ja.com

最終スコアに寄与する多くの重み付けされたスコアを視覚化する方法は?

「スコアカード」を視覚化する方法を必要とする(ごくわずかに技術的な)ユーザーが何人かいます。スコアリングされるさまざまな要素があります。各因子には重みが関連付けられており、スコアはそれらの重みで乗算され、合計されて最終スコアになります。彼らは各要素の詳細を見たいと思っていますが、同時に他の要素に対する相対的な重み付けを覚えておいてください。

そのようなものをどのように視覚化するのが最善ですか?

1つの提案は、バーの幅と高さをスコアに設定することです。下の画像のように。しかし、それは多くの画面スペースを占有し、見苦しく見えます(大きな緑色のブロック!)。

私の懸念は、人間の心が体積と相対的な高さなどをどのように解釈するかです。

Bars with variable widths and height

次に、以下のような要約画像を追加します。乗算されたスコアx重みが積み上げ棒グラフに配置されます。

StackedBarChart

6
JDoe

シンプルにしたい場合は、次の1次元の方法を試してください。

enter image description here

これが行うことは、合計最大スコアを取り、それをファクターのパーセンテージで除算し、それをスコアリングされたポイントとスコアリングされていないポイントに細分することです。このようにして、全体のスコアが何であるか、および全体のスコア(この場合は赤)の最大の改善を得ることができる場所をすばやく確認できます。

改善の可能性という観点から相対的なスコアを考慮に入れることはあまりありません。たとえば、緑はオレンジよりも個人スコアが優れていますが、どちらも「失われたポイント」の量は同じです。だから改善するために、あなたはそれらのどちらかを選ぶことができます。

または、このバリエーションを試すこともできます。これにより、各要素のスコアがどれだけ上手かを確認しやすくなりますが、全体的なスコアを確認することが難しくなります。

enter image description here

もちろん、バー内のテキスト/ポイント/パーセンテージなどでそれらを盛り上げることもできますが、この最低限のアプローチでもポイントが十分に伝わると思います。また、ユーザーが切り替えられるように、または少なくともエンドユーザーとどちらがうまく機能するかをテストするために、何らかの種類の切り替えを検討する必要があります。


この1次元性の優れた利点は、簡単に回転できることであり、詳細な説明の段落を作成するための適切な基礎が得られます。たとえば、BGYOの1つの改善点と2つまたは3つの赤い改善点のスペースがあります。

注:棒グラフは、これらの色をポップにすることでポジティブ(スコアポイント)に焦点を当てていますが、(おそらくコンテキストに応じて)ライト(欠落したポイント)の相対的なサイズにフィードバックを集中する必要があります。

4
PixelSnader

ルックアップテーブルは、密にパックされた個々の詳細を表示するのに最適です。それを視覚化と一緒に追加することを検討してください。私はGoogleスプレッドシートのグラフをいじって、以下のいくつかのオプションを作成しました。

1)相対的なサイズの比較のために棒グラフを打つのは難しいです。各バーにスコアと重みを追加してみてください。

2)ドーナツグラフは構成を示すのに適していますが、サイズを正確に比較することはできません。 (たとえば、スライスがそれぞれ24%と26%の場合、それらはドーナツチャートではほとんど区別できませんが、グラフでは明確に区別されます)

3)重みの効果を説明したい場合は、二重棒グラフが役立つことがあります。

上記の要素を組み合わせると便利です。また、Googleスプレッドシートではできなかった詳細を追加することもできます(たとえば、ドーナツの中心にある追加情報)チャート、バーの詳細なラベルなど)。

enter image description here

お役に立てば幸いです。

また、これはデータを視覚化するための質問だと思います。データvizフォーラムに投稿することをお勧めします: https://stats.stackexchange.com/questions/tagged/data-visualization

3
Gene

最近、非常によく似た状況にありましたが、ここで私たちがそれに取り組みました。

  1. 大きくて重要なスコアのプレゼンテーションを複雑にしすぎないでください。
  2. ある種のスコアリングメカニズムが存在することをユーザーに知らせます。 (すぐに説明する必要はありません!)
  3. 興味のあるユーザーに、必要に応じてスコアリングのしくみを調べてもらいます
  4. 概念がトリッキーになったときは、説明するときに明確かつ明確にしてください

これが、最終的に作成した実際のUIの一部です。下の灰色のバーは、6つの要因に基づく複合スコアであり、すべて異なる重み付けがされています。

enter image description here

グラフの上にある丸印をクリックすると、各コンポーネントの値が表示されます。

enter image description here

[スコアの重み付け]領域では、基になるシステムが機能していることをユーザーに知らせ、それをクリックすると、その仕組みの明確な説明が開きます。

enter image description here

多くのオールインワン積み上げ棒オプションを調査しましたが、それらは計算されたスコアの第一印象を本当に混乱させ、計算が実際にどのように機能するかを簡単に伝えることができませんでした。

また、高さと幅がサブスコアとその重みに対応しているボックスを使用することに懐疑的であったことも正しいと思います。これは型破りなので、それ自体の説明が必要であり、それが全体のスコアにどのように加算されるかを示すのは非常に困難です。これを1次元の積み上げ横棒にすると、読みやすくなり、従来どおりになります。

ただし、もちろん、各コンポーネントの1次元バーは、重み付けがどのように機能したかを物語っていません。

最終的に、最終スコアを形成するためにサブスコアと重み付けがどのように機能するかを説明するのは複雑すぎて、微妙な視覚的な方法では説明できないと結論し、それ自体を明確に説明する図にしました。

pS画面領域がある場合は、コンポジットのすぐ下にコンポーネントバーを表示することも検討してください。一度に多くの複合バーを表示できるようにするには、追加の「ドリルイン」操作が必要です(スクリーンショットには表示されていません)。

3
peteorpeter

興味深い質問です。データ視覚化手法の1つは次のとおりです。 enter image description here

他のいくつかの方法: enter image description here

enter image description here

enter image description here

1
Shreya Saxena

人間は物事のサイズに非常に敏感なので、スコアバーの幅と高さに別の意味を使用することはそれほど素晴らしいことではありません。そして、ユーザーにとって非常に努力するでしょう。あなたのモックでは、積み重ねた棒の高さをユーザーが比較する必要があります。高さの差がそれほど大きくないため、これは非常に難しい作業になる可能性があります。

各フィーチャの重みは固定されていると思います。そのため、フィーチャ名の横にテキストラベルとして重み値を書き込むことはそれほど悪くありません。

フィーチャが少ない場合(≤5)、同じ色の異なる色合いを使用して各フィーチャを表すこともできるため、重みの高いフィーチャは重みの低いフィーチャよりも暗くなります。このようにして、スコアを棒のサイズで表し、重みを棒の色で表します。

1
Stefano

Windowsのメモリ使用量モニターに似たものを使用することをお勧めします。

memory monitor

ご覧のとおり、この表示には、複数の色分けされたセクションに分割された単一のバーが含まれています。合計バー幅は最大スコア、つまり100%を表します。各カラーセグメントは、最終スコアの因子の寄与率を基準にした幅になります。

バーの下部には、各セグメントの色が何を表すかを説明するキーがあります。このセクションは、バーの各色が何を表しているかを示す場所であるだけでなく、含める必要のある追加の詳細情報の余地を残します。メモリモニタには、MBサイズなどの詳細が表示されます。これを、重量計算の詳細などの他の情報に置き換えることができます。

1
Tot Zam