on:2019年2月26日sponsorsWebサイトのログインに使用するパスワードをどのように管理していますか?私は1Passwordで管理していますが、他にもChromeのパスワードマネージャーやmacOSのキーチェーンなどを使用している人も多いと思います。そんなパスワードマネージャーとうまく連動するログインフォームを実装するためのポイントをまとめた記事を紹介します。Frost下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにログインフォームの避けるべき例ログインフォームの適した例はじめに日増しに、私はログインフォームでイライラすることに気がつきました。1Password(私が使用している)やChromeのパスワードマネージャー(これも私が使用している)のようなパスワードマネージャーが普及するにつれて、Webサイトはユーザーのログイン方法を認識することが重要になっています。いくつかのログインのパターンと、なぜそれが理想的ではないのか見てましょう。ログインに適した実装をするためのポイントも見てましょう。この記事が長すぎると感じる人のために簡単にまとめておきます。シンプルで、リンク可能で、予測可能なログインフォームを実装し、パスワードマネージャーとうまく連携するようにしてください。ログインフォームの避けるべき例これは私が避けるべきだと思うWebサイトで遭遇するログインフォームのパターンです。ログインをモーダルにしないHertzをはじめ多くのサイトで、ログインフォームをモーダルウィンドウやドローアに表示しています。ようにユーザーのステップが増える。ログインに直接リンクできないこれはサポート担当者にとっては厄介です(彼らは単にリンクを提供するのではなく、上記の一連の指示を与えなければならないからです)。モーダルは隠されているので、パスワードマネージャーの動作は阻止されます。Fill機能を持っています。この機能は、モーダルのログインフォームでは機能しません。Nameフィールドを隠しています。これは、情報を段階的にしてUIを整理することを目的としています。問題なのは、このフィールドが必須だということです。パスワードマネージャーは、非表示のフィールドには入力できません。このフィールドを埋めるためには、ユーザーは別のフィールドを埋める必要があります。この操作は、ユーザーがログインするために追加された不必要なものです。macOSのログイン画面でも、UIをクリーンにするために(TouchIDでログインすることを推奨していることだと思います)パスワードフィールドが隠されていますが、このクリーンさは(私の考えでは)より分かりにくい体験につながります。マジックリンクに固執しない私はこのパターンはSlackから始まったと思います。Notionのようなデジタルプロダクト(私は大好き)がユーザーにログインするためにメールに一時的なパスワードを送信します。このパターンは利点として評価することもできます。ユーザーがパスワードを覚える必要がなく、パスワードを忘れた場合のフローを必要としないからです。9.ログインフォームを送信する操作が多すぎ!パスワードマネージャーではまったく機能しません私はパスワードを管理するためにパスワードマネージャーに頼りたいので、このパターンは信じられないほど面倒です。デザインシステムの出現により、わたし達は一貫性について多くのことを話しました。それはあなた自身のエコシステム内に一貫性を生み出すことだけではなく、インターネットの他の部分と一貫性を保つことについてです。ユーザーに新しいルールを習得させるユーザーは、多くのアプリケーションで何度も何度も体験することで、パターン(ログイン、チェックアウト、ナビゲーションなど)を学びます。わたし達は決して革新するべきではないと言っていますが、ユーザーがあなたのプロダクトやサービスに来たことを認識することは重要です。わたし達が革新的すぎると、ユーザーは新しいルールを習得する必要があります。ログインを複数のページに分割しないShopify(私が大好きなもう1つのサービス)は、ログインを3つの別々の画面に分割しています。繰り返しになりますが、ここでもその意図を理解することができます。彼らは一度にあまりにも多くの情報でユーザーに過負荷をかけようとしていないのです。特定の状況(コマースで、配送情報やクレジットカードなどの情報を入力する場合)ではこのパターンに同意しますが、これは3つのフィールドで構成されたフォームにしてはやり過ぎです。繰り返しますが、これはフィールドが3つのフォームです。ユーザーはログインするために3つの画面を介してログインする必要があります。これにより間違いなく、ユーザーの速度は低下します。パスワードマネージャーは機能しないパスワードマネージャーは、ページ上の1つのフィールドにしか記入できません。ログインフォームの適した例これらを踏まえて、Webデザイナーは何をすべきでしょう?私は退屈で予測可能な古いタイプのログインフォームがちょうどいいと思います。Harvestのフォームは、こんな感じです。WordPressのフォームです。これらはシンプルで、簡潔で、そして予測可能なフォームで、パスワードマネージャーとも連携します。使いやすいフォームです。注目すべきポイントがいくつかあります。ログイン専用のページを用意するサポート担当者は、ページ上のどこにログインフォームがあるのか​​を説明する手間を省き、リンクを提供するだけで案内できます。パスワードマネージャーは、そのログインページを保存し、ボタンをクリックするだけでそのページを開いてフォームに入力することができます。すべての必須フィールドを表示するログインするために必須項目を入力する必要がある場合は、そのフィールドを表示してください。すべてのフィールドを1ページにまとめるログインは速やかなフローである必要があり、複数のページにまたがる退屈でつらい作業にしないでください。変わった方法を使わないマジックリンクや他の独創的なログインパターンに何か問題があるかもしれませんが、ユーザーがインターネットを介してログインする方法に慣れていることを認識することが重要です。退屈で予測可能な解決済みの方法に頼ってください。このリストはすべてを網羅しているわけではなく、ソーシャルのログインや2段階認証などについては触れていません。そのため、他の避けるべきパターンや注意すべき点について、あなたからもっと多くのことを聞きたいと思います。