離脱率を下げるフォーム入力のデザインルール5つ

こんにちは、ジーニアスウェブの和田です。

今回はフォーム入力についてのお話です。

「全部入力したのに！エラーが出てるなんで？」
「入力数が多いな・・・」
ユーザーはこういう時入力のハードルが高いと感じ入力を諦めてしまいます。

フォーム入力が最後のステップの場合、ユーザーがスムーズに入力完了できるように設計しておくべきです。
離脱率を下げるフォーム入力のデザインルールを5つを紹介します。

ルール5つ

カラム数

もしフォーム内で2カラムに配置されていたら、縦と横を行き来して眺めなければいけません。
ユーザーは縦方向への入力が自然で、入力行が横に複数列配置されると入力しづらく感じます。

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

英語表記で大文字だけは読みづらいです。
日本人がターゲットの場合は英語より日本語の方が直感的にわかります！

必須項目を明確に

「全部入力したのに！エラーが出てるなんで？」と感じるのは、「どこが入力漏れしているかわからない」という状態です。
必須項目は色分けし、入力されていない場合はエラーで知らせてあげるのが親切です。
また、任意項目はなるべく減らし、入力が少なく済むように項目を精査するのも大事です。

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

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

ステップを設ける

「ボタンをクリックするとまた入力項目が・・・」となると、どこまで続くのか不安になります。
例えば、
住所入力→決済情報入力→届け先指定→確認
のようにステップが複数ある場合、あとどれくらいかかるか表示して、完了へのステップが想像できるようにしておくといいです。

終わりに

今回はデザイン視点でしたが、エンジニアの方とも相談の上決めると更に入力しやすいフォームになります。
相談しながら入力しやすいフォーム作りを目指しましょう！

それでは失礼します。