みなさんは、「サブミットブロック」という機能をご存知でしょうか?
サブミットブロックとはEFOでは定番の機能のひとつで、フォームのすべての必須項目をエラーなく入力し終わるまで、アクションボタンをクリックできないようにするというものです。
本日は便利なサブミットブロックのメリット・デメリットや効果的な活用方法などについてまとめてみたいと思います。

サブミットブロックとは

サブミットブロック機能とは何か、については冒頭でお伝えしたとおりです。
弊社のEFOツール「エフトラEFO」のサブミットブロックでは、ユーザーがフォームの入力を完成させるまでの間は次に進むためのボタンの箇所を、あらかじめ用意した代替画像に差し替えて表示します。

サンプル(フォーム入力中)

必須項目の入力がまだ残っている状態。送信ボタン部分には代替画像が表示されており、次に進むためのアクションを起こすことはできない
必須項目の入力がまだ残っている状態。送信ボタン部分には代替画像が表示されており、次に進むためのアクションを起こすことはできない

サンプル(フォーム入力完了後)

必須項目をすべて入力した場合。代替画像が消え、次に進むためのアクションボタンが現れる。
必須項目をすべて入力した場合。代替画像が消え、次に進むためのアクションボタンが現れる。

サブミットブロックのメリット

サブミットブロックを導入することで、エラーが残る状態を完全に解消しない限り次のステップに進めません。
つまり、基本的にエラーページが現れることがなくなります

基本的にエラーページはイラっとする
基本的にエラーページはイラっとする

ボタン押下後にエラーが出ることは、ユーザーにとって非常にストレスの元ですから、サブミットブロックの導入によってこの大きなストレスを無くせるというのは大きなメリットですよね。
また、エラーページに遷移することで、単純にページの遷移(読み込み)回数やアクション(クリック)の数も少なく済むということであり、その点でも離脱リスクの削減に一役買っていると見ることができます。

とくにこんなフォームへの導入がおすすめ

上記のような特徴から、サブミットブロックはとくに下記のようなフォームへの導入がおすすめです。

エラー画面からの離脱が多い場合

サブミットブロックを導入することでエラー画面に遷移させなくて済むため、結果として離脱を減らすことができます。

エラーページの修正が難しい場合

エラーページの表現や使い勝手に問題があるけれど、すぐに修正を加えることが難しいというような場合です。
サブミットブロックは入力ページ側で、しかもjavascriptを使って制御することができるため、エラーページの修正が難しい場合でも導入ができる可能性があります。

確認ページがないフォーム

確認ページがないフォームの強みはテンポよく送信が完了する点。その流れを妨げるエラー表示を阻止できます。

入力ページが複数あるフォーム

入力ページが複数あるフォームの場合、いかに画面遷移を減らすかがカギです。

サブミットブロックのデメリット

いっぽうで、サブミットブロックも使い方によってはストレスを生む要因にもなりますので、気をつけたいところ。
たとえば、送信ボタンがブロックされているけれども、その理由がわからないと、たいへんなストレスですよね。

対処法~他のEFO定番UIとの併用で効果を発揮~

サブミットブロックによるストレスをうまないためには、他の入力支援機能とうまく併用することがポイントです。
とくに、

  • 入力内容に不備がないかどうか
  • 残りのアクションはどのくらいあるか

についてユーザーが迷わないように注意したいところです。
具体的には下記の4点に気をつけてみるとよいでしょう。

必須や入力形式をわかりやすく表示

ユーザーがエラー「を見過ごすことが無いよう、必須項目や入力形式はわかりやすく目立つように明示しましょう。

リアルタイムエラーは必須

入力内容に間違いがないかを入力したタイミングで知らせると、ストレス無くエラーチェックができます。

入力成功サインも効果的

問題なく入力できているかが確認できているように、入力が成功したタイミングでその旨を表示することも効果的です。

ガイドで残り項目数を表示

送信までの道のりを示す手段としては、ガイドによる残り項目数のカウントも有効でしょう。

最後に

いかがだったでしょうか。
本日はEFOの定番入力支援機能のひとつである、サブミットブロック機能についてご紹介しました。
フォームにうまく入力支援機能を採り入れ、より使いやすいフォームを目指したいですね。