ゴーストボタンを使う際の注意点と使いどき

anthony

UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。

この記事はUX Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。

Stop Misusing Ghost Buttons

ゴーストボタンとは、外枠があるけれど中が透明なボタンのことです。Web上で人気のトレンドですが、多くのデザイナーが間違って使用しています。

クリック率が下がる

ゴーストボタンはミニマリストな今どきの見た目と感覚を演出し、デザイナーの間で人気です。騒々しく威圧的な印象を、ユーザーに対して与えません。しかしコールトゥアクション(CTA)として考えた場合、それこそが問題となります。

CTAボタンにはユーザーの関心を引きクリックを促すような、強いビジュアルの手がかりが必要です。ゴーストボタンのミニマルな見た目では、強いビジュアルの手がかりが足りません。結果としてクリック率の低下を生じます。

クリック率が低いと言うことは、ユーザーのほとんどがゴーストボタンを見逃しているということです。サイトでのエンゲージメントが少なくなります。いくつかの異なる調査では、ゴーストボタンよりソリッドボタンの方を、ユーザーはより早く簡単に認識することが分かっています。これは、A/Bテストやクリックテスト、ビジュアルへの注意に関するテストで結論付けられました。

ソリッドとゴーストのボタンのクリック率の違いは有意です。ある企業の調査では、ソリッドボタンに変更することでメールのニュースレターにおけるクリック率が上昇したことが示されています。開封されたすべてのメールに対し、ソリッドボタンの方がゴーストボタンより7%高く開封されました。

スタイリッシュなトレンドを追うことでクリック率を犠牲にするのは、デザイナーとして本末転倒です。明確なビジュアルの手がかりがあるサイトと無いサイトでは、ユーザーはあるサイトの方に利便性を感じるでしょう。またデザイナーも、コンバージョン率につながるようなユーザーのエンゲージメントを得られるでしょう。

ゴーストボタンを使うべきとき

間違ったコンテキストで使用されると、ゴーストボタンは問題になりますが、正しいコンテキストで使えば、アクションの優先順位を明確にしてタスクの効率性を上げることができます。

2つのボタンをユーザーが一緒に見るとき、ユーザーはどちらのボタンをクリックすべきか考える必要があります。ユーザーはラベルのテキストを読んで決めるでしょう。しかしボタンにビジュアルの手がかりが配置されていれば、より早い決定に役立ちます。メインの動作にはソリッドボタンを、2次的な動作にはゴーストボタンを使いましょう。そうすれば、ユーザーの意思決定を加速させられます。

上の画像の「悪い」事例では、ゴーストボタンだけを使っていることで、ボタンの外枠がテキストの線と紛らわしくなっているのが分かるでしょう。ページをざっと見している場合では、このボタンは容易に見逃されてしまいます。

「良い」事例だと、ソリッドボタンが見た目の重さを伝えているので、見逃しにくくなります。文章やもう1つのボタンに囲まれていても、メインのアクションに注意が及びます。2次的なアクションは接近した位置にあって目にはいりますが、メインのアクションへの注意を反らすものではありません。

ビジュアルの手がかりを消すべきではない

ゴーストデザインの誤用によるユーザーへの影響を自覚することなく、デザイナーはゴーストボタンを間違って使っています。ゴーストラインの外枠がCTAにとっての十分な見た目の手がかりだと思っています。また他のサイトも同じようにしているから、そのスタイルとしてゴーストボタンを使うのがOKだとも思っています。しかしリサーチでは、これが使い方として正しいアプローチでないことが示されています。

ビジュアルの手がかりがボタンから消えてしまい、ユーザーはそれを良いと思いません。ゴーストボタンのミニマルなスタイルをデザイナーは好きかもしれません。しかしボタンの機能とは動作であり、見た目ではありません。ゴーストボタンを使うコンテキストが重要です。間違ったコンテキストで使うと、ボタンのビジュアルの手がかりも幽霊のように消えてしまうでしょう。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて