Google アカウントでパスキーのユーザー エクスペリエンスを設計する

7月 26, 2023
Court Jacinic Senior UX Writer
Silvia Convento User Experience Researcher
Mitchell Galavan Interaction Designer

パスキーは、シンプルで安全なクロスデバイス認証テクノロジーであり、パスワードを入力せずにオンライン アカウントを作成してログインできるようにします。アカウントにログインするときは、指紋認証センサーに触れるなど、デバイスの画面ロックを使うことを求めるプロンプトがユーザーに表示されます。

Google は、パスキーを世界に提供するため、Apple や Microsoft とともに、長いこと FIDO アライアンスと連携してきました。2022 年には、AndroidChrome でパスキーのプラットフォーム サポートをロールアウトし、ユーザーがすべてのデバイスでアプリやウェブサイトにシームレスにログインできるようにしました。2023 年 5 月には、パスキーを使った Google アカウントへのログインを有効にし、パスキーのセキュリティと利便性を活用できるようにしました。

Google は、パスキーのインフラストラクチャに取り組んでいると同時に、パスキーを使う最大のサービスの 1 つでもあるため、ユニークな立場にあります。Google アカウントでのパスキーの展開は、慎重に注意深く進めています。結果を測定し、フィードバックを活用しながら、パスキーのインフラストラクチャと Google アカウントのエクスペリエンスを継続的に改善しています。

ユーザーをパスキーに移行する

パーソナライズされたオンライン エクスペリエンスが登場して以来、パスワードは標準的なログイン方法であり続けていますが、パスキーによるパスワードのないエクスペリエンスは、どのように導入すればよいのでしょうか?

調査によると、ユーザーが認証に関して最も重視しているのは利便性です。つまり、ユーザーはログイン後に初めて提供される実際のエクスペリエンスに、すばやくスムーズに移行したいと考えています。

それでも、パスキーに移行するには、条件反射的な動きを変え、切り替える価値があることをユーザーに確信してもらう必要があります。

google.com でのパスキーのユーザー エクスペリエンスは、認証プロセスのすべてのステップで、使いやすさとセキュリティという 2 つの原則を強調するように戦略的に設計されています。

利便性が最優先

signin
ほとんどのユーザーは、ここで初めてパスキーを目にする

ユーザーに表示される初めてのパスキー画面は、シンプルでわかりやすいものです。「ログインを簡単に」というユーザーのメリットを強調した見出しが表示されています。

本文には、「パスキーを使えば、指紋認証や顔認証、画面ロックで本人確認を行うことができます」と記載されています。

イラストは、このメッセージをページが提示する価値提案と結びつけています。大きな青い一次アクションは、ユーザーに続行することを促しています。「後で行う」は、ユーザーがここでオプトインするかどうかを選べるようにするための二次アクションで、ユーザーに選択肢を与えます。また、「詳細を見る」は、パスキーに興味があり、続行する前に詳しく知りたいユーザーのために用意されています。

ログイン時にパスキーを紹介するこのページについては、何度も繰り返し検討しました。セキュリティやテクノロジーなど、パスキーの特徴を強調したコンテンツも試しましたが、一番反響があったのが利便性でした。Google のコンテンツ戦略、イラスト、インタラクション デザインは、パスキーの実装におけるこの基本原則を表しています。

「パスキー」という用語を使い慣れたセキュリティ エクスペリエンスと結びつける

パスキーは、ほとんどのユーザーにとって新しい用語です。そこで、ユーザーに親しみを持ってもらえるよう、意図的に穏やかな方法でこの用語を示しています。また、社内調査に基づき、パスキーとセキュリティを戦略的に結びつけています。

「パスキー」という言葉は、ログインフロー全体を通してあまり目立たない形で本文の位置に登場します。また、慣れ親しんだセキュリティ エクスペリエンスの至る所に組み込まれており、そこでパスキーを使えます。たとえば、指紋や顔のスキャンといったデバイスの画面ロックなどです。

私たちの調査から、多くのユーザーが生体認証とセキュリティを結びつけていることがわかっています。パスキーでは生体認証は必須ではありませんが(たとえば、パスキーはデバイスの PIN と組み合わせて使うことができます)、パスキーと生体認証の結びつきを活用して、パスキーのセキュリティ上の利点に対するユーザーの認識を高めています。

