複数の進捗状況を表示する方法は？

Question

私のシナリオはこれです：私は、プレーヤーがゲームで獲得したポイント数、およびプレーヤーが目標として得たポイント数、チームの平均的なプレーヤーが獲得したポイント数などの他の関連情報をレポートしています：

つまり、基本的に、ある種類の進行状況バーがあり、現在の値（合計が制限されていないことを示す）の直前に最大値が選択され、3つのデータポイントが示されます。

しかし、私はこのプレゼンテーションが好きではありません。

テキストが重く感じます
ポイントがたまたま近くにある場合、テキストは重複します（これが私がチームの平均をアンダーバーに置く理由です）
さまざまな値の意味が完全に明らかかどうかはわかりません

この種のもののためのより良いタイプのディスプレイはありますか？

（注： Data Science について質問することを検討しましたが、実際のデータ分析は非常に単純であるため、これはデータよりも使いやすさ/プレゼンテーション/コミュニケーションに関するものであると判断しました。）

nokola · Answer

ゲームなので、進行状況を楽しく表示するためのオプションがたくさんあります！

いくつかのオプション：

ゲームの種類はわかりませんが、進行状況を表示する1つの方法は「道路」を使用することです（道路に沿って木を追加するなど）。道路のメタファーは、「合計が制限されていない」ことをうまく示していますレベルを通過する道路のメタファー。

別のオプションは、通常のモバイルゲームと同様に、特定の目標（チームより優れている、Xより優れている、史上最高など）を達成するための1つ星、2つ星、3つ星の評価システムを持つことです。その後、スペースを節約できます。個人的に私は道路のメタファーが好きです。
3番目のオプションは、垂直のプログレスバーとして機能し、途中で、またはある種の目標とインジケータで満たされる、液体用のタワー状のコンテナを用意することです。

目標をチーム平均と重複させたくない場合は、それらを離してください。それはゲームなので、100％正確なチャートは目標ではないと思います。

Mike · Answer

スコアレポートの要件を作成します。あなたが言っていることから、それらは次のようになります：

無制限の最大値-表示される最大値は、達成された最高スコアに基づいて動的に決定されます
重いテキストではありません
すべての状況で判読可能-つまり、マーカーが互いに近接している場合、それらは重なりません
明確な意味を持つ

要件が形成されたら、次のような非線形の壊れたテープグラフを使用します。

mockup

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

グラフに終了値を指定していない最大値がないことを示すには、現在のグラフで行ったように、最大値に達していないことを示すだけです。
現在のスコアを直接表示するのではなく、それぞれのスコアインジケーターの上にマウスを置いたときに表示されるバルーン/ツールチップに表示します
ここで2つの問題が発生します。
- マーカーが重複しないようにするには、マーカーを別々のレベルに配置します。つまり、「あなたのスコア」が最も高く、「あなたの目標」は下の線（まだテープの上にある）に配置され、「チーム平均」はテープの下にあります。
  もちろん、マーカーは好きなように縦に並べることができます（できれば重要な順に）。
- マーカー間の最長距離でテープを壊して、マーカーが等間隔に配置されていることを確認してください。
  4つのマーカー（開始、チームの平均、目標、スコア）がある状況では、距離が10000を超えているため、最後の2つのマーカーの間でブレークします。
  スコアがそれぞれ（0、1345、2000、2049）の場合、startとteam avg。これは最長距離です（1035対655および49）。
  さらに、固定して配置する数値が少ないほど、マーカーを配置する際の柔軟性が高まります。
繰り返しになりますが、バルーンやツールチップが役に立ちます。チーム平均では、チームメンバーの人数、チーム内でのランク（ゲームのプライバシーポリシーによって異なります）、またはスコアの横に凡例を表示できます

そして、これは静的なスコア表示のためのものです。

必要なマーカーへのズームインが発生し、バー上の数値が特定のズーム率からのみ表示される、またはバーに沿ってパンしながらマーカーをゼロからその位置にスライドさせる、アニメーションスコアバーの提示をいつでも試すことができます。。

Marco Tatta · Answer

私にとって、この場合、プログレスバーは適切な視覚的概念ではないかもしれません。プログレスバーは、目標に到達するためにユーザーが何か（ポイントの場合はポイント）の量をすばやく視覚化する必要がある場合に役立ちます。この場合、到達するターゲットはありません。ポイントの量は、おそらく無限です。

ポイントを数字としてのみ表示するように選択し（昔ながらの90年代のビデオゲームのように）、ユーザーが目標に到達したときに視覚的にバッジをアクティブにすることができます（星またはそのようなもの、ゲームの全体的なアートに依存します）。必要に応じて、ゴールの数をバッジの近くに維持します（例では2000ポイント）。

私にとってトリッキーな部分は、同時avg.teamスコアをプレーヤースコアと共に表示する方法です。考えられる2つのシナリオを検討する必要があります。この例では、プレーヤーが平均チームスコアをはるかに上回っていますが、その逆の可能性もあります（プレーヤーが平均チームスコアを下回っている）。プレーヤーのスコアと平均的なチームのギャップを表します。基本的に、プレーヤーは自分が平均以下かそれ以上かを理解したいと考えています。

これが当てはまる場合は、チームの平均スコアを持つ双方向バーを使用できます。バーの方向と長さは、この2つの概念（一目で）が「平均より上か下か」を示します。そして、「私は平均以下/どのくらいですか？」もちろん、バーは再生中は動的です。プレーヤーが「良い状況」、つまり平均を上回っている場合はバーの色が変化し、良好（緑または青）を表し、悪い（赤または赤）を表すはずです。オレンジ色）プレーヤーが「悪い状況」にある場合、つまり平均以下である場合！

上記の3つのシナリオを表します：左：プレーヤーが2kゴールに到達し、平均チームスコアを超えていますセンター：プレーヤーが2kゴールに到達し、平均チームスコアにあります右：プレーヤーが2kゴールに到達し、平均未満ですチームスコア

バイバイ

InnaS · Answer

画面サイズはわかりませんが、気になる場合は、テキストラベルを次のように変更することをお勧めします。このようなもの。悪いグラフィックのための私の謝罪。

Big_Chair · Answer

PCゲームの場合は、ホバー/クリックポップアップを使用することもできます。

簡単に区別できるようにするための、泡と色の小さな文字（有用な冗長性）。
すばらしい利点：ユーザーが理解できない場合に備えて、説明テキストを含むドロップダウンを使用できます。

テキストが重複する問題も解決します。

実際、これはタッチデバイスでも機能し、ホバーする代わりにタップするだけです。
しかし十分なスペースがある場合のみ。

cameraman · Answer

1つのグラフではデータが多すぎて扱いにくいデータのようです。
分割して優先順位を付けようと思います。このようなもの：

スコア：12549ポイント

レベル： 5

次のレベル： 451ポイント
レベル6 [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] 13000ポイント
あなたのスコア[] [] [] [] [] [] [] [] [] [] []] [] [] 12549ポイント

目標： 627％超過（+10549ポイント）
あなたの目標[] [] [] [] 2000ポイント
あなたのスコア[] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] 12549ポイント

生産性：チームの平均よりも933％多い（+11204ポイント）
チーム平均[] [] [] 1345ポイント
あなたのスコア[] [] [] [] [] [] [] [] [] [] [] [] [] [] [] [] 12549ポイント