あなたのウェブサイトへのエンゲージメントを改善するための5つの心理学ベースのデザインのヒント

あなたのブランドのメッセージは、あなたが行う言葉の選択に限定されません。メッセージを提示する環境も同様に(おそらくそれ以上に)重要です。特に、ユーザーとの対話とメディアの関与を​​促進する場合。

色、線、形、フォントなどの微妙な側面が重要です。タイポグラフィ、色、SEOを台無しにするいくつかのデザインミスについての詳細をすでに共有しました。しかし、ほとんどの人は、デザインは創造的な才能であると信じています。そして、彼らはあなたがそれを持って生まれているか、あなたがそれのコツを開発することができないと考えています。

失礼ですが同意できません…

人々は無意識のうちに視覚刺激に反応します。手始めに、あなたはあなたのウェブサイトがエレガントでなければならないという概念を捨てる必要があります。うまく機能しない美しいウェブサイトは、バウンス率が高くなります。そして、彼らはうまく変換しません。

必要なのは、使いやすく、読み込みが速い機能的なウェブサイトだけです。しかし、いくつかの心理学の原則を学ぶことは、あなたのウェブサイトの使いやすさを改善し、それによってソーシャルメディアエンゲージメントを含むあなたが受けるユーザーエンゲージメントを増やすのに役立ちます。

そのため、この記事では、ユーザーエンゲージメントを向上させるための心理学に基づく5つの設計のヒントをまとめました。いつものように、理論では、すぐに設計に実装できる実用的な例と実用的な戦略を含めました。

ニール・パテルとの協議
私の代理店があなたのウェブサイトへの大量のトラフィックをどのように促進できるかをご覧ください

SEO-大量のSEOトラフィックのロックを解除します。実際の結果をご覧ください。
コンテンツマーケティング-私たちのチームは、共有され、リンクを取得し、トラフィックを引き付ける壮大なコンテンツを作成します。
有料メディア-明確なROIを備えた効果的な有料戦略。
電話を予約する

最初のヒントから始めましょう。

1.色とフォントが感情を呼び起こす方法の要約
私はこれらの主題の両方について詳細に書きました。しかし、重要なポイントをもう一度見てみましょう。

まず、色について話しましょう。

色は感情を呼び起こすのに重要な影響を及ぼします。私のウェブサイトであるQuickSproutに定期的にアクセスしている場合は、グリーンを私のブランドに関連付けます。すべての色付きのセクションは主に緑色です。

image06

同様に、コカ・コーラは、大胆でエネルギッシュなブランドイメージに一致する赤い色に関連付けられています。

色はブランド認知度を最大80%向上させることがわかっています。色がコンバージョンにどのように影響するかについて、さらに驚くべき統計があります。

image08

現在、色の好みは、消費者の性別や買い物の習慣によって異なる場合があります。見込み客の文化や国籍でさえ、色の好みに影響を与える可能性があります。たとえば、米国では、ほとんどの人が白人を結婚と関連付けています。しかし、インドでは、赤は結婚の色です。

覚えておくべき重要な点は、すべてのマーケティングキャンペーンで、単一の色が最高の色に変わることはないということです。

したがって、CTAボタンを赤から緑に変更するとCTRが21%増加したことを読んだときに、気を悪くしないでください。同様の結果が得られる場合と得られない場合があります。単一のユニバーサルベストカラーがすべてのWebサイトで機能するわけではありません。 A/Bテストはあなたの親友です。

それでも、同時に:

ブランドの個性に合った、ターゲットオーディエンスの共感を呼ぶカラーパレットを選択することが重要です。

これは、ロバートプルチックによるカラーホイールで、さまざまな色合いが呼び起こす感情を示しています。

image24

ロゴの色は慎重に選ぶ必要があります。色の選択により、はっきりと認識できるブランドの例を次に示します。

image07

全体として、ウェブサイトの色はブランドの価値を際立たせる必要があります。

ほとんどのブランドやブロガーは、多くのデザイン変更を経て、色を再考しています。ですから、色を真剣に考えていないのであれば、今がその時です。色とデザインを大幅に変更したブログの優れた例は、LeoBabautaのZenhabits.netです。

2009年の彼のウェブサイトは次のとおりです。

image04

今すぐzenhabits.netにアクセスすると、光沢のある色が見つからず、メールを要求するオプトインがありません。プレーンで白黒のミニマリストデザインで、気を散らすものはありません。

image01

レオは彼のブログで文字通り禅を採用しています。そして、彼のブログは現在、月間2,000万人近くの訪問者を受け入れており、メディアエンゲージメントの成功を証明しているため、彼は大きな成功を収めています。

