実はユーザビリティを落としていた!パスワード入力欄マスキングの脅威

ログインフォーム等のパスワード入力欄で使われる入力マスキング。

パスワードのマスキング

パスワードのマスキング

マスキングのお陰で、私たちは入力中の画面を背後から覗かれることを必要以上に気にすること無く、安心してパスワード情報を入力することができます。
しかし一方で、使い方を誤るとフォームの使い勝手を著しく低下させてしまう可能性があります。

今回は、EFOの観点からパスワード入力欄の入力マスキングでフォームのユーザビリティを落とさないための注意点をご紹介していきます。

登録フォームでは使わない

前述のとおり、ログインフォームにおいてはパスワードのマスキングは便利な効果を発揮します。

しかし、それは既にパスワードを設定している場合のみに有効だということを、頭の片隅においておきましょう。
新しくパスワードを設定するための登録フォームでは、マスキングがあることでフォームを不便にしてしまう可能性があります。

入力ミスに気づきにくい

「数字4桁」のような単純な形ならばまだしも、パスワードの設定には「英字と数字の混合で8桁以上」のような複雑な形式を要求することが多いと思います。
ある程度の長さがありますから、入力しているそばから何を入力したかわからなくなることがあります。
また、うっかり入力ミスをしてしまうと気づくことができません。

どちらを入力ミスしているのかわからず、どちらもやり直すはめに…という経験、ありませんか

どちらを入力ミスしているのかわからず、どちらもやり直すはめに…という経験、ありませんか

ログインできなくなることも

また、パスワードの確認用の入力欄がない場合、入力ミスをしてしまったと気付かず、そのまま登録が進んでしまう恐れも。

次回ログインの際、元々の設定パスワードにミスがあったと気づくまでには、何種類かのパスワードの入力をミスが無いように慎重に何度かずつ試すはめになっているはずです。
さらにパスワードの再発行も行わなければならず、ユーザーに大きな労力とストレスを与えてしまいます。

登録時のパスワード入力の表示方法

このように、登録時にパスワード欄にマスキングを行ってしまうと、サイトやフォームのユーザビリティを著しく低下させる恐れがあります。
では、初期登録時のパスワード入力欄はどのように表示すれば良いのでしょうか。

通常のテキストフィールドと同様の状態ですと、やはり背後から覗かれた際にパスワード情報が漏れてしまいますので、望ましいとはいえませんね。

ポイントとしては、ユーザーが自分の入力内容を確認できる方法を用意しておくという点です。
具体的には下記の2つの方法を挙げたいと思います。(ほかにも方法はありそうです)

チェックボックスで表示/マスキングを切替

チェックボックスでパスワードのマスクの有無を切り替えることができるUIです。

チェックボックスでマスクを実行

チェックボックスでマスクを実行

この形であれば、必要に応じてチェックを解除して入力内容を確認したり、反対に入力を終えたら隠しておくこともできますね。

フォーカス時のみマスクを解除する

または、入力項目にフォーカスしている間だけパスワードのマスキングを解除するという方法も。

フォーカス時にマスキングを解除

フォーカス時にマスキングを解除

この方法では、さきほどのの方法と比べて柔軟な切替はできないものの、チェックボックスをクリックするという切替のアクションは必要がなく、ユーザーを手間取らせることがありませんね。

最後に

いかがだったでしょうか。
本日はパスワードのマスキングがフォームのユーザービリティを落とす可能性と、その対処方法についてお伝えしました。

あらためて、あなたのフォームのパスワード欄が適切な形か、見なおしされてみてはいかがでしょうか。

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です