数千ステップのプロジェクトの進捗を視覚化するアイデア
私は手書きのインデックスカードのコレクションを転写するためのインターフェイスに取り組んでいます...インデックスカードのlot、何万ものようなもの。
複数の人が任意のカードを任意の順序で転記できるサイトを構築しています。どれだけの作業が行われたか、どれくらいの作業が残っているかを視覚化したものを追加したいと思います。私が思いついたのは、1ピクセルが1枚のカードに対応する散布図でした-100x100の<canvas>タグでそのようなプロットを作成すると、たとえば、10,000のステータスポイントをキャプチャできます。色が付けられたキャンバスの部分は、少なくともどれだけ文字が転写されたかを視覚的に示します。
しかし、このような<canvas>タグをレンダリングするには、データも送信する必要があります。これはおそらくデータが多すぎます。 （多分私は定期的にサーバー上でプロットをレンダリングし、それを画像として送信することができます。）それともそれはでしょうか？
誰か提案はありますか？
標準の進行状況バーとカードの数で十分でしょう。しかし、これはあなたが少し独創的であるかもしれないものだと思います：散布図の効果は素晴らしいかもしれません、あなたは最も新しいピクセルを最も明るくして、古いものをフェードさせることもできます。
パフォーマンス的には、生成されたピクセルプロットを保存する場合、表示するたびに計算する必要がないので、これは本当に問題にはなりません。 canvas-tagではなく、サーバーサイドで生成された画像を使用すると思います。更新アクション自体はそれほど複雑であってはなりません。既存の画像を取得し、最後の更新（または最後の画像のレンダリング以降の更新）を取得して、それらの正確なピクセルを変更するだけです。または、時間に応じてフェードしたい場合は、最初に既存の画像をフェードし、次に最新のフェードアクションのタイムスタンプを追加して、1日1回または1時間に1回だけ行うようにします。 （ステップごとに行うこともできます。）
現在は、進行状況の情報を提供するためだけに必要なものよりはるかに複雑なものになっています。また、リソースを拡張しない方法で実装することは非常に現実的だと思います。
私は散布図のアイデアが好きです。ただし、キャンバスを使用してクライアントでレンダリングするのではなく、サーバー側でレンダリングしてください。サーバー言語の設定はわかりませんが、PHPと組み込みの画像ライブラリを使用して、データからPNG画像を動的に生成するのは簡単です。
このゲームを楽しいものにして、マスクにゆっくりと写真を発表させることで、人々にカードを完成させる動機を与えることができます。完成した各カードと同様に、パズルのピースが配置されます。プレーヤーにズームインして、空のスペース（ピクセル）を選択させます。人々は当然、新しいアイテムを目に見えるようにするために、基礎となるパズルの一部を「仕上げる」傾向があります。
XとYの次元がカードのユーザーにとって重要な属性を表していない限り、散布図の要点はわかりません。そうすれば、ユーザーはおよそ何枚のカードが残っているかだけでなく、どのような種類のカードが残っているかを大まかに感じることができます。
ただし、それ以外の場合は、完了した数またはパーセント、あるいはその両方を指定してください。プログレスバーでさえ、リアルタイムで拡大する場合、またはユーザーにとって重要であり、注意を向けたり、視覚的に興味を持たせたりする場合にのみ有効です。それ以外の場合、進行状況の明確な、線形の、または直感的な測定基準がない場合（ソフトウェアのインストール時など）は、進行状況バーは適切ですが、ここでは当てはまりません。
完成したカードを表示する目的は何ですか？それで、ユーザーはいつ完了するかを見積もることができますか？ユーザーが完全に働くように動機づけたいですか？時間の経過とともに完了したカードの累積プロットを表示する必要があるかもしれません。そうすることで、ユーザーは完了のrateを確認することもできます（そして、彼らが緩み始めているかどうか）。また、ユーザーが自分で完了したカードの数または割合と、完了した平均数を比較して、公平なシェアを行っているかどうかをユーザーが確認できるようにすることも必要です（すべてのユーザーが興味を持つことを前提としています）。
進行状況が非常に遅いことを考えると、ユーザーがそれらを見つめない限りアニメーションは見えないため、どのような種類の散布図や進行状況バーも役に立ちません。
かなりの時間を選択し（文字起こしが複数の日にまたがる場合は1日とりましょう）、毎日達成された作業を進行状況バーの異なる色で表します。棒グラフ付きのヒストグラムを毎日使用することもできます。
このようにして、現在の進捗状況がより見やすく（最終日のみを表示）、他の日と比較できます。
ユーザーは5642と5643の色付きピクセルを区別できないため、散布図の使用は標準の進行状況バーよりも正確ではありません。
処理されたカードの正確な数についてフィードバックを提供する必要がある場合は、標準の進行状況バーを使用しますが、（進行状況バーによって視覚的に与えられる）完了率を表示する代わりに、処理されたカードの数を表示します（例： "5642/16254 」.
散布図の進捗状況を確認するのはあまり明確ではありません。完了のパーセンテージを示す進行状況バーは、はるかに明確になります。
プログレスバーをデザイン機能にすることができます。画面の上部または横にある可能性があります。
Linkedinと同じようにプログレスバーを表示できます。そして、パーセント値と実際の数値の両方を表示します。
これが良い動機付けのブースターであるという多くの証拠があります（状況に少しストレスを加えることによって）