web-dev-qa-db-ja.com

使用を促進するためのWebページ上のTwitter / Facebook /ソーシャルメディアウィジェットでの共有の最適な配置

世の中のほとんどすべてのサイトと同様に、私は site を開発し、人々がTwitterやFacebookを通じてコン​​テンツを共有することを奨励しています。

また、他のほとんどのサイトと同様に、ウィジェットの配置は固定されています。現在、私のようにメインコンテンツの下部にあります(多くの点でStackExchangeのクローンなので、質問の後に配置され、赤で強調表示されています)。

sf4answers question

下部に配置することの問題は、コンテンツが十分に長い場合(そして非常に長いエントリがいくつかある場合)、ユーザーがコンテンツを宣伝したい場合は、下部までスクロールする必要があることです。

ただし、 CNNのマネーサイト を閲覧しているときに、共有ウィジェットがコンテンツが通常移動しない余白を超えたスペースに配置されていることに気付きました(赤で強調表示)。

CNN Money - top

ただし、下にスクロールしている間、ウィジェットはコンテンツとともにフローティングしました。位置は常にwindowの同じ場所に固定されており(ページではなく)、コンテンツをスクロールしている間、フローティングの効果を生み出します(赤で強調表示):

CNN Money - scrolled

発生する質問は次のとおりです。

  • これは一般に、ソーシャルメディアボタンを使用して共有を利用/利用するように人々を促すための効果的な方法ですか?

  • コンテンツは、ほとんどのコンテンツ主導型サイトで表示される現在の「標準」幅の外にあります(これは991ピクセルですが、ほとんどの人は960ピクセル進みます。設計、使いやすさ、デバイスの互換性の観点から、懸念事項や利点は何ですか?

(注:すぐにカーソルヒートマップ画像を追加します)

7
casperOne

人々があなたのボタンを見つけることができる限り速いならば、あなたはあなたのソーシャルメディアボタンを良い場所に置いたと私は言うでしょう。テクニックがうまく機能するかどうかについては、確実に知る唯一の方法は、定量化可能な時間にわたって実際の統計を使用して測定することです。

私は推測を危険にさらして、彼ら(money.cnn.com)が多くの理由のために単にページの下部にそれを持っているこの方法を行うことによってより多くを得ると言います。

  • アイコンは大きいです。
  • 彼らは人気の数を持っているので、人々はそれを「好き」に一人でいると感じません。
  • それらは簡単に見つけられ、他の情報の海に隠されていません。
  • 彼らは常に手渡しであり、決して「フォールドの下」ではありません。
  • 戻るボタンに行くと、目で人が通り過ぎるところに現れます。

彼らは、ほとんどのサイトが提供するより目立つ位置にいる顧客をサイトに誘導するための重要な測定基準であるという決定を明らかにしました。

共有リンクを配置する場所を決定するとき、アイコンを配置する場所に影響を与えると私は信じているので、最初に知っておくべきことは、人々があなたのサイトをどのように読んでいるかを知ることです。記事を読み終えた時点で、人々が自然にあなたのサイトを見る場所を見つけるためにより多くの労力を費やすことができるとわかったら。

例えば。このサイトでは、2つの場所にあります。

  • SO&SE全般:質問の真下にある、ほとんどの人が読むとは思えないほとんど目に見えないテキスト。
  • UX SE(ここ):評価矢印の下にも表示されます(インターフェイスの重要な部分であり、質問を読んだ後にユーザーを引き付けます)。
  • SE:回答が表示されたときに、その下にも非常に目立つように存在するため、回答を簡単に共有できます(最適化された自然な思考プロセス)。
  • BBC.co.ukは記事のすぐ下にあります。
  • ICanHazCheezburger.comは記事の下にそれらを持っていますが、すぐにはありません。
  • money.cnn.comは左側に(あなたが言うように)それらを持っています。いつでも閲覧できます。
  • 他のサイトも同様に、スクロールに関係なく常に下部に表示されます。

基本的に、私が行く要約は、記事を読んだ直後に人の目がどこに行くのかを把握したいということであり、おそらく彼らが実行するであろう多くのタスクがあると思います:

  • 別のページ/詳細があるかどうかを確認しています。
  • 彼らはあなたのサイトの修正を持っているので、ブラウザの戻るボタンを押すつもりです。
  • 記事の評価や回答/コメントなど、記事に対してアクションを実行しようとしています。
  • 作者が誰であるか/サイトが何と呼ばれるかを探す。
  • あなたのコンテンツを読んだときに人々が行う豊富なこと。

あなたと同様の方法でコンテンツを配信しているサイトや、同様の人口統計を持つサイトをWebで検索し、それらが何をしているのかを確認すると、パターンが出現する可能性があります。

経験則として、確信がない場合-私が何かを共有しようとしている場合、最初に(経験豊富なユーザーとして)目にするのは、私が消費していた記事/投稿/写真の一番下のスラップバンです。疑わしい場合は、SEと同じようにそれらをそこに配置し、別の場所を検討します。あなたがずっと間違っているとは思いません。

基本的に:

  • 1つのサイズですべてに対応することはできません。
  • 聴衆を知ると彼らの行動.
  • アイコンが必要なときは「わかりやすい」にし、不要なときは邪魔にならないようにすることを目指します。
6
Amadiere

したがって、特定の要素をどのようにグループ化またはレイアウトするかについては、レイアウトの残りの部分に実際に依存すると言って、私の回答の前置きをしますが、私は通常、CNN Moneyサイトのアプローチを使用することの大ファンです使用される参照。サイトの「共有」オプションを探しているときにいらいらした経験があった回数を数えることはできません。これは、(ご承知のとおり)標準の場所や方法を表示するための標準的な方法がないためです。

したがって、このアプローチを使用する主な長所は、オプションを見つけることが非常に簡単であることは明らかです。共有したいコンテンツに簡単にアクセスできるだけでなく、ユーザーがドキュメントをスクロールしているときにそのオプションにすでに気づいている可能性が高いため、ユーザーはどこにアクセスすればよいかを知ることができます。これを使って。

この手法の欠点は、現在のデザインと一致しない可能性があることです。 CNN Moneyの例に戻ると、カーソルはすでに画面のその側(スクロールバーの近く、またはその他)にある可能性が高いため、実際にはコンテンツを左側ではなく右側に置くことをお勧めします。リンク)。もう1つは、ページ上の他のスクリプト(例:パフォーマンスの問題、スクリプトの競合など)でうまく機能しないか、モバイルバージョンまたはWebサイトのビュー内で適切に機能する(例:他のコンテンツ、パフォーマンスの問題、大量のダウンロードを覆い隠す)かもしれませんなど)。

