Life is bitter

日常生活で考えたことやデザイン・写真・インテリアをはじめとした役に立ちそうな知識をまとめて記しています。

Clickableなボタンであるためのあれこれ

f:id:life-is-bitter:20170904165014j:plain

最近、UIデザインをしていく中でClickableな(クリックできる)ボタンのアフォーダンスについて悶々と思考を巡らせてしまいます。

「果たしてこのボタンはクリックできるものだと認識してくれるだろうか?」「う〜んギリギリ認識してくれるか…?」という自問自答にはじまり、「そもそもこれボタンに見えるのか?」「ボタンっぽいコンポーネントだけどこの機能の中ではクリックできる(すべき)ところではないんだよな...」などなど思考の沼にはまりながらUIデザインをしています。

いま手がけているのはPC向けのUIなのでもちろん入力インターフェースはマウスであり、Clickable or notがユーザビリティに直結するのですが、今回はClickableなボタンであるために必要なことを自分用に整理してみました。

hoverエフェクトがある

f:id:life-is-bitter:20170904162251g:plain

WEBページでは当たり前ではありますが、ボタンにhoverしたとき色が変わったり何か動きのあるエフェクトが返ってきたりアクションがあるとボタンとして認識させやすいです。というかボタンに限ったことではないのですがどんなデザインコンポーネントでもhoverアクションがあるだけでクリックできるよう認識させることが可能。

身近なネイティブアプリを実際に使ってみて驚くのですが、PCネイティブアプリではボタンに対するhoverエフェクトが存在しないものが多く、これはWEBと比べて実装のしやすさの違いなのかなと感じました。

そしてこのようにスマホのタッチインターフェースにはできない時間軸に対する打ち手が存在するのはマウスが入力インターフェースであることの強みですね。

色が他要素と明確に違う

f:id:life-is-bitter:20170904162640p:plain

テキストやメニュー・ステータス・ナビゲーションバー等の他要素とは明確に色を変えることで視認性を上げつつボタンとしてのアフォーダンスを持たせることができます。逆に色を調節することでボタンでありながらnon-activeな状態を示したり、アクションとして優先度の低い、あるいは目立たせたくないボタンにしたりもできるということです。

ドロップシャドウによるコンポーネントとしての差別化

f:id:life-is-bitter:20170904162956p:plain

ドロップシャドウを与えることによりクリックできそう感を作ることができます。難点としてはデザインガイドラインで一切シャドウが認められていなかったりすると使えない打ち手であること。

ボタンらしさを持たせる方法としてお手軽かつ効果が高いと私は感じていますが、Material Designに沿っている場合はうっかりルール違反なシャドウだった、なんてこともあるので注意が必要です。

▶︎やアイコンを併用する

f:id:life-is-bitter:20170904163211p:plain

ボタンの文言の頭に「▶」やそのボタンが有するアクションに適したアイコンを使うことでClickableさを向上させられます。ただ、この方法は実際の現場でCVRが向上したとかクリック率向上に繋がったとか経験則に基づいたものであり、ユーザビリティの観点から見て本質的なのかという部分には疑問をもっておかなければいけないと思います。

その他思ったこと

Clickable or notはリテラシーに依存する

スマホのネイティブアプリにおけるそのコンポーネントはタップできるか否かにも通ずるところがありますが、結局のところその要素がクリックできるか否かはユーザーのリテラシーに依存しています。どんな意匠をボタンと感じてくれるかの認識の差異はアプリケーションのGUIに対して明るい人とそうでない人とでは大きいため、できる限り「そうではない」側の視点に立たないといけないわけです。「このボタンなら絶対ボタンだと認識してくれるでしょ〜」という傲慢は通用しません。

クリック「できる」と「したくなる」は別物

「Clickable(クリックできる)」はユーザビリティ視点であり、「クリックしたくなる」はマーケティング視点であってこの2つは似ているようで絶妙に違うなと思いました。「クリックしたくなる」の方でもそれがボタンとして認識できるか否かは重要ですが、もっとも重要な指標はCTRやCVRなので、ユーザビリティを多少犠牲にしてもCVRが伸びるならマーケティング的にはそれが成功なのか...。

ユーザビリティを犠牲にするとCTR・CVRは下がると断言できるデータがないので何とも言えませんね。

ゴーストボタンはWEBデザインではOK

f:id:life-is-bitter:20170904163305p:plain

背景透明で線と文言のみのボタンをゴーストボタンといいますが、これはデザイン全体に対して馴染みやすいことを重視したものなのでボタンとしてのアフォーダンスが犠牲になっています。意匠性が強いWEBデザインではまあありかなと思いますが、ユーザビリティ主導のUIデザインではちょっといただけません。

ただ、本当に見た目のデザイン的には馴染みやすいから使いたくなっちゃうんですよね〜。

最後に

論文検索をしてもボタンに対するベストプラクティスになりそうなものはヒットせず、もっとUIにおけるボタンのユーザビリティ評価とかする研究はありそうなのに意外となくて残念です。

経験則とユーザーインタビューによる実践ありきなデザインではなくて定量的に測ってベストなUIを知りたいものです。