ログインインターフェースの使いやすさとセキュリティのバランスをとる方法

ウェブデザイナーでもUIデザイナーでも、ログインページや登録ページのデザインは必ず経験しなければならない仕事です。ログイン インターフェースの設計は難しくも簡単でもありません。セキュリティと使いやすさのバランスを見つけるには、かなりの経験が必要です。今日の記事はGoSquaredチームからのものです。彼らはログインインターフェースのデザインに細心の注意を払っており、学ぶ価値があります〜

私たちは GoSquared のデザインの細部にまで細心の注意を払っています。ログインインターフェースは最近刷新され、新たに追加された二要素認証メカニズムにより、ユーザーアカウントのセキュリティが強化されました。同時に、この機会を利用して、ユーザーのログインエクスペリエンスも徐々に改善していきます。

ログイン インターフェースのユーザー エクスペリエンスを向上させることは、見た目ほど簡単ではありません。ログイン インターフェースをより美しく、直感的で、高速かつ使いやすくする一方で、ハッカーやその他の悪意のある人物が簡単に侵入できないほどプロセスを単純化しすぎないようにする必要もあります。

次に、今回の改訂で決定された内容を見てみましょう。改訂版の詳細を体験したい場合は、GoSquared アカウントを登録してログインしてください。

簡単で楽々

通常、ログイン インターフェイスを開くのは、ログイン フォーム自体を表示するためではなく、アカウントにログインするためです。フォーム自体は個人情報を取得するための手段にすぎず、目的ではありません。この観点から、ログイン エクスペリエンスは簡単で楽なものでなければならず、すべての設計では干渉を減らし、障害を取り除き、不要な操作を実行せずにログイン タスクをより簡単に完了できるようにする必要があります。

2 要素認証メカニズムが追加されたため、ログイン プロセスは以前よりもはるかに複雑になりました。メールアドレスとパスワードのみを必要とする従来のログイン方法と比較すると、現在のログイン方法は、ログインするかどうかを決定するための単純な 1 回の入力ではありません。新たに追加された手順により、ログインは、アカウントに 2 要素認証に関連する設定があるかどうか、およびユーザーがどの検証方法を選択するかを明確にする、複数の手順で構成される新しいプロセスになります。多くのプロセスには、代替デバイス/連絡先や緊急バックアップ コードの使用も含まれる必要があります。これらすべての要素を十分に考慮する必要がありますが、ログインの負担となり、ユーザーに疲れを感じさせることは許されません。

プレースホルダーとラベル

フォーム内のプレースホルダーの表示形式をどのように選択するかは非常に難しいことです。デザインの観点から見ると、プレースホルダーは優れています。しかし、特にアクセシビリティやフォームの自動入力に関しては、使いこなすのは簡単ではありません。 HTML を使用してプレースホルダーを実装すると、ユーザーが入力している間はプレースホルダーが消えてしまい、実際に入力したかった内容を忘れてしまうユーザーもいるかもしれません。さらに厄介なのは、ブラウザが前の情報を自動的に入力すると、プレースホルダーが表示されなくなることです。

これまで、フォームの内容が手動で入力されたか、自動的に入力されたかを検出することで、この問題をうまく回避してきました。内容がブラウザによって自動的に入力された場合は、入力内容を示すラベルが表示されます。手動で入力された場合は、ラベルは表示されません。しかし、その後、ユーザーは入力内容が正しいことを確認するために、送信前にラベルのリマインダーを表示することを好むことが分かりました。つまり、ユーザーは入力プロセス中にラベルが残ることを望んでいるということです。

そこで、私たちは最終的に、プレースホルダー ラベルとして別の要素を使用するという、洗練された解決策を思いつきました。ユーザーが入力すると、プレースホルダー ラベルは自動的に入力ボックスの外に移動します。

もちろん、モバイル デバイスではスペースが限られているため、プレースホルダー タグは次のように移動できます。

もちろん、これらすべてのデザインを完璧に実現するには、まだいくつかの興味深い課題を解決する必要があります。

厄介なセキュリティ機能

