資料の請求、予約、お問い合わせ、サインイン等、多くのフォームにおいては、重複する内容が送信されてしまってもさほど大きな問題になることはありません。
そもそも重複する場合はシステムエラー等で送信できなかったり、重複した場合でも、オペレーション側でそれが意図しない重複送信だということが発見できる場合がほとんどでしょう。
ただし、購入フォームについては話が別。
注文内容を重複送信してしまっても、それが意図したものなのか否かをうかがい知ることが難しく、かつ決裁や発送などの手順がそのまま進んでしまう場合がほとんであると思います。
つまり、重複送信の可能性を考慮することは、購入フォームのEFOに取り組むうえで重要です。
今回は、そんな意図しない重複送信を防ぐ方法について考えてみたいと思います。
そもそも、どういう時に重複送信が発生するか
まずは購入フォームの重複送信が発生してしまう原因を考えます。
今回は、重複の原因を大きく下記の３パターンにわけて考えてみました。（ほかにもあるかもしれません。）
それでは、順番に見て行きましょう。
送信ボタンの2回以上のクリック
とくに50歳以上の年齢が高めの方がやってしまいがちなのが、送信ボタンをダブルクリックする行為。Windowsのエクプローラ等では、ファイルを開く動作がダブルクリックであるため、いつもの癖で２回クリックしてしまう訳も頷けます。
ユーザーがダブルクリックする可能性が充分にあること念頭におき、フォームの設計を進めたいですね。
またダブルクリック以外でも、一度クリックしてみたけれども、ちゃんとクリックできているかどうか確信が持てずに再びクリックしてしまうというパターンもあると思います。
上記のいずれも、下記のような対応が効果的かと思います。
文言を添える
シンプルな方法です。「1度だけクリックしてください」という旨の文言をボタンの近くに配置しましょう。
「チケットぴあ」の確認画面。少し目立たないが、「購入するボタンは1度だけ押して下さい。ダブルクリックしないでください」という記載がある
押下後、クリックできないようにする
ボタンを1度のクリックしか受け付けないようにしてしまいましょう。
一度クリックすると、以降は受け付けない動作を実装すれば、クリックできたことも明確。
ただし、素早いダブルクリックには対応できない可能性があるので、注意が必要です。
「読み込み中」をあらわす画像、ページ等を表示する
送信調理に時間がかかる場合、ユーザーが送信できたかどうかわからずボタンの2度押しを引き起こします。
処理中であることがわかるようなloading画像や文言、あるいは処理中の旨を伝えるページを表示すると良いでしょう。
同じく「チケットぴあ」の決済画面。処理に時間がかかるため別に処理中ページを用意
ローディング画像を出すだけでも効果がある
クリック（タップ）時の表現を実装する
とくにスマートフォンの場合、PCに比べてマウスオーバー表現やクリックの感触が乏しい上に、タップに対する反応速がもいまいちであること多く、
ユーザーはきちんと送信ボタンをタップできたかどうかの確証を持ちづらくなります。
スマートフォンでは、通常ボタンやリンク等のタップ時のハイライト表現がデフォルトで実装されていますが、きちんと動いているかどうか確かめておきたいですね。
もしいまいち目立たない場合は、CSSやjavascriptを用いて、タップ時のハイライト表現のUIを整えておくと良いでしょう。
同じ商品を２回カートに入れてしまう
以前カートに入れたことのある商品を、それと気付かず後のタイミングで再びカートに入れてしまうことで重複が発生するケースです。
同じ商品を長期に渡って検討している場合や、複数の似た商品を比較検討していると、意外とこのミスは頻繁に起こりえます。
重複する旨をアラートできるとベスト
既に同じ商品がカートに入っている旨をアラートできると非常に親切です。
Amazonでは、同じ商品を2回カートに入れると注意を促すメッセージを表示してくれる
個数を誤って入力してしまう
そもそも、ユーザーが商品をカートに入れる際に個数を誤るというパターンです。
InternetExplolorの古いバージョン（IE6）では、セレクト要素にフォーカスした状態ではマウスホイールで選択肢が変わってしまう現象があり、このケースが頻繁に起こりえました。
現在は比較的最近のバージョンのブラウザが使われるようになってきたので、さほど心配する必要はないかもしれません。
確認画面で目立たせる
いずれにしろ、注文内容の間違いは最終的に確認画面で防げるようにしておきたいもの。
注文の合計金額や内訳、個数などは確認しやすいよう整理。デザインされた確認画面を構成するようにしましょう。
最後に
いかがだったでしょうか。本日は購入フォームでの重複送信を防ぐ原因とその対策方法について考えてみました。
購入フォームを運営のご担当者さまは、ぜひ参考にしていただければ幸いです。
