EFOで気をつけたい!必須項目と任意項目のわかりやすい表示方法

必須か任意か

フォームの<必須項目>と<任意項目>。
これがきちんと表示されていないと、エラー表示の要因となりユーザーをイライラさせてしまう可能性が高くなります。
いっぽうで明確に表示できていれば、入力完了までのステップが見えやすくなり、プラスに働いてくれるでしょう。
必須/任意の表示方法は、EFOにおいて重要なポイントです

本日はそんな<必須項目>と<任意項目>のわかりやすい表示方法をお伝えしていきます。

目次

  1. 必須項目は固めて配置しよう
  2. 見た目に差をつけよう
  3. 「必須」と文字で表示しよう
  4. 項目名のそばに表示しよう
  5. ひとつずつ表示しよう

それでは、順番に見ていきます。

必須項目は固めて配置しよう

下の図はフォーム内に必須と任意の項目がバラバラに入り乱れている場合です。
必須と任意が入り混じった状態
もしもあなたが「必須だけ入力したい」と思っていたとしたら、どうでしょうか。
任意項目をわざわざ飛ばしていかなければならず、非常に入力しにくいフォームに感じるのではないでしょうか。
また、時には必須項目が本来よりも多いような印象を与えたり、ゴチャついて見える原因にもなってしまいます。

そうならないよう、必須と任意はそれぞれ場所をかためておくと親切です
必須を上部にかためた場合
必須項目のみ、上部に移動してみました。
順番を入れ替えただけですが、フォームのゴールがかなり明確になったのではないでしょうか
「意外と必須が少ないな」と感じた方もいるかもしれません。

さらに心理的障壁を軽減するには、こんな方法も。
送信ボタンを必須項目の下に配置
必須項目が終わった時点で送信ボタンを配置し、すぐに送信できるようにしています。
さらに項目が少なくスッキリと見えるのではないでしょうか。
任意項目が多い場合に取り入れたいテクニックですね。

見た目に差をつけよう

必須項目の箇所は、背景色などデザイン表現で差をつけると直感的に理解しやすくなります。
全角文字を入力した直後
特に、日本国内のフォームにおいては必須項目にピンク色の背景色を付けることが多いため、この例にならっておくとユーザーが混乱することはないのではないでしょうか。
なお、必須の表現は赤系、任意の表現は緑色・青色で表現することが多い傾向にあります。

「必須」と文字で表示しよう

「※」「*」などのマークで必須を表現することが多いですが、うっかり見落としの原因にも。
入力形式を連想させるもの
マークではなくきちんと文字ではっきりと「必須」と書くことをおすすめします。

項目名のそばに表示しよう

下記のように、必須マークを項目の横に表示するような例を見かけますが、
必須を項目の横に表示
項目名の近くに表示したほうが、ぱっと見でも認識しやすくなります。
必須を項目名のそばに表示
必須表示は、項目名の近くに表示しましょう。

ひとつずつ表示しよう

すべて必須項目のフォームなどで、よく見かけるのが下記のパターン。
すべて必須項目です
フォームの上部などに、「すべて必須です」のような文言を表示し、入力項目側には何の表示もありません。
一見、スッキリ見えて良さそうですが、これだと必須であることに気づかずに送信してしまうリスクが高くなってしまいます。

特に項目が多いフォームの場合は、フォームの入力欄がすべて必須項目の場合でも、ひとつずつ必須である旨を表現することが大切です。

まとめ

いかがだったでしょうか。
今日は、わかりやすい必須項目の表示方法についてお伝えしました。
今一度、ご自分のフォームの必須表示が適切になっているか、確認してみてはいかがでしょうか。

必須か任意か

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です