プログレスバーに過剰使用を表示する

Question

私はWebアプリに取り組んでおり、ユーザーがその請求期間に使用した転送量（帯域幅）を表示したいと考えています。

請求期間ごとに一定の帯域幅が与えられます。帯域幅にハード制限はなく、ユーザーは使用された追加の帯域幅に対して料金を支払うだけです。

私がやりたいことの1つは、ユーザーが使用した量をユーザーに示す進行状況バーを提供することです。

制限を超えていない場合は、単純な進行状況バーだけでかなり簡単なケースです。

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

ただし、制限を超えた後の使用量を表示するにはどうすればよいですか？

私は2つのオプションを考えることができます：

^{bmmlソースをダウンロード}

^{bmmlソースをダウンロード}

最初のオプションでは、余分な量が水平方向に無限に広がる可能性があるため、水平方向のスペースが制限されているため、レイアウトが壊れる可能性があります。

2番目のオプションでは、過剰な量が100％の一部であると感じるため、誤解を招く可能性があります。

ウィジェットのような進行状況バーに過剰（100％以上）を表示する他の方法は何ですか？

更新すばらしい回答をありがとうございました！より具体的でないことをお詫びしなければならないいくつかの事柄：

• 過剰な使用は「悪い」ことではありません。
• 使用制限は月単位であるため、Aweshのソリューションはニースですが、ここでは適していません。

Adityaの回答は、私たちのユースケースに最も適したものを選択しました。ただし、制約が少し異なる場合、他のすべての推奨ソリューションもこの質問に非常に適していることを強調しなければなりません。

Answer 1

私は、@ DesignerGuyによる解決策が好きです。この解決策は、何かが間違っていることを視覚的に示すとともに、ステータスを説明する短いテキストの脚注を提供することを目的としています。

キックスターターのようなウェブサイトは、資金調達の進捗と目標を示すことに関して、同様のアプローチをとります。

選択に関係なく、IMHOプログレスバーはハードリミットなしで進行中のプロセスを正確に描写する最良の方法ではありません。

Answer 2

垂直グラフを表示して、使用量の帯域幅制限を表示できます。請求サイクルごとに複数の縦線/グラフを使用できます。許容限度まで緑色のグラフを表示し、過剰なデータ使用量を表示する赤いグラフを表示します。

ここに例があります：

Androidはすでにこのアプローチを採用しているため、以下に例を示します。

Answer 3

プログレスバーを使用する場合、私はこのようにします

色を使用して、制限を超えたことを伝えます。

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

•プロ：制限を超えていることを明確に伝える

•Con：彼らがどのくらい終わったかの重みを視覚的に伝えません。

全体として、主な目標は、何かが間違っているという彼らの注意を引くことです。

---

詳細表示の余地がある場合は、棒グラフを試してください

@Aweshは、より詳細なビューのための優れたソリューションを提供しました。いい部分は、彼らがどのように多く通り過ぎたかをより明確に示すことです。これは、X GBごとに請求する場合に適しています。

^{bmmlソースをダウンロード}

Answer 4

ユーザーが割り当てられた帯域幅を超えたときに、バーを完全に塗りつぶし、塗りつぶしの色を赤に変更することをお勧めします（これは本質的に危険！を示します）。このテキストの横に、使用されている帯域幅の割合を太字（および派手な場合は赤）で配置し、ハイパーリンクのスタイルを設定した割合の横に（？）を追加します。ユーザーがハイパーリンクをクリックすると、状況が説明されます。説明する必要がない場合は、最後の提案を無視してください。

Answer 5

私は「爆発した進行状況バー」ソリューションを考えます。 「過負荷と突破」というメタファーが使用されます。

利点は次のとおりです。

• 少量の固定余分なスペースが必要
• 色がなくても視覚的に区別可能
• 実装が簡単（静的画像のみ）

（危険を示す）赤色のコーディングに加えて、次のようにユーザーが誤って理解する可能性があります：赤色の（禁止された）ゾーンにいる場合、罰または制裁が適用されますか？

Answer 6

超過分の数（GBまたは$）を、完全に満たされた進行状況バーの左側に配置します。プログレスバー自体に問題はありません。これは、前払いされた割り当てがどれだけ消費されたかを示します。それが右側に分かれるなら、あなたはそこで小節を続けることができないのは正しいですが、それは数を置くための論理的な位置です。

このフィールドの上に適切なヘッダーを配置すると、たとえば「超過料金」では、進行状況バーがまだ満杯の場合は、0を表示することもできます。

/--------------------\ Excess charges
|====================|  2.1 GB
\--------------------/  $ 5.23

Answer 7

過剰な値のために指定された最後に余分なスペースがあるプログレスバー（またはゲージ）を作成できます。言い換えると、100％の使用量ではメーターが完全に満たされたり空になったりするわけではありません。例として、Coxがインターネット帯域幅の使用状況を顧客に提示する方法を次に示します。