パスワードフィールドのユーザビリティを改善する方法

ログインフィールドやアプリケーションのフォームにサインアップする場合は、パスワードフィールドが必要です.
フィールドのこれらのタイプとして一般的に、彼らは低設計時に対話するイライラすることができます.
私は最近、私の仕事で我々のアプリの1つにログインページの使いやすさを改善することを求められました.
ユーザーフレンドリーな方法でこれらのコンポーネントを実装する方法の詳細については、私はいくつかの時間の研究を費やした.
私の研究から、開発チームが我々のアプリ生態系を通して実装したMockupsのセットを作成しました.
この記事では、私はパスワードフィールドに私の研究から学んだすべてをまとめている.
この記事を読んで、あなたがそれから学ぶものを適用することにより、劇的に自分のデザインのパスワードフィールドのユーザビリティを向上させます.

パスワードフィールドのコンポーネント

パスワードフィールドを構成するコンポーネントを見てみましょう.
ほとんどのフォームフィールドと同様に、パスワードフィールドは次のようになります.

フィールド-パスワードを記述するラベル.

ユーザーがパスワードを入力する入力フィールド自体.

また、

パスワードを確認します-パスワードフィールドの正確な複製.2回あなたのパスワードを入力することにより、正しいパスワードを入力したことを確認されますし、それを忘れる可能性が低いです.Read this article to learn about why this field must die .

パスワードのヒント+ツールチップ-あなたがサインアップ画面にしている場合は、パスワードフィールドには、特定の要件を持って、ツールチップまたは情報パネルが表示されますので、ユーザーがこの情報を表示することができます.

検証-パスワードが誤って入力された場合、パスワードフィールドの横に妥当性検査メッセージが表示されます.また、アイコンが表示される可能性があります入力自体が問題のあることを示すために色で赤くなる必要があります.

忘れられたパスワードのリンク-これはパスワードフィールド自体にリンクされていないが、忘れられたパスワードのリンクは通常、ユーザーが自分のパスワードをリセットすることができますので、このフィールドの隣に位置しています.

どのようなパスワードのマスキングですか？

あなたがパスワードフィールドの世界にいくつかの研究を行った場合は、おそらく用語のパスワードマスキング全体に来る可能性があります.
パスワードのマスキングは、パスワードフィールドに入力するパスワードは、';マスクされているか、または箇条書きのポイントまたはアスタリスクの後ろに隠されています.
これはパスワードフィールド全体でかなり一般的な練習です.実際には、HTMLでパスワード入力タイプを使用する場合はデフォルトで行います.

<input type="password" id="pwd" name="pwd">

入力するとき、マスキングパスワードはあなたの保安を確実にします.それはあなたのパスワードでのぞき見から任意の'肩'スパイを防止します.
パスワードのマスキングに利点がありますが、いくつかのユーザビリティの問題も発生することができます.次のセクションでこの方法について説明します.

パスワードフィールドのユーザビリティの改善

パスワードがマスクされるとき、ユーザはタイプされていることを見ることができません.
ログインとしてあなたのパスワードを見ることができない場合は、あなたのパスワードが間違っているが、それが正しいと確信していると言われているときにイライラされます.
フラストレーションは、このパスワードをマスクに起因する場合は、将来的に簡単なパスワードを選択することがあります.これはタイプがより簡単かもしれません、しかし、長い目で見れば、それは非常により安全です.
それでは、このパスワードマスキングテクニックを使用するパスワードフィールドのユーザビリティをどのように改善するのですか?
答えは:私たちは、ユーザーがパスワードの可視性を切り替えることができます.
ユーザーが彼らのパスワードの可視性を制御するならば、彼らはそれを正しくタイプしたことを簡単にチェックすることができます.
これはまた、ユーザーがそれを期待する方法を動作するため、アプリケーションを使用してのユーザーの全体的な経験を向上させます.
さらに、これはまた、確認パスワードフィールドの必要性を削除します.このコンポーネントを削除するとUIを簡素化し、複雑さを減らし、ユーザーの不要なステップを削除します.
それで、我々は解決が技術的に話すことを知っています、しかし、我々は実際にどのようにそれを設計して、実装しますか?
実際にこの方法を実装する2つの方法/非表示のパスワード機能があります
図像学による

-通常目アイコン

ショー+隠すテキストで

それぞれの可能な実装を見てみましょう.

1アイコン-アイアイコン

これは、私が訪問したウェブサイトで最もよく見る実装です.

は、パスワードフィールドの隣に、または、内部の目アイコンです.

あなたが一度それを押すと、パスワードが表示され、目のアイコンが変更されます.

あなたが再びそれを押すとき、

、あなたのパスワードは、再び隠して、目のアイコン変化を隠します.

これは簡単に聞こえる一方、この実装ではどのように多くのバリエーションがかなり驚くべきことだ.
例としてmailchimpを取る.
目のアイコンは、パスワードがマスクされていないときに正常です.その後、パスワードが目に見えるときにクロスアウトアイアイコンに切り替えます.
このアプローチは、アイコンを押すと実行されるアクションを示します.

アドビログイン画面は逆のアプローチを持っています.
この場合、パスワードがマスクされるとき、交差したアイコンは表示されます、そして、パスワードが見えるとき、それは規則的な目アイコンに変わります.
このアプローチは、パスワードフィールドの現在の状態を示します.

それで、どの実装が正しいものですか?
彼らは一貫してアプリケーションやシステム全体に実装されている限り、両方が正しいです.つの方法を選択し、それに固執する.

2表示+非表示テキスト

iCongramsアプローチは、最も使用されるオプションですが、ショー+非表示のテキストアプローチは、より使いやすいです.
それは解釈の余地を残して、理解するのがより速いです.
アイアイコンとクロスアウトアイアイコンの代わりに、単にテキストを置き換える.
彼らのログイン画面のGoogleのアプローチは、パスワードフィールドの下にショーパスワードチェックボックスを含めることです.これは非常に直感的なアプローチとおそらく最も簡単に実装することです.

PayPalのアプローチは、テキスト表示と非表示を使用してパスワードの可視性を切り替えることです.

どのオプションが最適ですか？

各オプションは、長所と短所がオプション2、ショー+非表示オプションは、理解し、解釈のための小さな部屋を残して最も簡単です.
あなたが最適な使いやすさを念頭に置いて何かを設計しようとしているならば、これは大部分のケースで最高のオプションです.

結論

私はこのトピックを研究することからたくさん学びました.
と言うと、私は本当にこの記事を参考に発見し、結果として何か新しいことを学んだ.
あなたが詳細にパスワード作成自体について学びたいならば、ここではNNGroupから推薦する大きい記事です.コム:Password Creation: 3 Ways To Make It Easier
何かを追加したいですか?パスワードフィールドの他の例はありますか?さえずりの上で私に知らせてください.
読書ありがとう!
この記事はもともと私のウェブサイト上で公開されました