プログレス表示

時間の掛かる処理について、何がどこまで完了し、あとどれくらい要するのかを表明する。
理由:現在の処理状況をリアルタイムにフィードバックするため。

図例
プログレス表示

効能

  • 正常に動作が行われているのかどうか、不安にならずに済む。
  • そのまま机の前で処理の完了を待つべきか、コーヒーを入れに行くべきかを判断できる。
  • 予想以上に処理に時間がかかっている時、フリーズしていると勘違いしてパソコンを強制再起動しなくて済む。

用法

  • プログレスバーは、処理の進行に会わせてバーが伸びるようにし、処理完了時にバーの長さが100%になるようにする。その際、途中段階はできるだけ多い方が進行状況を正しく表現できる。
  • 処理中のオブジェクトの名称と、処理中であること、全体の見通し時間と、現在の進捗件数などを明示する。
  • ポップアップ画面(ダイアログ)に、進捗状況をリアルタイムに視覚化する横長のバーを表示する。処理が終わり次第ダイアログを自動的に閉じる。
  • 残り時間を予測できない時は、プログレスバーの中で短い線が左右に行き来するアニメーションや、バーバーポール(斜めのストライプ)を左から右へ連続的に動かす表現をとる。
  • 脱出口を用意し、いつでもプログレス表示の状況から抜け出すことができるようにする。つまりキャンセル操作が割り込めるようにしておく必要がある。
  • プログレス表示をキャンセルした場合、処理が中断された状態なのか、それとも処理開始前の状態に戻ったのか、できるだけユーザーが把握できるようにする。

注意書き

  • プログレス表示の途中段階数は多いほど進行状況をスムーズに表現できてよいが、多すぎると、表示を更新する処理が頻発してかえって全体の処理を重くしてしまう恐れがある。ユーザーが認知できないほど細かくする必要はない。

蘊蓄

プログレスバーを実装する場合、処理完了までのステップが10あるならば、1処理が終わるごとにバーの長さを1/10だけ伸ばすことになる。そしてそこまでの所要時間から、全体の処理完了までの残り時間を計算することになる。例えば、10ステップのうち7ステップが完了していて、そこまでに7秒かかったのなら、残り時間は3秒と表示するのが普通だろう。しかし実際には各ステップが同じペースで進行するとは限らないため、残り時間表示が嘘になってしまうことが多い。また、ステップが進むごとに再計算されるため、さっきまで残り時間3秒と表示されていたのに、今見たら5秒に伸びていた! という時間旅行が起きてしまう。これは、プログラマーにとっては論理的な展開だが、ユーザーにとっては摩訶不思議な現象である。プログレスバーは、プログラマーが処理の実行状況をトラックするためのものではなく、ユーザーに現在の仕事の状態をフィードバックするためのものなのだから、残り時間の表示は(何らかの方法で)もっと正確に算出されるべきだろう。