登録フォームにおけるパスワード確認用の入力欄は必要か

anthony

UX Movementの著者で編集長。素晴らしいウェブ体験を愛し、ユーザーのために戦う。

この記事はUX Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。

Why the Confirm Password Field Must Die

登録フォームは、Webページの中でもいちばんデザインが難しいもののうちの一つです。あるフォーム要素を入れるか入れないかといったことが、コンバージョン率に影響を与えます。どの要素を入れるか入れないか考えることもデザイナーの仕事です。

パスワード確認はコンバージョン率を下げる

たいていのWebクリエイタ―は、パスワードを初めて作る場合にはパスワード確認用の入力欄を表示させなければいけないと考えています。

これは、パスワードを入力する欄がユーザーの入力をマスキングするためです。ユーザーはミスタイプしてもそれに気づきません。パスワード確認で、ユーザーに2回パスワードを入力させることにより、ミスタイプを発見します。

パスワード確認欄は理にかなったものに思えますが、それを表示させることはコンバージョン率を下げる可能性があります。ある調査によると、登録フォームを離脱した全ての人のうち、4分の1以上が、パスワード確認が原因で離脱しています。また、入力欄に戻ったり、内容を訂正したりすることも含め、数百のユーザー訂正の原因にもなっています。

パスワード確認を無くし、マスキングを外せる方法に変えたところ、ユーザーの訂正回数は減りました。それだけでなく、フォームの入力開始・完了、コンバージョン率を向上させたのです。

廃止するだけでは十分でない

パスワード確認を廃止するだけでは十分ではありません。パスワード確認を使っていなくても、マスキングをしないオプションを提供していないサイトがとても多いです。ユーザーがミスタイプしても、パスワードがマスキングしてあるとユーザーはそれに気づかないのです。これはユーザーがログインできないことや、パスワードをリセットすること、ひいてはユーザーの不満につながります。

入力したパスワードをマスキングしないオプションをユーザーに与える必要があります。これにより、ユーザーは、エラーを防ぐために自分が入力したものをチェックすることができます。正しいパスワードを入力したことがわかれば、フォームを送る前に安心できるでしょう。

パスワード切り替えボタンを表示する

「パスワードを表示する」というオプションを取り入れるのは簡単です。パスワード入力欄の中にテキストかアイコンボタンを置きましょう。ユーザーがそれをクリックすると、入力したものをマスキングしないで表示します。マスキングのオン、オフは、必要に応じて切り替えられるようにしましょう。

テキストボタン

テキストボタンは、パスワードがマスキングされている場合は、デフォルトで「見せる」と表示させます。ユーザーがマスキングを外すためにクリックしたときは、「隠す」と表示させます。

text-button-toggle

アイコンボタン

目の形のアイコンはマスキングを外した状態を示すのに効果的な方法です。それがクリックされたときは、マスキング状態を示すために、目のアイコンのうえに斜線を表示します。

eye-icon-toggle

パスワード確認よ、永遠に眠れ

もうパスワード確認に別れを告げるときです。登録フォームでかつてはお馴染だったものも、もっとよいものに進化したのです。

もう、あなたの登録フォームは高い訂正率と離脱率に悩む必要はありません。パスワードの入力方法をユーザーにコントロールさせることで、ユーザーが心安らかにフォームを埋められるようになるのです。


Photo:Linux password file by Christiaan Colen


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて