認証とオンボーディング

ユーザーのオンボーディングと認証は、最も一般的なユーザー ジャーニーの 1 つであり、ユーザーが最も離脱しやすく、不満を感じやすい部分でもあります。ユーザーがアプリに抱く第一印象となるため、便利で信頼できるエクスペリエンスを提供し、好印象を与えることが重要です。ログイン、ユーザー登録、オンボーディング チュートリアルをデザインする際は、以下のガイダンスを参考にして、理想的なエクスペリエンスを作成してください。

要点

  • 優れたオンボーディング エクスペリエンスを作り出す。
  • ユーザーの信頼、親しみやすさ、利便性を高めるために、パスキーなどの利用可能なライブラリを使用する。
  • 重要なユーザー情報のみを収集する。
  • 明確でわかりやすい言葉を使用する。
  • 機能の価値と権限の理由を整理して説明する。

始める

  1. 収集: ユーザーが設定、学習、 承認する必要があることを考えます。

  2. アプリ内と事前: アプリの使用前に完了する必要があることと、アプリの使用中に完了する必要があることを分けます。ユーザーがアプリのコンテンツを使い始める際に、不便さを感じさせないようにします。コンテンツと操作をプロンプトとして表示する方がよいか、教育的な要素として表示する方がよいかを検討します。

  3. コンテキスト内の要素については、説明と操作(該当する場合)を提供します。

  4. アプリを使用する前に完了することが重要な手順や教育については、論理的な手順に整理します。通常、デバイスの権限をリクエストしたり、アカウントを作成したりする前に、アプリの価値を示す必要があります。価値提案の後に必ず操作を続けます。

  5. アプリで何らかのアカウントが必要な場合は、認証方法を決定します。パスキーを使用すると、ユーザーのアカウント管理に関する懸念や不便さを軽減できます。

  6. 復元方法を提供します。

  7. ユーザーの進行状況を表示します。ステッパー、ページャー、進行状況インジケーターなどのコンポーネントを使用できます。

ユーザー ジャーニー

優れたオンボーディングは達成感を生み出し、明確な個性があります。ユーザーがアプリのブランドやコンセプトに触れながら、エクスペリエンスの設定、権限の付与、進行状況の確認を、明確な案内パターンに沿って行えるようにします。

エントリ ポイントの配置

[ウェルカム配置] では、ユーザー教育とアプリの設定がすべて事前に読み込まれます。 この方法は、コンテンツにアクセスするためにユーザー登録が必要なアプリ、コンテンツのプレビューができないアプリ、コンテキスト内学習が適していないアプリに最適です。主なメリットは、ユーザーがアプリの使い方をすぐに把握し、より早くフルアクセスできるようになることです。ただし、アプリを体験する前にユーザーが離脱するリスクが高くなるという大きなデメリットがあります。このデメリットは、次の画像に示すように、コンテンツの初期認識を提供することで軽減できます。

モバイル オンボーディング UX の概要。

[コンテキスト]、つまりアプリ内のジャストインタイムのオンボーディングでは、コンテンツの認識、登録、学習に関して 柔軟性が高まります。権限のプライミングなどのパターンが可能になります。このパターンでは、必要なときにリクエストが行われます。この方法は、プレビューを提供して登録を促したい場合や、登録と教育をより小さく、覚えやすく、管理しやすいステップに分割したい場合に最適です。また、ユーザーは実践しながら学習できるため、定着率が高くなります。

アプリ内オンボーディングの 2 つのパターン。

登録 / サインアップ

登録またはサインアップ フローは、ユーザーがアプリのアカウントを作成するのに役立ちます。アプリを使用するためにユーザーを事前に登録する必要があるかどうか、または特定のレベルのコンテンツや機能にアクセスできるかどうかを検討します。

登録フローを最適化するには、メールアドレスやパスワードなど、事前に必要な最小限の情報のみを収集するか、手順を組み合わせて不便さを軽減します。 確認用のユーザー名など、必要なプロパティのみをキャプチャすることで、ユーザーが選択肢に戸惑うのを防ぎます。長いプロセスは複数の画面に分割しますが、1 画面に 1 つの入力のみにするのは避けてください。パスワードの要件が明確で論理的であることを確認します。

ログイン / サインイン

再訪ユーザーは、アカウントに再度ログインする方法が必要です。ログインは迅速かつ目立たないようにする必要があります。アプリでアカウントの認証のみが必要な場合は、シングル サインオン方式で登録とログインを組み合わせることを検討してください。

メールアドレスやパスキーなどのログイン オプション。

効果的なログイン ジャーニーでは、最新の認証パターンを実装してユーザーの利便性を優先する必要があります。これには、生体認証プロンプトと自動入力機能を提供して、ユーザーに必要な認知負荷と手動入力を軽減することが含まれます。

パスキーを使用して、ユーザーがより速くログインできるようにします。

オンボーディング チュートリアルとカスタマイズ

完全なチュートリアルを実装する前に、アプリで本当に必要かどうかを慎重に評価してください。多くの場合、複雑な機能は、ユーザーの最初のフローを中断しない微妙なモーション キューやコンテキスト内ツールチップを通じて、より自然に導入できます。

デバイスの権限が必要な場合は、「権限のプライミング」を使用して、リクエストされたアクセスの価値を説明します。これは、アプリ エクスペリエンスの開始時に一括リクエストとして行うのではなく、必要なときに実行するのが最も効果的です。

アプリに権限が必要な理由をユーザーに知らせます。

アプリで特定の権限が必要な場合は、必要なときにその理由を説明します。
アプリに意味がない権限や、説明できない権限をリクエストしないでください。

