3つの事例から学ぶ、ユーザーを最優先にしたオンボーディング

Hannah Levenson

HannahはAppseeモバイル分析のコンテンツマーケティングマネージャーです。UXとモバイルアプリに強い情熱をもち、モバイルテクノロジーについてのインサイトや情報を見つけたり共有したりすることに親しんでいます。

この記事はUsabilityGeekからの翻訳転載です。配信元または著者の許可を得て配信しています。

Mobile User Onboarding: Examples From Three Awesome Apps (2017-09-18)

引用元:Depositphotos

モバイルユーザーのオンボーディングに関して、すべきこと、してはいけないことを単純にリストアップするのは簡単です。たとえば、オンボーディングの進捗状況やフローの長さをユーザーに伝えるべきで、ユーザーをコンテンツで圧倒してはいけません。また、ユーザーにすぐに許可を求めてはいけません。チュートリアルをスキップできるようにするべきです。

しかし、人間は視覚を重視する生き物ではないでしょうか。プロダクトマネージャーやUXデザイナーは特にそうです。そのため、オンボーディングの有効なベストプラクティスを習得したいなら、実際の素晴らしいデザインを見せることより優れた方法はありません。

モバイルユーザーへのオンボーディングに関して、私が本当に優秀だと思う3つのモバイルアプリを選んでおきました。選択したからといって、正しくデザインされているのがこの3つだけだと言いたいのではありません。オンボーディングに力を入れているアプリは数多く存在します。その中でも、これらのアプリは特に称賛に値するものだと感じました。そして、オンボーディングのプロセスを構築するヒントを確実に提供してくれるでしょう。

1. Slack

Slackはモバイルユーザーへのオンボーディングを、整然として、興味を引かれるものにしています。価値指向のオンボーディングを採用することで、ほかのメッセージアプリよりも製品の優れた点が目立ちます。

楽しげな色合いやイメージでありながら、アプリの特に重要な要素についてもしっかり伝えています。上の画像をご覧ください。それぞれの画面の下に進捗状況を表すドットがあること、どの画面からでもアカウント作成やログインができることがわかるでしょう。これによって、Slackでの最初の体験から、ユーザーはアプリをコントロールすることができます。理想的なデザインです。

ログイン画面に入る選択をして、既存のチームにアクセスすることを選ぶと、見やすくて洗練された画面がユーザーを迎え入れます。画面上にはユーザーのSlackのURLを開くための入力欄が1つ表示されています。Slackのアプリはさらに、マジックリンクも提供しています。これによってユーザーは、モバイル用にパスワードを記憶する手間が無くなります。

私はこのとき、運良くパスワードを覚えていたので、「パスワードをタイプする」ルートに進みました。パスワード欄の横の、おしゃれな小さい目のシンボルに注目してください。これは入力されたパスワードを見えるようにするものです。これによって、正しいパスワードを入力していることを確認し、今後ログインするときのために覚えておくことができます。

しかし、完璧なものは存在しません。チュートリアルの3番目のスライドを見ると、「works with everything」という見出しのテキストが少しだけ見切れています。もしSlackのモバイルアプリチームがユーザーレコードなどの量的な分析ツールを活用していたなら、この小さくも発見可能なミスに気づくことができていたでしょう。

2. Trip.com

Trip.comのモバイルアプリは、質の高いユーザー体験を提供するために、正確なカスタマイズとパーソナライズに焦点が置かれています。Trip.comはユーザーの関心や時間、現地の天気、ロケーションに基づいて、彼らがもっともやりたい、食べたい、探索したいことを見つける手助けをします。

Trip.comはどのようにしてこれらのおすすめを提供しているのでしょうか? 答えは、最初のユーザーの入力を通してです。ある程度のユーザーのインプットが必要になるアプリにとって、ユーザーにオンボーディングのプロセスを完了してもらうことは課題になることがあります。しかし、Trip.comは果敢にこの課題に立ち向かっています。

上の3つのスライドを見てください。これは価値指向のオンボーディングのもう1つの事例です。Trip.comはこのスライドで、アプリの利点に関する3つの重要な要素を伝えています。すっきりした見た目に太字で読みやすい字は、導入としてのオンボーディング画面の美しい事例です。

