皆さんこんにちは、小野です。
先日お気に入りのカメラのレンズが壊れてしまい、新しいレンズを見に行ったのですが、店頭に並んでいる高機能のカメラを思わず手にとってしまい新しくカメラを購入してしまいました。
新しいカメラを持って出かけるのが楽しみですが、「今なら安い」「人気No.1」という言葉に弱いので勢いでものを買いすぎないようにしていきたいところです！
さて、今回は入力フォームのデザインについてお話ししていきたいと思います。
webサイト上で資料請求や会員登録をする場合、入力フォームに情報を入力する必要がありますが、入力項目の分かりづらさや操作のしづらさやはユーザーにストレスを与えてしまい途中離脱してしまう原因となってしまいます。
皆さんも経験されたことはあるかと思いますが、私自身もフォームの項目数が多かったりエラーの場所がわからないと途中でやめてしまうことがよくあります。
ユーザーが入力完了（目標達成）まで、迷わず、スムーズに達成できるように最適化した使いやすいデザインにする必要があります。
そこで今回は、タイトルに書いてあるように、すぐにできる改善のポイントを5つまとめてみました。
目次／このページでわかること
1.入力から完了までのステップを入れる
流れがわからなかったり、項目が多すぎて先が見えないフォームは、入力する途中で嫌になって登録を止めてページから離脱するユーザーも出てきます。
事前に入力から完了までのステップがわかるようなデザインを入れることでユーザーも心の準備ができるので安心して入力するようになります。
2.必須項目が一目でわかりやすいような表記にする
よく必須を示すマークとして米印（※）やアスタリスク（*）を使用しているフォームもありますが、すべてのユーザーがそのマークの意味を認識できるとは限りません。
マークを使用するとフォームの上部に「※は必須項目です」といった注釈を入れる必要があるので、注釈を読むための無駄な視線移動をさせてしまい、ユーザー自ら判断して入力を進めてもらわないといけません。
必須マークは入力をする際に一目でわかるように「必須」や「任意」と入れたマークにしたほうが良いです。
また、項目が少ないフォームであれば、必須項目の入力欄の背景色を赤くして、必須と任意の項目の違いを瞬時に判断できるようにするのも1つの方法です。
3.エラー表示は修正箇所がわかりやすいようにする
入力漏れなどのエラーがあった時にどこに入力漏れがあるのか、どこがエラーが出ているのか表示されるようにしましょう。
全ての入力内容を入力して送信ボタンを押した時にエラー文を出すと、ユーザーがどこが間違っているのが自身で確認しなければならないためストレスになります。
入力エラーがある場合はリアルタイムで項目の部分にエラーが出るようにすることで、わかりやすく親切です。
4.オプションは横並びではなく縦に並べる
横並びに選択項目が多く並んでいると、読みづらく、関連性も分かりにくくなり、視線移動も増えてしまいます。
縦並びにすることで、複雑な選択肢でも比較しやすく、選びやすくなります。
ただし、選択肢が明示的である時や明確に個々を区切ったデザインにする場合は、横並びでもデザインを工夫すれば選択しやすくなるので、使い分けることが重要です。
また、実装の話になりますが、チェックボックスやラジオボタンはボタン内のみ押せるようにするのではなく、ラベル部分（文字）をクリックした時にも選択できるようにしましょう。
5.ボタンはアクションを示す言葉を使用する
「送信」といった汎用的なボタンにするのではなく、「何をする・何が起きる」ボタンなのか、クリックした際に実行されるアクションを明確にいれるほうが安心感を与えます。
例えば「無料会員登録をする」「お申し込み内容を送信する」「入力内容を確認する」といったような感じです。
いかがだったでしょうか？
今回ご紹介したものはほんの一部ですが、すぐに実践できるものをご紹介させていただきました。
動きに関わる部分はコーダーさんと相談しながら最適化する必要があるかと思いますが、デザインを作成するときのちょっとした工夫でユーザーが使いやすいフォームになっていくと思います。
ユーザーが入力や選択にストレスを感じない、使いやすいフォームを作成しましょう！それでは。