サインアップを促すためにアプリの機能を宣伝する場合は、一連の静的なインタースティシャル スライドよりも実際のコンテンツのプレビューの方が説得力があるかどうかを検討してください。チュートリアルを使用する場合は、スキップまたはすぐにログインできる明確で永続的なオプションを必ず用意してください。

進行状況のキャッシュなど、スキップして後で再開する方法を提供します。保存する方法を提供するとチェックポイントが作成されるため、ユーザーは完全に離脱するのではなく、中断したところから再開する可能性が高くなります。ユーザーに安心してもらうために、進行状況がどうなるかを常に明確に伝えます。

ユーザーが長いオンボーディング手順をスキップできるようにします。

ステッパーと進行状況インジケーターを使用した視覚的な案内は、ユーザーの期待値を設定するのに役立ちます。これらの要素は、残りのステップ数を明確に示し、オンボーディングや設定プロセスが長くなる際の離脱率を低減します。

進行状況には一般的なパターンを使用します。たとえば、ステッパーや進行状況インジケーターなどです。
装飾や他の操作と混同される可能性のある進行状況の表示は避けてください。たとえば、ステップごとに変化するイラストは、美観は損なわれませんが、進行状況の表示としてはわかりにくい場合があります。

復元

復元フローは、ユーザーのプライバシーに配慮して設計する必要があります。アカウント フローでは、常にハッピー パスを想定しないでください。ユーザーが不満を感じることなくエラーを修正できる明確なパスを確保してください。

アクセスしやすい場所に [**パスワードを忘れた場合**] などの復元方法を提供します。
不便さを増やしたり、復元オプションを非表示にしたりしないでください。

アプリで特定のユーザー名が必要な場合は、ユーザー名が思い出せない場合や簡単に再設定できる方法を提供します。

パスワードの詳細など、アカウントの要件を提供します。
ユーザーにパスワードの要件を推測させないでください。

メールアドレスなどの特定のフィールドを事前入力すると、登録時に便利ですが、パスワードなどの機密情報は、取得または再設定プロセスで事前入力しないでください。公共の場でユーザーのプライバシーを保護するため、機密性の高い入力は常にデフォルトでマスクしてください。

SSO / パスキー

パスキーやシングル サインオン (SSO)プロバイダなどの確立されたライブラリと統合することで、信頼性が高まり、シームレスで使い慣れたエクスペリエンスを提供できます。これらのシステムにより、ユーザーは既存のセキュリティ ハードウェアと認証情報を使用して、アプリにスムーズにアクセスできます。

レイアウトとコンポーネント

認証フォームをデザインする際は、[名] フィールドと [姓] フィールドを近くに配置するなど、同様のエントリと関連するエントリをグループ化して包含を利用することが重要です。これにより、リフロー可能な柔軟なレイアウトをデザインできます。

アダプティブ レイアウトのレイアウトでコンテインメントを使用します。

長いスクロール フォームを作成しないでください。ユーザーの不満の大きな原因となります。

入力フィールドを含める前に、その情報が本当に必要かどうかを慎重に評価してください。ユーザーが誤って長いフォームから戻ってしまった場合、詳細な情報を再入力する必要があると、離脱率が高くなる可能性があります。

長いオンボーディングを小さなステップに分割します。
ステップや入力が多すぎてユーザーを困惑させないでください。

展開後のレイアウト

レイアウトを拡大表示または横向き表示に対応させる場合は、ユーザー インターフェースの使いやすさと美しさを維持する必要があります。特に、ボタンなどのインタラクティブなコンポーネントを画面幅全体に拡大しないでください。不自然に見え、使いやすさが低下する可能性があります。

代わりに、包含の原則を引き続き使用し、フォーム要素とコンテンツ ブロックの最大幅を適切に設定して、大きなディスプレイでも読みやすさと視覚的なバランスを維持します。

ボタンや入力が画面全体に拡大されるようにしないでください。

ユーザー教育コンポーネント

ユーザーに新機能やオンボーディングを紹介する際に使用できるコンポーネントが複数あります。リッチなツールチップとダイアログは、アプリ内の機能の発見をハイライト表示し、ユーザーに教育するのに役立ちます。シートは、オンボーディング コンテンツと教育コンテンツを表示するためのインタースティシャル状態を提供できます。

機能の検出には、ツールチップ、ボトムシート、ダイアログを使用します。

その他の端末形式

オンボーディングには、フォーム ファクタをまたいでのデバイスの引き継ぎや、アプリの拡張使用が含まれる場合があります。

モバイルアプリ エクスペリエンスでは、認証をより人間工学的に管理できるため、オンボーディングは他のフォーム ファクタから行うことができます。たとえば、ユーザーは Google TV アプリで開始したログインをモバイル デバイスで完了できます。

アプリに AI グラスや Wear OS などの他のフォーム ファクタでの拡張アクティビティがある場合は、ユーザーをオンボーディングするための検出プロンプトとユーザー教育を提供します。 AI グラスのオンボーディング エクスペリエンスのデザインの詳細

UX ライティング

スナックバーやトーストなどの目立たないフィードバック メカニズムを使用して、ユーザー アクションを確認したり、簡単なステータス更新を提供したりします。これにより、ユーザーはシステムの状態を把握でき、軽微なフィードバックのためにモーダル ダイアログを閉じる必要がなくなります。

トーン

エラー発生時の文章のトーンは非常に重要です。ユーザーを嘲笑したり、不満を感じさせたりする言葉は避けてください。特にパスワードの復元など、ストレスの高い状況では、間違いではなく解決策に焦点を当てた、明確でわかりやすく、励みになるコピーを使用してください。

リソース

オンボーディング テンプレート、ユーザーフロー、ユーザー教育アセットについては、 Android Onboarding Figma Kit をご覧ください。