コンポーネント
プログレスバー
Progress Bar
プログレスバーとは、進行中の作業が今どこまで進んでいるかを棒で示す要素で、進捗率が分かるかどうかで二種類に分かれます。
定義
プログレスバーは、進行中の作業が今どこまで来ているかを棒で示す要素です。 大きく二種類に分かれます。ひとつは進捗率を計算できるときに使う形で、 ファイルのアップロードのように全体に対して何パーセントが終わったか分かる場合、 バーがその分だけ満たされていきます。もうひとつは進捗率が分からないときに使う形で、 サーバーの応答を待っている間のように終わりを予測しにくい場合、 バーの上を何かが流れ続けるアニメーションを繰り返して、作業が止まらず進んでいることを伝えます。 この二つを使い分けることが肝心で、どちらの形を選ぶかは進捗率を計算できるかどうかで自然に決まります。
なぜ重要か
プログレスバーが大切なのは、ユーザーの待ち時間を耐えられるものに変えてくれるからです。 同じ時間を待つとしても、あとどれくらい残っているか目に見えると、人はずっと苛立ちにくく、 画面から離れずにいてくれます。何のフィードバックもなく止まって見える画面は、 ユーザーに故障したのではという疑いを植え付けますが、少しずつ満ちていく棒は、 システムが生きて働いているという安心を与えます。スピナーが単に待ってほしいという合図なら、 進捗率を示すプログレスバーは、あとどれくらいかまで教えてくれるより親切な合図です。 だから残り時間を予測できる作業ほど、プログレスバーで進み具合を見せる方がユーザー体験に大きく役立ちます。
よくある間違い
- 進捗率が分かるのに、流れるアニメーションだけを見せてしまう場合です。 本当はパーセントを計算できる作業なのに、漠然と回る表示だけを使うと、 ユーザーは終わりがいつなのか見当がつかず、不必要に不安になります。
- バーが途中で長く止まったままになる場合です。90パーセントでしばらく静止していると、 ユーザーは進捗表示そのものを信じられなくなり、いっそ無い方がましだったはずの信頼を失って、 作業が止まったのではと疑い始めます。
- 進行が終わったあと、何の締めくくりの合図も出さない場合です。バーがそっと消えるだけだと、 ユーザーは作業が成功したのか失敗したのか分からず、もう一度確認することになり、 終わったという確信を得られないまま画面を離れてしまいます。
実務のヒント
- 進捗率を計算できるなら満たされていく棒でパーセントを示し、分からないなら流れる形を使いましょう。 分かることは分かるとおりに、分からないことは分からないままに正直に表現することが、 ユーザーに一番の安心を与えます。
- ごく短時間で終わる作業には、わざわざプログレスバーを出さないでください。 現れてすぐ消える棒はかえって画面を散らかし、ちらつきのように感じられて、 無い方がなめらかに見えることが多いものです。
- 棒と一緒に、今何をしている最中かを短い文で添えると効果的です。ファイルを整理中のように 文脈を加えると、同じ時間も短く感じられ、ユーザーは自分が何を待っているのか理解したまま待てるので、 もどかしさがずっと和らぎます。
AIに頼む
[作業の説明 — 例: 画像を複数枚アップロード]の進捗表示を設計して。まずこの作業が進捗率（全体に対して何%か）を計算できるかどうかから判断して、計算できるならその分だけ満ちていくdeterminateなバーで、サーバー応答待ちのように終わりが予測できないなら流れ続けるindeterminateな形を選んで、理由と一緒に教えて。1秒以内に終わる短い作業ならちらつきに見えるから、バーを一切表示しないよう判断して。バーの横には「ファイルを整理中」のような、今何をしているかを一行で伝える状態テキストも一緒に入れて。determinateならrole="progressbar"にaria-valuenow/aria-valuemin/aria-valuemaxまで付けたマークアップで出して。
下に貼り付けるコードは進捗率が分かる作業なのに、回り続けるindeterminate表示だけを使ってる。[進捗データの取得元 — 例: XHR upload.onprogressのloaded/total]で実際のパーセントを計算して、その値の分だけ満ちていくdeterminateなバーに変えて。バーは実際の進捗に合わせて正直に動かして、偽の値で90%に止めておかず、進みきったら100%まで到達させてから完了状態に移して。role="progressbar"のaria-valuenowを実際の%で更新して、aria-valuemin=0・aria-valuemax=100を付けたコードで出して。
下に貼り付けるプログレスバーのコードを、ユーザーの信頼という観点で点検して。特にバーが90%あたりで長く止まって、ユーザーが表示そのものを信じられなくなる箇所がないか探して直して。作業が終わった後にバーがこっそり消えるだけになっていないかも見て。終わったら成功/失敗をはっきり伝える完了シグナル（例: チェックアイコン + 「完了」、またはエラーメッセージ）を必ず入れて、ユーザーが結果をもう一度確認しなくても済むようにして。見つけた問題と直した箇所を、根拠と一緒にまとめて。