ストリークの視覚化をより直観的にする
私は現在、習慣の変化を追跡するためのウェブサイトに取り組んでいます。レポートページには、ユーザーが進捗状況を記録するために操作する目標カードがあります。
この例のドーナツチャートは、ユーザーの現在のストリークが最長2日間であるのに対し、現在のストリークは1.6日間であることを伝えようとしています。赤いドーナツは、現在のストリークのパーセンテージを最長ストリークで割ったものです。
この表現は明確ではないと思います。コンパクトなフォームファクタを維持しながら、このデータの視覚化をより明確にするにはどうすればよいですか？
結果：
この質問に対する素晴らしい答えに基づいて、私は最初にインターフェースを次のように再設計しました：
これがユーザーベースにとって意外であることにまだ気付いていたため、最近、過去365日間の進行状況のローリング指数平均を表示するヘルスメーターを含めるように設計を更新しました。
あなたのグラフィックはそれが何を意味するのかを説明するにはあまりにも多くの情報を必要とするようです。 Githubは、Current Streakの横にあるLongest Streakの表を使用してこれを行います。テキストだけで理解しやすくなります。
コンパクトに保つには、最も重要な情報以外はすべて削除できます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
純粋な視覚化が必要な場合は、Githubのボックスの概念を数日間使用できます。
編集する
リーダーボードを追加すると、フルークによって1年前にヒットしたターゲットを追跡するだけでなく、他のターゲットを倒したことを示します。
**ここに比率を表す2つの代替方法があります**
最高水準線を使用します。
- これにより、すべての時間を現在のストリークと最もよく比較しながら、パフォーマンスのマイナーな傾向を確認することができます。
- リスクは、最初に画面にオーバーレイされる高透かしを理解できないことです。
- Apples Health Webkitは、歩んだ手順でこれをうまく行います。自分のモックアップを添付します。
以下は、現在のストリークでは2.6日であるが、3日という最高水準点でこれがどのように見えるかのモックアップです。
彼らが傾向を見ることができ、しばらくして彼らが最高水準点を理解するようになるので、私が信じている一番下の線グラフはより良いです。また、バーを描画するとより多くのスペースが必要になるため、画面のスペースが少なくてもうまくいくと思います。
私の意見では、apple health webkitは、歩んだ歩数でこれをうまく行っています。以下のデザインを参照してください。
円形のダイヤルを別の円形のダイヤルの内側に置くと、フォームファクタが小さくなります（円の内側に部分的な円）
- 2つの異なる色の濃淡を互いの内側に置くと、濃い緑色の部分円が常に最高を表し、次に明るい緑色の部分円が現在のストリークを表します。
- 隣り合う2つは、素晴らしい自然なコントラストを提供します
- 私が色を変更する理由は、一部の人々が色覚異常であり、赤と緑が似ている可能性があるため、同じ色の2つの異なる色合いを使用することを選択するためです。
- 下のクイックモックアップ
また、円のアイデアに似ていますが、バーと同じコントラストが私が作ったものより下です。 
ビデオゲームからページを取り、個人的な最高の連勝をハイスコアとして扱います。
パックマンのような古典的なゲームは、到達する目標として常に高いスコアを示し、それを達成すると、両方の数値が同時に変化することを確認し、各ポイントが新しい記録を設定しているという事実を補強します。
最近では、Diablo 3は、レベルアップするにつれて、キャラクターのポートレート用にますます手の込んだフレームを提供しています。これは、小さくても具体的な報酬であり、視覚的に進行状況を強化し、「より良い」フレームに到達するため、または次に何が起こるかを確認するための追加のインセンティブを提供します。
ロックバンドはハイスコアを追跡するだけでなく、スコアがさまざまなしきい値を超えたときに満たされるさまざまなレベルの「スター」も追跡します。 （中央右、スコアの下）
Geometry Warsのようないくつかのゲームは、より高いスコアを追いかけることを主な目的としているため、自分の隣に友達のハイスコアも表示されます。これは自慢できる権利として機能したり、自分のトップスコアが他人のトランプに踏みつぶされたのを見たときに少し頑張ったりするインセンティブを提供したりできます。
これらのアイデアのいくつかを使用した簡単なモックアップを次に示します。
- 最も重要なので、現在のストリーク数を大きくします。
- 到達目標として画面に「ハイスコア」を表示します。
- 適切な数値には小さな単位を使用し、不適切な数値には大きな単位を使用します。現在のストリークを数日で測定して、2桁、3桁の数字にチェックが入るようにしますが、数週間または数か月で個人のベストに追いつくまでの時間を測定して、数値を小さくします。
- 連勝を続けるためのインセンティブとして、番号の周りのバッジの画像、色、または形状を変更します。これは小さな報酬ですが、状況を毎日確認してフィードバックループを作成すると、初歩的なスキナーボックスが表示されます。
- ストリークがこれらのしきい値に達したときに、追加の週または月のカウンターが時間とともに満杯になることを検討してください。ほぼ満杯のコンテナの視覚的なフィードバックと、沈没コストの認識（彼らは今や断念するまでに遠くなっている）は、強力な心理的な力になる可能性があります。
- 連勝を維持するためのボタンは1つだけです。だれも失敗を認めたくないし、手動でボタンを押してハードワークを洗い流すことは少し意地悪です。彼らは不正行為をしてそれを押さないか、またはアプリで怒って気分を害するでしょう。定期的にチェックインし、ボタンを押して連続を続けるだけで十分です。彼らがワゴンから落ちてアプリを恥ずかしがらないように使用するのを避ければ、それはすじを壊すのに十分なはずです。 （彼らがアプリに戻って新しい一筋を始める勇気があるとき、あなたは励ましを提供するべきです。）
- アプリにソーシャルコンポーネントがある場合は、ユーザーの友達だけでなくユーザーの友達のストリークを追加することを検討してください。これにより、仲間のプレッシャーを前向きな力として使用できるようになります。
他の多くのゲームコンセプトがあり、以前のレコードに追いつくときに、乗数や「ゴースト」などを使用できます。ただし、ゲーミフィケーションのパスをあまり遠くに移動しないように注意してください。報酬（健康）がゲームシステムのループ内に収まらない場合、成功するのは困難です。
http://www.arcade-museum.com/game_detail.php?game_id=10816 からのパックマン画像
Diablo 3 Paragonの肖像画 http://diablo.wikia.com/wiki/Paragon から
http://en.wikipedia.org/wiki/Rock_Band のロックバンドの画像
Geometry Warsのスコア https://pokehface.wordpress.com/2010/11/
「現在のストリーク」と「最長のストリーク」の比率を行う理由はありますか？それがユーザーに役立つ理由がわからないので、習慣の変更を続けるように勧めます。
もっと野心的なルートに行きたいですか？ユーザーは、1）最長ストリークを作成している最中か、または2）最長ストリークの達成に向けて作業します。現在のストリークを視覚化することに焦点を当てたほうが便利だと思います。そうすれば、最も長いストリークを、そこに到達するように促すマーカーとして含めることができます。 （たとえば、「現在のストリーク」を線で表す場合、「最長ストリーク」は現在のストリーク線の端の前のどこかにマーカーになります）。
この投稿 には、インスピレーションとして使用できるいくつかの例があります。
ダッシュボードゲージやメーターの代わりに一般的に使用される棒グラフの拡張バージョンである bullet charts/graphs の使用を確認する必要があると思います。ブレットチャートの特性により、少量のスペースで多くの情報を得ることができ、無駄で気が散る装飾が散らかっています。ブレットグラフは、単一の主要なメジャー（この場合は現在の進行状況）を特徴としており、そのメジャーを1つ以上の他のメジャーと比較してその意味（たとえば、自己ベストまたは目標のストリーク）を豊かにし、それを次のコンテキストで表示しますパフォーマンスの質的範囲（貧弱、満足、良好など）。
これを良い戦略だと思うなら、楽しんで実装する方法を考えさせますが、さらに質問がある場合は、喜んで話し合います。参考として、wikiページの例をいくつか示します。
だからあなたが持っているすべてを一緒に置く：
私はあなたのサークルが好きで、アイデアは正しい軌道に乗っていると思います。
この提案では、中央の数字はサークルの重要性を示し、クライアントの目標達成を祝っています。目立たない数値は、クライアントの現在のスコアです。説明する重要なことは、目標を設定し、それを達成することです。緑、シアン、青がお気に入りの選択肢です。私の友人、レッドは十分に励みにはなりません。
注：この場合、クライアントのレコードが冗長になるにつれて、中央の数字はフォントサイズを変更する必要があります。ただし、この動作には優先順位があります。幸運を！
他の答えには素晴らしいアイデアがあります。しかし、質問が非常に興味深いと感じたので、いくつか考えを追加します。
考慮すべきいくつかの状況があると思います。
- 古いスジはありません<-
- 古い筋が1つあります
- 複数の古い線条がある
- 現在のストリークは、最も古いものよりも高い<-
最初のものの問題は、行われる比較がなく、最後のものは全体の最大値が変化する状況を管理しなければならないことです。したがって、拡大できる表現が必要です。これは、ストリークセットがない場合に機能し、いくつかのストリークを比較できます。
オプションは、ドットなどの時間の個々の単位を設定し、それらを画面に配置することです。それらは0から開始して大きくすることができます。
他のアイデアはスパイラルです。
または同心円ですが、前者よりも理解が少し複雑です。
デザインは確かに改善できますが、明確にしていただければと思います。
アイデアは微妙な方法で「最高」を示すことです