パスキー認証のUXガイドライン by FIDO を読む
私には夢がある。パスワード不要の世界を実現することだ。
夢の実現の希望は、パスワードの代わりに生体認証を用いてサイトにログインできるパスキー認証。2022年からOSが対応し、本格的に普及のフェイズに入っている。
パスキーの普及の加速に僅かでも貢献したい。新米エンジニアである私ができること... パスキー関連の情報を記事にして公開する、パスキー関連のOSSに貢献する、個人開発サイトでパスキーログインを実装する、とか...?
ということで、個人開発サイトやWebアプリにパスキー認証を導入するために、パスキー認証のUXを勉強する + それを記事にして公開する。
パスキー認証をサイトに導入する際のUX設計ガイドラインを、パスキーを策定したFIDOが公表している。
これを読んで要点をまとめる。
UX原則
1. パスキー作成への誘導はユーザーがアカウント関連の操作をしているときだけにする
主に既存サイトにパスキーを導入してユーザーに移行を促すときの話？
2. パスキーを身近な概念、ビジュアル、および経験に関連付ける
ほとんどのユーザーはパスキーを知らないので、「生体認証」など多くのユーザーが知る言葉での説明を表示する。
3. OSのダイアログをいきなり出すのではなく、アプリ上で同じようなダイアログをまず出す
パスキー作成開始 → アプリ「パスキーを作成します」→ OSのダイアログ「パスキー作成」→ ダイアログ「成功/失敗」→ アプリ「成功/失敗」というように、アプリ側の応答もちゃんと出す
Googleアカウントでパスキーを作成したときは確かにそうなっていた。
4. パスキー以外のログイン方法を用意。パスワードリセット時に代わりにパスキーを作成できるようにする
パスキーを強制するとユーザーが離れるかも
5. パスキーの使用によってアクセシビリティが下がらないように、アクセシビリティガイドラインに従う
これは追加で勉強がいる
- https://fidoalliance.org/white-paper-guidance-for-making-fido-deployments-accessible-to-users-with-disabilities/?lang=ja
- Web Content Accessibility Guidelines (WCAG).
6. パスキー操作をする時は常に、関連するパスキーの説明をヒーロープロンプトとして出るようにする
余談だが、UXでの「ヒーロー」という言葉自体を知らなかった。
Webサイトの中でも一番最初に目に付くエリアを「ヒーローエリア」と呼びます。
--- https://goworkship.com/magazine/hero-area/
7. パスキーの説明を、アカウント関連の操作をしようとする時に常に見えるところにおく
ホバーしないと見えない、クリックしてダイアログを出さないと見えないなどの状態にはしない。
8. パスキーをその他のログイン方法と同じ重要度の主要なログイン方法として扱う
9. パスキーをカードのような形で管理画面に出し、形のあるものとしてユーザーに認知されるようにする
文字、数字、記号の具体的な組み合わせであるパスワードとは異なり、パスキーは形がない。
そのため、パスキーがどこにあって、どういう操作ができるのか、ユーザーは自然には理解できない。
それが直感的にわかるように、画面上でパスキーをカードのように表示するなど、パスキーに形を与える
10. このガイドラインに厳密に従うだけでなく、独自のセキュリティとビジネスニーズに合わせてUXを計画する
具体例：ユーザージャーニー
UX原則を適用した良いユーザージャーニーの例が紹介されている。
実際のユーザーに使ってもらった調査結果などもあり、良いUXを作る上で参考になる。
ユーザージャーニー1: 新規アカウント作成
1. ログインしていない状態のホームページにある「サインイン または アカウント作成」ボタンからアカウント作成を開始
サインインとアカウント作成の入口を同じにする方が使いやすいらしい。
The research indicated that the action of creating an account was more discoverable on DigitalBiz when the sign-in and account creation options were combined, rather than surfacing the account creation option after people opted to sign in. In addition, some participants reported that occasionally they are uncertain whether they have an account, and a multipurpose button serves their needs.
調査の結果、デジタルビズでは、サインインを選択した後にアカウント作成オプションを表示するよりも、サインインとアカウント作成のオプションを組み合わせた方が、アカウント作成というアクションを発見しやすいことが示された。さらに、参加者の中には、自分がアカウントを持っているかどうかが不明な場合があり、多目的ボタンがそのニーズに応えているという報告もあった。
2. ユーザー名/メールアドレスなどの識別子を入力
ユーザーはまずユーザー名/メールアドレスのみを入力し「続行」ボタンをクリック。
ユーザー名/メールアドレスが登録済みならサインインに、登録済みでなければアカウント作成画面に進む。
確かにアカウントを持っていたかわからない時や、どのユーザー名/メールアドレスで登録したか忘れた時など、このUXの方が助かるケースが多いかも。
The research indicated that beginning both the sign-in and account creation processes with only a prompt to enter an email address (no password field) helped foster the perception that account creation and signing in with a passkey are simple and short processes that do not require passwords. This practice is sometimes referred to as an “identifier-first” approach or “home realm discovery.”
調査によると、サインインとアカウント作成の両プロセスを、メールアドレスの入力を促すプロンプト（パスワードフィールドなし）のみで始めることで、アカウント作成とパスキーによるサインインが、パスワードを必要としないシンプルで短いプロセスであるという認識が醸成されることが示された。このやり方は、"識別子優先 "アプローチまたは "ホーム領域発見 "と呼ばれることもある。
パスワードの入力がない分ワンステップ手間が少ないことを明確に示せるということか
3. メールアドレスを確認し、パスキー作成を開始する
ステップ2.のメールアドレス入力 → 「続行」押下でいきなりパスキー作成のダイアログを出さず、アドレスを確認して「パスキー作成開始」操作をする画面を挟む。
いきなりパスキー作成のダイアログが出ると、ユーザーは混乱してアカウント作成を中断してしまう可能性が高い。
The research indicated that being prompted to create an (unfamiliar) passkey instead of a password violated participants’ expectations about how account creation works. When testing early iterations of the account creation design, we discovered that moving directly from Step 2 (enter email to sign in or create an account) to the unfamiliar “Create a passkey” OS dialog (Step 4), while shorter, was disorienting for participants. It undermined their confidence that they were on the right path to create an account, and led some participants to abandon account creation prior to creating a passkey.
調査の結果、パスワードの代わりに（見慣れない）パスキーの作成を促されることは、アカウント作成の仕組みに関する参加者の期待に反することがわかった。初期のアカウント作成デザインをテストしたとき、ステップ2（サインインまたはアカウント作成のためにEメールを入力する）から、見慣れない「パスキーを作成する」OSダイアログ（ステップ4）に直接移動することは、時間は短いものの、参加者を混乱させることがわかりました。これは、アカウント作成への正しい道筋をたどっているという自信を失わせ、一部の参加者はパスキーを作成する前にアカウント作成を断念してしまった。
4. デバイスのパスキー作成ダイアログにより、パスキーを作成
ここはOSやブラウザが担うので、開発者がUXをコントロールできない。
5. パスキー作成が終了しログイン。アカウント設定画面に誘導するオーバーレイが表示され、気になる場合はすぐアカウント設定に進める
アカウント作成後、多くのユーザーは自分のアカウントや (よく知らない概念である) パスキーの状態が気になる。すぐにそれを確認できるように、アカウント設定に誘導すると良い。
また、パスキーでアカウントを作成した後、ユーザーはパスキーで使った生体認証が使えないデバイスでどうやってログインするが気になる。この不安を解消するためにも、アカウント設定に誘導すると良い。
The research indicated that when passkey creation ended with the OS dialogs only and people were returned to the DigitalBiz homepage in a signed-in state without account creation confirmation messaging from the RP, many participants expressed uncertainty about the status of their account and voiced questions about passkeys and how to access their new account.
調査によると、OSのダイアログのみでパスキーの作成が終了し、RPからのアカウント作成確認のメッセージなしにサインインした状態でDigitalBizのホームページに戻された場合、多くの参加者が自分のアカウントの状態について不安を表明し、パスキーや新しいアカウントへのアクセス方法について疑問を口にした。
6. アカウント設定でパスキー"カード"を表示
パスキーをカードなど形のあるものとして表示。
The research indicated that participants sought to understand the nature and value of passkeys, but vague or technical explanations often led to confusion and increased concerns. However, the passkey card afforded people an unmistakable object in the interface they can later see in their mind, find later in Account Settings, and use to get helpful information about the passkey.
調査によると、参加者はパスキーの性質と価値を理解しようとしているが、あいまいで専門的な説明はしばしば混乱を招き、不安を増大させる。しかし、パスキーカードはインターフェイスの中に紛れもないオブジェクトがあり、後でそれを見たり、アカウント設定で見つけたり、パスキーに関する有益な情報を得たりすることができる。
加えて、パスキーの説明を永続的に表示する。
The research indicated that people sought to understand the nature of passkeys and why they should use them, but technical explanations often led to confusion, increased concerns, and account creation abandonment. Brief messaging and iconography that compared passkeys to familiar technologies were most effective at providing the right level of information to reassure and give them the confidence to proceed.
調査によると、人々はパスキーの性質や、なぜパスキーを使う必要があるのかを理解しようとしているが、技術的な説明はしばしば混乱や懸念の増大、アカウント作成の放棄につながることがわかった。パスキーを身近な技術と比較した簡潔なメッセージングと図式は、人々を安心させ、次に進む自信を与える適切なレベルの情報を提供するのに最も効果的でした。
説明の例は以下。
Why should I use passkeys? - With passkeys, you don’t need to remember complex passwords.
What are passkeys? - Passkeys are encrypted digital keys you create using your fingerprint, face, or screen lock.
Where are passkeys saved? - Passkeys are saved in your password manager, so you can sign in on other devices.なぜパスキーを使う必要があるのですか？- パスキーを使えば、複雑なパスワードを覚える必要はありません。
パスキーとは何ですか？- パスキーは、指紋、顔、またはスクリーンロックを使用して作成する暗号化されたデジタルキーです。
パスキーはどこに保存されますか？- パスキーはパスワードマネージャーに保存されるので、他のデバイスでもサインインできます。
パスキーを無効にするオプションを提供し、パスキーを無効にした後にアカウントにアクセスする方法を説明する。
ユーザージャーニー2. パスワードリセットの代わりにパスキー作成でアカウントを回復
1 ~ 3. 「パスワードリセット」リンク押下 → アドレス入力 → パスワードリセットメールが送信される
ここまではよくあるパスワードリセットフローと同じ
4. メールのリンク押下で再認証画面に進む。再認証画面でパスキー作成が第一の方法として提示される
パスワードを忘れたという失敗、再設定という面倒な手順を経験したユーザーは、パスキーのメリットを実感する。パスキー作成を促すチャンス。
The research indicated that when people considered the new concept of passkeys while imagining the frustrating experience of resetting their password, they anticipated that a passkey not only serves their immediate need of regaining access to their account but will also help them avoid this frustrating and time-consuming password reset task in the future, which enhances their motivation and interest in the new concept of passkeys.
調査によると、パスワードの再設定という苛立たしい経験を想像しながらパスキーという新しいコンセプトを考えたとき、人々はパスキーが自分のアカウントへのアクセスを回復するという直接的なニーズに応えるだけでなく、将来的にこの苛立たしさと時間のかかるパスワード再設定作業を回避するのに役立つと予想し、パスキーという新しいコンセプトに対するモチベーションと興味を高めた。
一方で、すでにパスワードを使っているユーザーはパスワードでのログインを完全に放棄することに消極的。パスキー作成と同時にパスワードリセットも行わせると良い。
The research indicated that participants experiencing an account recovery scenario due to forgot password felt more reluctant to give up their password compared to the scenario of creating a new account, especially if they valued account access on other devices.
調査によると、パスワード忘れによるアカウント回復シナリオを経験した参加者は、新しいアカウントを作成するシナリオと比較して、パスワードを手放したくないと感じ、特に他のデバイスでのアカウントアクセスを重視している場合は、パスワードを手放したくないと感じることが示された。
5 ~ 6. パスキー作成 (またはパスワードリセット) → ログイン → アカウント設定画面に誘導するオーバーレイが表示され、気になる場合はすぐアカウント設定に進める
ここは新規アカウント作成の時と同様。
Discussion