デザイン原則

同期パスキーには、10 の設計原則と 3 つのコンテンツ原則があります。エンドユーザーエクスペリエンスを使いやすくするために、チームに原則をよく理解してもらいます。

UXの原則

FIDO Alliance design guidelines for passkeys principle 1 prompt to create passkeys alongside account related tasks

アカウント作成、アカウント回復、アカウント設定の一部など、人々がすでにアカウント管理を意識している場合、パスキーを作成するオプションは、ショッピングなど、サイトの他の主要なタスクを達成するための歓迎されない中断や障壁ではなく、サイト体験に関連する強化として認識される可能性が高くなります。 サインイン時にパスキーの作成を促すプロンプトは、あまりうまく機能しなかった。

FIDO Alliance design guidelines for passkeys principle 2 associate the unfamiliar passkeys with the familiar

2.見慣れないもの(パスキー)と見慣れたものを結びつける。

パスキー は、新しい用語、新しい視覚的なシンボル、そして消費者にとっての新しい認証方法です。 可能な限り、身近な概念、視覚、経験と関連付けることで、パスキーの性質と価値を理解させる。 例えば、バイオメトリックの経験はよく知られている。

FIDO Alliance design guidelines for passkeys principle 3 use proven passkeys messaging and icons before and after os dialogs

3.OSのダイアログの前後に、実績のあるパスキーのメッセージとアイコンを使用する。

passkeys OSダイアログを起動する前に、現在のタスクのステータスに関連するpasskeysメッセージ、アイコン、アクションを表示します。 passkeys OSのダイアログが完了または終了したら、メッセージとアイコンを使ってタスクのステータスを表示します。 これは、依拠当事者(RP)のウェブサイトとOSのダイアログ間の「ハンドシェイク」を提供し、OSとRPがどのように協力してパスキーによるアカウントアクセスとセキュリティを最適化しているかを明確にすることで、パスキーという新しい概念に対する人々の信頼と関心を高めるのに役立ちます。

FIDO Alliance design guidelines for passkeys principle 4 allow freedom and choice related to passkeys

消費者が自分の体験をコントロールし続け、ブランドへの信頼を高めるためには、パスキーの作成と管理に関する明確なオプションを提供すること。 パスキーの有無にかかわらず、アカウントの作成を許可する。 パスワードリセット時に新しいパスワードを作成できるようにするか、代わりにパスキーを作成する。

FIDO Alliance design guidelines for passkeys principle 5 follow accessibility principles before and after the use of passkeys

5.パスキー使用前後は、アクセシビリティの原則に従うこと。

パスキー は、ユーザーが認識できる方法で提示され、支援技術を使用して操作でき、パスキーを使用した移動中のワークフロー全体でさまざまな機能的ニーズを持つユーザーが理解できる場合に、最もアクセスしやすくなります。 「Guidance for Making FIDO Deployments Accessible to People with Disabilities」や、その基盤となる Web Content Accessibility Guidelines (WCAG) などのアクセシビリティガイドラインに準拠します。

FIDO Alliance design guidelines for passkeys principle 6 use a passkey hero prompt consistently across the customer journey

6.カスタマージャーニー全体で一貫してパスキー・ヒーロー・プロンプトを使用する。

特定のシンボル、見出し、メッセージ、行動喚起を含むパスキーの「ヒーロー」を作成する。 カスタマージャーニーにおけるアカウントに関連する場面で、ヒーローコンテンツを一貫してフル活用する。 例えば、”Create passkey “ボタンのみを使用するのに対して、完全なヒーローを使用する。

FIDO Alliance design guidelines for passkeys principle 7 persist helpful information about passkeys

7.パスキーに関する有益な情報を持続する。

パスキーに関する有益な情報を、追加クリックを必要とせずに、ヒューマンインターフェースに残す。 例えば、パスキーが作成された後でも、アカウント設定のヒーローメッセージングでパスキーの「what」と「where」のメッセージを保持します。 デフォルトでテキストを表示し、余分なクリックの下に非表示にしない。 パスキーを無効にする選択肢は与えられるべきですが、パスキーなしでどのようにサインインするのか理解できないかもしれないので、”Disable passkeys “リンクの横に、パスキーを無効にするとどのようなことができるのか短い説明を置いてください。 この説明をヒューマン・インターフェイスに残す。 例えば、カーソルを合わせたときにだけ表示されるツールチップには、この情報を書かないでください。

FIDO Alliance design guidelines for passkeys principle 8 make passkeys a primary option in account settings

8.パスキーをアカウント設定の主要オプションにする。

