プログレスバー

定義

プログレスバーは、進行中の作業が今どこまで来ているかを棒で示す要素です。 大きく二種類に分かれます。ひとつは進捗率を計算できるときに使う形で、 ファイルのアップロードのように全体に対して何パーセントが終わったか分かる場合、 バーがその分だけ満たされていきます。もうひとつは進捗率が分からないときに使う形で、 サーバーの応答を待っている間のように終わりを予測しにくい場合、 バーの上を何かが流れ続けるアニメーションを繰り返して、作業が止まらず進んでいることを伝えます。 この二つを使い分けることが肝心で、どちらの形を選ぶかは進捗率を計算できるかどうかで自然に決まります。

なぜ重要か

プログレスバーが大切なのは、ユーザーの待ち時間を耐えられるものに変えてくれるからです。 同じ時間を待つとしても、あとどれくらい残っているか目に見えると、人はずっと苛立ちにくく、 画面から離れずにいてくれます。何のフィードバックもなく止まって見える画面は、 ユーザーに故障したのではという疑いを植え付けますが、少しずつ満ちていく棒は、 システムが生きて働いているという安心を与えます。スピナーが単に待ってほしいという合図なら、 進捗率を示すプログレスバーは、あとどれくらいかまで教えてくれるより親切な合図です。 だから残り時間を予測できる作業ほど、プログレスバーで進み具合を見せる方がユーザー体験に大きく役立ちます。

よくある間違い

• 進捗率が分かるのに、流れるアニメーションだけを見せてしまう場合です。 本当はパーセントを計算できる作業なのに、漠然と回る表示だけを使うと、 ユーザーは終わりがいつなのか見当がつかず、不必要に不安になります。
• バーが途中で長く止まったままになる場合です。90パーセントでしばらく静止していると、 ユーザーは進捗表示そのものを信じられなくなり、いっそ無い方がましだったはずの信頼を失って、 作業が止まったのではと疑い始めます。
• 進行が終わったあと、何の締めくくりの合図も出さない場合です。バーがそっと消えるだけだと、 ユーザーは作業が成功したのか失敗したのか分からず、もう一度確認することになり、 終わったという確信を得られないまま画面を離れてしまいます。

実務のヒント

• 進捗率を計算できるなら満たされていく棒でパーセントを示し、分からないなら流れる形を使いましょう。 分かることは分かるとおりに、分からないことは分からないままに正直に表現することが、 ユーザーに一番の安心を与えます。
• ごく短時間で終わる作業には、わざわざプログレスバーを出さないでください。 現れてすぐ消える棒はかえって画面を散らかし、ちらつきのように感じられて、 無い方がなめらかに見えることが多いものです。
• 棒と一緒に、今何をしている最中かを短い文で添えると効果的です。ファイルを整理中のように 文脈を加えると、同じ時間も短く感じられ、ユーザーは自分が何を待っているのか理解したまま待てるので、 もどかしさがずっと和らぎます。

関連概念