進行状況バー

[アーティクル]
07/25/2024

Note

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

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

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

一般的な進行状況バーのスクリーンショット

一般的な進行状況バー。

Note

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

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

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

操作は約 5 秒以内に完了しますか。 その場合、代わりにアクティビティインジケーターを使用してください。短期間に進行状況バーを表示すると気が散ってしまうからです。通常は操作に 5 秒以下しかかからないが、状況によってはそれ以上かかる場合、ビジーポインターから開始し、5 秒後に進行状況バーに変換します。
ユーザーがタスクを完了するまで待機するために、不確定な進行状況バーが使用されていますか。 その場合、進行状況バーを使用しないでください。進行状況バーは、ユーザーの進行状況ではなく、コンピューターの進行状況用です。
不確定な進行状況バーがアニメーションと組み合わされていますか。 その場合、代わりにアニメーションのみ使用します。不確定な進行状況バーは実質的には汎用のアニメーションであり、アニメーションに価値を追加しません。
操作は非常に長い (2 分を超える) バックグラウンドタスクであり、ユーザーは進行状況よりも完了に関心があるでしょうか。 その場合は、代わりに通知を使用してください。この場合、ユーザーはその間に他のタスクを実行し、進行状況を監視しません。通知を使用すると、ユーザーは中断することなく他のタスクを実行できます。このような長い操作の例としては、印刷、バックアップ、システムスキャン、一括データ転送や変換などがあります。
操作が完了したら、ユーザーが結果を再生できるようになりますか。 その場合は、代わりにスライダーを使用します。このような操作の例には、ビデオとオーディオの録音および再生が含まれます。

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

設計概念

長時間の操作中、ユーザーは操作により何が実行されているのかを大まかに把握する必要があります。さらに、次のことも知る必要があります。

長時間の操作が開始されたこと。
操作が進行中であり、最終的には操作が完了する (したがってロックされていない) こと。
操作のおおよその完了率 (つまり、残りの割合)。
待機し続ける価値がない場合、操作をキャンセルすべきかどうか。
操作が完了するまで待機を続けるか、他の操作を行う必要があるかどうか。

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

たとえば、ある操作に 5 つのステップが必要で、各ステップには制限時間が必要だが、各ステップにかかる時間は大きく異なる可能性があるとします。この場合、確定的な進行状況バーを使用し、各ステップが通常かかる時間に比例して各ステップが完了したときの進行状況を表示します。確定的な進行状況バーを使用すると、操作がロックされたとユーザーが誤って判断してしまう場合のみ、不確定な進行状況バーを使用してください。

1 つだけ行うとしたら...

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

使用パターン

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

確定的な進行状況バー

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

進行状況不定バー

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

進行状況バーの種類

説明

モーダル進行状況不定バー
バー上で左から右に連続的に循環するアニメーションを表示して、操作が進行中であることを示します。

全体的な進行状況を判断できない操作にのみ使用されるため、完全性の概念はありません。確定的な進行状況バーは、完了した操作のおおよその割合を示し、ユーザーが操作を待機し続ける価値があるかどうかを判断するのに役立つため、そちらが推奨されます。さらに、視覚的に気が散る可能性も低くなります。
モーダル進行状況不定バーのスクリーンショット

この例では、Windows Update がモーダル進行状況不定バーを使用して、更新プログラムの検索中に進行状況を示しています。

モードレス進行状況不定バー
バー上で左から右に連続的に循環するアニメーションを表示して、操作が進行中であることを示します。

モーダル進行状況バーとは異なり、ユーザーは処理中に他のタスクを実行することができます。これらの進行状況バーは、コンテキストまたはステータスバーに表示できます。
Outlook ウィンドウの薄い進行状況バーのスクリーンショット

この例では、Microsoft Outlook が、連絡先のプロパティを入力するときにモードレス進行状況不定バーを使用しています。ユーザーは、この作業の進行中にプロパティウィンドウを引き続き使用できます。

メートル

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

ガイドライン

全般

