デザインの心理学6サイトレイアウト
公開: 2022-04-06デザイナーが行うすべての選択は、消費者が製品、サービス、または会社と対話する方法に影響を与えます。 これは、Webサイトの編成方法に特に当てはまります。
デザインの心理学に関するシリーズのこの最後のインスタレーションでは、ウェブサイトのユーザージャーニーに影響を与える心理学の原則のいくつかを深く掘り下げます。 コンテンツのベストプラクティスから、効果的な召喚状、ゲートコンテンツ、メニューナビゲーションなどのヒントまで、顧客がサイトに関与するかどうかに影響を与える心理的影響のいくつかを調べています。
次のセクションでは、影響を与える心理学の原則のいくつかをカバーします。
- コンテンツの優先順位付け
- ナビゲーション構造
- ゲート付きコンテンツとフォームフィールド
- カートとチェックアウトプロセス
- 召喚状
コンテンツに適切な優先順位を付ける
シリーズのパート4では、サイトのコンテンツ階層の重要性について少し説明しましたが、ここではその基本的な分析についてさらに詳しく説明します。 コンテンツの優先順位付け、つまりコンテンツ階層とは、オーディエンスがサイト上の情報を消化する正確な順序を特定して、製品またはサービスの利点を最大限に理解できるようにすることを意味します。
これまで、重要な情報を折り畳みの上に配置することの重要性についてデザイナーが話しているのを聞いたことがあるかもしれません。 「Abovethefold」は、インターネットの初期にWebデザイン用語に移行した古い新聞用語です。 これは、新聞が最も重要な記事をページの中央の折り畳みの上に置くように、スクロールせずにサイトにアクセスするユーザーに表示されるコンテンツを指します。
ただし、ほとんどの活字新聞と同様に、折り畳み式コンテンツの概念は、いくつかの理由で少し時代遅れになっています。 手始めに、モバイルトラフィックがデスクトップを上回り続けているため、多くのユーザーが小さな画面(電話やタブレットなど)からWebサイトにアクセスするようになりました。 そのため、多くのサイト訪問者はスクロールを期待しているため、折り畳み上にあるコンテンツの重みは以前よりも少なくなります。
だからといって、上記のコンテンツが役に立たないというわけではありません。ランディングページは優れた例ですが、あまり重要視しないように注意してください。 設計するときは、代わりに系列位置効果について考えてください。
ドイツの心理学者ヘルマンエビングハウスによって造られた用語である系列位置効果は、人々がリストの最初と最後の項目を覚えている可能性が最も高いという事実を指します。 これは、私たちの脳が、最初に見たアイテム(主効果)と最近見たアイテム(最近の効果)に好意を示しているためです。
この戦術は、ユーザーがコンテンツから1つか2つの重要なポイント(おそらく製品名または主な利点)だけを思い出す必要がある場合にうまく機能します。 ただし、複数のステップや処理する情報が多いより複雑なトピックについては、別のアプローチをとることができます。
段階的開示の戦術は、ユーザーが非常に複雑なトピックを理解するのに役立つ優れた方法です。 これは、情報を複数の画面に広げ、1つの画面から次の画面に移動するためのインタラクションを必要とする手法を指します。 これにより、エンドユーザーが提示された情報に圧倒される可能性を低くすることができます。 切り捨てられたコンテンツとアコーディオン表示は、デザイナーがWebデザインで段階的開示を使用する一般的な方法の2つにすぎません。
これらの効果は両方とも、消費者の心の中でメッセージを固めることができる自然な人間の思考パターンを利用するのに役立ちます。 ただし、ユーザーがコンテンツを読み始める前に、特定の目的でサイト内を移動することを決定する場合があります。 次のセクションでは、訪問者にとってそのプロセスをシームレスにするのに役立ちます。
ナビゲーションの構造化
ほとんどのWebサイトのナビゲーションボタンは、ページ上部のバーまたは片側のハンバーガーメニューの2つの方法のいずれかで構成されています。 このタイプのナビゲーションは、ユーザーにとってほぼ第二の性質になり、「壊れていない場合は修正しないでください」と言われています。
ナビゲーションを設計するときは、標準に従うのは簡単ですが、構造を揺るがしたい場合がいくつかあります。 あなたが自分自身に気を配るべき最初の考えはヒックの法則です。
1950年代初頭、2人の研究者、ウィリアム・エドマンド・ヒックとレイ・ハイマンが、刺激の量と個人が決定を下すのにかかった時間との関係を調べました。 彼らの結論は? オプションが多すぎると麻痺します。 たくさんのクリック可能なものを備えた広大なナビゲーションメニューは、それで、新しいユーザーにとってはあまりにも圧倒されるかもしれません。
代わりに、ナビゲーションボタンは明確で、適切に配置され、少数である必要があります。 大規模なサイトの場合、ナビゲーションの別のボタンの傘下に重要度の低いボタンをネストします。 たとえば、Amazonのトップレベルのナビゲーションはかなり単純ですが、ホバーすると、ユーザーはオプションの拡張ビューを取得します。
![Flywheelホームページのスクリーンショットは、8つの主要なオプションを備えたナビゲーションメニューを示しています。 [製品]オプションにカーソルを合わせると、その下にネストされた5つの追加メニュー項目が表示されます。](/uploads/article/730/WKL8IkesEKR5nxUY.png)
最初に表示するボタンの数を視聴者に制限することで、視聴者が選択肢を絞り込み、より適切なナビゲーションの決定を下せるようになります。 また、主効果を使用して、ユーザーに最も実行したいアクションを実行させることもできます。
ほとんどのWebサイトは同じ方法でナビゲーションを整理しますが([概要]ページ、[サービスまたは製品]、[連絡先]の順に)、最も重要なコンテンツを最初に配置すると、より多くの可視性を得ることができます。 したがって、主な目的が潜在的なクライアントに連絡してもらうことである場合は、ナビゲーションの最初に[連絡先ページ]ボタンを配置してみてください。
ナビゲーションメニューは、多くのデザイナーが美的ビジョンとエンドユーザーのエクスペリエンスの適切なバランスを見つけるのに苦労している場所です。 美的ユーザビリティ効果とは、心地よいデザインと、機能的な問題を見落とすユーザーの傾向との相関関係を指します。
たまたま、ユーザーは本の表紙で判断する傾向があり、アクセスしているサイトが見栄えがよい場合は、機能上の問題をより許容します。 したがって、UXテストを完了するときは、デザインのプラスの効果に焦点を当てているが、その動作についてはほとんど言及していないユーザーからのフィードバックに注意を払ってください。 彼らの結果を掘り下げて、彼らがあなたのデザインを賞賛するためにあなたの機能的な失敗を許していないことを確認してください。
訪問者が使用するゲートとフォームフィールドの作成
ユーザーはこれまで以上にオンラインで過ごす時間が増えていますが、個人データを提供する可能性は低くなっています。 これはおそらく、ほとんどの人が少なくとも2つの電子メールアドレスを持っている理由の1つです。
定期的にチェックされるメインのメールアドレスは1つだけです。 もう1つは、残念ながら、めったにチェックされません。 ユーザーがアクセスできなくなった古いアカウントであるか、何かにアクセスするためにメールアドレスが必要な場合に使用されていますが、ユーザー名の背後にいる人は、メインの受信トレイに大量のマーケティングメールが殺到することを望んでいません。
ユーザーがフォームフィールドに入力してビジネスに連絡したり、ゲートコンテンツをダウンロードしたりする場合、アクティブか無意識かを問わず、ユーザーは頭の中で簡単な費用便益分析を行います。 彼らは、フォームに記入することで、受信トレイのスペースをあきらめる価値があるかどうか、そして頭の中で考えています。
値がユーザーの躊躇を上回っていることを確認する最善の方法は、フォームフィールドをできるだけ使いやすくすることです。 可能な限り最も適格なリードを取得できるように、ユーザーに多くの人口統計情報を尋ねたくなりますが、そうすると、それらを完全に失うリスクがあります。 フォームを自動入力用に最適化して、ユーザーが情報をさらに迅速に入力できるようにし、送信コストの一部を節約します。
さらに、含めたいと思う質問があるが、短いコメントのフィールドなど、一部のユーザーが多すぎる場合は、オプションにすることで、訪問者はエントリのコストをさらに下げることができます。 。
また、訪問者に送信を促すために、ユーザージャーニー全体でフォームフィールドに入力するための心理的インセンティブを作成することもできます。 これはプライミングと呼ばれ、相互に関連する単語や画像を意図的に使用して、脳内でより速く、より記憶に残る関連付けを作成する行為です。 これらの小さなトリガーは、ユーザーが「迷惑メールアドレス」を入力するか、主要なアドレスを入力するかの違いを意味する場合があります。

