フォームはわかりやすく、使いやすく、が鉄則です！

デザイン

2017年5月11日

どんなに素敵なコンテンツ、サービスでも、情報登録がしづらかったらそこで断念させてしまっては、これほど残念なことはないです。

フォームは何の情報を入力するのかひとめでわかり、スムーズに入力作業が進む導線を心がけて制作しましょう。

今回はフォーム制作において心がけるポイントをピックアップしてみました。

1. 1列表示にする

入力項目は垂直方向が一般的であるため、その推進力を阻害しないためにも1列表示が最善です。

ラベルとフォームの間隔が同じだと、項目がわかりにくくなります。ラベルとフォームの間隔を狭めグループ化し、項目と項目の余白を十分にとるだけで、たとえ項目数が多くてもわかりやすく、面倒な印象を軽減することができるでしょう。

選択肢が少ない場合はラジオボタンで全項目を表示したほうが余計な動作をさせず、スムーズなアクションを促すことができるでしょう。項目数の目安としては6つ未満といわれています。

ラベルをプレースホルダに置き換えるとユーザビリティが低下するという調査結果があります。ラベルはきちんとフォーム外におきましょう。できれば入力フォームの上に置くのが最善です。

入力フォームは垂直に進んでいくことから、チェックボックスやラジオボタンも縦に並べるほうが読みやすくなります。
※ただし、項目数が2,3であれば余白を十分にとることで、左右に並べてもいいでしょう。項目名の文字数なども考慮に入れながら対応しましょう。

入力内容をサーバーに送信するのは間違いないのですが、会員登録であれば「登録する」、登録の前に確認画面へ遷移するのであれば「登録内容を確認する」のように、ユーザーの意思に沿ったより具体的な表現を心がけましょう。

情報登録はユーザーにとってもっとも慎重になる行動ですし、ボタンをクリックした次の状態がきちんとわかることでその不安も解消され、離脱現象にもつながるでしょう。

必須項目に赤いアスタリスクがあると、webリテラシーの高い方なら必須項目だな、と理解することができるかもしれませんが、万国共通ではないので、きちんと「必須」というテキストで表示しましょう。

フォームな長さ（幅）はユーザーに入力量を暗示させます。文字数に合わせて入力フォームを短かくするのが最善です。

例えば通販サイトなら名前、住所、電話番号などの基本情報と、その他メルマガ購読やDM発送の有無などのサービスに関する情報など、大きな分類に分けられます。フォームの構成でも分類分けをすることで、わかりやすく、面倒な印象を軽減させることができるでしょう。