次のスライドに移ると、もう少し興味を引かれるものがあります。ここでは、通知をオンにする利点を伝える魅力的なスライドが表示されます。Trip.comはいきなりアプリの許可をうながすのではなく、通知をオンにすることでユーザー体験がいかに向上するのかを、ビジュアルを駆使して意識的に伝えようとしるのです。利点を最後まで見終わると、iOSのアプリ内許可が表示され、通知オンを作動させるかどうか、正式に尋ねられます。これによって、アプリ内許可がより「不安で」なくなり、「許可する」のボタンをより確信してタップできるようになります。

続いて重要なカスタマイズ要素として、ユーザーにとって最善のおすすめが提供されるように、ユーザーの個人的な関心をTrip.comに伝える機会が訪れます。多くのモバイルアプリのユーザーがそうですが、もし急いでいたり我慢ができなかったりする場合は、画面右上の「スキップ」ボタンをタップできます。先に述べたように、私はパーソナライズされたおすすめに興味があるので、スキップして次に進んで、興味に関連して一連のアイコンを選択します。興味を選択すると、選択済みのものが一目でわかるように、アイコンは濃いピンク色に変わります。細かくとも優れたマイクロインタラクションです。

興味を選択して、それに関連するおすすめを受け取るためには、Trip.comに位置情報の提供を許可しなければいけません。ここでもTrip.comは、一般的なアクセス許可フォームの入力を要求する前に、位置情報を有効にすることの重要性を説明する別のスライドを提供しています。Trip.comに位置情報へのアクセスを許可したら、準備完了です。私のニュースフィードは今、パーソナライズされたおすすめでいっぱいです。

最後にもう1つ重要なこととして、Trip.comはアカウントを作成したいかどうかを尋ねます。ポップアップによって、アカウント作成をする利点を簡潔に説明します。ここでは登録をする2つの方法が提供されます。しかしもっとも重要なのは、アプリの価値を実感できているオンボーディングの最終段階で尋ねていること、そして、登録するタスクを強制しないことです。質の高い、配慮の行き届いたオンボーディングを通じて、Trip.comは現代のモバイルアプリユーザーの純粋な認識と、彼らのニーズを実装しています。

3. Feedly

Feedlyのユーザーオンボーディングは、従来的なスライドによるチュートリアルとは違うやり方をしています。一連のスライド表示をする代わりに、Feedlyは前進的なユーザーオンボーディングを通して「ユーザーが体験する中で学べる」ようにしています。

ユーザーがFeedlyの価値と使い方を完全に理解できるように、アプリでは一般的なエンゲージメントフローを通じてユーザーをガイドします。ユーザーフレンドリーなインラインのヒントで始まり、関心のある話題や出版物を検索するようユーザーにうながします。

検索のアイコンをタップすると、自動でおすすめリストが表示され、このリストから選択します。ユーザーは、必ずしも自分が欲しいものを知っているわけではありません。そのため、最初にこの小さくも重要な機能があるおかげで、ユーザーはカテゴリー選択へとスムーズに移動できます。

また、オーバーレイのレイアウトによって、操作する際にどんなスワイプを使えばいいのか簡単に理解できます。フォローしたい関連出版物と合わせて興味のあるカテゴリーを選択すると、アカウント作成について知らせるオーバーレイが表示されます。これはFeedlyの優れた戦略です。コンテンツを保存することと、アカウントを作成することが、直接的に繋がっています。アカウントの作成方法についてもたくさんの選択肢があるので、さらに印象的です。

いくつかのメディアを追加すると、わたしのFeedlyのフィードはすぐにコンテンツで埋められました。これで準備完了です。Feedlyの優れたユーザーオンボーディングのおかげで、2分も掛からずにアプリの使い方を学ぶことができました。そして、既にコンテンツのカスタマイズも完了しているので、気兼ねなくアプリ体験を始められます。見事なUXデザインです。

まとめ

完全に同じアプリは2つとありません。つまり、ユーザーオンボーディングの方法に関して、決められた青写真は存在しないのです。SlackからFeedlyまで見てもらったように、ユーザーオンボーディングには多種多様な方法が存在します。しかし常に、絶対的なルールが1つ存在します。ユーザーを中心かつ最優先に考えましょう

ユーザーオンボーディングは、第一印象を良くして、有意義なものにするための、唯一の機会かも知れません。