入力完了率を向上!入力フォームの完了率を改善する7つのポイント【EFO】 | SiTest (サイテスト) ブログ

メニューボタン閉じるボタン

入力完了率を向上!入力フォームの完了率を改善する7つのポイント【EFO】

ウェブサイトにおける入力フォームはとても重要です。
海外の調査ではカートの平均放棄率は67.91%、モバイルでいうと81%にも上るとも言われています。

本記事では、カートの放棄率をなるべく低減できるように、ウェブサイトの入力フォームの完了率を改善するための7つのポイントを紹介します。

目次

 

入力フォームはとにかくユーザーのストレスを減らすことに注力する

入力フォームはとにかくユーザーのストレスを減らすことに注力する
入力フォームそのものは、ユーザーに対してのセールスにはなりません。
つまり、ユーザーにわざわざ情報を入力してもらっているということになります。

そこで、入力フォームにおいては、ユーザーにとにかくストレスを与えないことに注力する必要があります。
 

入力フォームの完了率を改善する7つのポイント

フォームの入力完了率を高める方法は以下の7つです。

  • ■ 項目は最小限にする
  • ■ 任意項目か必須項目かを明確にする
  • ■ フォームは一列にする
  • ■ エラーはリアルタイムで表示する
  • ■ 完了までのステップを表示する
  • ■ 入力フォームの縦、横幅を適切に設定する
  • ■ 自動入力・修正が可能ならば設定
  •  
    それでは、順に解説していきます。
     

    項目は最小限にする

    項目は最小限にする
    皆様も経験があると思いますが、縦にズラリと項目が並んでいる入力フォームは見るだけで入力する気が失せ、即刻離脱につながる場合もあります。
    本当に必要なのか、またユーザーが入力しづらいデリケートな質問(例えば家族構成や年収など)がないか改めて確認してください。
    必要でない項目は削除しましょう。

     

    任意項目か必須項目かを明確にする

    任意項目か必須項目かを明確にする
    ユーザーはなるべく情報を入力したくないと考えています。
    つまり任意項目に関しては基本的に入力しません。
    また、入力したくない項目に関しては「これは入力しないといけないのだろうか?」とユーザーは悩みます。
    悩んだ末に、入力を諦めて離脱に繋がる可能性がありますので、必須か任意の区別は明確になるようにしましょう。

    必須項目の場合には「【必須】」というテキストを入れるようにしましょう。
    よく赤字の「*」だけを表示しているフォームもありますが、分かりづらいのでテキストでの補足を必ずしておきましょう。
     

    フォームは一列にする

    フォームは一列にする
    入力フォームは基本的に一列にしましょう。

    パソコンであれば正確なクリックや「Tab」キーにより次の項目へフォーカスすることが可能ですが、スマホの場合、フォームが細かく分かれているとそのたびにタップをしないといけないため面倒であり、誤タップを誘発します。

    また、意図的なものではありませんが、フォームが2列になってしまう以下のような構成も推奨されません。

  • ■ 氏名の入力欄を「姓」と「名」に分割する
  • ■ 電話番号の入力欄を「ハイフン(-)」で分割する
  • ■ チェックボックスを2列にする
  •  

    エラーはリアルタイムで表示する

    エラーはリアルタイムで表示する
    もし、ユーザーが間違った内容を入力していた場合には、エラーのアラートをリアルタイムに表示しましょう。
    すべて入力が完了し、送信ボタンを押してからエラーを指摘されると気が滅入ります。
    また、やり直しは人間が最も嫌う行動の一つでもありますので、リアルタイムでのエラー表示は必須です。
     

    完了までのステップを表示する

    完了までのステップを表示する
    入力フォームを複数のページに分割している場合には、現状がどれくらいの進捗に当たるのかステップを表示しましょう。
    進めても進めても終わらない場合にはユーザーが離脱してしまう可能性もあります。
    予め、どれくらいのステップがあるのか表示ししておくことで入力完了率が改善されます。

    なお、入力項目がどうしても長くなってしまう場合でも、複数のページに分割することで入力完了率が増加する場合があります。
     

    入力フォームの縦、横幅を適切に設定する

    入力フォームの縦、横幅を適切に設定する
    入力項目の内容によって、縦幅や横幅を適切に設定しましょう。

    例えば、「ご質問」や「ご要望」といった、改行が発生したり長文となる可能性が高いものに関しては1行のフォームではなく、複数行がしっかり見えるフォームにしましょう。
    HTML で考えると、input タグではなく textarea タグを使用してください。
     

    自動入力・修正が可能ならば設定

    自動入力・修正が可能ならば設定
    ユーザーの手間を省く方法として、自動入力があります。
    例えば、郵便番号を入力すると住所の途中まで自動で入力されたり、氏名を入力するとフリガナが自動で入力されるなどです。
    自動入力、修正が可能な項目としては以下のようなものがあげられます。

  • ■ フリガナの自動入力
  • ■ 郵便番号から住所の一部自動入力
  • ■ 半角・全角の自動修正
  •  
    入力することそのものが手間ですので、なるべくユーザーの操作を減らせる部分がないか精査してみましょう。
     

    さいごに

    本記事では、入力フォームの入力完了率を改善するためのポイントを紹介しました。
    この他にも初期値表示など、様々な工夫がありますので、色々試してみて入力完了率が最も高まるフォームを目指してください。

    フォームまで到達し、入力を試みるユーザーはかなりホットな状態です。
    そのようなユーザーをフォームの操作性が悪いなどの理由で放してしまうのはとてももったいないです。
    本記事で紹介した内容は、すべて実施しようと思っても1日かからないので、あらためて見直してみてください。

    &nsp;

    入力支援はCSSでも可能だが、ツールを導入することで簡単に実装可能

    上記のうち、例えばリアルタイムエラーなどはサイトのソースコードを編集することで可能になります。
    しかし、Web担当者がエンジニアを通さず、すぐに実装したい場合には専用のツールを導入するのが最も工数がかかりません。

    当社が開発するツール SiTest (サイテスト)は、最低限の入力支援機能を搭載しており、上記で記載した内容のほとんどが導入しただけで実装可能です。

    SiTest の入力支援機能

    SiTest 無料トライアルのお申し込みはこちらから