「詳細を見る」から開ける追加コンテンツには、ユーザーにとって貴重な情報がたくさん含まれていますが、たとえば、機密性の高い生体認証データはユーザーの個人デバイスに留まり続け、パスキーの作成時や使用時に保存されたり共有されたりする心配はありません。このアプローチを採用したのは、ほとんどのユーザーがパスキーの利便性に魅力を感じたためです。テスト中に生体認証の要素を考慮したユーザーはごくわずかでした。

最も必要とするユーザーにパスキーを導入する

Google は、この導入画面を表示するユーザーを、経験則に基づいて慎重に決定しています。判断基準となるのは、ユーザーが 2 段階認証を有効にしているかどうか、同じデバイスから定期的にアカウントにアクセスしているかどうかなどです。

パスキーの恩恵を受けられる可能性が最も高いユーザーが最初に選択され、その後、期間をかけてさらに多くのユーザーに導入されます(ただし、g.co/passkeys を開けば、誰でもすぐに始めることができます)。

対象のユーザーがユーザー名とパスワードでログインすると、パスキーを作成することが促されます。このタイミングを選んだ理由はいくつかあります。

  • ログインした直後なので、ユーザーが認証情報や 2 段階の手順について認識している。
  • デバイスが確実にユーザーのそばにある。ログインした直後なので、デバイスから離れたり、デバイスを置いたりする可能性は低い。
  • 統計的に見れば、最初のログインが必ずしも成功するとは限らないので、次回のログインを簡単にするというメッセージには具体的な価値がある。

パスワードを置き換えるものではなく、パスワードの代替手段と位置づける

最初のユーザー調査で、バックアップ用のログイン手段として、多くのユーザーがパスワードを必要としていることがわかっています。また、すべてのユーザーがパスキーを採用するために必要なテクノロジーを持っているわけではありません。

つまり、Google を含む業界は「パスワードのない未来」に向かっていますが、Google はパスキーを意図的に、簡単で安全なパスワード代替手段と位置づけています。Google の UI はパスキーの利点をアピールするもので、パスワードをなくすことを示唆する表現は避けています。

作成の瞬間

ユーザーが登録することを選ぶと、ブラウザ固有の UI モーダルからパスキーを作成できます。

パスキー自体は、業界全体で統一されたアイコンや、作成に使われる情報とともに表示されます。これには、表示名(ユーザーの本名など、パスキーにつけるわかりやすい名前)とユーザー名(メールアドレスなど、サービスでの一意の名前)が含まれます。パスキー アイコンの使用について言えば、FIDO アライアンスは、実績のあるパスキー アイコンを使うことを推奨しています。また、カスタマイズして独自のものにすることも推奨しています。

パスキーを使ったり管理したりする画面に親しんでもらえるように、ユーザー ジャーニー全体に一貫してパスキー アイコンが表示されます。コンテキストやサポート資料なしにパスキー アイコンが表示されることはありません。

passkey2
ユーザーがパスキーを作成するとき、このページが表示される

ここまでで、ユーザーとプラットフォームがどのように連携してパスキーを作成するかについて簡単に説明しました。ユーザーが「続行」をクリックすると、プラットフォームによって異なる UI が表示されます。

その点を踏まえた社内調査から、パスキーを作成した後の確認画面は、プロセスのこの段階で理解を深めて処理を終える上で非常に役立つことがわかりました。

passkey3
パスキーが作成されると、ユーザーにこのページが表示される

確認画面は、意図的な「一時停止」画面として、ユーザーにパスキーを紹介する画面と、独自のパスキーを作成するプロセスを終える画面との間に配置しています。ユーザーはここで初めてパスキーに触れた(可能性が高い)ため、そのユーザー ジャーニーを明確に終わらせることがこのページの目的です。小さな通知や作成完了メールなど、他の手法も試しましたが、エンドツーエンドの構造化された安定したエクスペリエンスをスタンドアロン ページで提供する方法を選びました。

ここでユーザーが「続行」をクリックすると、目的の場所が開きます。

passkey4
ユーザーが再度ログインすると、このページが表示される可能性が高い

