アプリのUX改善に役立つ！人気アプリに学ぶ初回チュートリアル画面

今回はモバイルとWebアプリのUXについてのレビューです。この記事を通じてこの業界の同業者を啓蒙し、他社がどれだけユーザー目線の製品を作っているかということを学んでほしいと思います。前回の投稿のフィードバックを受けて、少し投稿の形式を変えました。情報量が多いため読むのが少し大変ですが、前回の投稿より少し短くしています。

今回のテーマは皆さんよくご存じの『Pinterest』です。Pinterestは優秀なデザイナーを抱えていて、WebとモバイルのUXにおいて学べることがたくさんあります。では、iOS版Pinterestの新しいオンボーディングの優れた点、改善の余地が残る点をみていきましょう。

まず、最初の画面ではアプリでどれだけの情報が手に入るかを簡潔に表した（500億を超えるピン）数字と、どれだけ簡単にセットアップができるかを表示されます。この画面は少し雑然として見えますが、表示されている情報は初めてアプリを使うユーザーにとって親切なものになっています。

アプリのログインにはFacebookアカウント利用する方法とEメールを利用する方法があります。もちろん、Pinterest側が簡単に顧客に連絡を取れて、ユーザーの間でサービスの紹介も期待できるFacebookの方がPinterestにとっては都合がいいでしょう。ですが、今回はEメールを使ったログインでどうなるのか試してみました。

サインアップの最初の手順はEメールアドレスの入力です。まあ、予想通りですね！この画面には2つ、素晴らしい点があります。まず、サインアップにかかる手順数と、自分が現在どの段階にいるのかを表すプログレスバーが、Eメールの入力フォームのすぐ下に表示されるのです。1/4stepという数字の横にこの数字がなにを表すのか明示されていれば、より親切でしょう。入力フォームに文字を入力し始めると、入力フォームの横に小さなアイコンが表示されます。Eメールを打ち間違えた時や、違うEメールを入力した時にこのアイコンを押せばすぐに入力した文字を消せるのです。それから、有効なEメールアドレスを入力したときだけ、入力フォームの下の巨大な「Next」ボタンに色がつきます。これはユーザーに正しいEメールを入力してもらうための良い手段方法でしょう。

パスワードの入力画面はEメールアドレスの入力画面と似ています。私がいいと思った点は、確認のためにパスワードを2回入力しなくてもよいところです。大半のアプリはパスワードを2回入力させますが、私にはそれがどうも煩わしいのです。Eメールアドレス確認でアプリのセキュリティ対策はできますし、近年ではパスワードのリセットも簡単にすむはずだからです。

次は、ユーザーのフルネームを入力する画面になります。このとき、登録したEメールが画面の一番上に表示されていることに注目してください。これにより、ユーザーはアカウントがすでに作成されていて、それを編集しているのだと実感できます。

最後の画面は性別を入力する画面になります。これは任意なのですが、Pinterestがこの情報を欲しがっていることは、CTAボタンの下にほとんど見えないように「Skip」ボタンが配置されていることからも明らかです。

ここまでの作業で個人情報の登録は終わりで、次の画面ではユーザーがどんなピンを楽しむことができるのか、愉快なアニメーションで表示されます。赤いCTAボタンのおかげでどこを押して次に進めばいいのか分かりやすいです。私はこの画面には2つ改善点があると思っています。まず、CTAのためのリンクやボタンを前の画面と同じ大きさにするべきでしょう。なぜこの画面だと前のものより小さく表示するのでしょうか？もうひとつの点は、ピンのアニメーションを前のステップで選択した性別に合わせた実際の写真にすべきだということです。そうすれば、アプリを始めてすぐのユーザーに対してより一層、没入感を与えることができるでしょう。

オンボーディングの最後の画面はユーザーの興味がある分野を選ぶ画面になります。これは、ホーム画面にあらかじめユーザーの好みに合わせたピンを表示するためです。この画面のレイアウトとデザインは特に素晴らしいものになっています。

すべてのカテゴリーをリスト形式にし、垂直方向のスペースを節約することもできたでしょう。しかし、Pinterestはユーザーが結局画面をスライドして一番下まで見るため、関連するカテゴリーを横に配置した方が選択されやすいというユーザー行動を見つけていたのです。これはコンテンツを整理して配置するのにとても役立つ情報でしょう！いくつかカテゴリーを選ばなければいけないのを、カテゴリーを１つ選ぶまで知らされないのもよい仕組みです。最初のカテゴリーを選ぶと画面一番下のボタン内にあといくつ選ばなければいけないかを表すカウンターが現れます。それを押すと、先ほどのアニメーションを用いた画面が再び表示され、選んだカテゴリーに関するピンが並び、アプリ内探索のスタート地点となるホーム画面に進むのです。

この記事はIVAN ANNIKOVのブログ記事 ”Pinterest iOS app - Onboarding Teardown”を著者の了解を得て日本語に抄訳し掲載するものです。 Repro published the Japanese translation of this original article on IVAN ANNIKOV’s blog in English under the permission from him.