入力フォームには多くの場合、複数のボタンが存在します。
フォームの次のステップや送信完了を導くためのボタンはもちろん、
- 元に戻って入力内容を修正するボタン
- オプション情報を登録するためのボタン
- 自動入力や検索など入力補助のためのボタン
- キャンセルボタン
- リセットボタン
など、さまざまな機能を持ったボタンのインターフェースが存在することがあります。
本日は、これら複数のボタンが見た目として並列な関係にあるべきではないという点について主にお伝えしていきます。
並列なボタンの危険性
フォームにある複数のボタンのうち、EFOを考える上でもっとも優先度が高いのは、次のフローに進んだり送信を確定するためのボタン(以下、主要ボタンと呼びます)だと思います。
しかし、複数のボタンの見た目としての表現が同一である場合、直感的に優先度の高いボタンを判別することが難しくなります。
試しに下記にいくつか並列なボタンの事例を用意しました。
仮にあなたがフォーム入力をすでに終わっており、まさに送信しようとしている状況だと仮定してご覧になってみてください。
いかがでしょうか?
一瞬そのボタンを押下すれば良いか迷った場合もあるのではないでしょうか。
むしろ、咄嗟にボタンを押し間違えてしまう可能性もあると思います。
では、次の場合はどうでしょうか。
どちらをクリックするべきが一瞬で、直感的に認識できるのようになったのではないでしょうか。
ボタンの強弱をつけるための5つの方法
上記の例からも明らかであるとおり、複数のボタンは並列にあつかわない、つまり見た目としての強弱をつけるべきです。
今回はそのために有効なポイントを5点にまとめました。
順番に説明していきます。
主要ボタンの色を目立たせる
最もオーソドックスなのが、主要ボタンの色を目立たせるという方法です。
下記の例では、主要ボタンにのみハッキリとした赤色の背景色を用いて目立たせています。
このように色を変える場合、多少デザイン性を欠いたとしても大きく色の変化をつけたほうが効果的だと思います。
サブボタンの色を地味にする
主要ではないボタン(以下、サブボタン)の色を抑えることで、結果主要ボタンを目立たせることが可能です。
よく見かけるのは下記のようにグレーなどの無彩色でサブボタンをまとめる方法です。
サブボタンが複数ある場合は、それらの色は統一しておくほうが強弱が明確で良いでしょう。
大きさの強弱を付ける
色だけでなく、大きさにも変化をつけるとより強弱をあわらす事が可能です。
もちろん、主要ボタンを大きく、サブボタンを小さくするのが正解です。
デザインに差を持たせる
必ずしも2つのボタンの形が同じである必要はありません。
主要ボタンのほうを目立つ表現にする、反対にサブボタンをテキストリンクのような形にしてしまうなど、工夫次第でさまざまな表現方法が可能だと思います。
位置を離す
複数のボタンが隣接していることは、押し間違いのもと。
位置を遠く離して配置しておくことは効果的です。
横方向だけでなく、縦に離して配置するという方法もありますね。
これらテクニックは併用するといっそう効果的
ご紹介した5つのテクニックは、併用して用いることでより大きな効果を発揮します。
色、形、大きさ、配置など総合的に工夫してみましょう。
最後に
いかがだったでしょうか。本日はフォームのボタンには見た目の強弱をつけるべきという点と、そのためのテクニック5つについてお伝えしました。
あなたのフォームのボタンを、ユーザーは押し間違えていないでしょうか?
5つのテクニックを使って、直感的にわかりやすいボタンに改善してみてください。