2008年01月21日

メールアドレス欄のユーザビリティ

ソーシャルブックマーク  はてなブックマークに登録  この記事をクリップ!  Yahoo!ブックマークに登録  Google Bookmarks に追加  Buzzurlにブックマーク  del.icio.us に登録  | 

顔写真
マネージャー
磐前 豪

今回は会員登録や購入手続きフォーム等におけるメールアドレス欄のユーザビリティを取り上げます。

■IMEオフの制御について
メールアドレス欄のテキストフィールドでIMEをオフとし、かつユーザがIMEオンに変更できないよう制御しているサイトを時々見かけます。

メールアドレスは英数字と記号で成り立っているため、初心者ユーザにとっては煩わしい日本語/英数字入力の切り替えの手間がなくなるというメリットがあるでしょう。
但し、メールアドレスをIMEに単語登録しているユーザが一定数いることを忘れてはいけません。
この「実践メモ」を購読いただいている皆さまも、メールアドレスを単語登録されている方が意外に多いのではないでしょうか?
メールアドレスを単語登録している人にとっては、IMEオフの制御があることにより、メールアドレスをキーボードで手打ちしなければならず、スピード、正確性が損なわれてしまいます。

サイトのターゲットユーザにもよりますが、一般的なサイトでは双方とも一定数存在することが考えられるため、IMEの制御は行わない方がよいでしょう。

より細やかな配慮としては、メールアドレス欄の一つ前に電話番号など1バイト文字の項目を配置し、初期値IMEオフにする対応があります(図1)。

  • 単語登録なしユーザ
    1. 電話番号欄を入力(全角/半角を意識せず)
    2. メールアドレス欄を入力(英数字入力モードのままなのでIME切り替え回数は0回)
  • 単語登録ありユーザ
    1. 電話番号欄を入力(全角/半角を意識せず)
    2. 英数字入力であることに気づきIMEをオンにし、メールアドレス欄を入力(この切り替えは不自然ではない)

フォームの項目に依存するため上記のように適用できないこともありますが、日本語/英数字入力の切り替え回数をできるだけ少なくするという観点を設計時に意識しておくとよいでしょう。

図1


■再入力について
メールアドレスの再入力(とエラーチェック)は、手入力した際の入力間違いを防ぐうえで一定の効果を果たします。
メールアドレスは多くの場合、メール配信やログイン手続き等、ユーザとのコミュニケーションのキーとなるものですので、サイト側は誤登録を極力低減する対策を取るべきでしょう。

再入力欄をコピー&ペーストで入力するユーザも少なくありませんが、その場合でも、間違いがないかどうか確認する行動がユーザビリティテスト(ユーザ行動観察調査)で多く観察されています。

最近ではコピー&ペーストによる入力を防ぐよう、 “@ ”前後で再入力欄のテキストフィールドを分割しているフォームも散見されます(図2)。こちらはどうでしょうか。

図2


これも単語登録しているユーザの利便性は下がりますし、初心者ユーザはカーソルを移動させなければならない負担が増えてしまいます。
こうした点を考慮すると、プラス面よりもマイナス面の方が大きいと考えられます。
どうしてもコピー&ペーストによる入力を避けたい場合には、JavaScriptによる制御を用いた方がよいでしょう。

■誤入力を防ぐためのその他の対応について
先の図1のように、メールアドレスの記入欄のフォントサイズを大きくすることで、誤入力したかどうかをユーザが認識しやすくすることが可能になります。
メールアドレスには、ドットかコンマかなど、間違いに気付きにくい記号や文字が含まれることが多いですので、自分の入力した文字を認識しやすくするという点は、基本的なこととはいえ重要なポイントです。


以上のように、メールアドレス欄一つをとっても、考慮すべき点は多くあります。
サイト全体を考えるうえでは、これらの点は非常に細かい点かもしれませんが、こうした細やかな配慮を1つ1つ重ねていくことが、ウェブサイトの成果を最大化するうえで大切になるのです。

ソーシャルブックマーク  はてなブックマークに登録  この記事をクリップ!  Yahoo!ブックマークに登録  Google Bookmarks に追加  Buzzurlにブックマーク  del.icio.us に登録  | 

<< 画面メモを意識した携帯サイト制作 | トップ | 実際の大きさがイメージできる商品写真を置こう >>



AI搭載 モーメント分析クラウド「USERGRAM(ユーザグラム)」