ペギー・オルソンがインタラクティブのためにデザインする方法

公開: 2014-06-18

マッドメンの時代、マーケティング担当者は自分の仕事がどのように消費されるかを正確に知っていました。 対象となる視聴者は、テレビで広告を見たり、ラジオで聞いたり、雑誌や看板で見たり、おそらく (かたつむりの) 郵便受けに入ったりするでしょう。 印刷広告や郵便物を計画した場合、設計対象の不動産の正確なサイズを知っていて、そのスペースに合わせて広告を最適化しました。 消費者は、あなたがデザインしたときに想像した通りのコンテンツを見るでしょう。

Peggy Olson が現在広告をデザインしているとしたら、その広告がどのように表示されるかというコンテキストと、ターゲット ユーザーが広告をどのように操作するかを考慮する必要があります。 彼女の作品が自分の思い描いた通りに見られる保証はないので、どのように見てもインパクトのあるレイアウトとデザインを最適化する必要がありました。 彼女は行動を促すフレーズ (CTA) が、3 インチの画面であっても、明確かつ簡潔で、判読可能であることを確認する必要がありました。

今日の Web ページ、ランディング ページ、メールのデザインは、Mad Men の時代よりもはるかに複雑です。 現在、インタラクティブな要素が追加されており、コンテンツがどのデバイスで表示されるかわかりません。 フルサイズのコンピューター画面で完璧に見えるレイアウトは、タブレットやスマートフォンで表示すると完全に混乱する可能性があります. 不明瞭な CTA や間違った場所に配置された CTA は、エンゲージメント率を低下させる可能性があります。

3 つの重要なインタラクティブ デザインのベスト プラクティス

今日のほとんどの消費者は、ブヨのように集中力を維持しています。 彼らがあなたのコンテンツにアクセスしてから、より興味深いものをクリックするかどうかを決定するまでに、約 2 秒の猶予があります。 メール、ランディング ページ、または Web ページをデザインするときは、次の 3 つの概念を理解することが不可欠です。

  1. レイアウトがエンゲージメントに与える影響: エンゲージメントを最大化するためにページに要素をレイアウトする方法を学びます
  2. コンテンツがエンゲージメントにどのように影響するか: 何があなたのコンテンツとやり取りするように私を駆り立てるかを知る
  3. 時間の重要性: 2 秒以内に注意を向けてください

シンプルですね。 そんなに簡単だったらこんなこと書かない！ 毎日、どれだけ多くのコンテンツに出くわし、イライラして [戻る] ボタンを押してしまうかわかりません。 私が話しているのは、潤沢な資金を持つ大企業ですが、デザインセンスはありません。

それでは、実践しましょう。 あらゆるプラットフォームでのエンゲージメントのためにページ レイアウトを最適化するのに役立ついくつかの非常に簡単なヒントを読んでください。

目がどのようにページをスキャンするか

最初に理解する必要があるのは、人間の目がコンテンツ全体をどのように追跡するかということです。 私が大学で広告を勉強していたとき、目は左上から始まる大文字の Z の形でページ全体を追跡すると言われました。 この理論は、白衣を着た男が一枚の紙に目の動きのパターンを描こうとしている間に、一部の被験者がコンテンツの断片を見ているという研究によって考案されたと確信しています. これは、オンラインで表示されたページ間で人々がどのように追跡するかを確認するために使用される、現在広く利用されているヒート マップ技術よりもずっと前のことです。 そして、気に留めておいてほしいのは、人々は印刷物をオンライン コンテンツとは少し異なる方法でスキャンするということです。

最近のコンセンサスは、オンラインでコンテンツを表示するとき、視線は大文字の F パターンで追跡し、依然として左上から始まるというものです。 あなたの目は通常、最初に F の一番上のバーを横切って水平に追跡し、次に F の 2 番目のバーを追跡し、最後に F の垂直ステムを上から下に追跡します。

