プログレス バー

注意

この設計ガイドは Windows 7 用に作成されており、新しいバージョンの Windows では更新されていません。 ガイダンスの多くは原則として適用されますが、プレゼンテーションと例には 現在の設計ガイダンスは反映されていません。

進行状況バーを使用すると、ユーザーは長い操作の進行状況に従うことができます。 進行状況バーには、完了のおおよその割合 (決定値) が表示されるか、操作が進行中 (不確定) であることを示す場合があります。

ユーザビリティ調査では、ユーザーは 1 秒以上の応答時間を認識していることが示されています。 したがって、完了するまでに 2 秒以上かかる操作は、時間がかかり、何らかの種類の進行状況のフィードバックが必要であることを考慮する必要があります。

一般的な進行状況バー。

注意

レイアウトに関連するガイドラインについては、別の記事で説明します。

これは適切なコントロールですか?

それを判断するには、以下の質問を考えます。

• 操作は約 5 秒以下で完了しますか? その場合は、このような短い期間の進行状況バーを表示すると気が散るので、代わりに アクティビティ インジケーター を使用します。 通常、操作に 5 秒以下かかるが、さらに時間がかかる場合は、ビジー ポインターから開始し、5 秒後に進行状況バーに変換します。

• 不確定な進行状況バーは、ユーザーがタスクを完了するまで待機するために使用されますか? そうである場合は、プログレス バーを使いません。 プログレス バーは、ユーザーの作業ではなく、コンピューターの作業の進行状況を示すものです。

• 不確定な進行状況バーはアニメーションと組み合わされていますか? その場合は、代わりにアニメーションのみを使用してください。 不確定な進行状況バーは、実質的に一般的なアニメーションであり、アニメーションに値を追加しません。

• 操作は、ユーザーが進行状況よりも完了に関心を持っている非常に長い (2 分より長い) バックグラウンド タスクですか? その場合は、代わりに 通知を使用します 。 この場合、ユーザーはそれまでの間に他のタスクを実行し、進行状況を監視していません。 通知を使用すると、ユーザーは中断することなく他のタスクを実行できます。 このような長い操作の例としては、印刷、バックアップ、システム スキャン、一括データ転送や変換などがあります。

• 操作が完了すると、ユーザーは結果を再生できますか? その場合は、代わりにスライダーを使用します。 このような操作の例としては、ビデオとオーディオの記録と再生が含まれます。

  

  この例では、スライダーを使用して、サウンドの再生中の進行状況を示します。 これにより、ユーザーは後で結果を再生できます。

設計概念

時間の長い操作の間、ユーザーは操作が何を行っているかを一般的に把握する必要があります。 また、次のことも知る必要があります。

• 長い操作が開始されていること。
• その進行状況が行われ、操作が最終的に完了します (したがって、ロックアップされていません)。
• 完了した操作のおおよその割合 (したがって残りの割合)。
• 続行する価値がない場合は、操作を取り消す必要がある場合。
• 操作の完了時に待機または他の操作を続行する必要がある場合。

その時間を正確に予測できない場合でも、有界時間を必要とする操作には確定進行状況バーを使用します。 不確定な進行状況バーは、進行状況が行われているが、他の情報は提供されていないことを示します。 精度が不十分な可能性があるという理由だけで、不確定な進行状況バーを選択しないでください。

たとえば、1 つの操作に 5 つのステップが必要であり、それらの各ステップには有界時間が必要ですが、各ステップの時間は大きく異なる場合があるとします。 この場合は、確定進行状況バーを使用し、各ステップが通常かかる時間に比例して各ステップが完了したときに進行状況を表示します。 不確定な進行状況バーを使用するのは、決定された進行状況バーによって操作がロックされたとユーザーが誤って結論付ける場合のみです。

1 つだけの操作を行う場合...

時間の長い操作の進行状況に関するフィードバックを提供し、上記の情報が明確に伝達されていることを確認してください。 可能な限り確定進行状況バーを使用します。

使用パターン

進行状況バーには、いくつかの使用パターンがあります。