パスキーの表示とインタラクションモデルを、個人のアカウント設定内のユーザ名、パスワード、2FAなどの他の認証項目と一致させる。 たとえば、[アカウント設定] 内の他のサインイン オプションに H2 見出しのラベルが付いている場合は、”パスキー” にも H2 見出しのラベルを付けます。

FIDO Alliance design guidelines for passkeys principle 9 display passkeys cards with meaningful content to give shape to passkeys

9.パスキーを形にするために、意味のある内容の「パスキーカード」を展示する。

文字、数字、記号の目に見える組み合わせであるパスワードとは異なり、デジタル・パスキーは人の目にほとんど触れない。 アカウント設定にパスキーカードのアフォーダンスが表示されます。 カードの内側には、パスキーのアイコン、メッセージ、オプションがあり、信頼を呼び起こし、パスキーが有効で、利用可能で、管理可能であることを安心させる。 もし誰かが2つ以上のパスキーを持っている場合、それぞれのパスキーはそれぞれのカードを持っている。

FIDO Alliance design guidelines for passkeys principle 10 plan your ux in accord with your unique security and business needs

10.独自のセキュリティとビジネスのニーズに合わせてUXを計画する。

このガイドラインは、 同期パスキーを使用したFIDOに固有のUX概念に焦点を当てています。 この作品を通して、さまざまな形の身元証明や非FIDO認証の例を目にするだろう。 ID プルーフィングまたはその他の非 FIDO 認証メカニズムについては、各 RP に固有であり、各 RP 独自のビジネス・ニーズとセキュリティ・ポリシーに基づいているため、本ガイドラ インは、セキュリティ・ガイドラインを規定するものではない。 ガイドライン全体を通して、この記号 [ i ] を探してください。


コンテンツの原則

UXの原則は、コンテンツデザインと戦略にどのように適用されるのか? パスキー・コンテンツの指針となる3つの原則をご紹介します。 また、私たちが調査で使用した言葉を示した推奨事項も掲載した。 私たちがテストした内容をそのままお借りすることもできますし、御社のスタイルや声、トーンに合わせてアレンジすることもできます。

1.パスキーの言葉と、彼らが知っている言葉をペアにする。

パスキー は、多くのユーザーにとって新しい概念です。 パスキーがすでに使用している他の方法とどのように関連しているかを示すことで、この新しいサインイン方法の価値を理解させる。 たとえば、「パスキーを使用すると、複雑なパスワードを覚える必要がなくなります」や「パスキー は、指紋、顔、またはパスコードを使用して作成する暗号化されたデジタルキーです」などです。

2.OSのダイアログの前後に明確な「ハンドシェイク」メッセージを使用する。

OSのダイアログの前に「アカウントの作成」または「パスキーの作成」という明確なメッセージを表示し、OSのダイアログの後に確認または成功のメッセージを表示することで、ユーザがOSのパスキー体験に自信を持てるようにします。 これによってユーザーは、御社がOSと手を携えてパスキーでアカウントを保護しているという安心感を得ることができる。

3.カスタマージャーニー全体でパスキーメッセージングを使用する。

アカウントの作成、回復、設定など、カスタマージャーニーにおけるアカウントに関連する場面でパスキーを試すようユーザーを促すために、エクスペリエンスやインターフェースの複数の領域でパスキーのプロンプトと情報を使用します。 これは、明確にラベル付けされた “create passkey “ボタンから、詳細な “why”(なぜ)、”what”(何を)、”where”(どこで)パスキーのメッセージングまで多岐にわたります。

アカウントの作成例のコンテンツ

FIDO Alliance ux guidelines for passkeys handshake
アカウント作成中に OS ダイアログの前後に使用された “ハンドシェイク” メッセージのスクリーンショット。
これらの画面用のコピー可能なコンテンツと再利用可能なデザインアセットは、 FIDO アライアンス Figma UIキットで利用できます。

パスワードを忘れたため、アカウントの回復中にパスキーを作成します

FIDO Alliance ux guidelines for passkeys account recovery content
アカウント回復コンテンツのスクリーンショット。
これらの画面用のコピー可能なコンテンツと再利用可能なデザインアセットは、 FIDO アライアンス Figma UIキットで利用できます。

アカウント設定

FIDO Alliance ux guidelines for passkeys account settings with and without passkeys
パスキーありとパスキーなしのアカウント設定のスクリーンショット。
これらの画面用のコピー可能なコンテンツと再利用可能なデザインアセットは、 FIDO アライアンス Figma UIキットで利用できます。