より良い UX デザインのために: これをクリックしてもいいですか?

わずかな変更で CTR を向上させる方法

誰もがより多くのクリックを望んでいます。 より多くのタップ。 「はい、あなたが私にくれたものは何でも好きです」と言うユーザーが増えています。 実際にユーザーがもっとクリックしたくなるような方法をいくつか見てみたいと思いました。ここでUX デザインの出番です!

これは Web のいたるところによく使われています。ユーザーにクリックしてもらうには、わずかな変更が大きな効果を発揮します。 これらの微妙な変更が正確に何であり、それがコンバージョンに与える影響を調べました.

フォント

フォントは非常に大きな影響を与える可能性があります。 たとえば、2009 年にトロピカーナは大幅にブランドを変更しましたが、その大部分はフォントのやり直しでした。 トロピカーナ フォントがロゴでもあることを忘れないでください。

バイタルデザイン経由の画像

売り上げはすぐに20％減少しました。

フォントは、ユーザーにクリックしてもらう際に信頼できる最も安定したものの 1 つでもあります。

一般に、コントラストの高い太字のサンセリフ フォントが最適です。

なんで？ 一番読みやすいです。 この例は、インターネット全体にあります。 Basecamp、BaseCRM、Evernote、mHelpDesk – これらの企業はすべて、ハイ コントラストで太字のサンセリフ フォントの CTA を使用しています。 見やすい、読みやすい。 そのため、企業はセリフ フォントよりもこのフォントを使用する傾向があります。 （ポスターも同じです。何年も前から読むことができます）。 また、サンセリフはコンピューターで読みやすいため、読者にクリックしてもらいたいときに使用する必要があります。読者は、何よりもまずあなたが何を言っているのかを知る必要があります.

ドロップ シャドウ + 3D 効果

ドロップ シャドウを作成して 3D にすることで、人々がクリックするようになるのは驚くべきことです。 これは、フラット デザインの大きな欠点の 1 つです。 (現在。もう 1 つは、最終的には時代遅れになるということです。) 物事が本当にフラットな場合、見栄えはよくなりますが、クリック可能なものとそうでないものを区別するのはそれほど簡単ではありません。 Jakob Nielsen は、2012 年に Windows 8 を評価した際に、この点について説明しました。

実際にボタンのように見えるとクリックする回数が増えるため、丸みを帯びたエッジやドロップ シャドウを使用すると、クリック可能なものとそうでないものを簡単に識別できます。

(上級者向けのヒント: これらはキオスク スタイルのボタンと呼ばれます)。

これは実際に興味深い問題を提示します。 キオスク スタイルのボタンは、もともとアーケードやその他の場所で使用されていました。 そのため、デジタルに移行したとき、その基準が引き継がれました。 それは理にかなっていますが、ある時点で、それらがどこから来たのかを実際に覚えているからではなく、面取りされた 3D ボタンになるために面取りされた 3D ボタンになります。 フロッピー ディスクの保存アイコンのようなものです。スキューモーフィック ルートは最終的に任意になり、スキューモーフィックではなくなります。

これは、人々がキオスク スタイルのボタンをクリックするのがより快適になっていることを示していますが、フラットなデザインがさらに数年続くことができれば、着実に離れていく可能性があります。

動き

多くの人は、クリック可能な 3D を作成する際に動きをひとまとめにしますが、UX の観点から、そしてフラット デザインにとっての意味から、それ自体でカテゴリを正当化するのに十分重要であると思います。

UXの観点から

ユーザーは自分の行動に対するフィードバックを必要としています。 これは、ユーザーが自分がどこにいて何をすべきかを理解するのに役立つ一番の方法です。

何かをクリックできるようにする最初の仕事は、クリックできることをユーザーに伝えることです。

たとえば、ボタンに関して言えば、わずかなグラデーションの変更だけで驚くべき結果が得られます。 たとえば、Eventbrite のホームページでは、アイコンにわずかなグラデーションの変化を使用して、クリック可能であることを示し、ユーザーがどこにいるかを強調しています。

