入力フォームのデザインでUXの質を落とさない方法5つ
入力フォームにデザインは必要ない、とお考えではありませんか？実は入力フォームこそ、デザインが重要です。入力フォームのデザインはUXの良し悪しに直結するからです。この記事では、UXの質を落とさないためにできるコツとアレンジ例を5つ紹介します。
UXとはユーザーエクスペリエンスの略で、サービスや商品を通じてユーザーが得る体験のことです。UXが悪いとユーザーはストレスを感じて、入力しているページから途中離脱してしまう可能性があります。申し込みや購入などのCVを多く獲得するには、フォームを最後まで入力してもらう必要があります。そこで、ユーザーがすすんで入力したくなる“プラスひと手間”も合わせて解説いたします。
UXと似ているようで意味は全く違う「UI」もよく聞く言葉です。WebサイトのUIデザインとは何か、実例を用いながら解説した記事はこちらからご覧いただけます。
弊社では、入力フォームのあるHP・LPやバナーなどWeb制作全般を承っております。入力フォームが既にあるという場合でも、改善策のご提案が可能です。ご相談は無料ですので、まずはお気軽にお問い合わせください。
目次
ポイントその1 縦に並べる
入力項目は基本的に、縦に並べてレイアウトします。上から下へ移動するような導線は自然で見やすく、スマートフォンの画面サイズでもちょうどよい大きさで表示されます。ユーザーの縦の動きを妨げないように、列はなるべく1つに統一すると良いでしょう。例外として姓と名で入力欄を分けたり、男女どちらかを選ばせる場合は横並びでも違和感はありません。縦並びにするか、横並びにするかはターゲットや他部分のデザインに合わせましょう。
ラベル名も入力欄の上に置き、縦の配置を意識します。チェックボックスなど選択式の場合も縦に項目を並べます。そうすることで、指でタップしやすい大きさを保つことができます。
プラスαのUX向上法 表のような形式にする
線でカテゴリや欄を区切り、表のようにするとラベル・入力欄が横並びでも見やすくなります。線はなるべく目立たせず、さりげなく引いて入力の邪魔にならないようにしましょう。
プラスαのUX向上法 まとまりをつくる
ラベルと入力欄は近づけ、逆に他の項目とは離すようにします。どのラベルがどの入力欄を指しているのか分かりやすくなり、視認性が上がります。大きなカテゴリごとに罫線で区切っても良いでしょう。
ポイントその2 ラベル名は分かりやすく
ラベルには短い単語を使用しましょう。パッと見てすぐ理解できる文言が理想的です。ユーザーは読み込まないと分からないものにはストレスを感じてしまいます。英字の場合、分かりにくくなるため小文字のみまたは大文字のみの表記は避けましょう。
よく見かけるNG例として、入力欄の中にラベル名を入れているケースが挙げられます。入力欄の中のグレーアウトした文字はプレースホルダテキストといい、入力例を提示するのに使われます。プレースホルダテキストは入力すると表示されなくなります。そのため、ユーザーは何を聞かれているのかが分かりにくくなります。
プラスαのUX向上法 入力している箇所が分かるようにする
今入力している欄がどこなのか分かるように、入力欄の色を変えてみるのも良いアレンジです。入力している箇所が分かることで、誤入力を防ぐ効果があります。
プラスαのUX向上法 自動入力で手間を省く
デザインのアレンジではないですが、例えば郵便番号を入力すると市区町村までを自動で反映してくれるフォームがあります。この機能はオートコンプリートといい、ユーザーが過去に入力した情報を再度文字入力する時に予測表示してくれます。ユーザーの作業が省けるため、ストレスは減少します。
ポイントその3 動作が分かるようにする
入力エラーの表示はエラーが表示されている項目の直下、もしくは直上に配置します。フォームの一番上や一番下などに表示されていると、正しく入力されている項目にもエラーが出ているように見えます。ユーザーはどこの入力がエラーになっているのかが分からず、正しく入力されている項目を修正してしまうかもしれません。そのため修正が必要な箇所のすぐ直下、もしくは直上にエラー表示を配置します。
CTAの文言は押下した後の動作がユーザーに分かるようにしましょう。例えばフォーム入力後にすぐ登録される場合は、ボタンの文言は「送信する」や「登録する」とした方が分かりやすくなります。入力内容を確認させるページを挟むなら「確認する」というボタンにします。
入力必須項目なのかそうでないのかも、動作を分かりやすくするのに重要な要素です。ユーザーが入力しなかった項目が実は必須項目だった場合、入力漏れでエラーが発生します。一度で入力が完了できるように、入力してほしい項目には必須であることが分かるような表示をしましょう。
プラスαのUX向上法 進行度を表示する
入力項目が多い場合やページ遷移が多い場合は、全体のどれだけ進んだのかを表示します。あとどのくらい工数が残っているのかが分かると、ユーザーは安心します。ただし、進行度が表示できるからといって作業量を増やすのはNGです。なるべく少ない工数であることは前提条件にしておきましょう。
プラスαのUX向上法 入力欄の横幅を適切にする
入力欄の横幅は入力する内容の長さに合わせると良いでしょう。そうすることで聞かれている内容が直感的に分かりやすくなります。例えば住所などを入力する欄は長く、郵便番号を入力する欄は短くします。
ポイントその4 回答形式は適切なものを選ぶ
回答形式は、項目の選択肢数に合わせて変えます。選択肢が5個以下なら、最初から表示されているラジオボタンやチェックボタンにしましょう。5個以上の選択肢はプルダウンにすると見た目がすっきりします。しかしプルダウンは、タップまたはクリックしないと選択肢がすべて表示されません。選択肢が多いと比較しにくく、ユーザーの手数も増えるため多用するのはあまりおすすめできません。多すぎる選択肢はユーザーを混乱させてしまうため、なるべく選択肢は5個以下に抑えるようにしましょう。
ラジオボタンやチェックボタンで、選択肢を全て表示できているとしても安心できません。選択肢を表示している範囲が長いとスクロールしなければいけないため、比較しにくくなります。多くても1スクロール内で表示できる項目数が理想的です。
プラスαのUX向上法 クリックできる範囲を広めに取る
ラジオボタンやチェックボタンは、丸やチェックボックスの部分だけを選択可能範囲にしがちです。しかし小さい範囲にしてしまうと、スマートフォンでのタップ・マウスカーソルでのクリックが困難になり選択ミスを招きます。クリック可能範囲を選択肢の文字まで含んだり、1つのボタンにまとめたりしてユーザーが選択しやすい大きさにしましょう。
プラスαのUX向上法 選択した項目は違う色で表示する
いくつかある選択肢の中で、選択した項目だけを別な色にします。自分が選んだ項目が分かりやすいため、ユーザーの選択ミスを防止する効果があります。
ポイントその5 ページから離脱させないようにする
よくある離脱要因として、プライバシーポリシーやヘルプ表示が挙げられます。プライバシーポリシーを掲載する場合はリンクで該当ページへ遷移させるのではなく、なるべくその場で読めるようにします。別ページへ遷移させるとユーザーが離脱してしまう恐れがあります。テキストボックス内でスクロールさせる等、ページ遷移が不要になるような工夫をしましょう。
入力内容に困った場合のヘルプ表示は、ポップアップやマウスオーバー等がおすすめです。スマートフォンで別のページにあるヘルプを見ながら入力するのは、ユーザーが不便に感じてしまいます。基本的に入力フォームのページ内で、すべて完結できるようにしましょう。
プラスαのUX向上法 入力完了が分かる表示にする
入力ができた欄は、完了したことが分かるように色などを変更します。タスクが完了した状態が分かると、早く終わらせようとする心理が働きサクサク進みます。
まとめ
入力フォームのUXが向上すると、ユーザーのストレスが減少し、途中離脱せずにCVへ繋がりやすくなります。ユーザーの目線に立ってその入力フォームが入力しやすいかどうか、自分ならどう思うかを改めて見返してみましょう。この記事で紹介したポイントを現状の入力フォームに反映したい、またはこれ以外のより良くなる方法を見つけたいという方はぜひプライムナンバーズへご相談ください。
Web制作のご依頼はプライムナンバーズへ！
弊社では、HP・LPやバナーなどWeb制作全般を承っております。ご要望に応じて名刺やチラシ、リーフレットといった印刷物の制作も可能です。デザインからキャッチコピーまで「まるっ」と担当いたします。「成果の出る販促物」を作りたいとお考えの方は、ぜひプライムナンバーズにご相談ください！
入力フォームに限らず、Webサイト全体のUXを向上させたいという方は参考サイトでイメージや流行を探るのも手です。おすすめの参考サイトはこちらの記事で紹介しています。
