【EFOテクニック】主要ボタンとサブボタンは並列にせず、見た目の強弱をつけるべき

入力フォームには多くの場合、複数のボタンが存在します。

フォームの次のステップや送信完了を導くためのボタンはもちろん、

  • 元に戻って入力内容を修正するボタン
  • オプション情報を登録するためのボタン
  • 自動入力や検索など入力補助のためのボタン
  • キャンセルボタン
  • リセットボタン

など、さまざまな機能を持ったボタンのインターフェースが存在することがあります。

本日は、これら複数のボタンが見た目として並列な関係にあるべきではないという点について主にお伝えしていきます。

並列なボタンの危険性

フォームにある複数のボタンのうち、EFOを考える上でもっとも優先度が高いのは、次のフローに進んだり送信を確定するためのボタン(以下、主要ボタンと呼びます)だと思います。

しかし、複数のボタンの見た目としての表現が同一である場合、直感的に優先度の高いボタンを判別することが難しくなります

試しに下記にいくつか並列なボタンの事例を用意しました。
仮にあなたがフォーム入力をすでに終わっており、まさに送信しようとしている状況だと仮定してご覧になってみてください。

JINS送信ボタン

アローズ ボタン

駿台フォーム ボタン

20131007_2_btn_cyd

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

「先に進む」と思って右側のリセットボタンを押下してしまう可能性があります。

いかがでしょうか?
一瞬そのボタンを押下すれば良いか迷った場合もあるのではないでしょうか。
むしろ、咄嗟にボタンを押し間違えてしまう可能性もあると思います。

では、次の場合はどうでしょうか。

KEN 送信ボタン

どちらをクリックするべきが一瞬で、直感的に認識できるのようになったのではないでしょうか。

ボタンの強弱をつけるための5つの方法

上記の例からも明らかであるとおり、複数のボタンは並列にあつかわない、つまり見た目としての強弱をつけるべきです。
今回はそのために有効なポイントを5点にまとめました。

  1. 主要ボタンの色を目立たせる
  2. サブボタンの色を地味にする
  3. 大きさの強弱を付ける
  4. デザインに差を持たせる
  5. 位置を離す

順番に説明していきます。

主要ボタンの色を目立たせる

最もオーソドックスなのが、主要ボタンの色を目立たせるという方法です。

下記の例では、主要ボタンにのみハッキリとした赤色の背景色を用いて目立たせています。

20140226_NR_button

このように色を変える場合、多少デザイン性を欠いたとしても大きく色の変化をつけたほうが効果的だと思います。

go_03

微妙な色の変化ではユーザーは気付かず、効果は薄い

サブボタンの色を地味にする

主要ではないボタン(以下、サブボタン)の色を抑えることで、結果主要ボタンを目立たせることが可能です。
よく見かけるのは下記のようにグレーなどの無彩色でサブボタンをまとめる方法です。

デジハリ 送信ボタン

送信をキャンセルさせる導線はすぐに排除したい。

サブボタンが複数ある場合は、それらの色は統一しておくほうが強弱が明確で良いでしょう。

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

3色のボタンがならんでおり、ユーザーは一瞬混乱する

大きさの強弱を付ける

色だけでなく、大きさにも変化をつけるとより強弱をあわらす事が可能です。
もちろん、主要ボタンを大きく、サブボタンを小さくするのが正解です。

キャンセルボタン
エラー表示

デザインに差を持たせる

必ずしも2つのボタンの形が同じである必要はありません。
主要ボタンのほうを目立つ表現にする、反対にサブボタンをテキストリンクのような形にしてしまうなど、工夫次第でさまざまな表現方法が可能だと思います。

送信ボタンのみ目立たせる

ボタンの大きさ強弱

位置を離す

複数のボタンが隣接していることは、押し間違いのもと。
位置を遠く離して配置しておくことは効果的です。

位置を離したボタン

横方向だけでなく、縦に離して配置するという方法もありますね。
配置を離す

これらテクニックは併用するといっそう効果的

ご紹介した5つのテクニックは、併用して用いることでより大きな効果を発揮します。
色、形、大きさ、配置など総合的に工夫してみましょう。

配置離す、大きさ

配置離す例

最後に

いかがだったでしょうか。本日はフォームのボタンには見た目の強弱をつけるべきという点と、そのためのテクニック5つについてお伝えしました。

あなたのフォームのボタンを、ユーザーは押し間違えていないでしょうか?
5つのテクニックを使って、直感的にわかりやすいボタンに改善してみてください。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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