進捗状況を伝えるデザインパターンの基本：プログレストラッカーとプログレスインジケーター

タスクの進捗状況を伝えるデザインには、用途別にいくつか種類があるのをご存じでしょうか。

今回はユーザーの認知負担を軽減し、デザイナーの時間を節約するためにも、進捗状況を伝える基本的なデザインパターンをご紹介します。

プログレストラッカーとプログレスインジケーター

たとえば、Google Driveにファイルをアップロードする場合。

ファイルをブラウザにドラッグ＆ドロップすると、システムがリクエストを処理し、完了までの推定時間をあらわすデザインが表示されます。デザインによって、アップロードの進捗状況が把握できるのです。

進捗をあらわすデザインパターンには、大きく分けて以下の2種類があります。

• プログレストラッカー
• プログレスインジケーター

ここからは、この2種類についてそれぞれ詳しくご紹介します。

プログレストラッカー

上の図は、プログレストラッカーの基本的な構造です。

プログレストラッカーは、ユーザーに「完了した項目」や「これから取り組む項目」などの進捗状況を伝えます。ユーザーのステータスを表示するだけでなく、戻ったり進んだりする機能をつけることも可能です。

プログレストラッカーは、タスクや目標を完了するためのモチベーションや、達成感を提供してくれます。効果的にエンゲージメントを高めてくれる強い味方です。

プログレストラッカーとエンドルフィン

私たちは日々、「目標設定 → 達成」の一連の作業を繰り返しています。複雑なタスクを達成すると脳が大量のエンドルフィンを分泌するため、人は幸福感を感じます。

Ubersuggestで有名な世界的デジタルマーケータであるニール・パテル氏は、自身のブログにてシェフィールド大学のトム・スタッフォード博士による研究を取り上げ、テトリスがなぜ爆発的人気を誇ったのかについて説明しています。

テトリスが利用しているのは、タスクを達成するときに人が感じる喜びです。それ自体に意味がないと分かっていても、ブロックを積んで消すという短いタスクの積み重ねは、脳内でエンドルフィンが分泌され、人に喜びをもたらします。

こうした構造は、プログレストラッカーにも応用可能です。

ここからはプログレストラッカーのデザインパターンを、さらにこまかく分類してみましょう。

• タイプA：【大きなタスク向け】プログレストラッカー
• タイプB：【小さなタスク向け】ステッパー
• タイプC：【サービスのステータスを追跡】ステータストラッカー

タイプA ：【大きなタスク向け】プログレストラッカー

プログレストラッカーは、一度に達成できないタスクの進捗状況を表すのに使われます。完了後、ユーザーは進捗状況をもとに戻すことはできません。長いタスクを小分けにしてくれる、便利なトラッカーです。

たとえば世界最大級のビジネスSNSである『LinkedIn』のプロフィールを記入するときのトラッカーは、これにあたります。LinkedInのプロフィール入力を全て完了するには、一、二時間では終わりません。そのため、プロフィールの入力プロセスを小さなステップに分割して、進捗状況を確認できるようにしているのです。

また進捗状況を可視化することは、ユーザーのモチベーション向上にもつながります。LinkedInのプロフィール入力においてユーザーのやる気を後押ししているのは、「Profile Strength（プロフィールの強力さ）」という指標です。

タイプB：【小さなタスク向け】ステッパー

一度に達成できる小さなタスクにおすすめなのが、ステッパーです。ユーザーは効率的に現在の進捗状況を確認できます。

求人情報の投稿や、マーケティングキャンペーンの設定、YouTube動画のアップロードなどにステッパーが用いられています。

タイプC：【サービスのステータスを追跡】 ステータストラッカー

ステータストラッカーは、製品やサービスの配信の進捗状況などを追跡するのにぴったり。ユーザーに行動を促す目的はなく、最新のステータスが時系列順に表示されます。

ECサイトをよく使う人なら、普段から目にしているかもしれませんね。

プログレストラッカー 5つのデザインガイドライン

1. 過去／現在／未来のステップを表示する

ユーザーに過去／現在／未来のステップを表示して、進捗状況を知らせましょう。