あなたのウェブサイトの配色を選ぶのに助けが必要な場合は、私がハフィントンポストのために書いたこの記事を参照することができます。

次に、Webサイトのフォントの選択について説明します。

印刷物と比較して、コンピュータの画面で読むのは難しいことを忘れないでください。

はっきりと読みやすいフォントは、コンテンツの読みやすさを向上させます。そして、彼らは人々があなたのウェブサイトに永遠に関連付ける気分を誘発します。適切なフォントを選択することで、ターゲットオーディエンスに適切な感情を呼び起こすことができます。

image23

WordPressなどの人気のあるテーマテンプレートをCMSで使用している場合、同じテーマを使用している他の多くのウェブサイトと同じように表示される可能性があります。ここで、適切なフォントは、自分のサイトを他のサイトと区別するための方法になります。

Googleがここにまとめた何百ものフォントの組み合わせを見て、フォント検索を開始します。詳細については、CreativeBloqによるこの記事を参照することもできます。

 

■フォントの選択について。

2.ゲシュタルトの対称性の原理を活用します。非対称性を使用して注意を引く
ほとんどの人と同じように、無秩序は好きではありません。したがって、すべてのオブジェクトを中心を中心に対称に知覚します。

たとえば、次の図では、6つの個別のブラケットではなく、3つのブラケットのペアが表示されています。

image16

では、この原則を設計にどのように活用できるでしょうか。

対称的かつ整然とした方法で情報を伝えると、ターゲットオーディエンスは情報をすばやく理解できます。一方、あなたの作曲が不均衡の感覚を提供するとき、ユーザーは集中するのが難しいと感じるかもしれません。

ただし、非対称性を利用して、CTAボタンなどのWebサイトの重要な要素に注意を引くことができます。

この記事では、ゲシュタルト心理学の1つの原則のみを共有しました。 Canvaブログで他の原則を読むことができます。

ウェブサイトのデザインでゲシュタルトを活用する方法の簡単な説明については、このウェブサイトにアクセスしてください。

image02

3.内臓反応を引き起こす
美しいウェブサイトは良いコンバージョンを得られないと言ったとき、私は完全な情報を共有しませんでした。

時折、中枢神経系を直接誘発することで、人々に勝ち、彼らにあなたを愛してもらうことができます。人々はあなたのウェブサイトが素晴らしいと感じているだけで、それを十分に得ることができません。

私は何について話しているのですか?

内臓反応。

私たちは皆、無意識のうちに特定のことに反応します。

これらの反応は私たちの古い脳に根ざしているため、私たちが無意識のうちに影響を受ける方法は、性別や人口統計を超えて比較的一貫しています。

それで、どうすればあなたのウェブサイトで内臓の反応を呼び起こし、人々にそれを再び体験したいと思わせることができますか?

このようなユーザーエンゲージメントを呼び起こす簡単な方法の1つは、カラフルな写真を活用することです。 AirBnBは美しい画像を使って訪問者を喜ばせ、素晴らしい第一印象を与えます。

image14

デザインにおける色、フォント、形の重要性についてはすでに説明しました。それらを慎重に選択すると、ターゲットオーディエンスから即座に信頼を得るのに役立ち、ソーシャルメディアのエンゲージメントを促進することもできます。

同様に、Webサイトの要素の周りに思い出に残る楽しい体験を作成するために、さらに深く掘り下げることを検討することもできます。良い例は、Photojojoの製品ページにある「引っ張らない」ボタンです。引っ張ると、手が上から来て、ページをページの説明領域までスクロールダウンします。

image03

製品の説明を読むことは大きなインセンティブであるだけでなく、ソーシャルメディアのエンゲージメントを成功させる結果にもなりました。この体験はソーシャルネットワークで広く共有されており、メディアエンゲージメントに値するユーザーインタラクションを提供するため、ブロガーによって広く取り上げられています。

image20

4.ヒックの法則をデザインに適用します
心理学者のウィリアム・エドマンド・ヒックとレイ・ハイマンは、認知情報の能力を評価するために選択反応実験を実施しました。彼らは、選択肢の数を増やすと、対数的に決定を下すのにかかる時間が増えることを発見しました。

image15

この法則の一般的な適用は、あなたが読んだかもしれないジャム研究です。食料品店での選択肢の数が18減少すると、売上高は3%から30%に急増しました。

image13

それで、この法律はあなたのウェブサイトのデザインにどのように適用されますか?

あなたの訪問者に10の選択肢を提供して彼らを圧倒する代わりに…。

提供するオプションを最小限に抑える必要があります。

