ヒューマンアカデミーの入力フォームがほぼベストな作りだった

ネットでよく買い物をする人などはWebサイトの入力フォームの作りに不満を持っている人が多いと思います。

チケット販売サイトなど入力フォームにはかなり力を入れるべきサイトでさえ、なんでそこそういう作りなの？という経験が有るかと思います。

数日前、イベント応募の為にヒューマンアカデミーの入力フォームを使ったのですがここの作りがかなり良かったので他の入力フォームの不満点との比較を行いながら「入力フォームはこう作ってよ」という願望を書いときます。入力フォーム作成を依頼する人、作成する人は是非この辺りを注意しながら作って下さい。お願いしますm(_ _)m

イベント応募ページだとそのうち無くなって実際に体験できなくなると思うのでここでは資料請求フォームを元に紹介します。

資格取得・キャリアアップのヒューマンアカデミー
 http://haa.athuman.com/

※ここで紹介するのは Mac の Chrome で試した時の挙動です。確認してないですが他の環境では挙動が異なる可能性も有ります。

良い所

1. 入力エラーのチェックが随時走る

1項目入力が終わった瞬間にチェックが走ります。エラーはその項目の直ぐ近くに表示。

【NG実装】
一番NGな実装だと全ての項目を入力をして「確認」ボタンを押した瞬間にフォームの最上部にエラーの一覧が表示されるタイプです。これだと視線を上下に大きく移動させないといけないうえに、どの入力欄に付いての指摘かが分かり辛いです。

一歩進んだサイトでは随時走ってるけど本当に随時入力チェックが走ってるみたいで、1個目の入力にフォーカスが当たった瞬間などに全ての入力項目にチェックが走り、まだ入力して無い部分に「未入力です」の様なエラー表示がされます。「いや、まだ入力してないから」という思いが湧きストレスです。ヒューマンアカデミーの場合は入力前は「必須」「任意」と表示していた部分が「NG!!」に変わり、1項目のみついて判定が行われます。

2. 半角全角自動変換
半角や全角など特定の形式での入力を希望している項目は入力を確定し、次の項目に移動するタイミングで自動的に変換されました。

おそらくデータ管理上、データベース上には全角で持ちたいなどの思いが有りその様な実装に成っているのでしょうが入力した後に全角で入力して下さいと表示したり、電話番号や郵便番号は半角で入力して下さいと表示される実装を見かけます。

3. 郵便番号による住所自動補完
郵便番号の入力が確定すると自動的に郵便番号から推定可能な範囲で自動的に入力されました。

ここまでは求めませんが他のサイトでもせめてボタンを押すと自動補完される機能は欲しいです。

4. 名前を入力するとフリガナが自動入力される
この機能は他のサイトで実装されて無くてもそこまで不満では無いですが有ると嬉しいです。

悪い所

タイトルに「ほぼベスト」と付けている様にちょっと不満に思った部分も多少は有りました。その辺りについても書いておきます。

1. 苗字と名前の間にスペースが必要

これってスペース必須では無く、苗字と名前の入力欄を分けるのではダメだったのかな？と感じました。
ミドルネームなどを考慮して1つにしたのかな？と思ったのですがそれだと「名字と名前の間にスペース」というエラー文を表示させている事と整合性が取れないのでそういう理由ではなさそうです。