最初にコードを使用してこれらのラベルとプレースホルダーを制御したときは、それほど複雑ではありませんでした。フォーム内のコンテンツが変更されるたびに、そのコンテンツが検出され、コンテンツが空の場合はプレースホルダー ラベルがフォームに表示され、空でない場合は移動されます。ページが読み込まれた直後、システムはブラウザに自動入力コンテンツがあるかどうかを数回自動的に確認します。

しかし、それでもまだ問題は残っています。 Chrome ブラウザには、PasswordAutofillAgent::PasswordValueGatekeeper というセキュリティ機能があります。この機能の特別な点は、以前に保存したアカウントとパスワードのフィールドが、入力されているように見えても、フォームに直接入力されないことです (もちろん、ユーザーは通常、ブラウザにコンテンツを入力して送信してほしくありません)。ユーザーがページを操作したとき (つまり、コンテンツを送信するとき) のみ、ブラウザのフォームはコンテンツが入力されたことを検出できます。したがって、ブラウザの設計により、タグは次のように表示されます。

したがって、これらの問題をできるだけ回避するための主な解決策は、入力コンテンツが :-webkit-autofill セレクターと一致しているかどうか、および入力コンテンツが存在するかどうかを検出することです。見た目は良くありませんが、非常に効果的です。

より滑らかなインターフェース

各ステップの後にページをリダイレクトするのは、2008 年に Web デザイナーが行っていたことです。この設計は互換性が高く、より確実かもしれませんが、GoSquared のアプリはこの機能をサポートしなくなりました。

新しい GoSquared ログイン インターフェースは、流動性が高まり、動きがスムーズになり、状態が自然に切り替わるので、非常に魅力的です。

検証と推奨事項

前回の記事で述べたように、以前の設計では、間違ったログイン メール アドレスとユーザー名を入力するのが非常に簡単で、入力したパスワードまたはアカウントが間違っていることをシステムが送信するまで通知しませんでした。

Mailcheck などの電子メール名修正ツールを使用すると、ほとんどの電子メール アドレス入力エラーを修正できるため、ログイン入力エラー率が大幅に削減されます。このコンポーネントは以前のバージョンに追加されており、現在は新しいバージョンでも提供されています。

ログインボタンの復活

以前のバージョンを設計したとき、インターフェース内の他の重要でない要素を大幅に削減し、ログイン インターフェースには他の視覚要素のない 2 つの入力ボックスのみになりました。結局のところ、今日ではアカウントとパスワードを入力して Enter キーを押してログインするのが自然なので、ログイン ボタンがあることはあまり重要ではないようです。

しかし、実際のユーザー操作を観察すると、多くのユーザーは Enter キーをクリックするよりもボタンをクリックしてフォームを送信することを好むことがわかりました。これにより、新しいバージョンでログイン ボタンがようやく復活しました。

待ってください、なぜログインがこんなに遅いのですか?

「ログイン」ボタンをクリックした後、通常はログイン インターフェイスに入る前に数秒待ちます。多くの最適化を行った後でも、ユーザーが適切にログインできるようになるまで数秒待つ必要があります。実はこれにはセキュリティ上の理由があります。ユーザーがアカウントのパスワードを送信すると、バックエンド サーバーはパスワードが正しいことを確認するために膨大な計算を行う必要があります。ここでは具体的なメカニズムを詳しく説明することはできませんが、これはブルート フォースによるハッキングを防ぐために行われます。

もちろん、この遅いプロセスこそが、ユーザーがログインインターフェースの停止に直面することだけを望まない理由です。デザインを通じて視覚的なフィードバックを使用し、「フォームが送信されました。すべて正常です。入力するには少しお待ちください」とユーザーに伝える必要があります。

そこで、このステップに進行状況バーを追加して、ログインにかかる予想時間をユーザーに示すことで、ログインにかかる時間を明確に予測できるようにしました。ただし、時間ベースのプログレス バー自体は非常に退屈で、必ずしも正確ではないため、代わりに非常に微妙なアニメーションを使用することになりました。

結論

ユーザーエクスペリエンスと UI デザインは静的なものではなく、時間や地域の変化に応じて常に調整されます。 GoSquared ログイン インターフェースの改善が気に入っていただければ幸いです。また、私たちの改善プロセスが同業者にインスピレーションを与えることができれば幸いです。