エントリーフォームでは、入力形式の制限や必須項目の入力有無の強制など、フォーム側がユーザーに対して制約を増やし、「歩み寄り」を求めるというスタンスがまだまだ一般的です。
ですが、EFOやフォームのユーザビリティの改善では「ユーザーの手間を減らす」というのが基本中の基本です。
たとえば、ユーザーが入力した内容がたとえ完全に意図した通りでなかったとしても、無理の無い範囲でフォーム側でそれを吸収するという姿勢もそのひとつです。制約でガチガチに固めるのではなく、ユーザーに自由度を提供するという、フォーム側からの「歩み寄り」です。
このようにEFOでは、単純に入力中のユーザーインターフェースを改善するというだけでなく、フォーム側がユーザーに対して見せる「懐の深さ」というのも重要なポイントなのではと思います。
本日はこの「懐深さ」について具体的な例を出しながら考えていきたいと思います。
ビックカメラ、ニトリの例に思うこと
まずはビックカメラ様の会員フォームの改修について、先日ニュースとなっていた記事を取り上げたいと思います。
ニュース – ビックカメラ、通販のなりすまし対策で会員IDのメアドへの変更を強制：ITpro
ビッグカメラ様（以下敬称略）の会員登録フォームといえば、以前「勝手に比較」のコーナーでも取り上げたこともあるフォームです。
勝手にEFO比較分析【ビックカメラ x ヨドバシカメラ】（家電量販店 会員登録フォーム編）
https://f-tra.jp/blog/compare/4735
もともとのビックカメラのフォームでは、ユーザーが会員登録時に任意の「会員ID」を決定しそのID情報を使ってログインするという形をとっていました。
ところが、今春の改修でこの「会員ID」を廃止。代わりに「メールアドレス」をIDとして使う形に変更されました。既存会員がサイトを利用するためには旧IDを入力のうえ、IDの再登録を実施する必要があります。
ビックカメラ.comは元々、顧客が会員IDを自由に設定できるようにしていたが、5月以降に登録した会員はメールアドレスの使用を強制していた。ビックカメラ.comは現在、メールアドレス以外の会員IDではログインできなくなっている。同社は、「顧客が独自のIDを管理する負担を減らして、他サイトと違うパスワードを設定してもらうために行った」（広報部）と説明する。
引用元：ニュース – ビックカメラ、通販のなりすまし対策で会員IDのメアドへの変更を強制：ITpro
既存会員に会員情報変更を促すページ
最近のリニューアルが大きな話題となっているニトリ様のフォームでも、同様の導線が見られました。
リニューアル前の会員は、「お客様ID」などを使って会員移行を行う必要がある。新システムではメールアドレスがIDとして使われる形
こちらも移管後はメールアドレスをログインIDとして使用する形をとっており、注意書き等を見る限りは、ビックカメラの例と同様にこれまでの「お客様ID」は廃止されるようです。
会員情報の移管画面。
両社から感じるユーザビリティへの配慮、しかし惜しい点が
いずれもメールアドレスをログインに使用する形への変更というのは、ユーザー自身の管理の負担を減らす（ID忘れを防ぐ）点では大変有意義なことだと考えます。これについては問題は感じませんし、むしろユーザー視点での施策であると感じ好感を持てます。
ただ気になるのは、それに引き換えて、これまでのユーザーに再登録という「歩み寄り」を強いてしまっている点です。
両社とも大規模なシステムの移管を伴うリニューアルであったことは容易に想像でき、おそらくこのような会員登録の移行手続きを設けることはやむを得ず、何かしらの制約あるいは目的がありこのような形をとっているというのは大前提ではありますが、ユーザーに余計な手間をかけないというEFOの観点からすると、結果としては完全にフォーム側の都合でユーザーに再登録の手間を増やしているということになってしまい、これらのフォームは「懐が深い」フォームと呼ぶにはあと一歩だと思います。
懐深いフォームのログインとは
もし懐が深いフォームであればどうするか？
IDでもメールアドレスのどちらを使ってもログインできる形を取るでしょう。
例えば、Twitterのログインフォーム。
Twitterのログイン画面。
Twitterのログインフォームでは、ユーザー名だけでなく、登録した電話番号やメールアドレスなどでもログインできるようになっています。
ユーザーは３つのうちのどれかの情報があればログインが可能で、どの情報を使うかはユーザーが自由に選択できます。懐が深いですね。
Facebookでは、会員登録時に電話番号かメールアドレスのどちらかを選択できるようになっています。ユーザーは、自分が管理しやすい情報を使って会員登録を進めることができます。
Facebookの会員登録は、電話番号かメールアドレスのどちらかで登録でき、管理しやすい方をユーザーが選択できる。
全角と半角
会員登録とログイン以外にも、制約をなくし、ユーザーの入力内容を柔軟に受け付けるために工夫できるポイントはあります。
例えば、全角と半角の入力形式制限。
フリガナは全角のカナでなくてはならない、住所の番地を半角で入力すると、「全角にしてください」とエラーが出る。電話番号や郵便番号が全角だと受け付けない…等、
フォーム入力時において全角と半角の制約によってエラー表示されるシーンは意外と多いもの。
しかしユーザーからしてみれば、全角であろうと半角であろうと正しい情報を入力していることには代わりありません。
あくまでも半角か全角かはフォーム提供側の都合。正しい情報を入力しているのにもかかわらずエラーが出ることは、誤入力時の何倍もストレスに感じるのではないでしょうか。
どちらでも受け入れる
システムの都合上、どうしても全角半角のいずれかにデータを揃えなければならないという場合は仕方ないでしょう。
ですがそうでない場合、送信内容が全角でも半角でもたいして困らない場合は、意外と多いのではないでしょうか。
たとえばフォームの送信内容を見たのち、コールセンターや営業担当から連絡を取るような体制であれば、その電話番号が全角だったか半角だったかは問題になることはありません。
そこで「情報が伝われば良い」、と割り切り無意味な入力形式のバリデートをやめてみるというのが最もシンプルな方法です。
「全角で入力ください。などという注意書きもはずすことができ、ユーザーに窮屈な思いをさせることがありません。
javascriptなどで変換する
どうしても全角か半角のいずれかにデータ形式を揃えなくてなならない場合は、自動変換機能を使うことで、ユーザーがどちらの形式で入力しても対応可能です。
代表的なのはjavascriptによる変換処理です。ユーザーが該当項目への入力を終えた瞬間からデータ形式を変換してくれます。
「KENスクール」資料請求フォームの住所の番地入力は、全角で入力した箇所が自動的に半角に変換されるようになっている
このような機能はEFOツールで提供されており、すでにツールを利用している場合は簡単に導入することが可能です。
エフトラEFOの半角全角機能
サーバー側でひきとる
ほかには、フロントではなくバックエンド側の処理で送信時に変換するという方法も考えられます。
「楽天」会員登録フォームでは、全角で入力した内容も、確認画面で見ると自動的に半角に変換されていました。
ハイフンの有無
ここまで、全角と半角について触れてきましたが、その他のフォーム側で吸収できる入力形式の制約としては郵便番号、電話番号、番地などに使われるハイフンの有無などが挙げられるでしょう。
こちらも全角／半角と同様に、ハイフンのありなしでもどちらでも受け入れるようにする方法や、javascriptなどでデータ形式を揃えるという対応が一般的です。
また、ハイフンの表記のゆれを防ぐためには、項目を複数の入力欄に分けるという対応も考えられます。
複数に分けられた郵便番号入力欄。
この方法ももちろん有効ですが、EFOの観点では項目はひとつに統一したほうが、項目数の印象やや項目間移動の手間が減り望ましいとする見方もあります。
最後に
いかがだったでしょうか。本日はフォーム入力において、できるだけユーザーの入力内容を柔軟に受け付けるための方法についてお伝えしました。
些か概念的ですが、大切なのはユーザーに歩み寄りを強制しすぎず、こちらから歩み寄る姿勢です。
あなたのフォームの「懐」はいかがでしょうか。なるべく制約は少なく、ユーザーが自由に選べる状況を用意するように心がけたいですね。
