パスワードのマスキングを任意で切り替える
- 公開日 : 2010年3月17日 (2011年7月31日 更新)
- カテゴリー : インタラクションデザイン (IxD) , ユーザビリティ , ユーザーインターフェース (UI)
先のコラム記事「パスワードは隠すべきか？」で、Jacob Nielsen（ヤコブ・ニールセン）氏の「Alertbox」の記事（パスワードを隠すのをやめよう）を引き合いに出し、現時点での私の意見として「多少の不便はあっても、今の慣例どおりデフォルトではパスワードを非表示にしておいて、ユーザーが任意でパスワードの表示/非表示を選択できる機能を付加するのが良いのではないか」ということを述べました。
このとき具体的なイメージとして頭に浮かんだのが、パソコンの無線LAN設定で、ネットワークキー（セキュリティ保護のためのパスワード）を入力する画面のユーザーインターフェースです（下図を参照）。「入力する文字を非表示にする」にチェックを入れると、パスワードがマスキング（隠される）状態になり、チェックを外すと、パスワードの文字列が隠されずに見えるようになっています。
このような機能をWebページでも実装できないかということで、実験してみました。下記のフォームに、実際に文字列を入力して、「パスワードを隠さず表示」のチェックを入れたり外したりしてみてください。
「A List Apart」というWeb制作者向けの情報サイトがあるのですが、今回はその中の「The Problem with Passwords」という記事を参考にさせていただきました。以下、その概略になります。
- パスワードをマスキングするかどうかを、JavaScriptを使って制御しています。
- デフォルト（初期状態）では、パスワードをマスキングする（隠す）ようにしています。ユーザーが任意でチェックを入れることで、マスキングしない設定にすることができます。
- チェックボックスおよびそのラベル「パスワードを隠さず表示」のコードは、JavaScriptファイルの中に記述されています。JavaScriptが無効な環境の場合、チェックボックスは表示されません。
この実装の優れている点は：
- 基本は従来の慣習にならってパスワードをマスキング表示することで、一定のセキュリティやユーザーの安心感に配慮している。「パスワードの具体的な文字列を確認したいな」とユーザーが自発的に思ったときに初めて、瞬時に確認できるようになっている。
- JavaScriptが使えない環境では、マスキング機能が一切見えないので、ユーザーは特に気にすることなく、従来どおりのパスワード入力ができる（パスワード入力欄にパスワードを入れると、マスキング状態でフィードバックが返ってくる）。
…ことだと言えます。後者は、プログレッシブエンハンスメントと呼ばれる手法のひとつで、JavaScriptを使ってより便利なユーザーインターフェース（UI）を提供しつつも、JavaScriptが使えない環境でも一定レベルのアクセシビリティを確保するという考えかたに則っています。
いかがでしょうか？パスワードを隠す/隠さないについては、様々な議論がありますが、ひとつの対応策として、参考になればと思います。