過去のステップも示すことで、ユーザーに振り返りの機会を与え、やる気を起こさせます。

2. 各ステップは分かりやすく

過去／現在／未来のステップ状況はきちんと区別しましょう。

ステータスが複雑すぎると、ユーザーが混乱する恐れがあります。

3. シンプルなラベルを使う

ラベルを使用する場合は単語を一、二個にしぼって、シンプルにしましょう。

メッセージを伝える必要があるなら、ホバーのツールチップ（小さな吹き出し）を使うのがおすすめです。

4. プログレストラッカーの位置を固定する

位置を固定して、どこを見たら進捗が確認できるかわかるようにしましょう。

ヘッダー、サブヘッダー、フッター、サイドバーなどの配置がおすすめです。

5. リアルタイムでフィードバックする

ステップが完了したらすぐにステータスを更新し、進捗状況をすぐにフィードバックしましょう。

プログレスインジケーター

プログレスインジケーターの役割は、ユーザーのおおよその待ち時間を表示することです。進捗状況が明示される場合とそうでない場合で、以下の2種類に分類されます。

• プログレスバー（進捗状況が明示される）
• ローダー（進捗状況が明示されない）

プログレスインジケーターはインタラクティブなものではありませんが、多くの場合で操作をキャンセルするためのボタンがついています。

プログレスバー

「確定インジケーター（Determinate indicator）」ともよばれます。プロセスが10秒以上かかり、かつシステムがタスクの完了を予測できる場合に使いましょう。

プログレスバー自体はインタラクティブではないものの、進行の停止や再開するための機能と組み合わせられます。

プログレスバー活用のヒント

プログレスバーが一定のペースで進むと、ユーザーは速度が落ちているように感じてしまいます。

デニス・コクス氏の研究によると、最初に速度を速くしておくと、ユーザーは高速で快適であると感じるようです。

現在の時間を示すインジケーター

プログレスバーのなかには、単に進捗状況をあらわすだけでなく、具体的な時間を表示するものもあります。

こうしたプログレスバーには、動画や音楽などに使うのがおすすめです。

ローダー

「スピナー」や「不確定インジケーター（Indeterminate indicator）」ともよばれます。進捗状況を検出するのが難しい場合や、プロセスの所要時間が10秒未満の場合に使いましょう。

▲出典：mercury

「待ち時間の心理学、ローディングアニメーションとFacebook」では、Facebookに関する興味深い事実が指摘されています。

FacebookのiOSアプリにFacebookオリジナルのアニメーション（上の画像左）を表示すると、ユーザーは遅延の原因がアプリだと捉えました。一方で、iOSのスピナー（画像右）を表示すると、原因は自分のスマートフォンにあると捉えたのです。

プログレスインジケーター 2つのデザインガイドライン

1. 具体的な情報をユーザーに伝える

ユーザーは待たされる理由を知りたがるため、なぜアプリがローディング中なのかを知らせるのが良いでしょう。しかし伝え方によっては、アプリ側のバグだと判断して離脱してしまう可能性も。

進捗状況のラベルに「読み込み中」や「処理中」などのあいまいな言葉を使うのはやめましょう。「銀行口座に接続中」など、具体的でシンプルな言葉を使うのがおすすめです。

2. アニメーションを使う

アニメーションを使って注意を引き、アクティビティの進捗状況をユーザーに知らせましょう。

進捗速度にあわせて、アニメーションの速度を調節しても面白いかもしれません。

デザインを組み合わせよう

今回は進捗状況を知らせるデザインをいくつかご紹介しましたが、これらは組み合わせて利用することも可能です。

たとえば上の画像では、上部のプログレストラッカーは全体的な進捗状況を、下部のローダーはリクエストの処理状況を示しています。

おわりに

今回の記事では、進捗状況を知らせるさまざまなデザインパターンについてご紹介しました。

個々のデザインの使いかたや、組み合わせ方のイメージを掴めたのではないでしょうか。

この記事を参考に、ぜひ効果的なタスクの進捗状況を伝えてください。

（執筆：Damodar Badhwar　翻訳：Nakajima Asuka　編集：Shinohara Kyohei）