短所が特定のサイトまたはシナリオの長所を上回る場合は、ソーシャルメディアオプションを冒頭の両方に配置することを2番目に優先するでしょうandコンテンツの終わり(おそらくトップ) -right/bottom-right corner)このようにして、正しい方向に向かう50/50のチャンスは、それによってオプションを簡単に見つけることができ、100/0に非常に近くなります。

4
JGarrido

共有ボタンを正確に2か所に配置します。つまり、上と下記事のコンテンツと他の場所なしです。他の場所にある共有ボタンは、ユーザーが何を共有しているのかわからないように混乱させます。記事の上にある共有ボタンは、記事スキマーが共有することを奨励します。記事とコメントの間に挟まれた記事の下にある共有ボタンは、記事の読者に共有を促します。個人的には、フローティング共有バーが非常に煩わしいと感じています。共有する共有バーがあると、高品質の読書体験が損なわれます。それは非常にアマチュアであり、記事が読む価値がなく、共有する価値がはるかに少ないことを保証します。また、ソーシャル共有ボタンはサイトのマーケティングなどに最適ですが、メール共有機能も含めるようにしてください。これは依然として、人々が自分自身および少数の選択した仲間のためにあなたのコンテンツを共有することを望む最も主要な方法であるためです。

2
Chamilyan