ざっくりと
- ユーザの待ち時間を示すマーク
- サイトの進行状況を視覚的に伝える
- 離脱率を抑えるデザイン手法
プログレスインジゲーターとは、ユーザの待ち時間を視覚的に伝えるものです。
概要説明
プログレスインジゲーターとはユーザがとった行動の進行状況を示すものである。なぜならば、サイトやアプリの読み込みや処理が進行中かどうかをユーザに知らせることで、ユーザの不安やイライラを和らげるためだ。
例えば砂時計マークや光がぐるぐる回る円形マークである。そして、これらのインジゲーターは離脱率を抑える効果も持つ。つまり、良いユーザ体験の提供に繋がる。
だからサイトやアプリのデザインに欠かせない。
イメージ図
職業職種
- Webデザイナー
プログレスインジゲーターは、サイトのユーザ体験を高めるツールである。なぜなら、ユーザがサイト上で何を待っているのかを視覚的に伝えるからだ。例えば、ファイルのアップロード中を示す。 - アプリ開発者
プログレスインジゲーターは、アプリの操作性を向上させるものである。なぜなら、進行中のタスクや処理を明示することで、ユーザが次の行動を予測しやすくするからだ。例えば、データ同期中の表示。 - UXリサーチャー
プログレスインジゲーターは、ユーザのサイトやアプリに対する評価を上げる要因である。なぜなら、待ち時間や進行中の状態を理解させることで、ユーザの不安やストレスを減少させるからだ。例えば、調査中のサイトローディング時間を示す。
プログレスインジゲーターは、名前の由来は英語の”Progress”（進行）と”Indicator”（指標・表示）から来ています。
手順例
以下は、プログレスインジゲーターの設置手順です。- 目的の確認
目的を明確にする。なぜなら、インジゲーターのデザインや動きは目的に応じて変わるから。例えば、ダウンロードの進行状況を示す場合と、ページの読み込みを示す場合で異なる。 - デザイン選択
デザインを選ぶ。なぜなら、ユーザーの目を引くデザインはサイトの離脱率を下げる効果があるから。例えば、砂時計マークやぐるぐると回るマークなど。 - 配置場所の決定
配置場所を決める。なぜなら、ユーザーがすぐに進行状況を確認できる場所に設置すると効果的だから。例えば、画面の中央や上部など。 - コーディング
コードを書く。なぜなら、プログレスインジゲーターはプログラムを用いて実装するから。例えば、JavaScriptやCSSを使用して動きをつける。 - テスト
テストを実施する。なぜなら、実際の動作を確認し、問題がないかをチェックするため。例えば、異なるデバイスやブラウザでの表示を確認する。
類似語
- ローディングアイコン
ローディングアイコンは、進行中を示すマークの一つである。なぜなら、ページやデータの読み込み中に表示されることが多いから。例えば、ぐるぐる回る円形のマーク。 - ウェイトカーソル
ウェイトカーソルは、ユーザーの操作を一時停止している状態を示す。なぜなら、何かの処理が実行中で待たされている時に現れるから。例えば、砂時計や回転するカーソル。 - バッファリングアイコン
バッファリングアイコンは、動画の読み込み中を示すマークである。なぜなら、ストリーミング動画を見ているときにしばしば見るから。例えば、動画プレイヤー上に現れる回転するマーク。
反対語
- 完了マーク
完了マークは、タスクが終了したことを示す記号である。なぜなら、進行中を示すプログレスインジゲーターの反対で、動作や処理が完了した時に表示するものだから。例えば、チェックマーク。 - エラーマーク
エラーマークは、何か問題が発生したことを知らせるための記号である。なぜなら、進行中の状態からエラーが起きた場合に表示されるから。例えば、赤い×マーク。 - 静止アイコン
静止アイコンは、何も動きがない状態を示すマークである。なぜなら、進行中や動作中の状態を示すものとは反対の意味を持つから。例えば、灰色の円。
会話例
- Webデザイナーとクライアントの打ち合わせ時
「このサイトの読み込み時、何か表示させることはできる？」
「もちろん、プログレスインジゲーターを使えば、ユーザーに読み込み中であることを示すことができるよ。」 - プログラマとのミーティングで
「ページの反応が遅いとき、ユーザーが待ってくれるかな？」
「プログレスインジゲーターを導入すれば、ユーザーに処理中であることを知らせることができる。それで離脱を防ぐことができるよ。」 - マーケティング担当者との話し合いで
「サイトの離脱率が高いんだけど、何か対策はない？」
「プログレスインジゲーターを表示して、ユーザーに処理中を示すことで、待ってもらう時間を楽しくすることができるかもしれない。」
注意点
プログレスインジゲーターを使用する時の注意点は過度な使用である。なぜならば、多くの動的なインジゲーターが頻繁に表示されると、ユーザーが煩わしく感じる可能性があるからだ。
例えば、ページの移動ごとに大きなインジゲーターが表示される場合。そして、インジゲーターのデザインや色もサイトのテーマと合わせることが重要。
だから、適切なデザインや配置を心掛けることが大切。
プログレスインジゲーターとローディングアイコンは、間違えやすいので注意しましょう。
プログレスインジゲーターは、処理やタスクの進行状況を示すものです。
一方、ローディングアイコンは、データやページの読み込みを待っている状態を示すものです。
コメント