申し込みフォームや、キャンペーンの応募、ECサイトの購入ボタンなど、サイトを作成しているとボタンのデザインに悩むことがあります。
また、自分がユーザーになった時、直感で押してしまったボタンが「前に戻る」で、入力内容がパーになった経験は誰にでもあるのではないでしょうか。
今回はユーザーを悩ませず正しく誘導する「ボタン」のコツをご紹介します
目次
押させたいボタンにのみ色をつける
ボタンは同じように目立たせる必要はありませんし、同じデザインで並べる必要もありません。
押してほしいボタンはもちろん目立たせる必要がありますが、キャンセルやデリートなど、ネガティブな要素のボタンは思いっきり控えめにすると誤誘導が防げます。
重要なボタンは心理的に赤がいい！
人間は赤いものに無意識に「危険だ」「注意しなければ！」「これは重要だぞ！」と認識しています。
ですので、取り消し不可能なアクション、例えばデータの削除や登録の抹消など、いま一度確認してから押してほしいボタンには、赤を使用することをオススメします。
ここで青を使用した場合、取り返しのつかない選択へとスルスルっと進んでしまうかもしれません。
アクションを具体的に書く
「はい」や「OK」などではなく、具体的なアクションをテキストすることで、より明快になります。
ボタンであることを主張する！
どんなに背景に馴染んだ美しいデザインをされたボタンでも、それがボタンだと気づいてもらえなければ意味がありません。クリックできるものだとユーザーに認識してもらわなければなりません。
ボタンは「押せる感」があることが大事です。特にスマホはマウスオーバーで動きをつけることができませんので、ひと目見て「ボタン」だとわかるようデザインする必要があります。
フラットデザインでボタンもミニマムなベタ塗りやアウトラインで囲っただけのものが主流にですが、角を少しまるくしたり、同系色のシャドウや塗り分けで立体感を少し付けたりするだけで、グッとボタンらしくなります。
中にも外にも十分なスペースを取る
上下左右に十分なスペースを取りましょう。押しづらかったり、押し間違いが発生するデザインは使う側にとってはかなりストレスです。特に、スマホ環境では小さなボタンが隣接していると拡大してからタップすることになるので、離脱率も増えます。タップしやすいよう、ボタンの高さはスマホ表示時に10mm前後になるようにします。
また、ボタンの中のスペースも大事です。テキストの周りに余白が少ないと、ボタンが1枚の画像のように見えてしまい、描かれているテキストに注目してもらいづらくなります。ボタン内のテキストに視線を誘導する為にも上下左右に一定の余白を作るようにしましょう。
たかがボタン、されどボタン
上記の点を少し気をつけるだけで、ボタンの押し間違いを十分に防ぐことができます。
次のページへストレス無く遷移することができれば離脱を防ぐことにも繋がります。
ユーザーを惑わせないボタン作りを心がけましょう！
こちらの記事も合わせてどうぞ！
→ 物足りない時にちょっとだけ工夫するとデザインは一気に良くなる＜ボタン編＞
Webマーケティング部のスタッフ、スズキです。手を動かしてなにかを作ることとキノコが好きです。テンションの上がるサイトづくりを目指しています。