長時間の操作を実行しているときに進行状況のフィードバックを提供します。 ユーザーは、進行が進んでいるかどうかを推測する必要はありません。
実際の進行状況を明確に示します。 進行が進んでいる場合は、進行状況バーを進める必要があります。予想される完了時間の範囲が広い場合、非線形スケールを使用して、より長時間の進捗状況を示すことを検討してください。プログラムがロックしていないのに、ロックしたとユーザーに判断されないようにする必要があります。
進行状況がないことを明確に示します。 進行が進んでいない場合は、進行状況バーを進めないでください。完了することのない操作をユーザーが無期限に待たされることは望ましくありません。
役に立つ進行状況の詳細を提供してください。 追加の進行状況情報を提供しますが、ユーザーがそれを使って何かできる場合のみ提供してください。ユーザーが読めるようテキストが十分な長さで表示されるようにしてください。

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

正しい例:

この例では、ラベル付きの進行状況バーのみ必要となります。

正しい例:

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

誤った例:

この例では、セットアッププログラムはユーザーに意味のない詳細を提供しています。
役に立つアニメーションを提供します。 アニメーションがうまく機能すれば、ユーザーが操作を視覚化できるため、ユーザーエクスペリエンスが向上します。適切なアニメーションは、テキストだけよりも高い効果があります。たとえば、Outlook の [削除] コマンドの進行状況バーには、ファイルを回復できる場合は保存先のごみ箱が表示されますが、ファイルを回復できない場合はごみ箱は表示されません。

この例では、ごみ箱がないと、ファイルが完全に削除されていることを確認できます。この追加情報が、テキストのみを使用して効果的に伝達されることはありません。
不要なアニメーションは使用しないでください。 アニメーションは通常、実際のタスクとは別のスレッドで実行されるため、操作がロックされている場合でも進行状況を示す可能性があり、誤解を招く可能性があります。また、操作が予想よりも遅い場合、ユーザーはアニメーションが原因の一部であると推測することがあります。したがって、アニメーションは明確な理由がある場合にのみ使用し、ユーザーを楽しませるために使用しないでください。
進行状況バーの中央にアニメーションを配置します。 アニメーションがある場合は、進行状況バーのラベルの上にアニメーションを配置します。進行状況バーの右側に [キャンセル] または [停止] ボタンがある場合、中央を決定するときにボタンを含めます。
操作が非常に長い (2 分以上)、頻度が低く、重要な場合のみ、操作の完了時に効果音を再生します。 処理中にユーザーが重要な操作から離れそうになった場合、サウンド効果によってユーザーの注意が回復されます。他の状況で完了時に効果音を使用すると、気が散って迷惑になります。
進行状況の更新や完了を表示するために入力フォーカスを奪わないでください。 ユーザーは待機中に他のプログラムに切り替えることが多く、中断されることを望みません。バックグラウンドタスクは、バックグラウンドに留まる必要があります。
テクニカルサポートについては心配しないでください。 進行状況バーによって提供されるフィードバックは必ずしも正確ではなく、一時的なものであるため、進行状況バーはテクニカルサポートに情報を提供するための適切なメカニズムではありません。したがって、操作が失敗する可能性がある場合 (セットアッププログラムの場合など)、テクニカルサポートにのみ役立つ追加の進行状況情報を提供しないでください。代わりに、テクニカルサポート情報を記録するためのログファイルなどの代替メカニズムを提供します。

誤った例:

この例では、進行状況バーにテクニカルサポートを目的とした詳細が表示されています。
達成率やその他のテキストを進行状況バーに配置しないでください。 このようなテキストにはアクセスできないため、テーマの使用と互換性がありません。

誤った例:

この例では、進行状況バーの割合テキストにアクセスすることができません。
進行状況バーとビジーポインターを組み合わせないでください。 両方を同時に使用するのではなく、どちらか一方を使用してください。
垂直進行状況バーは使用しないでください。 水平進行状況バーの方が、マッピングが自然でフローが優れています。

確定的な進行状況バー

限られた時間を必要とする操作の場合、たとえその時間を正確に予測できない場合でも、確定的な進行状況バーを使用します。不確定な進行状況バーは進行状況を示しますが、その他の情報は提供しません。精度が不十分な可能性があるという理由だけで、不確定な進行状況バーを選択しないでください。
進行状況フェーズを明確に示してください。 進行状況バーは、操作が開始、途中、または終了のいずれの段階にあるかを示す必要があります。たとえば、すぐに 99 パーセント完了まで進み、その後長い間その状態のままになる進行状況バーは、特に情報量が不足しており、煩わしいものです。このような場合、操作がまだ初期段階であることを示すために、進行状況バーを最初は最大 33 パーセントに設定する必要があります。
完了が明確に示されます。 操作が完了していない場合は、進行状況バーを 100% にしないでください。
残り時間を正確に推測できる場合は表示してください。 残り時間の正確な推定値は役に立ちますが、大きく外れていたり、大幅に変動したりする推定値は役に立ちません。正確な見積もりを出す前に、何らかの処理を実行する必要がある場合があります。その場合、この初期期間中は不正確な可能性がある見積もりを表示しないでください。
進行状況を再開しないでください。 進行状況バーは、(おそらく操作のステップが完了したために) 再開すると、その価値が失われます。これは、操作がいつ完了するかをユーザーが知る方法がなくなるためです。代わりに、操作のすべてのステップで進行状況の一部を共有し、進行状況バーが一度完了するようにします。

