進捗状況をユーザーに伝える

最近、サービスデザインをする中で、【ユーザーに進捗状況を伝えるデザイン】について考えることがあり、それについてまとめたいと思います。

進捗状況を表すデザインの必要性

たとえばランニングをする際、
「これからと向こうの方へとにかく走ってください、時期にゴールします」
「向こうに見えるビルがゴール地点です。目指して走ってください。」
と言われるのだと、後者の方がやる気がでませんか？

上記は極端な例ですが、ユーザーに複数の画面の入力や視聴を強いる場面において、この考え方は大切です。

ユーザーが何かをインプットする際に、「あとどれくらい入力が必要なのか？」等の疑問は、不快感へつながり、サイトやサービスの離脱を引き起こしてしまいます。
逆をいえば、ユーザーに対し、入力がどれくらい完了し、残りはどれくらいか明示することは、ユーザーが入力するモチベーション向上にもつながるのです。

デザインの具体例

上記を踏まえて、どんな場面で必要かはおおよそ想像できるかと思います。ここからは、進捗状況を表すデザインをいくつか紹介します。

例１：下のタブバーの直上にプログレスバーを配置

これは、画面を遷移する毎に、少しずつ黒いバーが右に到達していく動きで表現するシンプルなデザインです。これに加えて、画面内のタイトルにSTEP1等の表現を加えると、よりわかりやすくなるかと思います◎

例２：バーにそれぞれの状況を記述する（タイトル上）

これは、ネットで注文したあとで、荷物の状況がわかるデザインでも使われていますが、新規ユーザーの初期登録入力画面でも採用されています。各プロトに対し、状況が一緒に記述されていることで、例１よりわかりやすいデザインです。
ここで注意なのが、画面タイトルの上にバーが来ていることです。例えば、上のバーでアカウント認証まで進んだ場合、画面タイトルはおそらく電話番号認証や、メールアドレス認証等、アカウント認証に対する具体的なアクション名が入ると思います。
つまり、バーの各タイトル＞画面タイトルの親子関係となります。
基本的に親は子供の上にくるのが自然ですので、このデザインではバーが画面タイトル上に設置されています。

例３：バーにそれぞれの状況を記述する（タイトル下）

これはお問い合わせフォーム内でよく見るデザインです。こちらも例２同様、進捗状況がわかりやすいデザインですね。
ただ例２とちがうのが、画面タイトルの下にバーがあるということです。こちらは、バーに記載の内容が、すべてお問い合わせに対して必要なアクションです。つまり、画面タイトル＞バーの各タイトルの親子関係となるので、例２とは逆のバーが画面タイトル下にくるデザインとなります。

まとめ

今回プログレスバーのデザインを考える中で、（１）よりユーザーに親切なデザインにするにはどうすべきか（２）適切な配置はどうなのかについて熟考しました。また、（３）デザインの一貫性も大切であるため、プログレスバーを選ぶ際は色も含め、サービス全体のデザインと合うか注意すべき点であり、苦戦しました。デザインのインプット不足ですね。。
今後は、プログレスバーを見つけた際は、上記の３点に着目するようにし、自分のデザインの引き出しを増やしていこうと思います。また、今回のプログレスバーデザインを含め、ユーザーに優しいデザインの工夫についても引き出しを増やすべく、いいものをみつけたらスクショを撮りため、活用していこうと思いました。

それでは〜