そんな機能は必要ない/15か条の11エントリーフォームではクリアボタンとキャンセルボタンは入力フォームから外し、少なくともユーザーが離脱するまで入力した内容を保持する方法を解説します。noteで書くエントリーフォームで「ユーザーの離脱を止める」方法を解説するシリーズの最後の3回目は、「クリア」と「キャンセル」ボタンを入力フォームから外し、少なくともユーザーが離脱するまで入力した内容を保持する方法を解説します。エントリーフォーム最適化15か条の【第11条】「クリアボタン、キャンセルボタンはなくすべし」をご紹介します。リンクをクリックすると第11条のまとめに飛びます。クリアボタン、キャンセルボタンはなくす今回「惜しい!」エントリーフォームとして紹介するのは、東芝キヤリア株式会社様の「サポート会員登録」フォームです。良いポイントエントリーフォーム専用のフォームまず良いポイントとして毎回おなじみですが、サイトのレイアウトとは異なるエントリーフォーム専用のレイアウトになって、シンプルで、入力に集中できる点は○です(詳しくは、第9回を参照)。送信ボタンの下に「ご登録いただく前の注意」を配置している点も、完了率アップという観点からすると、入力後の流れを止めないという点で評価できます。次に改善すべきポイントを勝手に提案いたします。改善ポイント「クリア」「キャンセル」ボタンは用意しない今回、声を大にして訴えたいのは次の一点。入力内容を消去してしまう「クリアボタンやキャンセルボタンは外す!」ということです。ユーザーが入力したものを一瞬で「無」にしてしまうクリアボタンは一体、何のために用意しているのでしょうか。これまで数々のエントリーフォームを見てきていますが、クリアボタン、キャンセルボタンが用意されていて、その存在に納得したケースが今まで一度もありません。しても入れたいのなら、左上など本来の送信ボタンから位置を離して、ボタンの大きさも小さくして配置すべきです。一般的には、左上から右下への視線が流れるので、ページの右側もしくは中央に本来の送信動作を行うボタンを配置するべきです。今回の例では、送信ボタンが中央に配置されていますが、クリアボタンが右側に配置されていて、これまたNGです。クリアボタンが大きく右側に配置されているのはNG「修正する」や「戻る」ボタンを用意するケースもあるでしょう。これも同様に、送信ボタンは右に、「修正する」や「戻る」ボタンは左側に配置すべきです。クリアボタンもどうしても用意する必要があるなら、左端に小さく配置すべきです。クリアまたは戻る、キャンセルと送信ボタンのメリハリをつけている例ページ移動をしても、入力内容を保持する処理をしよう入力内容におけるユーザーのガッカリを減らすポイントとして、フォームから離脱するまで入力内容を保持する方法を紹介します。エントリーフォームの入力ページから進んで、入力エラーのページや、次の入力ページ、確認ページと、ページ間で行ったり、戻ったりしたとき、遷移の途中で、入力内容が失われてしまった、ということが起きないフォームにしましょう。一度、ユーザーが入力した内容は、少なくとも離脱するまでは保持すべきです。値を保持するには、次に示すように、いくつかの方法があります。エントリーフォームの場合、特にセキュリティ上の配慮が必要です。どの方法も、その方法を選べばOKということはなく、セキュリティに配慮した処理で実装する必要がありますので注意しましょう。type="hidden">)でしょう。ページ間遷移時にブラウザを経由しますが、受け渡す値の内容がログイン情報(IDやパスワード)ではなく、フォームをSSL通信にしている、などであればhiddenによる値の保持でも問題はないでしょう。セッションで保持する別の方法として、セッションで保持するということが考えられます。ユーザーがフォームに入力した内容を、フォームが動作しているWebサーバー側で管理しているセッション変数に格納することで保持できます。※セッション管理を行う場合は裏側ではセッション管理のために次のクッキーも使うことが一般的です。クッキーで保持するあまり例は多くないのですが、クッキー自体で値を保持する方法も考えられます。クッキーは、フォームを閲覧しているユーザーのブラウザ側に書きこむ情報です。クッキーを使うとフォームから離脱した後、入力ページへ再訪した場合も、過去に入力した内容が入力欄に入力された状態で表示できます。その場合、ユーザーによっては「気味が悪い」「しつこい」と思われてしまう懸念がありますので、離脱時または送信完了時にはクッキーを削除する処理を入れるなども検討しましょう。ブラウザ機能「オートコンプリート」で保持するユーザーにブラウザの機能「オートコンプリート」を有効にしてもらうことも将来的には考えられるかもしれません。今回は、離脱要因を減らすポイントとして「クリアボタン、キャンセルボタンは用意しない!」について説明しました。どちらも設置する意味があるケースはほぼないと思います。理由がない限り、設置すべきではありません。【第11条】クリアボタン、キャンセルボタンはなくすべしクリアボタン、キャンセルボタンはなくすべし近年、だいぶ減ってきたが、クリアボタンは百害あって一理なしだ。ユーザーが入力した内容を自分ですべて消すという操作が本当に必要かどうかよく考えよう。エフ・コードでは開発チームに所属、ASP型EFOツール「f-traEFO」のいわゆる「なかのひと」。Web制作とプログラムがともにわかる人材として、エントリーフォーム改善の支援に従事する。大学卒業後、Web制作会社勤務を経て、Webディレクター/コーダーとして活動。制作チーム所属を経て、株式会社エフ・コード入社、現在に至る。最近(過去90日間)の記事で、Facebookの「いいね!」が多かった記事をお見逃し無く。ネット広告への強い嫌悪感、テレビや新聞の倍以上に。いいね!私は変人コレクター。いいね!続きコメントどうでもいい。12:11どうでもいい。そんなことより、他にユーザビリティを考える箇所は山ほどある。返信コメントありがとうございます。14:58担当編集をしている四谷です。コメントありがとうございます。ご存知の方にとっては、どうでもいいことかもしれません。筆者の田中さんから原稿をもらったときに私が感じたことは、「本来持つべき機能の意味を考えるべきで、つい見逃しがちだけど、大事なことだな」でした。プレビューに関しても、本当に投稿する前に誤字脱字などが無いか確認するのに私は、便利だなと思っています。CEM」の提供を開始LINEのマーケ活用術――ナーチャリングからリピーター醸成まで解説するセミナー2/20開催MaaSが普及したら「自家用車を手放すことを検討する」48%【アクセンチュア調べ】2019年にもっとも注視されたテレビCMは、クボタ「壁がある。2/19(水)@ステーションコンファレンス東京リピーターを呼び込む「究極の集客方法」。リピーターを呼び込む「究極の集客方法」。2019年12月すべて見るインフォメーションWeb担のメルマガを購読しませんか?Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。編集後記サイトマップFAQ(よくある質問とその答)Web担に広告を掲載しませんか?購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。