2016.11.20

フォーム周りに設定されていると親切なあれこれ

ウェブサイトの中でユーザーが操作する部分と言えば、お問い合わせや会員登録などの「入力フォーム」が主なところだと思いますが、
ただ単にinputタグでコーディングされたフォームだったり、ブラウザ標準のスタイルのままでは、ユーザーにとっては入力しにくいと思います。

特にスマホやタブレットなどのタッチデバイスでは マウスのような精密な操作ができないため、
フォームでの操作にストレスを感じることがありますが、
ちょっと手を加えるだけで入力しやすく親切なフォームを実装することができます。



よく見かけるお問い合わせフォームです。
form_ux_1
デザインを再現し、メールフォームとしての機能を最小限実装した場合はこちら(メールは送信されません)。

更にこの状態から、入力しやすいようにコーディングしていくと、このような感じになります。
form_ux_2
実際にコーディングしたフォームはこちら(メールは送信されません)。

いかがでしょうか。
変更点をリストアップするとこのような感じです。

・labelタグで見出しと入力ブロックを紐づけ、クリックで入力ボックスへ移動
・入力ボックスをクリックしやすいように、paddingをつけて領域を拡大
・チェックボックスやラジオボタンは、テキストにも選択領域をつける
 その際、「テキスト部分もクリックできる」という認識を持たせるため、マウスカーソルを変化させる
・送信ボタンが「実際にアクションするボタン」なんだということをわかりやすくするため、マウスを乗せると見た目が変化する

更にもっと!、となれば「住所自動入力」や「必須項目をポップアップで知らせる」など・・・
ユーザー側の手間を減らせれば、メールフォームから送信されやすくなり、
会員登録や資料請求されやすくなります。