プログレスインジケータの役割とは？デザイナーのためのインジケータ設計アイデア
突然ですが、あなたは今、居酒屋にいるとします。
「15分前に注文した生ビールがまだ運ばれてこない状況」を想像してみてください。
あなたはどのような気持ちになりますか？
もう一度店員に声をかけようとするでしょうか。
それとも、諦めてお勘定を済ませようとするでしょうか。
いずれにしても、楽しくビールを呑むはずの時間を、不快感や残念な気持ちを抱きながら過ごすことになるでしょう。
お店側から「もう少々お待ちください」という一声があれば良いのに…
そうは思いませんか？
同じようなことが、アプリを利用している最中にも起こりうるのです。
1つのボタンを押しても反応がない時や、ページが推移した後に何も表示されない時、ユーザーはアプリから離脱しようと考えるでしょう。
この離脱を避けるためには、アプリがユーザーに対して「プロセスを実行している」ことを視覚的に伝えられなくてはなりません。
この記事では、その役割を果たす「プログレスインジケータ」について考察します。
海外のサービスを事例に、多様なインジケータの種類と、それらがユーザーの心理に及ぼす影響についても見ていきましょう。
目次
なぜプログレスインジケータが必要なのか？
プログレスインジケータは、「ユーザーがアプリ内で困惑して離脱を考える事態」を避けるために用いられるインタラクションです。ユーザーが何かしらの操作をした際に、それ相応のフィードバックをすることがアプリの持つべき性質です。ここでいうフィードバックとは、ユーザーが行なった行動に対する応答のことを指します。
ユーザーに対する視覚的なフィードバックの別の種類として、エンプティーステートデザイン（表示情報がない場合にユーザーが見る画面）やエラーメッセージなどが挙げられます。
参照：Empty states – Patterns – Material design guidelines
これらは全て、なくても良いものをあえてユーザーが見えるものへとデザインし、アプリとユーザーとのインタラクションをより自然なものにする役割を担っているのです。
プログレスインジケータの種類
Progress & activity – Components – Material design guidelines
プログレスインジケータには、「不確定タイプ」と「確定タイプ」の2種類あります。
不確定タイプ（Indeterminate）
不確定タイプは、ユーザーに対して「何かが起きているが、あとどれだけ時間を要するか」は明確に伝えないタイプのプログレスインジケータです。
確定タイプ（Determinate）
確定タイプは、ユーザーに対して「何が起きていて、あとどれだけ時間を要するのか」を視覚化したプログレスインジケータです。
多様なプログレスインジケータ
海外の斬新なプログレスインジケータをいくつか集め、どのようなアプリにどういったインジケータが用いられているのかを見てみました。サービスの戦略や、インジケータ自体に隠された意味を私なりに考察していきます。
サーキュラーインジケータ
サーキュラーインジケータとは、円形を用いたインジケータのことです。通常4秒以内のローディング時間を要する場合に用いられます。
ユーザーは同じ動きのものを永久に見ていると、ストレスを感じる傾向があります。サーキュラーモーションが4回転する前に、画面の情報が表示されることが理想でしょう。
Haitao
Haitaoは、中国の若年層向けの人気ECサイトです。アプリでは、サーキュラーインジケータを用いていますが、あまり見たことのないアニメーションパターンが印象的です。
「ユーザーは予測できる動きが続くと見飽る」というコンテキストを踏まえた上で、予測不可能なインジケータをデザインしたのでしょう。
可愛らしいパステルカラーを使い、若者向けECサイトというブランドイメージを確立しています。
ECサイトは異なるアイテムの写真などを表示するのに、少々時間を要します。したがって、ユーザーを視覚的に楽しませることができる、創意的なアニメーションが適しています。
リニアインジケータ
参照：Dribbble
リニアインジケータは、水平棒で0から100までのローディング時間を表したものを指します。ややローディング時間がかかる際などに用いられます。通常4秒以上かかるものは、リニアインジケータを使った方がユーザーにとっても良いでしょう。
WeChatは中国最大手IT企業テンセントが運営するチャットアプリです。以前の記事でも何度かご紹介しましたが、今最も中国国内で使われているサービスの1つです。
WeChatのアプリでは、情報のローディングを表すインジケータとして、WeChatらしい緑のリニアインジケータが用いられています。表示がスムーズな場合でも、リニアにすることによりユーザーに「ある程度の時間を要する」ことをあらかじめ伝え、ストレスを軽減しているのでしょう。
イラストインジケータ
参照：Dribbble
イラストインジケータは、キャラクターやイラストのアニメーションGIFを用いたインジケータのことを指します。これらは、ユーザーがローディング時間に退屈しないようにデザインされています。イラストを用いる場合は、先ほどのサーキュラーやリニアのようにロード時間に基づいてインジケータを設計するのではなく、ターゲット層を重視してデザインする傾向があります。
Qdaily
Qdailyは、中国の若者をターゲットにビジネスニュースを配信するアプリです。2015年にアプリのUIを「ユーザーにとってブラウザしやすい」ものへと一新しました。
国内外にまつわる記事を、オリジナルもしくは翻訳で配信しています。気に入った記事にはライクやコメントができ、さらにSNSヘの拡散もできます。UIも隅々まで可愛らしく、使っていて愛着の湧くデザインです。
私のお気に入りはペンと消しゴムがQdailyのロゴをかき消しする、アプリの独自性が現れたインジケータです。
この使いやすく、かつ見た目からも楽しめるニュースアプリで、日々のニュースをより楽しく読むことができます。
現在Qdailyは中国語にのみ対応していますが、今後は日本語版や英語版もリリースして欲しいですね。
プルダウンインジケータ
参照：Dribbble
プルダウンインジケータは、画面を下へスライドした際にインジケータが表示されるものです。更新頻度の高いSNSに用いられることが多いインタラクションです。
Facebook、Twitter、InstagramではiOSの一般的なサーキュラーインジケータが用いられています。しかし、ターゲットによってはイラストにする場合などもあるでしょう。
Snapchat
Snapchatは「日々の瞬間を切りとり友達と共有できる」SNSです。モーメント共有はあげた投稿が「残らない」という特徴から、よりリアルな日常をさらけ出せるのが人気の秘密でしょう。
プルダウンをするとお化けの可愛らしいウィンクした姿が、虹とともにジャンプして画面が更新されます。更新するたびに少し癒されますね。
ステップインジケータ
参照：Dribbble
ステップを示すUIもプログレスインジケータの1つです。オンボーディング（初期にアプリを開いた際にプロダクトの価値を伝えるプロセス）でよく見られます。ユーザーは明確に「残りいくつステップを踏む必要があるか」を把握でき、安心感を得られます。
Richart
Richartは、台湾の若者層をターゲットにしたオンラインバンクです。台湾では人気なサービスで、私の周りでも使っている人が多くいました。
オンボーディングの主役はサービスを修飾する文字や画像ですが、下方にはドットが3つ並んでおり、「今どのステップにいるのか」をユーザーへ伝えています。ユーザーはこのドットがあることにより、「目的を達成するまでのステップ」を把握できます。
スケレトンインジケータ
参照：Dribbble
スケレトンはローディング項目が多い際に、情報がロードされる部分に空白の四角を表示するインジケータです。ユーザーに対して「しばらく経つと情報が表示される」というフィードバックを行なうものです。ページ全体をローディング中と表すよりも、「どの部分にどのような情報が表示されるのか」をある程度ユーザーへ伝えたうえで、待ち時間を与えるUIです。
Dribbble
Dribbbleは、デザイナーが作品を投稿できるSNSサイトです。
2017年にローンチしたアプリ版を開いてみると、スケレトンインジケータが用いられていました。
固定された部分にコンテンツが表示されるということがあらかじめわかるUIなので、安心して待機できます。少しでもユーザーへ安心感を与えるために、スケレトンインジケータが用いられているのでしょう。
まとめ
冒頭で述べた「居酒屋事例」のように、アプリユーザーは予想以上に待たされるとき、「視覚的なフィードバック」が必要です。
ユーザー自身にシステムを支配しているという感覚を持ってもらうことが、デザイナーの目指すべき着地点です。そのため、画面が硬直状態に陥ることが1番デザイナーが避けるべき事態です。
今回取り上げた様々なプログレスインジケータは、全てのアプリデザインに適しているわけではありません。デザイナーは「どの状況において、どのようなインジケータが理想か」を見極めて、使い分けをすることが大切なのです。
4~5秒以上かかる場合は、「どれだけ時間がかかるか」を数字で表さないサーキュラーインジケータやアニメーションGIFを使うことは、ユーザーのストレスの起因となるため避けるべきでしょう。
しかし、数分以上時間を要する作業の場合には、確定タイプのリニアインジケータを用いるよりも、よりユーザーの飽きのこないアニメーションGIFをインジケータにするのも1つの手かもしれません。
大切なのは、アプリごとの戦略に沿った「ユーザーが離脱を考えないデザイン」をすることです。良いプログレスインジケータは、ユーザーを目的の到達に導くだけでなく、アプリがより良い評価を得ることに結びつくでしょう。