画面上で読むためのfパターン
エビデンスに基づいたユーザー エクスペリエンスの調査、トレーニング、コンサルティングを行うニールセンノーマングループ N N /g の画像

では、これはどういう意味ですか？ これは、CTA がその大文字の F パターンのどこかにある必要があるか、赤ちゃんに口ひげを生やさなければならないことを意味します。 最初の 2 秒間で視聴者の目を引く場所にメインの CTA を配置するように、意識的にデザインを決定してください。

口ひげを生やした赤ちゃん
ユーザーがどこを見ているかをコンピューターが正確に認識できるようにするアイ トラッキングおよびアイ コントロール テクノロジーのベンダーである Tobii の画像。

リアルデザイン災害

では、Act-On の同僚の 1 人が作成を手伝ってくれた、実際の設計災害を見てみましょう。 以下の例は、私がオンラインで見つけた実際のコンテンツから抜粋したものであると言って申し訳ありません。 Actomatic という架空の会社を使用して、人々が犯す最も一般的な間違いとその修正方法を示しました。

例 1: CTA を見るためにスクロールさせないでください

私が目にする機会を逃した最も一般的なものは、共有する方法がないか、スクロールしなければ見えないページの下部に埋め込まれたボタンを共有するコンテンツの一部です。 折り目は、画面の下部にある架空の線です。 (この用語は、新聞が半分に折りたたまれていた時代に由来します。「折り目の上」はより良い配置で、より多くの読者を獲得できます。) 平均サイズのラップトップ画面では、折り目は画面の上部から 480 ピクセルになる場合があります。 iPhone では、上から 100 ピクセルの位置にある場合があります。 ページ コンテンツをレイアウトするときは、この点に注意してください。

ブログや複数ページの記事について話している場合、ほとんどの人は、見出し (それが良ければ) とコンテンツの最初の 2 つの文を読んだ後、共有する準備ができていると思います。ゲートから最初に出ること。 人々は、仲間が 5 回共有しているのを見たコンテンツではなく、新鮮なコンテンツを共有することを好みます。

コンテンツの上部と下部に共有ボタンを配置するか、スクロールするとコンテンツの横に浮かぶ共有ボタンを使用することをお勧めします。

私は非常に有名な会社と協力して、記事の上部と下部に共有ボタンを追加すると、共有率が 400% 以上上昇したことを発見しました。

例 2: ああ、私の目!

忙しすぎてどこを見ればいいのかわからないコンテンツにたどり着いたことはありませんか? たぶん、共有するビデオ、記入するフォーム、いくつかのコピー、あちこちにいくつかのリンクがありました. 以下のページにたどり着いた場合、どこから始めればよいか分からないため、おそらくまったく関与しないでしょう。 この例では、このページで何が最も重要かを示していません。 2 秒以内に私の注意を引き、引き付けます。あなたは私を見失いました。

複数の CTA がある場合は、それらの要素の論理的な順序を明確にします。 必要に応じて、番号付きの吹き出しで綴ります。 このページに来たら、次の質問をします。

ウェブページのデザインの悪い例

ランダムな空白と奇妙なフォントで、レイアウトは無計画でずさんに見えます。 CTA は明らかにスクロールしなければ見えない位置にあります。

私が Actomatic にアドバイスをする場合、このページで何を達成したいのかを尋ねることから始めます。 ここでの目標は何ですか？ ここでの主な目標は、人々にブログにサインアップしてもらい、短いビデオを見て共有してもらうことだと思います。 その場合は、いくつかの変更を加える必要があります。

  1. メインの CTA がスクロールしなければ見えない位置にあることを確認してください。 共有ボタンと購読ボタンの両方がスクロールしなければ見えない位置にあります。
  2. 訪問者にブログにサインアップしてビデオを共有してもらいたいことを明確にします
  3. 会社に関するいくつかの情報を追加します

では、見てみましょう:

良いランディング ページの例

