【EFO施策】フォーム最適化・最大の要<送信ボタン>を攻略する、9つの掟

これまで、これさえやれば1.X倍!?実際に効果が出たEFOオススメ施策ベスト10確認ページからの離脱はゼロに!!今すぐ対策したい6つのチェックポイントなどで、何度もお伝えしている【送信ボタンにこだわることの重要性】

EFOにおいて送信ボタンは非常に重要です。弊社のメディアでも最も効果が出た施策送信ボタンの変更でした。(フォーム完了率1.9倍増)

今回はそんな、フォームの送信ボタンに関するEFO施策をご紹介したいと思います。

送信ボタン最適化のためのEFO・9つの掟

まず、今回ご紹介するEFO施策はズバリ、以下のとおりです。

  1. ボタンはボタンのように見せよ
  2. ボタンはユーザーが見つけやすい位置にを配置せよ
  3. ボタンの色にこだわれ
  4. ボタンは大きく!押しやすく!
  5. ボタンが最も重要らしく見えるようにせよ
  6. 適切な順序でボタンを配置せよ
  7. ラベルは何をすべきかを明確に示す文言にせよ
  8. キャンセルボタン、リセットボタンはなくせ
  9. 離脱につながるアクションは、なるべく目立たせない

順番に見ていきます。

掟1: ボタンはボタンのように見せよ

直感的にボタンであるとわかるようにデザインしてください。

よい例

良いボタンの例
ボタンらしいデザインの条件としては、背景との境界線がはっきりしていることが前提です。
また、グラデーションをうすくかけるなどして立体的に見せるとよりボタンらしく見えます。

よくない例

良くないボタンの例
背景色や境界線がついていないと一気にボタンらしさがなくなります。
剤と全体の調和も必要ですが、ボタンはボタンらしく見せるよう心がけましょう。

掟2: ボタンはユーザーが見つけやすい位置にを配置せよ

よい例

ボタンの配置:中央
よくあるボタン配置の例。
ユーザーが最後に入力するであろうラジオボタンの直下に配置されており、ボタンを認識しやすい好例といえます。

よくない例

ボタンの配置NG例
ボタンの配置は自然な視線移動の先にあるのが鉄則
このように極端な左寄せにしたり、フォームとの距離が離れている、フッターと同化しているような場合は要注意。ユーザーがボタンを見逃しやすくなっているかもしれません。

掟3: ボタンの色にこだわれ

色を変えてみることが大きな効果をもたらすことがあります。
ボタンの色
弊社サイト(寒色系デザイン)の例では、ボタンを寒色系から暖色系に変えたところ成果がアップしました。
サイトのトーンとの対比で、ボタンがより目立つ色にすると効果的かもしれません。

掟4: ボタンは大きく!押しやすく!

小さなクリックエリアはユーザーにとってストレスです。
ボタンは大きくするべき
比べてみると一目瞭然ですが、ボタンは文字や余白を大きくとって押しやすいUIにしましょう。

掟5: ボタンが最も重要らしく見えるようにせよ

よくあるのが、確認ボタンで「戻る」「送信」の2つのボタンを並べる例。

よくない例

2つのアクションの対比悪い例

このように並列な見せ方をするよりも、下記の例ように起こしてほしい側のボタンを強調しましょう。

よい例

20140303_SY_botton

掟6: 適切な順序でボタンを配置せよ

下記の確認画面から送信しようとしてみてください。
ボタンの順序
無意識に右側のボタンを押下してしまった/しそうになった方もいらっしゃるのではないでしょうか。
通常、右側に<先に進む>内容を配置することがほとんどですので、フォームを作る際もその慣例にならうとミスがおこりにくいかと思います。

掟7: ラベルは何をすべきかを明確に示す文言にせよ

フォームのラベル(=文言)は「送信」「進む」「次へ」のような抽象的な言葉になっていないでしょうか?

  • 「メルマガを受け取る」
  • 「今すぐ購入する」
  • 「会員登録する」
  • 「資料を請求する」

など、具体的な内容を想起させる文言にするとユーザーが戸惑うことがありません。

掟8: キャンセルボタン、リセットボタンはなくせ

最近ではかなり減ってきましたが、リセットボタンやキャンセルボタンがついたフォームは要注意。
特にリセットボタンはユーザーにとって不要なことがほとんどです。(間違えて押下してしまった時のことを考えるとぞっとします)
そうしても必要な場合をのぞいてキャンセルボタンやリセットボタンはつけないようにしましょう。

掟9: 離脱につながるアクションは、なるべく目立たせない

例えばECサイトの「カゴの中身を破棄する」ボタンなど、アクションさせたくないけれどボタンを設けないといけないような場合があると思います。
そのようなボタンはこれまでとは逆の施策を実施するのがコンバージョンを保つためには重要です。
ボタンのサイズを小さくし、テキストリンクにしたり、色も目立たない色にするなど、クリックされにくい見た目にしておくと良いでしょう。

まとめ

いかがだったでしょうか。
今回ご紹介したEFO施策は以下の9つでした。

  1. ボタンはボタンのように見せよ
  2. ボタンはユーザーが見つけやすい位置にを配置せよ
  3. ボタンの色にこだわれ
  4. ボタンは大きく!押しやすく!
  5. ボタンが最も重要らしく見えるようにせよ
  6. 適切な順序でボタンを配置せよ
  7. ラベルは何をすべきかを明確に示す文言にせよ
  8. キャンセルボタン、リセットボタンはなくせ
  9. 離脱につながるアクションは、なるべく目立たせない

あなたのフォームの送信ボタンは大丈夫でしたでしょうか?
ぜひ、参考に改善を行ってみてください。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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