リセットボタン・キャンセルボタンはフォームコンバージョンの敵

最近ではかなり少なくなってきたものの、未だに見かけるフォームの「リセット」や「キャンセル」のボタン。
HTMLで簡単に作成できることから、深く考えずに作成し、長く設置を続けているというフォームも多いのではないでしょうか。

しかし、そのボタン達ははユーザーにとって本当に必要なものでしょうか?
本日はEFOの観点から、フォームのリセットボタンとキャンセルボタンについて考えていきたいと思います。

リセットボタン

リセットボタンは、入力フォームに記入した内容を全て削除し、入力する前の初期状態に戻す(リセットする)ボタンです。

当たり前のように用意されているリセット

当たり前のように用意されているリセット

「戻る」ボタンと勘違いしてしまいそうなリセットボタンも。

「戻る」ボタンと勘違いしてしまいそうなリセットボタンも。

次へ進むボタンと同じデザインのリセットが右側にあり、非常に誤操作の小違憲性を感じるケース

次へ進むボタンと同じデザインのリセットが右側にあり、非常に誤操作の小違憲性を感じるケース

縦に配置されている。「やり直し」という文言だが効果は同じ

縦に配置されている。「やり直し」という文言だが効果は同じ

特に、使う必要なし

ところで、「入力内容を初期状態に戻したい」とユーザーが感じるシーン、実はあまりないように感じます。

強いて言えば、「会員情報の変更画面」など、あらかじめ読み込んだデータが入力項目内に表示されているタイプの入力画面などが考えられます。
ただし、その場合でも内容を全消去するよりも一部のデータのみを編集するほうが目的を達成しやすいように思います。
仮に最初から入力をやり直したいのであれば、リセットボタンを使わなくとも前のページに戻って再度アクセスし直したり、リロード等で済む場合も多いのではないでしょうか。

したがって、リセットボタンの存在意義はほとんどないと言えるでしょう。

今すぐ削除しよう

リセットボタンは、さほど存在意義がないにもかかわらず、誤ってクリックしてしまうだけで入力内容がすべてまっさらに消えてしまう大変危険なボタンです。
メリットよりデメリットが大きく、むしろユーザーの離脱を引き起こしている可能性が高いです。
なんとなく配置しているようであれば、今すぐにでもフォームから削除することをおすすめします。

リセットボタンをどうしても配置したい場合は、リセット処理を行う前に確認ダイアログを表示させるようにしてください。

キャンセルボタン

キャンセルボタンのおもな用途は、フォーム送信の途中で送信行為そのものをやめることです。

キャンセルボタンは今すぐ廃止するべき!

キャンセルボタン。

「やめる」というボタンがある

「やめる」という文言のパターン。

「同意しない」=キャンセルというパターンも存在

「同意しない」=キャンセルというパターンも存在

基本、配置しなくて良い

押下することでフォームから離脱しますので、キャンセルボタンいわば「離脱誘導ボタン」。
EFOの観点では絶対に配置するべきではありません。

またリセットボタン同様、次に進むつもりで誤って押下してしまうともちろん入力内容も消えてしまい、再度すべての項目を入力しなくてはならなくならず、ユーザーにとって心の折れる作業であることは言うまでもありません。

また、上記で紹介したボタンの例のように、キャンセル、戻る、送信とボタンが3つも並んでいると、フォームが複雑に見え直感的な送信操作を妨げてしまいます。

途中で送信を中止したいのであれば、送信ボタンを押さなければ良いだけで特に難しいことはありません。
キャンセルボタンを配置することはフォームにとってデメリットのほうが圧倒的に大きく、基本的には配置するべきではないでしょう。

ただしキャンセルボタンが必要な場合も

ただし、下記のような場合ではユーザビリティ上、キャンセルボタンがあるほうが親切と言えるでしょう。

進行中の処理を止める

処理に時間がかかる場合、途中でその処理をキャンセルできるようにしておくべきです。
プログレスバーなどの横にキャンセルボタンを配置しましょう。

処理に時間がかかりすぎる場合、キャンセルの存在がないと不便

処理に時間がかかりすぎる場合、キャンセルの存在がないと不便

始まろうとしているプロセスをやめる

ダイアログなど、これから始まるプロセスに対して確認を行う場面では、キャンセルボタンの存在は自然です。

離脱ブロック

離脱ブロックは「離脱」というアクションをキャンセルできる機能ですね

既に行ったアクションを取り消す

管理画面・編集画面などでは、一度行った変更を元に戻せる機能が役に立つ場合があります。
gmailではメールの送信後に宛先などの間違いに気づいた場合、送信直後であれば操作を取り消すことができます。

gmailの取り消し

gmailの取り消し

ショッピングカートから消す

一度は購入にむけたアクションをしたものの、やはり取り消すという意味ではカートからの削除もキャンセルボタンのひとつです。
追加しかできないカートというのは現実的ではありませんので、やはり適切にキャンセルの導線を用意しておくべきです。

カートからの削除

一度カートに入れた商品には削除する導線が

最後に

いかがだったでしょうか。
本日はフォームのリセットボタン、キャンセルボタンの役割や必要性、リスクなどを取り上げました。

今回の記事のためにいくつかのフォームを調査しましたが、意外とまだまだリセットボタンやキャンセルボタンを配置しているフォームが多いことに驚きました。
しかも、昔からありそうな風貌のフォームならまだしも、今風のデザインのフォームまでも配置しているケースもあり驚きを隠せません。

これらボタンがあなたのフォームに悪影響を与えていないか、今一度チェックしてみてはいかがでしょうか。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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