一部のWebデザイナーが訪問者をプライミングしてゲートまたは連絡先フォームに入力する簡単な方法は、セマンティックプライミングを使用することです。 セマンティックプライミングを使用して、無意識のうちに訪問者にフォームの送信を促す言語の関連付けを作成できます。 たとえば、マーケターがゲートの反対側のコンテンツに関する問題に対して「迅速」または「簡単」な解決策を約束する場合、これらのトリガーワードは、訪問者が個人データを入力するアクションを見る方法にも色を付ける可能性があります。 。
カートやチェックアウトを通じて会話を固める
あなたがオンライン販売者である場合、あなたのチェックアウトプロセスはあなたのサイトのデザインの最も重要な側面の1つです。 それはコンバージョンの成否の瞬間であるため、何かがうまくいかなかったり、時間がかかりすぎたりすると、セールを逃す可能性があります。
これは、多くのマーケティングチームがユーザーに製品について思い出させるためにデジタルバナーキャンペーンに依存する場合です。 ただし、「バナーブラインド」の影響により、最も優れたデジタルキャンペーンの進行が抑制される可能性があります。
バナーブラインドネスは、選択的な無視の一種であり、人々は目前のタスクに無関係であると考えるものを自然に無視します。 そのため、運転中にレシピや看板をスクロールしているときに、デジタル広告を簡単に調整できます。 脳は可能な限り多くの無関係な情報を自動フィルタリングします。広告はどこにでもあるので、最初に行くべきものの1つです。 では、バナーの失明と戦う方法は?
可能であれば、放棄されたカートの電子メールまたはページ上のポップアップメッセージは、潜在的な購入者を実際の購入者に変えるのに役立ちます。 これらのメッセージは、ユーザーの注意をチェックアウトプロセスに戻そうとする試みです。 潜在意識をさらに行動に移すには、ツァイガルニク効果を使用します。
これは、リトアニアの心理学者Bluma Zeigarnikが行った観察であり、中断されたタスクや完了していないタスクは、完了したタスクよりも簡単に思い出せると規定しています。 これが、テレビ番組にクリフハンガーが含まれることが多い理由です。 未完成だと感じる何かを覚えて、戻ってくる可能性が高くなります。

