web-dev-qa-db-ja.com

進行速度バーをより理解しやすくするには?

私はWindows 8をインストールしたばかりで、真新しいファイルのコピーダイアログに気づきました。展開すると、進行状況と現在の転送速度が1つのグラフに表示されます。しかし、グラフは私を非常に混乱させます。コピーが速いほど、進行が速くなります(左から右)およびグラフが高くなります(下から上)。これは速度グラフを非線形にすると思います、そして私はグラフを読むのに苦労します。これにより、グラフは単なるおもちゃになります。

A Dutch progress/speed bar in the Windows 8 copy dialog

オランダ語ですが、要旨ははっきりしています。

Microsoftの設計チームがこのグラフのすべての長所と短所について話し合ったので、この設計にはいくつかのメリットがあるはずです。自分のアプリケーション用に、1つのバーで進行状況と速度も表示するカスタムコントロールを作成したいのですが、これでうまくいくとは思いません。バーの速度の部分をより理解しやすく、便利にする方法は?代替案は何ですか?


私が持っている問題を説明するために:

Half the time at full speed, half the time at half the speed.

このグラフは、合計転送時間の半分で、ファイルが半分の速度でコピーされたことを示しています(たとえば、合計のコピーに1分かかった場合、半分の速度の30秒)。それは有用な情報ですが、グラフからnotがわかります。

進行状況バーを、100%幅に固定された転送率グラフでオーバーレイできます。その結果、ヒストグラムは常に更新され、操作全体を通じて線形のままです。これにより、横軸に進行状況と転送速度の両方を簡単に表示できます。例:

enter image description here

これは大まかな視覚的な例です。読みやすくするために、適切にラベルを付けて、進行状況バーとヒストグラムが確実に区切られるようにします。

ユーザーが時間の経過に伴うスループットの監視に関心がある場合-おそらくデバッグまたはインスツルメンテーションの目的で-この階層化されたアプローチは、操作中にそれを監視する簡単な方法を提供します。ユーザーがこのデータやこのタイプのデザインを期待していない場合、ユーザーはそれが気を散らすだけであることに気付くでしょう。

15
Noah C

指摘したように、速度と進行を1つの固定長バーに強制すると(Microsoftの例によると)、時間と進行の間の本質的に非線形の関係が明らかになります。

しかし、プロジェクトにとってより重要なのは、ジャンプする前に、ユーザーを理解し、モチベーションを確認することです。そして、転送速度などの要素を追加することであなたの目標は何ですか?ユーザーにとって実質的にメリットがありますか?転送中にユーザーは何をしていますか?追加データは実用的ですか?そうでない場合、どのように役立ちますか?グラフの直線性はユーザーに影響を与えますか?等々。

そうは言っても、線形グラフを表示したいようですが、視覚的にプログレスバーと組み合わせる必要もあります。

これは速度グラフを非線形にし、グラフを読むのに問題があると思います...自分のアプリケーション用にカスタムコントロールを作成して、進行状況と速度を1つのバーで表示します...

Microsoftの例の速度グラフは、固定長の進行状況バーにオーバーレイされているため、必ず進行状況の関数です。しかし、時間の経過に伴う速度のグラフがユーザーにとって有用であり、線形グラフが必要であると判断した場合は、いくつかの概念があります。

  1. 2つの要素を分離して、別の進行状況バーと速度グラフを表示できます。これはあなたの質問に直接答えるものではありませんが、それはオプションであり、確かに設計と保守が最も簡単です。
  2. グラフを3次元でプロットできるため、データ、進行状況、時間の3つの変数を表すのに十分な軸があります。かなりですが、おそらくやり過ぎであり、2Dインターフェースの世界ではスペース効率があまりよくありません。
  3. 次元の代わりに色または他の信号を使用することにより、2次元にフラット化されるオプション#2のバリエーションを実行できます。しかし、それらはより多くの解釈を必要とする傾向があります。