進行状況バーを決定する

Label	値
モーダル決定の進行状況バー 操作が完了したら、左から右に入力し、完全に入力することで、操作の進行状況を示します。	このフィードバックは モーダルであるため、操作が完了するまで、ユーザーはウィンドウ内で他のタスク (またはモーダル ダイアログ ボックスに表示されている場合は親タスク) を実行できません。 この例では、進行状況バーが構成中にフィードバックを提供します。
[キャンセル] または [停止] ボタンを使用したモーダル決定の進行状況バー 操作に時間がかかりすぎるか、待つ価値がないために、ユーザーが操作を停止できるようにします。	この例では、ユーザーは [停止] をクリックして操作を停止し、環境を現在の状態のままにすることができます。
[キャンセル] ボタンまたは [停止] ボタンとアニメーションを使用したモーダル決定の進行状況バー ユーザーが操作を停止し、操作の効果を視覚化するのに役立つアニメーションを含めることができます。	この例では、ユーザーは [停止] をクリックして操作を停止し、環境を現在の状態のままにすることができます。
モーダルで 2 つの進行状況バーを決定する 1 つ目の進行状況バーに現在のステップの進行状況を表示し、2 番目のバーに全体的な進行状況を表示して、複数ステップの操作の進行状況を示します。	最初の進行状況バーでは追加情報がほとんど提供されず、非常に気が散る可能性があるため、このパターンは推奨されません。 代わりに、操作のすべてのステップで進行状況の一部を共有し、1 つの進行状況バーを 1 回完了させます。 この例では、最初の進行状況バーに現在のステップの進行状況が表示され、2 番目の進行状況バーに全体的な進行状況が表示されます。 メモ： 通常、このパターンは不要であり、回避する必要があります。
モードレス決定進行状況バー 操作が完了したら、左から右に入力し、完全に入力することで、操作の進行状況を示します。	モーダル進行状況バーとは異なり、ユーザーは操作の進行中に他のタスクを実行できます。 これらの進行状況バーは、コンテキストまたはステータス バーに表示できます。 この例では、Windows Internet ExplorerWindows Internet エクスプローラーは、ステータス バーに Web ページの読み込みの進行状況を表示します。 ユーザーは、ページの読み込み中に他のタスクを実行できます。

不確定な進行状況バー

進行状況バーの種類	説明
モーダル不確定の進行状況バー バーを左から右に順番に切り替えるアニメーションを表示して、操作が進行中であることを示します。	全体的な進行状況を決定できない操作にのみ使用されるため、完全性の概念はありません。 進行状況バーの決定は、完了した操作のおおよその割合を示し、操作が待機し続ける価値があるかどうかをユーザーが判断するのに役立つので、推奨されます。 また、視覚的に気が散る可能性も低くなります。 この例では、Windows Updateでは、モーダルの不確定な進行状況バーを使用して、更新プログラムの検索中に進行状況を示します。
モードレス不確定の進行状況バー バーを左から右に順番に切り替えるアニメーションを表示して、操作が進行中であることを示します。	モーダル進行状況バーとは異なり、ユーザーは処理中に他のタスクを実行できます。 これらの進行状況バーは、コンテキストまたはステータス バーに表示できます。 この例では、Microsoft Outlook は、連絡先プロパティを入力するときにモードレスの不確定な進行状況バーを使用します。 ユーザーは、この作業の進行中にプロパティ ウィンドウを引き続き使用できます。

メートル

Type	説明
メートル 進行状況に関連しない割合を示します。	このパターンは進行状況バーではありませんが、進行状況バー コントロールを使用して実装されます。 メーターは、真の進行状況バーと区別するために明確な外観を持っています。 この例では、メーターは使用されているディスク ドライブ領域の割合を示しています。

ガイドライン

全般

• 長い操作を実行するときに進行状況のフィードバックを提供します。 ユーザーは、進行状況が行われているかどうかを推測する必要はありません。

