押したくなるボタンに隠された秘密
こんにちは。アジケの新卒UIデザイナーのonoです。
今回は、ボタンのデザインを試行錯誤する中で見つけた学びについて書きたいと思います。
取り組んでいる業務
最初に取り組んでいる業務について簡単に説明したいと思います。
自社サービスサイトのデザイン改修を行なっており、同期と以下の分担で進めています。
同期：PC版のデザイン
私：SP版のデザイン
最初にPC版のデザインを作ってからSP版に展開する進め方で、適宜先輩にFBをいただきながら進めました。
デザインで迷い込んだ迷宮の森
SP版のデザインを先輩に確認いただいた際に、アンカーリンクのボタンについて以下のFBをいただきました。
押せる感がない
今のデザインは図形を貼っているようだ
このFBを受けて、押せるボタンとは一体どんなデザインなのか、、、という迷宮の森に迷い込みました。
考慮しなければならなかったこと
①デザインルールが既にあった
手早くボタンぽくするには影をつけるという方法があります。
しかし、PC版を先に作っており、一通りデザインのルールを決めていました。そのデザインルールの中に、ボタンに影を付けるというルールは作成していませんでした。
PC版とSP版で見た際の統一感を持たせるため
デザインルールを複雑にしないため
以上の理由より、ボタンに影を付けるという選択は出来ませんでした。
②CVボタンが近くにあった
近くにCVボタンがあるため縦ではなく横に並べなければならない条件がありました。
今回苦戦したアンカーリンクは優先度が低いため、目立ちすぎないデザインで且つ、ユーザーに分かりやすいデザインにする必要がありました。
迷い込んだ森で見つけた仮説と答え
webサイトを集めたギャラリーサイトを片っ端から見て、参考になりそうなものを集めている中、押したくなるボタンには共通点があるのではないかという仮説が2つ見えてきました。
①ボタンは丸いと押したくなる!?
気になったので調べてみたところ、やはり、ボタンは丸い方が押したくなることが分かりました。
＜ボタンの角が丸いと押したくなる理由＞
角が丸い方が視線が中に集まる
人間の目は円形のものを素早く捉えることができ、認知負荷が少ない
触れた時に気持ちの良い手触りが、直接触ることのないデジタルのボタンにも求められている
②デザインには暗黙のルールが存在する!?
UIデザインやwebデザインには、実世界での、物の認識の仕方に基づいた、文化的ルールがあります。
例えば、「青文字はリンク」、「星はお気に入りや評価」、「虫眼鏡は検索」など、既に周知の事実となったルールがあるのです。
これらのルールを活用してデザインすることで、認知負荷が減り、ユーザーが本来の目的に集中できるようになります。
今回、迷走したボタンのデザインにも、文化的ルールのような、型が存在していました。その型を知らないまま、デザインしてしまったが故に、押せる感のないボタンのデザインとなってしまったのです。
まとめ
最終的に、スクロールすると上部に固定され、角が取れるデザインにしました。（現在、実装中です。）
今回担当したデザインでは、文化的ルールを踏襲しつつも、独自性を出すために工夫しなければならないことに頭を悩ませました。
自分の引き出しが足りないことを実感したとともに、UIデザインやwebデザインをする上で重要なルールを学ぶよい経験となりました。
＜アジケってどんな会社？を3分でお伝えします＞
＜数字で見るアジケ紹介 〜こんな社員が働いています〜＞
▼アジケのカルチャーを知りたい方｜アジケのカルチャーデック
▼アジケの事業内容と今後の展望を知りたい方｜アジケの事業紹介