ログインフォームは変わった方法で実装しないで！

Post on:2019年2月26日

はじめに

日増しに、私はログインフォームでイライラすることに気がつきました。1Password（私が使用している）やChromeのパスワードマネージャー（これも私が使用している）のようなパスワードマネージャーが普及するにつれて、Webサイトはユーザーのログイン方法を認識することが重要になっています。

いくつかのログインのパターンと、なぜそれが理想的ではないのか見てましょう。そして、ログインに適した実装をするためのポイントも見てましょう。

この記事が長すぎると感じる人のために簡単にまとめておきます。
シンプルで、リンク可能で、予測可能なログインフォームを実装し、パスワードマネージャーとうまく連携するようにしてください。

ログインフォームの避けるべき例

これは私が避けるべきだと思うWebサイトで遭遇するログインフォームのパターンです。

ログインをモーダルにしない

Hertzをはじめ多くのサイトで、ログインフォームをモーダルウィンドウやドローアに表示しています。このパターンにおける問題点は、

ユーザーに追加のステップ

ログインページに（検索、サポートチャット、ブックマーク、パスワードマネージャー、直接、ナビゲーション経由で）アクセスしてフォームに記入するのではなく、1.メニューボタンをクリック 2.ログインを選択 3.フォームに入力のようにユーザーのステップが増える。
ログインに直接リンクできない

これはサポート担当者にとっては厄介です（彼らは単にリンクを提供するのではなく、上記の一連の指示を与えなければならないからです）。また、モーダルは隠されているので、パスワードマネージャーの動作は阻止されます。1Passwordはサイトに訪問した際に、ログインフォームを埋めるOpen and Fill機能を持っています。しかしこの機能は、モーダルのログインフォームでは機能しません。

フィールドを隠さない

Deltaのサイトでは必須項目のLast Nameフィールドを隠しています。これは、情報を段階的にしてUIを整理することを目的としています。問題なのは、このフィールドが必須だということです。パスワードマネージャーは、非表示のフィールドには入力できません。このフィールドを埋めるためには、ユーザーは別のフィールドを埋める必要があります。この操作は、ユーザーがログインするために追加された不必要なものです。

macOSのログイン画面でも、UIをクリーンにするために（TouchIDでログインすることを推奨していることだと思います）パスワードフィールドが隠されていますが、このクリーンさは（私の考えでは）より分かりにくい体験につながります。

マジックリンクに固執しない

私はこのパターンはSlackから始まったと思います。Notionのようなデジタルプロダクト（私は大好き）がユーザーにログインするためにメールに一時的なパスワードを送信します。このパターンは利点として評価することもできます。なぜなら、ユーザーがパスワードを覚える必要がなく、パスワードを忘れた場合のフローを必要としないからです。
しかし、

このパターンは非常に面倒です

1.ログインフォームにメールアドレスを入力 2.新しいタブを開くか、メーラーを開く 3.受信トレイを見る 4.メールを探す 5.メールを開く 6.パスワードをコピーする 7.Webサイトに戻る 8.パスワードをペーストする 9.ログインフォームを送信する
操作が多すぎ！
パスワードマネージャーではまったく機能しません

私はパスワードを管理するためにパスワードマネージャーに頼りたいので、このパターンは信じられないほど面倒です。デザインシステムの出現により、わたし達は一貫性について多くのことを話しました。しかし、それはあなた自身のエコシステム内に一貫性を生み出すことだけではなく、インターネットの他の部分と一貫性を保つことについてです。
ユーザーに新しいルールを習得させる

ユーザーは、多くのアプリケーションで何度も何度も体験することで、パターン（ログイン、チェックアウト、ナビゲーションなど）を学びます。わたし達は決して革新するべきではないと言っていますが、ユーザーがあなたのプロダクトやサービスに来たことを認識することは重要です。わたし達が革新的すぎると、ユーザーは新しいルールを習得する必要があります。

ログインを複数のページに分割しない

Shopify（私が大好きなもう1つのサービス）は、ログインを3つの別々の画面に分割しています。繰り返しになりますが、ここでもその意図を理解することができます。彼らは一度にあまりにも多くの情報でユーザーに過負荷をかけようとしていないのです。

特定の状況（コマースで、配送情報やクレジットカードなどの情報を入力する場合）ではこのパターンに同意しますが、これは3つのフィールドで構成されたフォームにしてはやり過ぎです。

ログインに不要な手順を追加

繰り返しますが、これはフィールドが3つのフォームです。しかし、ユーザーはログインするために3つの画面を介してログインする必要があります。これにより間違いなく、ユーザーの速度は低下します。
パスワードマネージャーは機能しない

パスワードマネージャーは、ページ上の1つのフィールドにしか記入できません。

ログインフォームの適した例

これらを踏まえて、Webデザイナーは何をすべきでしょう？
私は退屈で予測可能な古いタイプのログインフォームがちょうどいいと思います。

Harvestのフォームは、こんな感じです。

そして、WordPressのフォームです。

これらはシンプルで、簡潔で、そして予測可能なフォームで、パスワードマネージャーとも連携します。使いやすいフォームです。
注目すべきポイントがいくつかあります。

ログイン専用のページを用意する

サポート担当者は、ページ上のどこにログインフォームがあるのかを説明する手間を省き、リンクを提供するだけで案内できます。パスワードマネージャーは、そのログインページを保存し、ボタンをクリックするだけでそのページを開いてフォームに入力することができます。
すべての必須フィールドを表示する

ログインするために必須項目を入力する必要がある場合は、そのフィールドを表示してください。
すべてのフィールドを1ページにまとめる

ログインは速やかなフローである必要があり、複数のページにまたがる退屈でつらい作業にしないでください。
変わった方法を使わない

マジックリンクや他の独創的なログインパターンに何か問題があるかもしれませんが、ユーザーがインターネットを介してログインする方法に慣れていることを認識することが重要です。退屈で予測可能な解決済みの方法に頼ってください。