消費者は毎日、たくさんの情報に襲われています。したがって、彼らがあなたのウェブサイトを訪問するとき、彼らの時間を大切にし、あなたの最も説得力のある関連性のあるオファーを彼らに提示してください。

image22

焦点を当てる必要のある特定の要素は次のとおりです。

1.フォームフィールドの数を最小限に抑えます。フォームフィールドの数を増やした場合に失われる可能性のあるコンバージョンの見積もりは次のとおりです。

image17

2. Webサイトにソーシャルネットワーク共有ボタンを追加するたびに、読み込み時間が長くなります。だから、あなたの聴衆がたむろするソーシャルネットワークを見つけてください。ブログにはこれらの共有ボタンのみを表示し、他の10個のオプションは表示しないでください。

スクロールマップを使用して、クリックされているボタンを見つけることもできます。

3.「1ページ」のランディングページの原則を覚えておいてください。 「1つの目標」、CTAボタンが関係する場合は常に。

Whirlpoolは、3つのセカンダリCTAボタンを削除し、単一の焦点を絞ったCTAに頼った後、電子メールキャンペーンのCTRを42%増加させました。

これが、多くのオプションを含む元のメールです。

image21

そして、すべてのセカンダリCTAを削除した後、テストしたバージョンは次のとおりです。

image18

4. Webサイトのナビゲーションバーの要素の数は、最も関連性の高いアイテムのみを提供する必要があります。

image09

特にホームページには、クリック可能なアイテムが多く含まれていてはなりません。私のホームページには、焦点を絞ったCTAがあります。

image05

また、クリック可能なリンクは11個しかありません。

image10

アマゾンをチェックしたところ、141のリンクがありました。

image12

簡潔なナビゲーションメニューは、WebサイトのSEOにも役立ちます。ホームページからのリンクの数が少ないと、その権限が内部ページにうまく流れます。

 

より多くのリンクは、リンクジュースの希釈を意味します。

上級者向けのヒント:ホームページの上部からナビゲーションメニューを削除してみてはどうでしょうか。ユーザーの注意をプライマリCTAに直接集中させることができます。 Yuppiechefはナビゲーションを削除し、コンバージョンを100%増やすことができました。確かに、これはブライアンハリスによるコンバージョンに焦点を当てた逆さまのホームページの基盤です。

image11

5.ユーザーを最優先し、ユーザーとの個人的なつながりを試みます
最終的には、視聴者と感情的につながることがすべてです。ユーザーがあなたのウェブサイトにアクセスした瞬間に、ユーザーに関連するオファーを伝えることができない場合、あなたは失敗しました。

ここでは、ユーザーの操作を確実に処理するための2つの方法を示します。

1.質的な洞察を得るために、インタビューとユーザーエクスペリエンステストを実施します

アナリティクスからのユーザーに関するデータは意思決定を行うための良い方法ですが、最善ではありません。 「理由」がわからないからです。

Yelpは、一連の5つのテストを活用して、ユーザーの行動を分析し、Webサイトの特定の要素に関する貴重な洞察を導き出しました。

たとえば、検索バーはその主要な機能の1つであり、使いやすかったです。また、[イベント]タブなど、特に目立たない要素もいくつか見つかりました。

image19

彼らはここで他の6つの洞察を共有しています。全体として、Yelpは、彼らのサイトは訪問者にとって有用で効果的であるものの、改善の余地があることを発見しました。

UXPinのメンバーは、使用状況データを確認した後、ペルソナを作成しました。彼らは、行動に基づいてユーザーをセグメント化しました(KISSMetrics内のイベントを調べます)。そして、これは、人々が自分たちがデザインの一部であると感じ、使いやすいことを保証する方法です。

image00

2.ストーリーテリング

感情的なユーザーエンゲージメントのための古典的で強力なテクニックは、ストーリーを語ることです。あなたのデザインは物語を語っていますが、それは魅力的で記憶に残るものですか?

ビジュアルストーリーを評価するために、ブランドストーリーテリングに関する私の記事から始めることをお勧めします。

ストーリーテリングの力を過小評価しないでください。 eコマースブランドのRaven+Lilyは、製品のストーリーテリングを組み込み、サイトの再設計を行うことで、売上を150%増加させることができました。

結論
あなたのウェブサイトのデザインはあなたのブランドの個性とあなたが状況で伝えたい中心的なメッセージを強化するべきです。

魅力的なウェブサイトのデザインを作成するのに役立つ5つのヒントを共有しました。それらはすべて強力な心理学の原則に根ざしており、あなたのウェブサイトへのエンゲージメントを高めるのに効果的です。

ウェブサイトのデザインで他の心理学の原則を活用したことがある場合は、以下のコメントで私と共有してください。