• 実際の進行状況を明確に示します。 進行状況が行われている場合は、進行状況バーを進める必要があります。 予想される完了時間の範囲が大きい場合は、非線形スケールを使用して、より長い時間の進行状況を示す方法を検討してください。 ユーザーが、プログラムがロックされていないときにロックされたと結論付けさせたくありません。

• 進行状況の欠如を明確に示します。 進行状況バーは、進行状況が行われていなくても前に進む必要はありません。 完了しない操作をユーザーが無期限に待機しないようにします。

• 役に立つ進行状況の詳細を指定します。 追加の進行状況情報を提供しますが、ユーザーが何かを行うことができる場合に限られます。 ユーザーがテキストを読めるのに十分な長さにテキストが表示されていることを確認します。

  

  この例では、ユーザーは転送率を確認できます。 ここでの転送速度が低い場合は、高帯域幅のネットワーク接続を使用する必要があります。

• 不要な詳細を指定しないでください。 通常、ユーザーは実行される操作の詳細を気にしません。 たとえば、セットアップ プログラムのユーザーは、コピーされる特定のファイルや、これらの詳細に対する期待がないため、システム コンポーネントが登録されていることを気にしません。 通常、ラベルの付いた進行状況バーだけで十分な情報が提供されるため、ユーザーが何かを行うことができる場合にのみ、追加の進行状況情報を提供します。 ユーザーが気にしない詳細を指定すると、ユーザー エクスペリエンスが複雑で技術的になります。 デバッグに関する詳細情報が必要な場合は、リリース ビルドに表示しないでください。

  正確:

  

  この例では、ラベル付けされた進行状況バーがすべて必要です。

  正確:

  

  この例では、Windows エクスプローラーはユーザーが選択したファイルをコピーするため、コピーするファイル名を表示することは意味があります。

  正しくない:

  

  この例では、セットアップ プログラムは、ユーザーにとって意味のない詳細を提供しています。

• 便利なアニメーションを提供します。 適切に実行すると、アニメーションを使用すると、ユーザーが操作を視覚化し、ユーザー エクスペリエンスが向上します。 適切なアニメーションは、テキストだけの場合よりも大きい影響を与えます。 たとえば、Outlook の [削除] コマンドの進行状況バーには、ファイルを復元できる場合はコピー先のごみ箱が表示されますが、ファイルを復元できない場合はごみ箱は表示されません。

  

  この例では、ごみ箱がないため、ファイルが完全に削除されていることを補強しています。 この追加情報は、テキストのみを使用して効果的に伝達されることはありません。

• 不要なアニメーションは使用しないでください。 アニメーションは、通常、実際のタスクとは別のスレッドで実行されるため、操作がロックされている場合でも進行状況を提案できるため、誤解を招く可能性があります。 また、操作が予想よりも遅い場合、ユーザーはアニメーションが理由の一部であると考えることがあります。 したがって、明確な理由がある場合にのみアニメーションを使用します。ユーザーを楽しませることを試みるためにそれらを使用しないでください。

• 進行状況バーの中央にアニメーションを配置します。 アニメーションがある場合は、進行状況バーのラベルの上に配置します。 進行状況バーの右側に [キャンセル] または [停止] ボタンがある場合は、中央を決定するときに ボタンを含めます。

• 操作が非常に長く (2 分以上)、頻度が低く、重要な場合にのみ、操作の完了時にサウンド 効果を再生します。 処理中にユーザーが重要な操作から離れる可能性がある場合は、サウンド効果によってユーザーの注意が戻ります。 他の状況で完了時に効果音を使用すると、気が散る迷惑になります。

• 進行状況の更新または完了を表示するために入力フォーカスを盗まないでください。 多くの場合、ユーザーは待機中に他のプログラムに切り替え、中断されたくありません。 バックグラウンド タスクはバックグラウンドに留まる必要があります。

