NTTドコモ様_dカーシェア
NTTドコモ様_dカーシェア
2018.05.16

入力フォームをデザインする時に気をつけること8つ

もーりー
こんにちは。デザイナーのもーりーです。
最近は入力フォームをデザインすることが多かったです。
ネットで調べたりして思ったことや学んだことを今回この場を借りて共有したいと思います。

入力フォームは縦一列配置にする

Webサイトは縦方向に見るのが自然なので、入力フォームは縦一列に並べるようにしましょう。

入力フォーム正解1

入力フォーム不正解1

 

フォームタイトルと入力フォームはグループ化する

フォームの名前と入力フォームは線を引くなり、マージンを設けるなりしてグループ化しましょう。

 

入力フォーム正解2入力フォーム不正解2

すべて大文字での表記は避ける

英語がフォームのタイトルになっているときは、すべてを大文字にしないようにしましょう。かっこいい場合もありますが、残念ながら読みづらいです。

入力フォーム正解3 入力フォーム不正解3

選択項目が6項目以下の場合は、選択肢はすべて表示する

選択肢が多いときはドロップダウンでよいのですが、もしもそれほど多くないなら、すべての選択肢が一目でわかるようにしたほうが無難です。
ドロップダウンメニューは選択肢を選ぶのに2回クリックが必要だからです。
 入力フォーム正解4 入力フォーム不正解4

チェックボックスとラジオボタンを縦に配列する

1.で説明したように、要素(チェックボックス)は縦に配置されている方が入力しやすいです。

入力フォーム正解5

入力フォーム不正解5

エラー表示は入力フォームのすぐ近くに置いて目立たせる

エラーになった箇所を探すために入力フォームを探させる時間を出来る限り減らしてあげましょう。

入力フォーム正解6

入力フォーム不正解6

入力フォームの幅を適切にする

電話番号、郵便番号といった入力される文字数が少ない場合などは文字数に合わせて入力フォームの幅を合わせましょう。

入力フォーム正解7 入力フォーム不正解7

*ではなく必須項目/任意項目の表示をつける

*などで必須項目/任意項目を区別するのはわかりづらいので、すべてに対して「必須」か「任意」かの区別をつけましょう。

入力フォーム正解8 入力フォーム不正解8

まとめ

いかがでしたでしょうか。
上に書いた内容はあくまで、デザイナー視点でですので、
デザインに入るときや、検証の際にはエンジニアの方とも相談の上決めていきましょう。
以上、もーりーでした。