追伸-現時点では直接引用することはできませんが、Microsoftの設計の理由についてはある程度洞察しています。それは速度感を伝えるために特別に構築されました。このタイプの視覚的フィードバックは、結果がやや解釈的なものであっても、幅広いユーザーに役立ちました。内部のユーザビリティテストでは、特に頻繁に更新される場合に、線ヒストグラムを表示するオプションがあると、プログレスバーが遅いユーザーの満足度が向上することがわかりました。多くのユーザーはファイルサイズを非常に大まかに把握しているため、進行状況の割合がゆっくりと変化している場合でも、20 GBのファイル転送がまだ進んでいることを誰かが確認することは非常に役立ちます。

P.P.S. -データの視覚化について考えるとき、私はしばしば このグラフ から始めます。AndrewAbelaの本 Advanced Presentations by Design 。 Chart Suggestions

32
Noah C

彼らは2つの別々の統計をグラフに含めようとしています。左から右は%進捗で、グラフは転送速度を示します(黒いバーは平均を示します)。

ほとんどの人にとってこれはやり過ぎであり、ほとんどの状況では単純な進行状況バーで十分です。ただし、これは「詳細」を尋ねるの場合にのみ表示されるため、これが得られます。詳細。

技術者にとって、これは実際にはかなり有用な情報であり、適切に選択されたと思います。特にデフォルトでは非表示になっているためです。

編集: Y軸がレートである場合、X軸が時間である必要がある理由はありません。重要なのは、グラフを統合してデータ量を取得することを計画している場合のみです。これは、すでにその量を知っているため、ここでは明らかに意図していません。

12
JohnGB

このグラフは、総転送時間の半分で、ファイルが半分の速度でコピーされたことを示しています

実際、そのグラフは次のようになります。

enter image description here

このグラフは、進行状況の最初の2/3について、つまりファイルの最初の2/3の場合-ファイルはフルスピードで転送された後、ハーフスピードに落ちました。 したがって、X軸の「時間」ではなく「MB」になります。最初に、たとえば66 MBがフルスピードで転送され、残りの33MBは半分に転送されました。

転送速度とファイルサイズの比較は直感に反し、転送速度と時間のグラフよりも有用性が低いことに同意します。 Microsoftグラフが実際にこれを実行していて、より直感的な転送速度と時間のグラフを表示していないことを確信していますか ヒストグラムを使用

問題が非常に微妙なため、問題の場所を理解するのにしばらく時間がかかりました。 y軸は速度(バイト/秒)、x軸はパーセントです。通常の時系列プロットでは、x軸は経過時間です。

ほぼ一定の転送速度の場合、パーセンテージ〜時間であるため、これは多くの場合問題ありません。そうでない場合でも、2つの情報を推測できます。現在の進行状況と現在の速度を、発生した他の速度と比較したものです。特にネットワークを介してファイルをコピーする場合など、達成できる最高速度を知りたいことがよくあります(たとえば、帯域幅を独占している人を区別できるようにしています)。

時間とともに速度がどのように変化したかについての情報を簡単に取得できず、グラフのプロファイルを実際に解釈することもできません。それが必要だと思うなら、規則的な時間間隔(たとえば2秒ごと)でx軸に目盛りを追加することを検討してください:

enter image description here

これにより、目盛りが広がっている多くの進歩を遂げた期間と、目盛りが接近しているプロセスが停止した期間を確認できます。ティックが均等に広がるようにグラフが歪んでいると想像すると、適切な速度/時間のグラフになります。

私はこれをGimpですばやく作り上げました。私はおそらく効果をより目立たせるためにティック距離で遊んだり、ティックに一致するように垂直グリッドラインを変更したりします。

5
jdm

私の最後の一連の質問で私の仮定が正しい場合。同じビューに対して2つの状態を試す場合があります。

enter image description here

基本的に、ファイルのダウンロード中-速度(現在)、合計経過時間、および推定合計時間の追加データを含む、標準の進行状況のみのビューが表示されます。

ファイルの転送が完了すると(バーが展開されている場合)、ビューがシフトし(エリアチャートがフェードインする場合があります)、時間ベースのプロットに沿ってデータ転送速度が表示され、中央値は水平線(緑)で示されます例)。

