トラブルの元!意図しない【重複送信】を事前防止する購入フォームの改善施策

資料の請求、予約、お問い合わせ、サインイン等、多くのフォームにおいては、重複する内容が送信されてしまってもさほど大きな問題になることはありません。
そもそも重複する場合はシステムエラー等で送信できなかったり、重複した場合でも、オペレーション側でそれが意図しない重複送信だということが発見できる場合がほとんどでしょう。

ただし、購入フォームについては話が別
注文内容を重複送信してしまっても、それが意図したものなのか否かをうかがい知ることが難しく、かつ決裁や発送などの手順がそのまま進んでしまう場合がほとんであると思います。
つまり、重複送信の可能性を考慮することは、購入フォームのEFOに取り組むうえで重要です。

今回は、そんな意図しない重複送信を防ぐ方法について考えてみたいと思います。

そもそも、どういう時に重複送信が発生するか

まずは購入フォームの重複送信が発生してしまう原因を考えます。
今回は、重複の原因を大きく下記の3パターンにわけて考えてみました。(ほかにもあるかもしれません。)

それでは、順番に見て行きましょう。

送信ボタンの2回以上のクリック

とくに50歳以上の年齢が高めの方がやってしまいがちなのが、送信ボタンをダブルクリックする行為。Windowsのエクプローラ等では、ファイルを開く動作がダブルクリックであるため、いつもの癖で2回クリックしてしまう訳も頷けます。
ユーザーがダブルクリックする可能性が充分にあること念頭におき、フォームの設計を進めたいですね。

またダブルクリック以外でも、一度クリックしてみたけれども、ちゃんとクリックできているかどうか確信が持てずに再びクリックしてしまうというパターンもあると思います。

上記のいずれも、下記のような対応が効果的かと思います。

文言を添える

シンプルな方法です。「1度だけクリックしてください」という旨の文言をボタンの近くに配置しましょう。

「チケットぴあ」の確認画面。少し目立たないが、「購入するボタンは1度だけ押して下さい。ダブルクリックしないでください」という記載がある

「チケットぴあ」の確認画面。少し目立たないが、「購入するボタンは1度だけ押して下さい。ダブルクリックしないでください」という記載がある

押下後、クリックできないようにする

ボタンを1度のクリックしか受け付けないようにしてしまいましょう。

一度クリックすると、以降は受け付けない動作を実装すれば、クリックできたことも明確。

一度クリックすると、以降は受け付けない動作を実装すれば、クリックできたことも明確。

ただし、素早いダブルクリックには対応できない可能性があるので、注意が必要です。

「読み込み中」をあらわす画像、ページ等を表示する

送信調理に時間がかかる場合、ユーザーが送信できたかどうかわからずボタンの2度押しを引き起こします。
処理中であることがわかるようなloading画像や文言、あるいは処理中の旨を伝えるページを表示すると良いでしょう。

同じく「チケットぴあ」の決済画面。処理に時間がかかるため別に処理中ページを用意

同じく「チケットぴあ」の決済画面。処理に時間がかかるため別に処理中ページを用意

ローディング画像を出すだけでも効果がある

ローディング画像を出すだけでも効果がある

クリック(タップ)時の表現を実装する

とくにスマートフォンの場合、PCに比べてマウスオーバー表現やクリックの感触が乏しい上に、タップに対する反応速がもいまいちであること多く、
ユーザーはきちんと送信ボタンをタップできたかどうかの確証を持ちづらくなります。

スマートフォンでは、通常ボタンやリンク等のタップ時のハイライト表現がデフォルトで実装されていますが、きちんと動いているかどうか確かめておきたいですね。
もしいまいち目立たない場合は、CSSやjavascriptを用いて、タップ時のハイライト表現のUIを整えておくと良いでしょう。

同じ商品を2回カートに入れてしまう

以前カートに入れたことのある商品を、それと気付かず後のタイミングで再びカートに入れてしまうことで重複が発生するケースです。
同じ商品を長期に渡って検討している場合や、複数の似た商品を比較検討していると、意外とこのミスは頻繁に起こりえます。

重複する旨をアラートできるとベスト

既に同じ商品がカートに入っている旨をアラートできると非常に親切です。

Amazonでは、同じ商品を2回カートに入れると注意を促すメッセージを表示してくれる

Amazonでは、同じ商品を2回カートに入れると注意を促すメッセージを表示してくれる

個数を誤って入力してしまう

そもそも、ユーザーが商品をカートに入れる際に個数を誤るというパターンです。
InternetExplolorの古いバージョン(IE6)では、セレクト要素にフォーカスした状態ではマウスホイールで選択肢が変わってしまう現象があり、このケースが頻繁に起こりえました。
現在は比較的最近のバージョンのブラウザが使われるようになってきたので、さほど心配する必要はないかもしれません。

確認画面で目立たせる

いずれにしろ、注文内容の間違いは最終的に確認画面で防げるようにしておきたいもの。
注文の合計金額や内訳、個数などは確認しやすいよう整理。デザインされた確認画面を構成するようにしましょう。

最後に

いかがだったでしょうか。本日は購入フォームでの重複送信を防ぐ原因とその対策方法について考えてみました。

購入フォームを運営のご担当者さまは、ぜひ参考にしていただければ幸いです。

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です