PC/SP別フォームEFO実装例

エラーメッセージ

入力必須項目に入力をしようとして、何も入力せずに項目から離れた（フォーカスアウトした）場合や入力形式を誤ったまま次の項目に進んだ場合に、吹き出しとして表示されるのがエラーメッセージです。

アラートとわかりやすく、赤いフレームを項目の上に表示させることで入力エラーを防ぎます。

残数ナビゲーション

入力必須項目の残数をカウントダウン表示し、ユーザーに入力完了までの状況をお知らせします。 表示タイプは複数ありますが、PCに最適なタイプを3つ紹介します。

①ノーマルタイプ

入力必須項目の残数表示と項目名も合わせてモーダルウィンドウで表示します。 項目名をクリックすると該当する項目にリンクするため、ユーザーは未入力項目を簡単に見つけることができます。

②フラットタイプ

入力必須項目の残数をミニモーダルウィンドウで表示します。
シンプルな表示ですが、メッセージ内容は変更できるので、フォームに合ったメッセージを入れることが可能です。

③プログレスバータイプ

入力必須項目の全体の母数に対して、終了までどれくらい進んでいるか、プログレスバーで表示します。 入力完了までの道のりを示すことで、入力モチベーションを高く維持できます。

このように、それぞれのタイプで役割も異なるので、どのタイプが効果的かどうか実際にABテストで比較することをおすすめします。

エラーメッセージ

PCと同じようにエラーメッセージを表示させることは、ユーザーにとって入力のアシストになります。PCでは入力項目の上に表示しておりますが、SPだとスクロールした際に画面から吹き出しが隠れてしまう恐れがあるので、ここでは入力項目の下に表示させます。

残数ナビゲーション

SPでは画面幅が狭まるため、ナビゲーションが入力の邪魔にならないシンプルタイプがよいでしょう。また、画面のヘッダー部分に配置すると入力項目に被るため、フッターに配置することをお勧めします。

キーボード変換

SPはPCに比べて入力の操作が困難で、入力項目にあったキーボードを切り替えての入力が必要となる場面も多いかと思います。キーボード変換を使えば、入力時に項目に合ったキーボードを自動的に表示させることができます。
例えば、電話番号や郵便番号には数字入力のキーボードを、URLやメールアドレスなどには英字（アルファベット）入力のキーボードを表示させると、ユーザーの手間が減って離脱防止につながります。