• テクニカル サポートについて心配しないでください。 進行状況バーによって提供されるフィードバックは必ずしも正確ではなく、一定であるため、進行状況バーはテクニカル サポートに情報を提供するための適切なメカニズムではありません。 そのため、(セットアップ プログラムと同様に) 操作が失敗する可能性がある場合は、テクニカル サポートにのみ役立つ追加の進行状況情報を提供しないでください。 代わりに、テクニカル サポート情報を記録するためのログ ファイルなどの代替メカニズムを提供します。

  正しくない:

  

  この例では、進行状況バーにテクニカル サポート向けの詳細が表示されています。

• 進行状況バーには、達成率やその他のテキストを配置しないでください。 このようなテキストにはアクセスできないため、テーマの使用と互換性がありません。

  正しくない:

  

  この例では、進行状況バーのパーセンテージ テキストにアクセスできません。

• 進行状況バーとビジー ポインターを組み合わせないでください。 どちらか一方を同時に使用しますが、両方を同時に使用することはできません。

• 垂直方向の進行状況バーは使用しないでください。 水平方向の進行状況バーは、より自然なマッピングとより優れたフローを持っています。

進行状況バーを決定する

• その時間を正確に予測できない場合でも、有界時間を必要とする操作には確定進行状況バーを使用します。 不確定な進行状況バーは、進行状況が行われていることを示しますが、他の情報は提供しません。 精度が不十分な可能性があるという理由だけで、不確定な進行状況バーを選択しないでください。

• 進行状況フェーズを明確に示します。 進行状況バーは、操作が操作の開始、中間、または終了の中にあるかどうかを示すことができる必要があります。 たとえば、すぐに 99% の完了まで撮影し、長時間そこに留まるプログレス バーは、特に情報を得る必要がないため、迷惑です。 このような場合は、操作がまだ開始フェーズにあることを示すために、進行状況バーを最初に最大 33% に設定する必要があります。

• 完了が明確に示されます。 操作が完了していない場合は、進行状況バーを 100% にしないでください。

• 正確に行うことができる場合は、残りの見積もり時間を指定します。 正確な残りの見積もりは役に立ちますが、マークを外れたり、大きく跳ね返ったりする見積もりは役に立ちません。 正確な見積もりを行う前に、いくつかの処理を実行する必要がある場合があります。 その場合は、この初期期間中に不正確な可能性のある見積もりを表示しないでください。

• 進行状況を再起動しないでください。 進行状況バーが再起動すると (操作のステップが完了した場合など)、その値は失われます。これは、ユーザーが操作がいつ完了されるかをユーザーが知る方法がないためです。 代わりに、操作のすべてのステップで進行状況の一部を共有し、進行状況バーを 1 回完了するようにします。

  正しくない:

  

  この例では、ファイルをコピーするステップに移動し、そのステップの進行状況バーをリセットします。 これで、ユーザーは、どの程度の進行状況が行われたか、残っている時間が分かりません。

• 進行状況をバックアップしないでください。 再起動と同様に、進行状況バーがバックアップされると、その値は失われます。 常に進行を単調に増やします。 ただし、進行状況が異なる可能性があるため、残りの見積もり時間が増加 (減少) する可能性があります。

不確定な進行状況バー

• 不確定な進行状況バーは、全体的な進行状況を特定できない操作に対してのみ使用します。 無制限の時間を必要とする操作や、不明な数のオブジェクトにアクセスする操作には、不確定な進行状況バーを使用します。 タイムアウトを使用して、時間ベースで操作を制限します。

• 全体的な進行状況を決定できたら、確定進行状況バーに変換します。 たとえば、オブジェクトの数を決定するのに 2 秒を大幅に超える時間がかかる場合は、オブジェクトのカウント中に不確定な進行状況バーを使用し、確定された進行状況バーに変換できます。

• 不確定な進行状況バーと達成率や残りの見積もり時間を組み合わせないでください。 この情報を指定できる場合は、代わりに確定進行状況バーを使用します。

• 不確定な進行状況バーとアニメーションを組み合わせないでください。 不確定な進行状況バーは実質的に一般的なアニメーションであるため、どちらか一方を使用する必要がありますが、両方を使用しないでください。

  正確:

  

  この例では、操作が進行中であることを示すためにアニメーションのみを使用します。