もう 1 つの優れた例は、eTecc/Interactive の Web サイトのホームページです。 実際には、塗りつぶしを使用して、何かがクリック可能であることをユーザーに知らせます。

クリック可能なものとそうでないものをユーザーに知らせる方法を理解するのはとても簡単な方法です。 そして、物事がますますフラットになるにつれて、この視覚的なフィードバックはますます重要になります。 奇妙なことに、これは Apple が改善できることです。 Apple.ca のホームページをチェックしてください。

上部のリンクはクリックできるように見えますが、それは実際のものであり、ユーザーの知識を再確認するために小さなグラデーションの変更があります. また、ギャラリー オプションの表示もクリック可能であると想定できます。また、それを強化するために色が変更されています。

しかし問題は、画面全体が実際にはクリック可能であることです! ユーザーにとって非常に直感的ではなく、たまたま頻繁にクリックする人として、ページが変化し続ける理由を理解するのにしばらく時間がかかりました. 直感的な UI ではありません。

フラットな視点から

したがって、Apple は常に 100% 成功しているわけではありませんが、ほぼ成功しています。 また、動きによって、デザイナーは必要なフラットなインターフェイスを構築しながら、クリック可能なものとそうでないものをユーザーに知らせることができます。 すべての例が非常にフラットなデザインであったことに注目してください。 完全な開示私はそれを計画しました。 これは、フィードバックがある限り、フラット デザインがボタンに有効であることを示しています。

フィードバックのないフラットな (っぽい) デザインの例を次に示します。これがボタンであることは明らかですが、フィードバックがないと、コンピューターが動作していないように少し感じます。

コントラスト + カラー

残念ながら、人々がクリックすることを保証する特定の RGB コードはありません。 しかし、あなたを助けるために従うべきいくつかの優れたルールがあります. ユーザーに何かをクリックしてもらいたい場合は、目立つようにする必要があります。 つまり、たとえそれがブランドのカラーパレットから外れることを意味するとしても、その周りにあるものと劇的に対照する必要があるということです.

たとえば、David Hamill は、他の目的で使用されていないハイパーリンクの色を使用することを推奨しています。 彼のサイトでは、各リンクはピンクで行われています。 ユーザーは、何がリンクで何がそうでないかを簡単に知ることができます。 カーソルを合わせたときの変化と組み合わせると、何かをクリックできることはユーザーにとって非常に明白です。

この種の色とコントラストの問題は、行動を促すフレーズ (CTA) とボタンで最も頻繁に発生し、色の小さな変化が利益に大きな変化をもたらす可能性があります. たとえば、Vibethink は CTA とボタンについて書いており、ボタンの色と形を変えるとコンバージョン (クリック数) が 35% 増加したと報告しています。 コントラストが上がると、ユーザーがクリックしやすくなったと感じました。

しかし、彼らは2つのことを変更したので、完全に科学的ではありません. Hubspot は 2011 年に赤と緑のボタンの A/B テストの結果を公開し、赤のボタンが緑のボタンより 21% 優れていることを発見しました。

したがって、色とコントラストは、ユーザーにクリックさせる上で大きな役割を果たします。

要約

悪魔は細部に宿る。 デザイナー、開発者、ユーザー エクスペリエンス担当者、マーケティング担当者として、クリック可能なものを作成するときはいつでも、ユーザーに何かをするように求めています。 ここをクリック。 申請書を提出します。 お問い合わせ。 今買う。 それが何であれ、それは私たちが必要としているものです。 では、それを単純化してみませんか？ ユーザーがクリックしやすくする (そしておそらくあなたにも役立つ) 最善の方法は、クリックしやすくすることです。 ボタンをキオスク スタイルのデザインで期待に合わせて作成し、フォントを画面上で読みやすくし (小さい場合でも)、ボタンやクリック可能なコンテンツに関するフィードバックを提供することで、ユーザーの生活を楽にします。

それだけです、本当に。 クリック可能なものを作成するときは、同時にユーザーの生活を楽にします。

この投稿を楽しんだ？ また、ユーザーを理解して Web サイトの UX デザインを改善する の投稿や、すべての UX デザイナーが所有すべき優れた製品もお読みください。