したがって、不完全なプログレスバーやステップの番号付きリストなど、ユーザーの放棄されたカートに関するポップアップを表示すると、ユーザーがカートを離れたときに行っていたことを思い出すのに役立ちます。これには、ユーザーがいた「チェックアウト」の考え方も含まれます。買い手は戻って彼らがしていたことを終える。 完了したタスクの提案された満足度は、ユーザーが購入を完了するために必要な最後のプッシュである可能性があります。
召喚状の作成
行動を促すフレーズは、間違いなくサイトの最も重要な部分です。 ウェブサイトの作成(販売、データの収集、ソーシャルフォロワーの構築)の目標が何であれ、行動を起こすための呼びかけは、ウェブサイトを求める場所です。
ほとんどのサイトでは、さまざまな重要度が設定された複数の召喚状があります。 たとえば、主な目標が製品の販売である場合、ニュースレターの購読や友人の紹介などの二次的な要求がまだある可能性があります。 すべてのユーザーがまったく同じ旅をたどりたいとは限らないため、これは素晴らしいことです。したがって、オプションを提供することで、ユーザーは独自のパスを選択できます。
これは、ヒックの法則が作用するもう1つの例です。 選択のパラドックスとも呼ばれます。これは、オプションの量が多すぎると、ユーザー間の意思決定が麻痺する場合に発生します。 ユーザーを選択のパラドックスから救い、ユーザーが迅速な意思決定を行えるようにするには、2〜3回の召喚状のみを使用して特定し、厳守します。 これにより、ユーザーの処理時間が短縮され、ニーズに最適な選択肢をより効果的に絞り込むことができます。
サイトの最も重要な側面の1つとして、行動を促すフレーズにも多くの注意を払う必要があります。 これらのセクションを目立たせる簡単な方法は、VonRestorffエフェクトを使用することです。 隔離効果とも呼ばれ、複数の刺激が与えられたときに、他のアイテムとは著しく異なるアイテムがより覚えやすくなるという観察結果です。
![Flywheel Webサイトのホームページのスクリーンショット。[プランの表示]ボタンは太字の黄色で目立ち、[代理店ツールの探索]ボタンは太字ではなく、クリック可能な要素であることを示す小さな青い矢印が表示されています。](/uploads/article/730/95D6PjycNUBcgcus.png)
したがって、行動を促すフレーズを作成するときは、訪問者に最も受け入れてもらいたい1つの選択肢を特定して区別します。 ユーザーが製品の購入、ニュースレターの購読、または友人の紹介のいずれかを求められる上記の例を引き続き使用するには、明確な主要な目標があります。それは販売です。
色、サイズ、形状、タイポグラフィ、配置、またはその他の物理的要素を使用して、他の2つの召喚状と区別することにより、最も重要な要求にさらに注意を向けることができます。 すべてのページに少なくとも1回の召喚状が必要ですが、Von Restorff効果を使用して、ページを次々に宣伝し、ユーザーに最も重要なアクションを実行するように促すことができます。
素晴らしいデザインの背後にある心
ウェブサイトのデザインがユーザーに与える可能性のある心理的影響について明らかにし、理解することはまだまだたくさんあります。このシリーズは表面を傷つけるだけです。 そのため、私たちはあらゆる角度からデザインを継続的に分析し、フリーランサーやデザインの専門家を念頭に置いてコンテンツをキュレーションしています。
クリエイティブなツールキットを成長させるために、デザインの要素をカバーするコンテンツを増やしたいですか? 以下のレイアウトニュースレターを購読して、スキルを磨き、より多くのビジネスを獲得するために必要な最高のツール、プラクティス、および洞察を毎週入手してください。