モードレス進行状況バー

• 操作の進行中にユーザーが生産性を高めることができる場合は、モードレス フィードバックを提供します。 操作を完了する必要がある機能のサブセットを無効にする必要がある場合があります。

• ウィンドウにアドレス バーがある場合は、アドレス バーにモードレス進行状況を表示します。

  

  この例では、アドレス バーにモードレス進行状況が表示されます。

• それ以外 の場合、ウィンドウにステータス バーがある場合は、ステータス バーにモードレス進行状況を表示します。 対応するテキストをステータス バーの左側に配置します。

  

  この例では、モードレス進行状況がステータス バーに表示されます。

モーダル進行状況バー

• 進行状況ページまたは進行状況ダイアログ ボックスにモーダル進行状況バーを配置します。

• 完了するまでに数秒以上かかる場合や、完了しない可能性がある場合は、操作を停止するコマンド ボタンを指定します。 キャンセルすると環境が以前の状態に戻る場合は [キャンセル] ボタンにラベルを付けます (副作用は残りません)。それ以外の場合は、Stop ボタンにラベルを付けて、部分的に完了した操作をそのまま残すことを示します。 ある時点で環境を以前の状態に戻すことができない場合は、操作の途中でボタン ラベルを Cancel から Stop に変更できます。 上部を揃えるのではなく、進行状況バーでコマンド ボタンを垂直方向に中央揃えします。

  正確:

  

  この例では、ネットワーク接続を停止しても副作用がないため、Cancel が使用されます。

  正確:

  

  この例では、コピーを停止すると、コピーされたファイルはすべて残されるため、コマンド ボタンには "停止" というラベルが付きます。

  正しくない:

  

  この例では、検索を停止しても副作用がないため、コマンド ボタンに [キャンセル] というラベルを付ける必要があります。

残り時間

確定進行状況バーの場合:

• 次の時刻形式を使用します。 最大時間単位が 0 ではない次の形式の最初から始めて、最大時間単位が 0 になったら次の形式に変更します。

  進行状況バーの場合:

  関連情報がコロン形式で表示される場合:

  残り時間: h 時間、m 分

  残りの時間: m 分、秒

  残り時間: 秒

  画面領域が Premium の場合:

  h hrs、残り m 分

  m 分、残り秒

  残り秒

  それ以外の場合:

  h 時間、残り m 分

  m 分、残り秒

  残り秒

  タイトル バーの場合:

  hh:mm remaining

  mm:ss 残り

  残り 0:ss

  このコンパクトな形式では、タスク バーで切り捨てられないように、最も重要な情報が最初に表示されます。

• 見積もりを正確にしますが、誤った精度を与えないでください。 最大単位が時間の場合は、分 (意味がある場合) を指定しますが、秒は指定しません。

  正しくない:

  hh hours、mm minutes、ss seconds

• 見積もりを最新の状態に保ちます。 残りの見積もり時間を少なくとも 5 秒ごとに更新します。

• これは、ユーザーが最も関心を持つ情報であるため、残りの時間に焦点を当てます。 経過時間が役に立つシナリオがある場合 (タスクが繰り返される可能性がある場合など) にのみ、合計経過時間を指定します。 残りの見積もり時間が進行状況バーに関連付けられている場合、その情報は進行状況バー自体によって伝達されるため、達成率のテキストは含まれません。

• 文法的に正しい。 数値が 1 の場合は、単数単位を使用します。

  正しくない:

  1 分 1 秒

• 文章スタイルで大文字と小文字を使い分けます。

進行状況バーの色