新しい改善されたバージョンは、レイアウトがわずかに異なり、フォントが少なく、会社とビデオに関する短い宣伝文があり、ブログを購読するための障壁が低くなっています. 下部にリンクと [お問い合わせ] ボタンも追加しました。 目が自然にページをスキャンする方法に従って、読者が最初の 2 秒間に表示する情報量を最大化するためにレイアウトを最適化した方法に注目してください。 F パターン理論では、閲覧者がページ上の要素を取り込む順序は次のとおりです。

  1. 会社のロゴ
  2. 見出し
  3. 共有ボタンと購読ボタン
  4. 下部の探索セクション

交流する理由を教えてください

レイアウトがすべて整理されたので、コンテンツを操作する理由を説明する必要があります。 フォームへの記入やコンテンツの共有を希望する場合は、やむを得ない理由が必要です。 では、お聞きしたいのですが、私にとってそれは何ですか？

その質問に対する答えがわからない場合は、宿題を終えていません。

人々がコンテンツとやり取りする主な理由は、感情的または物質的に何らかの満足を得るためです。 あなたのコンテンツが良ければ、私はそれを共有します。 あなたがリリースしたばかりの新しいウィジェットについて私が最初に知った場合、私はエゴブーストを得ます.

あなたは非営利団体で、あなたのコンテンツは何か特別なことをした人についての気持ちの良い話かもしれません.私はそのコンテンツを共有します. フォームに記入したら iPad が当たるチャンスがあると申し出てください。個人情報を提供する可能性が高くなります。

秘訣は、何が視聴者を惹きつけるかを知ることです。 感情的な報酬ですか、物質的な報酬ですか、それとも両方ですか? 彼らの立場に立って、視聴者に向けたエンゲージメント戦略を作成してください。

単純にする

#KeepItSimple Tシャツ 私は最近、成功したソーシャル マーケティング キャンペーンのケース スタディを発表したカンファレンスで講演しました。 前面に #KeepItSimple がプリントされた T シャツを着ました。 私は説教することを実践しようとします。

私は、非常に複雑なインタラクティブ コンテンツを作成した顧客や、信じられないほどシンプルに保っている他の顧客と仕事をしてきました。 シンプルにする方法は次のとおりです。

  • オンラインで読みやすい Trebuchet のようなフォント フェースを選択します。
  • 1 つのページに多くのフォント フェースとサイズを混在させないでください。 見出し用に 1 つのサイズ、本文用に 1 つのサイズ。
  • 可能であれば、明確な CTA を 1 つにしてください。
  • 重要なものはスクロールせずに見えるようにします。
  • 参入障壁をできるだけ低くする (本当に必要なのはメールアドレスだけなら、誰かの長子を尋ねないでください)。

あなたの宿題

ちょっと待って、あなたはこの記事の最後に宿題があるとは決して言いませんでした! もし私が宿題があると言っていたら、あなたはここまで読んだでしょうか？ うん。 ランディング ページの 1 つを批判的な目で見て、改善の余地があるかどうかを自問していただきたいと思います。

  • ラップトップとモバイル デバイスでランディング ページの 1 つを表示します。 CTA にたどり着くためにスクロールする必要がありますか? モバイルデバイスで適切に表示されますか?
  • あなたの会社について何も知らない友人に、あなたのランディング ページの 1 つを見てもらい、それを見ている間に率直なフィードバックを提供してもらいます。 彼らが最初に気づいたこと、あなたの会社が何をしているのか、ページの主な CTA は何かを教えてもらいます。
  • すべての重要な要素が F パターン内にあるかどうかを確認します。
  • 可能な限り多くのプラットフォーム上の可能な限り多くのブラウザーでページをテストします。 Safari は、Chrome のような要素をレンダリングしません。 Firefox は、Internet Explorer (IE) のような要素をレンダリングしません。 また、IE のバージョンが異なると、コンテンツの表示がまったく異なる場合があります。

これをやってのけるために、広告のレイアウトとデザインの学位を取得する必要はありません。 ただし、現在のコンテンツを批判的な目で見る必要があります。

努力する価値はあります。