あなたが指しているように見えるので、プログレスバーは総バイト数に対して読み込まれたバイト数の関数であり、転送速度は現在の時間と開始時間の関数です-これは別のx軸プロットです。

両方を同時に表示:

残り時間は推定であり、したがって固定可能(静的)な幅ではないため、両方の概念を同時に表示するには、それらを互いに積み重ねます(進捗バー+統計はそのままですが、拡張されていない高さを使用します)。転送レートを上に置きます-軸ラベルを上にしてください。プロセスが進行している間-経過時間の数値を更新します-私たちが行くにつれて。

したがって、2番目のゼロでは、レートグラフには何も表示されません。 1秒で、右側のラベルは1と表示され、面グラフは基本的に直線になります(より正確には、0からその秒の間にロードされたバイト数までの線)。 2番目の2つでは、最初のデータ値はグラフの幅の50%になり、新しいデータ値で最後まで線を引きます。そして、中央線は平均レートを示すように見えるかもしれません。次に、最新のデータレートを維持しながら、グラフを毎秒再描画します。

進行状況バーが100%に達すると、グラフの更新が停止し、合計経過時間と完全なレートの軌跡が表示されます。

また、エリアチャートレイヤーを1、プログレスバーにして、何らかのタイプの透明レイヤー2を使用して、文字通り互いに重ねることもできます。ただし、これはまだ混乱を招く可能性があるので注意してください。トップラベル(転送レート)はボトムレイヤーにリンクされていますが、0〜700kbのラベルはプログレスバーに関連しています。

4
Josh Bruce

速度と進行状況を同時にグラフで表示したい場合、必要なのは基本的に時間に対する完了率をプロットする単調増加曲線です。単純な1D進行状況バーを2Dに拡張して、現在の進捗状況だけでなく、進捗履歴。グラフは、進捗状況が45秒間15%で止まったが、その後わずか3秒間で15から37に変わったという事実を一目でわかります。曲線の傾き(時間微分)は、距離-時間プロットと同様に速度です。

enter image description here

速度自体がプロットされている場合(微分係数)、進行状況を把握するために曲線の下の領域を精神的に統合する必要があるため、(更新レートが変化しなくても)人々はそれを理解しません。

たとえば、UIを作成し、一定の間隔で行われた進行量(コピーされたキロバイトなど)をサンプリングし、対応する高さのバーをプロットすることができます。したがって、曲線の下の領域は、最後に、全体の進行状況を表します。しかし、統合を理解している人でさえ、50%を超えると推測が困難になります。

2
Kaz

Mac OSプログレスバーを見てください。棒は左から右に伸びて完了を表します。完了の速度は、ストライプが内部を移動する速度によって表されるようです。

コピーするように言っているのではなく、要件に基づいて詳細を追加するための開始点として使用するだけです。次に、設計、テスト、改善、繰り返しを行います。

2
TotemFlare

このグラフは、元の進行状況バーにはるかに多くを追加するとは思わない。進行状況は行われた作業の量に関連しているので、横軸が再スケーリングすることは意味がないと思います、そして、どれだけの時間の見積もりを提供しようとしない限り、行われる量は変化しませんタスクを完了するのにかかります。

私が提案するのは、現在の速度、最高および最低の過去の速度に基づいて残り時間の推定を示す別のバーを置くことです。これにより、どの情報が表示され、どのように表示に関連するかについて、ユーザーにより良い期待を与えることができます。enter image description here

1
Michael Lai

このグラフは、速度と進行状況を比較する 確率密度関数 (PDF)の線に沿って何かを表示しようとしていると思います。確率とは関係ありませんが、似た形をしています。このグラフが役立つ理由はいくつかあります。1)転送に2 GBで2時間と表示された場合、転送速度を確認し、そこから評価できます。2)好奇心を満たすだけです。

JohnGBは、デフォルトで非表示になっていることについて良い点を示しています。そのため、単純なグラフでこのテクニカルタイプのデータを回避できます。

0
Jeff O