W3G

1. 2重のメールアドレスの入力は強いる

2重のメールアドレスの入力を強いるUI自体が悪いということは決してありません。正しいメールアドレスを入力させるように機能する作りになっているのかどうかが問題なわけです。

2. ユーザをイライラさせる仕組みは避ける

2重にメールアドレス欄を設けた際にはコピー&ペーストされないようにと、安直に次のような仕組みを取り入れてはいけません。

メールアドレス：<input type="email" name="email" oncopy="alert('確認メールアドレス欄にはペーストしないでください'); return false;" />
確認メールアドレス：<input type="email" name="email2" onpaste="alert('確認メールアドレス欄にはペーストしないでください'); return false;" />

Internet Explorer 5.0のときに独自に取り入れられたDOM拡張に、テキストをコピーしようとしたときに発生するoncopy, テキストを切り取ろうとしたときに発生するoncut, テキストを貼付けようとしたときに発生するonpaste, 右クリックで出るコンテキストメニューを表示したときに発生するoncontextmenuの類のイベントハンドラがありますが、これら仕様にないイベントハンドラをIE以外の主要ブラウザもサポートしています。

これらのイベントハンドラをreturn false;とだけ書かれた状態で用いられると、リテラシーの低いユーザはなぜコピーやペーストができないのかを理解できずに立ち往生してしまうので、まだ一緒にalert()メソッドを使って警告ダイアログを出す際に注意書きをしてあげている方が優しい使い方と言えますが、コピー&ペーストを禁止された上で警告ダイアログまで出されるとユーザをイラッとさせる要因にもなりかねません。

そのため2重入力は用いるにしても、上記のような仕組みは避けて、他の方法で、単純にコピー&ペーストすることができない仕組みを考えるようにしましょう。

3. 簡単な入力ミスはさりげなく知らせる

<input type="email" name="email" placeholder="sample@docomo.ne.jp" onblur="chkemail(this)" />
<div id="email_error_msg"></div>
<script>
function chkemail(obj) {
    var msg = "";
    var str = obj.value;
    var error_msg_node = document.getElementById("email_error_msg");
    //全角英数字を半角英数字に変換
    str = zentohan(str);
    //.や@が含まれているかをチェック
    if( !str.match( /.+@.+\..+/ ) ) {
        msg = "入力されたメールアドレスに間違いはありませんか？";
    }
    if( str.match( /,/ ) ) {
        msg = "カンマ(,)が含められていますがドット(.)ではありませんか？";
    }
    if(msg !== ""){
        error_msg_node.innerHTML = msg;
    }else{
        error_msg_node.innerHTML = "";
    }
}
function zentohan(str){
	str = str.replace(/[\uff21-\uff3a\uff41-\uff5a\uff10-\uff19]/g, function(s){
		return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
	});
	//spaces remove
	str = str.replace(/\u0020|\u3000/g,'');
	return str;
};
</script>

複雑なことをする必要はありませんが、メールアドレスならば最低限ドット(.)や@が含まれているかの簡単な構文のチェックであればサーバサイドでなくとも、クライアントサイドで随時知らせられるようにしておくと良いでしょう。

なお、入力ミスと思わしき程度はalert()メソッドを用いるのではなく、フォーカスがはなれたときにinnerHTMLプロパティなどを用いて、できるだけさりげなく知らせてあげたいものです。また、そのときにメールドレスが全角英数字入力されている場合はさりげなく一緒に半角英数字になおしてあげると良いでしょう。

4. 2つ目の入力欄では@以前と@以降で項目をわける

連絡が可能なメールアドレスを入力してください。
<input type="email" name="email" placeholder="sample@docomo.ne.jp" onblur="chkemail(this)" />
確認のため再度上と同じメールアドレスの入力をお願いします。
<input type="email" name="email2_pre" placeholder="@以前を入力" /> @ <input type="email" name="email2_post" placeholder="@以降を入力" />

再入力させる際には、単純なコピー&ペーストだけで済まされることのないように、再入力させる2回目の項目は@以前を入力する項目と@以降を入力する項目にわけます。部分、部分をコピー&ペーストされれば同じですが、それでも間違いがあるかどうかをユーザに気づかさせる注意喚起の役割を果たします。

5. 入力欄のテキストを極力大きくする

input[type="text"],
input[type="email"]{
	font-size: 24px;
	padding: 10px;
}

「.」（ドット）を「,」（カンマ）に間違えている場合であれば、クライアントサイドでも、またサーバサイドのどちらでもメールアドレスの構文チェックをすれば検知できるでしょうが、「o」（オー）と「0」（ゼロ）、「1」（数字の1）と「l」（エル）の入力間違いは検知することもできなければ、間違いがあってもユーザ自身も非常に気付き難いものです。そこで入力欄のテキストが適度に大きいければ、ユーザは間違いがあった場合にも気づきやすくなります。

6. 2回目の入力欄は最初は隠しておく

入力項目のボリュームが多いほどユーザは入力をあきらめてしまうなど離脱率があがるので、入力項目が少なければ少ないほど離脱のリスクも減るため、入力項目数は少ないに越したことはありません。そのため、入力項目を一度に見せるのではなく、確認用のメールアドレスの入力欄を最初は隠しておき、1回目のメールアドレスが書式上正しく入力されたのかをチェックしてから段階的に表示させるようにしましょう。

また、書式チェック後には続けて入力が行いやすいように2回目のメールアドレスの入力欄に自動的にフォーカスが移るようにしましょう。フォーカスを自動的に移すことで、コピー&ペーストさせる隙を与えないようにする役割もあります。

7. サジェストしてあげる

メールアドレスの入力でサジェスト（入力支援）機能が役に立ちそうな部分といえば、ドメイン部分です。メールアドレスを再入力してもらう@以降を入力する項目に用います。

これは、docomo.co.jpと入力されたり、docono.ne.jpと入力されたりと、ドメイン部分で間違われることも考えられるため、クライアントサイドでサジェスト機能を実装しておくことで、ドメイン部分の入力を間違う確率を下げるのに役立ちます。とくに携帯電話会社、主要フリーメールの各社の決まりきったドメインと、可能であれば主要プロバイダも含めたいところですが、利用者の多いプロバイダは、メールサーバーが多数あり、特定できないので必要に応じて組み込みましょう。

サジェスト機能を実装できるスクリプトには、typeahead.jsが非常に使いやすく、便利でおすすめです。参考までにサンプル作成時に作ったある程度の主要ドメインをまとめたJSONファイルがありますので、ご自由にお使いください。