【2020年最新事例付き】入力フォーム作成の際に注意したい12のポイント

入力フォームをデザインする際に参考にしたい、Nielsen Norman が過去に公開している10のベストプラクティスに独自のポイントを2つ加えた12個のポイントについて解説しています。
よろしければこちらもご覧ください

生活様式が見直される中、Eコマース市場が伸びていることに代表されるように、オンラインでの商品やサービスの販売・申し込みは生活者にとっての重要性を増しています。
ユーザーとなる方とのコンタクトポイントである新規登録や申し込みのための入力フォームは特に重要です。購入したり検討を進めようとしたりしているユーザーを、フォームの不備のせいで逃したくはないものですよね。

今回は、より使いやすい入力フォームをデザインするために注意したい12のポイントについて、良い例については実例を交えながら紹介します。

※本記事は、Nielsen Norman が過去に公開している10のベストプラクティスに独自のポイントを2つ加え、いくつかの業種に対してそれぞれ2~3のサイトやアプリの新規登録/申し込みフォームをベンチマークした結果に基づいて記載しています。

Website Forms Usability: Top 10 Recommendations | Nielsen Norman Group
※日本語訳記事:https://u-site.jp/alertbox/web-form-design

esaura-logo-l.png
この記事は、コンバージョン獲得に強いデザインコンサルティング会社
えそらLLCにより掲載されました。

入力フォームを作る上で注意したい12のポイント

1. 可能な限り項目数を減らす

悪い例では登録には直接関係しない情報も取得
良い例:PayPay(アプリ) – 初回入力に必要な情報がかなり絞られています。

新規登録や申し込みの段階で必ずしも必要でない項目や、わざわざユーザーが入力する必要のない項目は削除しましょう。登録後に別途取得するなどの工夫ができるかもしれません。特に「任意」となる項目はこれに該当する可能性があります。

2. 関連のあるラベルと入力欄はグループ化する

悪い例では、ラベルと入力欄が等間隔で続いている。また、氏名や住所に関する情報はひとまとまりで見えた方が、何の入力が求められているのか視覚的に判断しやすい
良い例:出前館(サイト) – ラベルは入力欄のすぐ左上に、氏名や住所など関連のある項目は間隔を狭くしてグループに見えるようにしています。

ラベルと入力欄は等間隔に並べず、入力欄のすぐ近くにラベルを設置したり、視覚的にグループであることが分かるようにしましょう。対応する入力欄の特定が困難だと、ユーザーは入力に通常よりも時間を要し、離脱に繋がってしまうこともあります。

3. レイアウトは1カラムにする

悪い例では、論理的に関連の薄い項目が2カラムで構成されている
良い例:ZOZOTOWN(アプリ) – 論理的に関連のある項目は横並びにした上で、全体は1カラムで構成されています。

入力フォームは下に縦に進んでいくことが自然な動きのため、論理的に関連の無い項目を複数カラムに分けてレイアウトするのは避けましょう。
今回はスマホのサイトやアプリを対象としたため、この項目で良くない例のような構成をしているアプリやサイトは見当たりませんでしたが、PCでのデザインを行う際などには注意しましょう。

4. 文脈に沿った一般的な順序で並べる

悪い例では、登録に必須な情報の方を後から入力するようになっている
良い例:UNIQLO(アプリ) – 登録に必要な情報を先に入力させた後、属性に関する情報を取得するような順序で並んでいる。

上の良くない例では、新規登録のフォームに入力しようとしているのにも関わらず、まず「性別」や「生年月日」を入力するようになっています。多くのサービスでは「メールアドレス」と「パスワード」を提供すれば、登録は完了できるという期待があるため、これから登録をしようとしているユーザーの期待には沿っていないかもしれません。
そのように考えると、「郵便番号」の位置も、敢えてメールアドレスとパスワードの間に設置するのには違和感があります。

webtan-linkbutton.png

よろしければこちらもご覧ください
この記事が役に立ったらシェア!
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

もっと見る
Sponsored by

人気記事トップ10(過去7日間)

今日の用語

RSSAC
ICANN(The Internet Corporation for Assig ...→用語集へ

連載/特集コーナーから探す

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]