• 赤または黄色の進行状況バーは、タスクの最終的な結果ではなく、進行状況を示すためにのみ使用します。 赤または黄色の進行状況バーは、ユーザーがタスクを完了するために何らかのアクションを実行する必要があることを示します。 条件が回復できない場合は、進行状況バーを緑色のままにして、エラー メッセージを表示します。
• ユーザーが回復可能な状態にあり、それ以上の進行を妨げている場合は、進行状況バーを赤に変えます。 問題を説明し、解決策を推奨するメッセージを表示します。
• 進行状況バーを黄色にして、ユーザーがタスクを一時停止したか、進行状況を妨げているが進行状況 が進行中の状態 (ネットワーク接続が悪いなど) があることを示します。 ユーザーが一時停止している場合は、[一時停止] ボタン のラベルを [再開] に変更します。 進行状況が妨げられた場合は、問題を説明するメッセージを表示し、解決策を推奨します。

メートル

• 進行状況バーは進行状況にのみ使用します。 進行状況に関連しないパーセンテージを示すには、メートルを使用します。

推奨されるサイズ設定と間隔

進行状況バーの推奨サイズ設定と間隔。

• 推奨される進行状況バーの高さを常に使用します。
  • 例外： 親ウィンドウで推奨される高さがサポートされていない場合は、別の高さを使用できます。
• 進行状況バーを目立たせたくない場合は、最小幅を使用します。
• 推奨される最大値より長い幅は使用しないでください。 進行状況バーは、使用可能な領域を埋める必要はありません。
• ウィンドウが推奨される最大幅よりもはるかに広い場合は、進行状況バーを水平方向に中央揃えにします。

ラベル

進行状況バーのラベル

• 操作の実行内容を示すには、静的テキスト コントロールと共に簡潔なラベルを使用します。 動詞 (コピーなど) でラベルを開始し、省略記号で終了します。 操作に複数のステップがある場合、または複数のオブジェクトを処理している場合、このラベルは動的に変更される可能性があります。

• コントロールが対話型でないため、一意の アクセス キー を割り当てないでください。

• 文形式の大文字と小文字を使用します。

• 操作がユーザーによって直接開始されなかった場合は、追加のラベルを含めてコンテキストを指定し、中断について申し訳ありません。 フレーズでこの追加のラベルを起動します。しばらくお待ちください。 このラベルは、操作中に変更しないでください。

  

  この例では、ユーザーが操作を直接開始していないので、ユーザーは待機するように求められます。

• ラベルを進行状況バーの上に配置し、ラベルを進行状況バーの左端に揃えます。

進行状況バーの詳細

• データの前にコロンで終わるラベルを付け、静的テキストで詳細を指定します。 詳細テキストの後に単位 (秒、キロバイトなど) を指定します。

  正確:

  

  この例では、詳細に適切なラベルが付けられます。

  正しくない:

  

  この例では、詳細にラベルが付いていないため、ユーザーは意味を判断する必要があります。

• 文形式の大文字と小文字を使用します。

• 進行状況バーの下に詳細を配置し、ラベルを進行状況バーの左端に合わせます。

• その情報は進行状況バー自体によって伝達されるため、完了または残りの割合を指定しないでください。

[キャンセル] ボタン

• キャンセルすると環境が以前の状態に戻る場合は、[キャンセル] ボタンにラベルを付けます (副作用は残しません)。それ以外の場合は、[停止] ボタンにラベルを付けて、部分的に完了した操作をそのまま残していることを示します。
• ある時点で環境を以前の状態に戻すことができない場合は、操作の途中でボタン ラベルを [キャンセル] から [停止] に変更できます。

[進行状況] ダイアログ ボックスのタイトル

• モーダル ダイアログ ボックスに進行状況バーが表示される場合、ダイアログ ボックスのタイトルはプログラムの名前または操作の名前である必要があります。 ダイアログ ボックスのタイトルの進行状況バー のラベルを使用しないでください。

  正確:

  

  この例では、ダイアログ ボックスのタイトルにタスク名を使用します。

  正しくない:

  

  この例では、ダイアログ ボックスのタイトル テキストは進行状況バー ラベルの再表示です。 代わりに、プログラム名を使用する必要があります。

• 進行状況バーがモードレス ダイアログ ボックスに表示される場合は、最初に識別情報を簡潔に配置して、タスク バーに表示するタイトルを最適化します。 例: "66% 完了"