誤った例:

この例では、操作はファイルをコピーするステップに移動し、そのステップの進行状況バーをリセットします。この時点で、ユーザーは、どれだけの進捗があったか、どれだけの時間が残っているかを把握できていません。
進行状況を戻さないでください。 再開の場合と同様、進行状況バーが戻ると価値が失われます。進行状況は必ず先に進め続けてください。ただし、進捗率は変化する可能性があるため、残り時間の見積もりが増加する (または減少する) 場合はあります。

進行状況不定バー

進行状況不定バーは、全体的な進行状況を特定できない操作にのみ使用してください。 無制限の時間を必要とする操作や、不明な数のオブジェクトにアクセスする操作には、不確定な進行状況バーを使用します。タイムアウトを使用して、時間ベースで操作を制限します。
全体的な進行状況を特定できたら、確定的な進行状況バーに変換します。 たとえば、オブジェクトの数を判別するのに 2 秒よりも大幅に長い時間がかかる場合、オブジェクトのカウント中は進行状況不定バーを使用し、その後確定的な進行状況バーに変換できます。
進行状況未定バーと達成率または残り時間の見積もりを組み合わせないでください。 この情報を指定できる場合、代わりに確定的な進行状況バーを使用します。
進行状況不定バーとアニメーションを組み合わせないでください。 進行状況不定バーは実質的に汎用的なアニメーションであるため、いずれか一方を使用する必要がありますが、両方を使用しないでください。

正しい例:

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

モードレス進行状況バー

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

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

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

進行状況ページまたは進行状況ダイアログボックスにモーダル進行状況バーを配置します。
操作の完了に数秒以上かかる場合、または完了しない可能性がある場合は、操作を停止するコマンドボタンを配置します。 キャンセルすると環境が以前の状態に戻る (副作用は残らない) 場合、ボタンに [キャンセル] というラベルを付けます。それ以外の場合、部分的に完了した操作がそのまま残ることを示すために、ボタンに [停止] というラベルを付けます。ある時点で環境を以前の状態に戻すことができなくなった場合、操作の途中でボタンのラベルを [キャンセル] から [停止] に変更できます。コマンドボタンの上部を揃えるのではなく、進行状況バーと垂直に中央揃えにします。

正しい例:

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

正しい例:

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

誤った例:

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

残り時間

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

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

進行状況バー:

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

残り時間: h 時間 m 分

残り時間: m 分 s 秒

残り時間: s 秒

画面領域が限られている場合:

残り h 時間 m 分

残り m 分 s 秒

残り s 秒

それ以外:

残り h 時間 m 分

残り m 分 s 秒

残り s 秒

タイトルバー:

残り hh:mm

残り mm:ss

残り 0:ss

このコンパクトな形式では、タスクバーで切り捨てられないように、最も重要な情報が最初に表示されます。
推定は正確に行う一方で、正しい精度で提示してください。 最大単位が時間の場合は、分 (重要な場合) を提示しますが、秒は提示しません。

誤った例:

hh 時間 mm 分 ss 秒
推定を最新の状態に保ちます。 残り時間を見積もりを少なくとも 5 秒ごとに更新します。
残り時間に焦点を当ててください。これがユーザーが最も重視する情報であるためです。経過時間が役に立つシナリオの場合 (タスクが繰り返される可能性が高いなどの場合) にのみ、合計経過時間を提示します。推定残り時間が進行状況バーに関連付けられている場合、その情報は進行状況バー自体によって伝達されるため、完了率のテキストは提示しないでください。
正しい文法にします。 数値が 1 の場合は、単数形の単位を使用します。

誤った例:

1 分 1 秒
文スタイルの大文字を使用します。