【HTML】 入力欄の使い勝手を改善しよう
あなたの入力フォームの使い勝手は大丈夫ですか? 見た目は整っていても、本当に良いUXと言えますか?
入力欄は1カラムにする、関連項目はまとめる、適切な形式にする (普通の文字か、ラジオボタンかなど) などは通常でも意識するところですが、見た目にあまり差がない部分は疎かになりがちです。
クリック領域がやたら狭い、自動入力が効かないなど、見えづらい問題点を改善していきましょう。
目次
クリック領域を広げる
labelが適切でないと、クリック領域が狭くなります。
下の例で実際に触ってみてください。
See the Pen html form radio area by Totori (@souki202) on CodePen.
どうでしょうか。明らかに2つ目のほうがチェックを入れやすいと思います。上の例は特にスマホで死活問題です。
どうやって反応する領域を広げるのでしょうか。これは大まかに2つあります。
1. labelにforを設定
1つはlabelタグにforを設定することです。これにより、label部分をクリックしてもラジオボタンや入力欄が反応するようになります。
labelに設定するforと、入力欄のidを同じ値にすることで実現できます。
See the Pen html form labeledcontroll sample by Totori (@souki202) on CodePen.
2. label要素内にinputを入れる
もう一つはlabel要素内にinput要素を入れることです。上の場合はlabelにforを設定して関連付けしましたが、label要素内にinput要素を入れると自動で関連付けされます。
さらに、ラベルの文字列と入力欄の間のスペース部分をクリックしても反応するようになります。
See the Pen html form input in label by Totori (@souki202) on CodePen.
また、labelにdisplay:blockを指定することで、そのブロック全体のどこをクリックしてもOKになります。
See the Pen html form input in label block by Totori (@souki202) on CodePen.
この例では、”Click me”の場所どころか、そのブロックのエリア全体のどこをクリックしても反応します。
十分なスペース確保
ボタン同士の距離が狭いと、特にモバイル端末で誤爆します。
ボタン同士は十分なスペースを確保しましょう。
See the Pen html form button space by Totori (@souki202) on CodePen.
クリックできるかを判別できるように
PC環境でマウスを使用している場合、クリック領域にカーソルを持っていってもボタンの見た目が変わらない場合、本当にクリックできるかわかりません。
また、すぐ横の項目をクリックしてしまった、という誤爆も発生します。
そこで、クリック領域に乗ったら、ボタンの見た目が少し変わるようにします。
See the Pen html form button hover by Totori (@souki202) on CodePen.
自動入力を効かせる
typeはtextとpasswordだけではありません。1行入力のinputでは、typeを適切に設定することで、ブラウザが自動入力してくれたり、キーボードの配列が最適化されたりします。
ここでは、よく利用するものを紹介します。
| 種類 | 意味 |
|---|---|
type="text" | 普通の文字入力です。これは他が適さない場合の最終手段です。 |
type="number" | 数値増減ボタンが出て、数値以外入力できなくなります |
type="date" | カレンダーボタンを押すと、クリックだけで簡単に日付を入力できます |
type="password" | 入力がすべて隠されます |
type="email" | 見た目は変わりませんが、スマホ時にアットマークがすぐ入力できる場所に出ます。ブラウザの自動入力に影響します |
type="address" | 住所入力です。見た目等は変わりませんが、ブラウザの自動入力に影響します |
type="hidden" | 見えない入力欄です。裏でユーザ識別子を送信したりに利用します。 |
type="file" | ファイルアップロードに使用します |
これらを適切に設定することで、
- ブラウザの自動入力や入力候補に適切なものを表示できる
- 形式によっては、ブラウザが自動で入力チェックしてくれる
- スマホやタブレット端末等の場合、専用のキーボードを表示できる
といったメリットが発生します。見た目に変化はなくとも、挙動は変わるということです。
絞り込めるように
selectの項目数が多い場合、下手したら手入力のほうが速い、といったこともあります。
絞り込めるように、スクリプトを用意すると楽に選択できます。
他の項目によって絞り込むパターンと、検索欄を作って絞り込むパターン、どちらが良いかは入力欄によって変わります。
See the Pen html form select by Totori (@souki202) on CodePen.
この例はselect2を利用しています。
まとめ
入力フォームの並び順やグループ化といった、整理整頓の部分は通常でも意識します。しかし、実際に触ったときの使い心地も重要です。
実際に触って誤爆しないか、ストレスなく操作できるか、楽して入力できるか、といった部分にも意識していきましょう!
