私家版入力フォームアンチパターン

## お断り

最初に断っておきますと、私は UI の専門家でもなんでもありません。単純に自分がエンドユーザとして使っていて、この入力フォーム使いにくくて嫌だなぁと思ったことをまとめているだけです。素人が思い付きで書いてるだけなので、実は UI/UX 的は意味があることもあるかと思いますが、その場合はご容赦ください。

## フォームを分割する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86075/bfd2866f-7898-6f98-070e-abab8f7a2008.png)

よく入力する情報はテキストファイルからコピペするとか辞書に登録していることが多いかと思います。よく入力するからこそ手間を省きたいし、入力ミスをなくしたいんですよね。でもフォームが分割されていると、そういった入力が阻害される。

ただ、これはもしかしたら意味があるのかもしれません。フォームを一つだけぽんと提示されても、どう入力していいかわからなくて離脱してしまうという人は一定数いると思われるからです。そうした人に向けて、少し親切にナビゲーションしてあげるという意味はあるでしょう。

氏名を入力する際には姓と名で分けて入力してもらわないと、どこで区切るか分からなくなるという問題もあります。姓と名を分けて管理しなければならないのかどうかという問題がそもそもありますけれども。

## 全角、半角を強制する

![form2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86075/4e18a16e-7e74-16d7-f20e-483c34e03493.jpeg)

システムの都合上で半角もしくは全角に統一しておく必要があることはあるでしょう。それであればシステム側で変換すれば済むことです。わざわざ入力者に半角全角を制御させる必要はありません。

## ハイフンの有無を強制する

![form3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86075/ee9a37e8-0657-befe-70d8-84346a465b92.jpeg)

ハイフンが入っていてシステム側で困るのであればハイフンを除去すればいい。JavaScript で1行あれば書けますよね。

ハイフンが無いとどこで区切っていいか分からなくなるといっても、日本国内なら郵便番号は3桁+4桁で機械的に区切れますよね。電話番号の場合はルールが複雑なのでまだわかりますが、そもそも市外局番と市内局番を分けて管理する必要があるのかどうかという問題があります。

## メールアドレスを2度入力させる

![form4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86075/8d8d74df-5206-7ea8-4b44-daa6a72643fe.jpeg)

メールアドレスは大事な情報なので入力ミスが無いように2回入力させるって、そんな大事な情報だったら仮メールを送信して到達確認してはどうでしょうか。

## ペーストを禁止する

心を込めて手で入力することが良いことだと考えているんでしょうか。

前述のメールアドレス2度入力で1回目の入力内容をコピペされては確認の意味が無いからペーストを禁止するんだって理屈かもしれませんが、そもそも2度入力すれば間違いが無くなるという考え方が間違っていると思います。

## バリデーションルールを予め示さない

項目を埋めて初めてバリデーションが行われて警告が表示される。ハイフンが必要か必要でないか、半角で入力するのか全角で入力するのか、予知する能力などユーザにはありません。警告が出て入力し直しですから二度手間ですね。

## 入力途中にリアルタイムでバリデーションを行う

さっきと逆のようですがちょっと違います。例えば郵便番号を入力しているときに、1桁目を入力して「郵便番号は7桁で入力してください」と警告されたら少々イラっとします。それくらいでイラっとするのはカルシウム足りてないのかもしれませんが。入力が終わって次の項目に移動する際に初めてバリデーションしてくれるといいのになと思います。

## サーバサイドだけでバリデーションを行う

サーバサイドでのバリデーションももちろん必要です。フロントエンドだけに頼っていると脆弱なシステムになってしまいますので。それはいいんですが、フロントエンドでもバリデーションしてくれると、いちいちサーバとの通信をしなくて済むので軽くて済みます。

サーバサイドのみでのバリデーションだと、どうしても全ての項目を埋めて送信ボタンを押してからでないと実施できません。膨大な入力項目のあちこちに警告が出ているとうんざりします。また、どこに警告が出ているのかをフォーム全体から探さなければならず面倒です。

最初にバリデーションに引っかかった一つだけに警告が出て、それを修正して再送信したら次以降の項目に警告が出るというフォームもあります。これも面倒ですね。

## ブラウザの自動入力を阻止する

ペースト禁止と同じ発想かもしれませんが、とにかく手で入力するのが最上と思っているのでしょうか。むしろブラウザで自動入力の方が正確なんですけれども。

ワンタイムパスワードのように毎回必ず変わる項目はむしろ禁止して欲しいですけどね。この場合は禁止していないとブラウザが入力してしまっていちいち消さなければならなくて逆に面倒になります。

## 回答できない項目を必須にする

FAX を持ってないのにFAX番号を必須にされても困ります。FAX での配信を登録するようなフォームでしたら仕方ありませんけどね。今どきだと固定電話が無い人も多いですよね。

法人名を聞かれたら個人として回答してるときには困ります。法人顧客のみを対象にしていたとしても、部署名とか役職名とかそういうのが無い小さな会社に勤めている場合には回答できません。

## とにかく情報をたくさん入力させる

年収とか最終学歴とか家族構成とか部屋の間取りとか、それほんとにサービスで必要な情報ですか？

ここまで露骨なプライバシー情報を入力させるサービスは最近は流石に見かけませんが、サービスには必須ではないよなぁと思う情報を入力させられることはよくあります。

## ネガティブ行動に手間を増やす

退会されるのは嬉しくないので手間を増やして阻止したいという気持ちはわからなくはありません。でも納得はしませんが。

退会は非可逆な操作なのでボタン一発で実施できずに確認画面を挟むのは当然としても、何度も確認を繰り返して最終的に表示された電話番号にお電話くださいと出たら少々どころでなくムカつきます。

## 総論として

思い付くままに書いてしまったので傾向がぶれてしまってますが、根っこにあるのは実装者は少数だけれど入力者は多数ということです。実装者が手間を惜しんで使いにくい入力フォームになった場合、入力者の手間の総数は莫大になり、全体としてのコストは増大することになります。であれば、実装者が手間を掛けた方が全体幸福に繋がると思います。

入力者は大抵は顧客ですから、入力者の手間を削減することは顧客サービスでもあります。顧客サービスが低下して顧客が離れていくと、実装者(=サービス提供者)にとっての損失にもなります。それは実装者の望むところではないでしょう。であれば、入力者にとって親切な入力フォームにするべきだと思います。