モバイルのログインと登録の設計：アカウントの手順を分かりやすく

アカウントが役立つタイミングを選ぶ

まず、利用者が何をしに来たかを考えます。主要な体験をアカウントなしで使えるなら、先に探索できるようにし、保存した設定、端末間のアクセス、共同作業、取引が必要な機能に到達したときにログインを求めましょう。AppleのHuman Interface Guidelinesは、可能ならログインを遅らせ、アカウントが必要な場合はメリットを説明するよう勧めています。

文脈に沿った依頼は、起動時に現れる壁より理解しやすいものです。例えば読書アプリなら、まず本を閲覧できるようにし、読書リストの同期を選んだときにアカウント作成を求められます。最初からアカウントが不可欠なら、入力欄を示す前に理由を伝えましょう。説明は具体的で、必要な長さにします。「コミュニティに参加する」より、「アカウントを作成するとプロジェクトを保存し、別の端末でも開けます」のほうが役立ちます。

• 必須情報と任意のプロフィール情報を分ける。
• ゲスト購入や一度きりのタスクでは、目先の価値を届けた後までアカウント作成を待てないか考える。
• 認証に成功したら、利用者が完了しようとしていた操作に戻す。

ログインの選択肢を明確で分かりやすくする

利用者は、アカウントを作成しているのか、既存のアカウントに戻るのかを見分けられるべきです。二つの経路に異なるラベルを付け、主要操作を視覚的に明確にし、画面を圧迫せず比較できる位置に別の方法を置きます。必要に応じて提供者名とプラットフォームで承認されたボタンの表現を使いましょう。「続ける」だけでは次に何が起こるか分かりません。

プロダクトが対応・維持できる方法だけを提示します。メール、パスキー、プラットフォームのID機能は、それぞれ異なる利用者に合う場合があります。いずれか一つが普遍的に最も簡単・安全だと主張するのではなく、選択肢として示しましょう。追加で必要な情報も説明します。

再訪者は以前のログイン方法を覚えていないことがあります。復旧と別のログイン方法を見つけやすくし、メールアドレスが別の方法に関連付けられている場合にどうすべきか説明しましょう。アカウント連携の案内は、既存のアカウントへのアクセスを保つ助けになります。

フォームを簡潔にし、利用者のツールと連携させる

アカウントの作成やアクセスに必要な項目だけを求めます。プレースホルダーだけをラベルの代わりにせず、常に見えるラベルを使い、適切な入力形式とキーボードを選び、次の操作を明確にします。登録に複数の情報が必要なら、関連する欄をまとめ、任意の設定は利用者がプロダクトに入った後まで延期します。

認証では自動入力とパスワード管理ツールが使えるべきです。標準的な入力欄の名前と意味付けを使い、認証情報の入力を妨げる独自動作を避けます。パスワードの貼り付けを禁止してはいけません。利用者はパスワード管理ツールなどを使う場合があります。WCAGのガイドは、ブラウザや第三者のパスワード管理ツールがログイン欄を埋められるようにすることに言及しています。

動作は端末やパスワード管理ツールによって異なるため、対応プラットフォームでフローを確認し、手動で修正できるようにします。ログインに失敗した後も、実用上可能なら、メールアドレスのような機密性の低い有用な入力を保ちましょう。

• 「メールアドレス」のような見えるラベルと、明確なパスワードのラベルを使う。
• 適切な場合はパスワードを表示して確認できるようにし、ただし修正する唯一の手段にはしない。
• 主要ボタンを入力欄の近くに置き、「アカウントを作成」「ログイン」のように操作を表すラベルを付ける。

間違い、復旧、次回の訪問を想定して設計する

役立つエラーは、対象の入力欄や失敗した手順をテキストで特定し、続け方を伝えます。メールの形式が無効だったり欄が空だったりするときに、「問題が発生しました」だけでは不十分です。WCAG 2.2達成基準3.3.1は、検出した入力エラーを特定し、テキストで説明することを求めています。色やアイコンだけに意味を担わせてはいけません。

中立的な言葉を使い、入力欄固有の説明はその近くに置きます。例えば形式が正しくないメールアドレスの仮想的な文言なら、「[email protected]の形式でメールアドレスを入力してください」とできます。ログインに失敗した場合は、「この情報ではログインできませんでした。メールアドレスとパスワードを確認するか、パスワードを再設定してください」と示せます。エラーメッセージで機密性の高いアカウント情報を明かさず、プロダクトのプライバシー保護と悪用防止の要件に合う表現を選びましょう。

再設定を依頼した後に何が起こるかを説明し、ログインへ戻る方法と、以前使った方法を見つける手段を用意します。次回の訪問時にはログイン済みの状態を明確に示し、アカウント設定、ログアウト、ヘルプへの経路を用意します。アプリ内でアカウントを作成できるなら、削除方法も見つけやすくしてください。

• エラーを対象の入力欄に関連付け、色だけに頼らず知覚できるようにする。
• 復旧操作をログインフォームの近くに置き、不要なやり直しを避ける。
• メールアドレスの変更や使えないログイン方法も含め、初回利用者と再訪者の両方の状態を確認する。

実践的なアカウントフローのレビュー

新規利用者、再訪者、アクセスを復旧する人としてフローをたどります。画面を文脈の中で確認しましょう。モバイルパターンのライブラリは、フォームによる入力欄、ラベル、操作の整理方法を比較するのに役立ちます。

• アカウントが不可欠でない場合、ログイン前にプロダクトの価値を体験できるか。
• 画面にはアカウントが必要な理由と必須情報が示されているか。
• 登録、ログイン、別の方法、アカウントの復旧を区別できるか。
• 入力欄のラベルは見えたままで、自動入力と貼り付けで認証情報を入れられるか。
• エラーは問題をテキストで示し、有用な入力を保ち、次の一歩を提案するか。
• 成功後、利用者は元のタスクに戻れるか。