押したくなるボタンとは?UI目線で考えてみる

Pocket

前に、「押せる画像・ボタンについて考えてみる」記事を書きましたが今回はそれに伴い、押せる認識がしやすくなったボタンを、ユーザーに押してもらえるようにするにはどうすれば良いのか。
気を付けるコツを個人的な解釈ではありますが書いていきたいと思います。

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

おさらい

サクッと簡単に「押せる画像・ボタンについて考えてみる」で紹介した内容をまとめてみました。

■押せない画像との差別化(左右のスペース)
・押せるボタンは画面横いっぱいまで使用せず画像の左右のスペースをあけるとべたっとした状態から浮き出てくるので差別化がしやすい。

■一目で押せると分かる様にする。
・三角マークで遷移できることを視覚化。「こちら」などのダイレクトな文言でも可。
・押せるものは角丸など。

■押せる画像は大きすぎると押せる=ボタンの認識が弱くなりやすい

■押せる色と押せない色をしっかりわけて設定することで、一目でボタンと認識しやすくなる

※細かく読みたい、気になる!方はこちらから読めます。
押せる画像・ボタンについて考えてみる

押したくなるボタンとは?①

上記のイメージ画像をみて「ボタン1」を押す際、分かり辛く、押し辛く感じる方が多いのではないでしょうか。
ボタンがギュッとつまっているので認識するのにも少々時間がかかってしまう気がします。

この場合どうすれば、ユーザーに押して貰える分かりやすいボタンに
なるのでしょうか。考えていきたいと思います。

・押せないものとの差別化、押せるマーク(>)を付けるなど、「押せるものである」と認識できる作りになってはいるが、ボタンの上下左右幅が狭く圧迫感がある。
・ボタンどうしが近いため誤タップを引き起こす可能性がある。
・引きで見た際に1つの塊に見えてしまう。

■ボタン周りのタップ領域を確保する
・ボタン周りがすっきりし、ボタンそのものがしっかりと見え、視認性がアップ。
・ボタンが上下左右並んだ際にも、タップ領域を確保することで誤タップ、押し辛さを回避。

個々のボタンをしっかり独立させ、ユーザーの目にとまり、押しやすい環境を作ることで必然と押してもらえる押しやすいボタンになるのではないでしょうか。

押したくなるボタンとは?②

上記のボタン、押せるマークがあるのでボタンなんだなと認識はできますが、押せるマークが無ければ、ボタンと認識し辛くないでしょうか。どちらかというとボタンではない別の画像に見えてしまいます。

どうしてボタンではない画像に見えてしまうのか、早速ですが見ていきましょう。

・ボタンに華美な装飾があることで見た目の情報量が多く、ボタンと認識し辛い。
・その他のコンテンツとの差別化がされ辛い。

※これらは一例のため、目的があってこの形にしている場合はこの限りではございません。

■必要最低限の情報量でシンプルに分かりやすく
・目的があって華美な装飾があるのであればこの限りではございませんが、装飾が強すぎるとサイト内のコンテンツとの差別化がし辛くボタンが埋もれてしまう場合も考えられます。

そのボタンの目的は何かを考えた上で、複雑にしすぎず伝わるものを用意する必要があります。ひとめ目につくだけでユーザーは装飾を重要視していません。

押したくなるボタンとは?③



パッと見て、フルーツの特集のバナーということが分かりますね。
視認性も悪くなく問題なく押せそうですが、よりユーザーへ伝わるものと考えたとき、上段の写真が入ったものが伝わる気がしませんか?

■上の写真が入っているもの
・訴求文言を補足するように写真のイメージが入っているため、今回の場合、実際にどんなものが「旬なフルーツ」に該当するのか、ユーザーがイメージしやすい。
・イメージが浮かぶと、ボタンを押して進む次のステップに入りやすく行動もしやすくなり結果的に押しやすいボタンになりやすい。

レストランなどのメニューで文字だけ書かれているよりも、合わせて料理の写真があった方が「これ、おいしそう!食べてみたい!」となりやすいですよね。

■下の写真が入っていないもの
・訴求文言の視認性は良いが写真イメージがないため、訴求文言を見ても、瞬間的にイメージはし辛い。

※これらは一例のため、目的があってこの形にしている場合はこの限りではございません。

押したくなるボタン

押したくなるボタンとは、目に見える形や配置の仕方など以外にも大切なポイントがございますので紹介していきます。



大半の方はAと答えるのではないでしょうか。
この場合、ユーザーメリットとして「無料」と書いてあるバナーの方が敷居が低くなるため、結果的に押しやすいボタンとなります。
もしも、ユーザーのメリットになる文言があれば簡潔に追記してあげた方が押しやすくなると考えられます。



大半の方はBと答えると思います。
この場合、スタンプが貰える点では同じ意味合いですが、そのための行動がBの方が負担が少ないですよね。Aの方は20個もアンケートに答えなければならないため、面倒くさいと感じる人が多そうです。
せっかく訴求している内容ですからユーザーに触れてもらいたいものです。そのためにはユーザーの視点にたって、スルーされない、見てもらえるものを考える必要がありそうです。



大半の方はAと答えると思います。
この場合、どちらも同じ意味をもつボタンになりますが、Aの方が、スッとボタンが目に入ってきますよね。
Bの方はボタンのサイズと載せている文言のバランスがおかしく、視認性、可読性が低下しています。
『押したくなるボタンとは?①』に記載しました“ボタン周りのタップ領域を確保する”のと同じで文言周りの視認性、可読性を保つための領域を確保する必要があります。

最後に

今回あげた内容は、ほんの一部にすぎませんが、ユーザーに押して貰えるボタンとはどんなものかを考えた時に、でてくるものは考えれば当たり前のことばかりです。逆に当たり前だからこそ見落としやすい部分でもあるので、運営者の好みではなく常にユーザー視点にたって考えることが大切になってきます。

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

Pocket