ログイン操作

ユーザーが次にログインしようとすると、このページが表示されます。同じレイアウト、イラスト、一次行動喚起によって、上記で説明した最初の「作成」操作を思い出してもらいます。ユーザーがパスキーに登録している場合、このページを見たことがあると感じるので、ログインに必要な手順を認識できます。

passkey5
ユーザーはこの WebAuthn UI を使用してログインする

ここでも、同じ親しみやすさの原則が当てはまります。同じアイコン、イラスト、レイアウト、テキストを使っているのは意図的です。WebAuthn UI のテキストは簡潔で目立ちやすく、再利用できるので、認証と再認証の両方で誰でも使うことができます。

パスキーの管理

Google アカウントの設定ページにまったく新しいページを導入するにあたっては、統一感があり、直感的で一貫したユーザー エクスペリエンスを慎重に検討する必要がありました。

これを実現するため、Google アカウント全体のナビゲーション、コンテンツ、階層、構造、そして確立された期待値のパターンを分析しました。

passkey6
Google アカウントのパスキー管理ページ

エコシステムごとにパスキーを表示する

論理的、概念的に理解できるカテゴリ システムを作るために、エコシステムごとにパスキーを表示することにしました。このようにすることで、パスキーがどこで作成され、どこで使われているかをユーザーが認識できるようになります。それぞれの ID プロバイダ(Google、Apple、Microsoft)にはそれぞれのエコシステムの名前があるため、それを使うことにしました(Google パスワード マネージャー、iCloud キーチェーン、Windows Hello)。

その補足として、作成日時、最終使用日時、使用した OS などのメタデータを追加しました。API がサポートするユーザー管理アクションは、名前の変更、失効、作成のみです。

名前を変更できるので、ユーザーは個人的に意味のある名前をパスキーに割り当てることができます。また、パスキーを追跡したり、詳しく把握したりしたい一部のユーザー群の利便性が向上します。

パスキーを失効させても、ユーザーの個人認証情報マネージャー(Google パスワード マネージャーなど)からは削除されませんが、再設定するまで利用できなくなります。そのため、パスキーを失効させるアクションは、ゴミ箱や削除のアイコンではなく、バツ印にしました。

自分のアカウントにパスキーを追加するアクションの表現では、「パスキーを追加する」よりも「パスキーを作成する」というフレーズの方がユーザーに共感を持たれました。これは、パスキーと有形のハードウェア セキュリティ キーを区別するための微妙な言葉の選択です(ただし、パスキーは一部のハードウェア セキュリティ キーに保存できることに注意してください)。

追加コンテンツの提供

社内調査から、パスキーはかなりシームレスで使いやすいものであることがわかりました。しかし、どんな新しいテクノロジーにも言えることですが、一部のユーザーは長いこと疑問や懸念を持ち続けます。

Google のパスキー ヘルプセンターのコンテンツでは、画面ロックの裏側でこのテクノロジーがどのように動作しているのか、安全性を高めているものは何か、そして Google がテスト中に遭遇した一般的な「もしも」のシナリオへの対処方法が説明されています。パスキーのリリースに合わせてサポート コンテンツを準備することは、あらゆるサイトのユーザーが簡単に移行できるようにするために不可欠なことです。

パスキーをフォールバックする方法

古いシステムに戻す場合は、ユーザーがパスキーで認証するように求められたときに「別の方法を試す」をクリックするだけで済みます。また、WebAuthn UI を終了した場合、ユーザーはパスキーで再試行することも、従来の方法で Google アカウントにログインすることもできます。

まとめ

パスキーはまだ初期段階であるため、ユーザー エクスペリエンスを設計する際には、いくつかの原則を念頭に置いてください。

  • 最も必要とするユーザーにパスキーを導入する
  • パスキーのメリットを強調する
  • できるだけ多くの場所で、パスキーの概念に親しんでもらえるようにする
  • パスワードを置き換えるものではなく、パスワードの代替手段として位置づける

Google アカウントにパスキーを導入する際に行った選択は、ベスト プラクティスと社内調査に基づいて行われたものです。現実世界のユーザーから得られる新しい知見を活用し、今後もユーザー エクスペリエンスを進化させていく予定です。