web-dev-qa-db-ja.com

なぜ人々は私たちの巨大で目立つ、明確で対照的な紫色のバナーに気付かないのですか?

私は D&D Wiki と呼ばれるMediaWikiサイトの一部です。 他の人の間で、世間の目上の私たちの長年の問題の1つは、特定のページが「自作」ではなく「自作」に分類されるほど明確にラベル付けできなかったことです公式'。

その結果、「公式」ではないすべてのページにこの lovely homebrew banner のラベルが付けられるソリューションを押し進めました。サイト全体の明るくクリーミーなブラウンにちなんで表示されているのは、このページ全体の印象的な黒/濃い紫/赤のバナーと対照的です。マイナーな説明。

公式ページ自作ページ には、異なる配色、異なるフォント、異なるテキストサイズ、異なるテーブルレイアウト、異なるタイトルスキーム、そして特に 異なるバナーがあります。 一見すると著しく異なる「公式コンテンツ」と宣言します。

しかし、私はredditからチャットまで、それ自体をstackexchangeするために何度も聞いたことがあります。私は引用します。「 自作のバナーは、明るい紫色であるにもかかわらず、どうしても気づきにくいです。 "。どういうわけか人々はまだこれらの2つのカテゴリのページを混同していますか?

私は自分がこの状況を理解できないことを公言します。私たちは人間の知覚を打ち負かしましたか?私たちはそれをそれほど目立たせたので、明らかに、内部から見ることができませんでした。人類自身が周囲の宇宙全体に気づいていないように?

実際にバナーに気付かせるにはどうすればよいですか?または、彼らが見ているコンテンツの自作の性質を人々に知らせるより良い方法はありますか?これらの盲人はすべて変な変人ですか、それとも私はどういうわけか私の気が狂っていますか?

enter image description here

編集:関心と有益な応答をありがとう!興味のある方のために、この問題に関するその後の議論は サイト、ここ にあります。

219
user2979044

この現象は バナー失明 。ラベルはバナー広告のように見えるため、無意識のうちにスキップされます。以前の経験から、関係のないものは常に含まれているとユーザーが教えた場合、ユーザーはコンテンツの完全なセクションを無視するように条件付けられています。バナーが注目を集めるほど、無視されます。 「homebrew」や「official」などのラベルに注目してもらいたい場合は、ユーザーが自然にスキャンしている場所に配置する必要があります。

あなたのケースでは、それをページタイトルの隣に置くことを検討してください。また、アラートアイコンをまばらに使用しても無視されない傾向があるため、アラートアイコンを操作することもできます。できれば、他の配色と対照的な色を使用してください。

571
Wanda

バナーは美しいですが、スタイルがページの他の部分と一致しません。比類のないグラフィックスタイルでインターネットのどこに何があるか知っていますか? Ads

他の人が言ったように、問題はユーザーがコンテンツの一部としてそれを考慮していないことです。広告のように見えるのでスキップします。

私が取るべき重要な行動は、それをページの他の部分と深く統合することだと思います。それをコンテンツの一部にし、最も重要なのは、無関係に感じないようにスタイルをフィットさせることです。

また、 広告のように見えるXKCDストリップがあります

260
Rad80

それがデザインです。視覚的にはサイトやページの一部ではありません。それは視覚的にサイトに属さない正方形のコンテンツであり、ユーザーへの広告であることを示しています。

視覚的にサイトの一部になるようにバナーをデザインします。

最も簡単な方法は、周囲のデザインからそれをデザインすることです。これにより、視覚的にサイトの一部になります。以下に例を示します。

ここで、紫のバナーが削除されたときにどれほど目立たなくなるかを確認できます。

enter image description here

これは、サイトの一部になるように設計されたバナーの例です。

enter image description here

116
moot

前述のように、バナーはバナー失明を誘発していますdespiteではなくためそれはとても巨大で、目立ち、明確で対照的な紫色です。また、コンテンツのすぐ上に配置されているため、簡単に無視できます。読者は見出しから読み始めます。それ以上のものは簡単に無視されます。

可能な解決策:

  • SRD素材で行ったように、すべての「Homebrew」コンテンツを独自のWiki名前空間に配置します。このようにして、公式資料が「5e SRD:ArticleTitle」と読むのと同じように、すべての自作の記事の見出しは「5e Homebrew:ArticleTitle」を読みます。
  • 見出しの下にユーザーに知らせるバナーを見出しの下に置きます。画像は使用しないでください。通常のMediaWikiマークアップ構文を使用するテンプレートボックスを使用して、サイトデザインに溶け込むようにします。 Wikipediaのテンプレート のように、「この記事には作業が必要です」または「この記事の中立性に異議がある」のように使用できます。ウィキペディアンは、十分に見えることとそれほど見えないことの間にバナーの失明を誘発するというかなり良いバランスを理解しました。
  • 2つの完全に別個のWikiを作成します。1つは自作用、もう1つは公式資料用です。それらに異なる名前とロゴを付けます。
57
Philipp

ウィキペディアの記事を機能的にあなたの記事と違わない(この記事は改善する必要がある)バナーで見ると には、いくつかのデザインの違いがあることがわかります。つまり:

  • バナーは記事の一部であり、記事のタイトルの直下配置されます
  • バナーは記事ほど幅が広くはありませんが、中央に配置されていますが、記事のテキストよりも少し小さいです。
  • それはページの残りの部分と一致する中間色を持っていますが、注意を引く対照的なアイコンがあります。
  • バナーのテキストは非標準であり、太字と斜体の部分とさまざまな青色のリンクがあります。

これらすべてにより、バナーを見逃しにくく、解析しやすくなっています。ページを開くとすぐに気づき、何を伝えようとしているのか簡単に推測できます。
これをバナーに適用して、バナーの端と記事の端の間にパディング領域を作成します。今のところ、それはタスクバー、ウィンドウメニューバー、またはアドバナーのように見えますが、探しているのでなければ無視する必要があります。私は対照的な背景色を捨てて、その意図を伝えるために、プレーンな背景にテキストを含む単一のアイコンを選びます。これらの変更が気になる場合は、バナーが十分な注意を引き付けないため、バナーの位置を変更し、それを試し、テキストの書式を変更することができます。より完全な説明のあるページへのリンクを追加して、おそらくhomebrew pageおよびd&d wiki 大胆な。

または、十分に勇気がある場合は、記事のフォントを変更してみることもできます。 D&D wikiのようなものについては、ユーザー作成の記事用の手書きスタイルフォント(まだ読みやすいもの)で済むと思います。ユーザーの記事と公式の記事が明確に区別されており、公式/非公式の衝突のため、意図がそのまま伝わるかもしれません。そうすると、記事ではなく、ユーザーに関する主題に関する「メモ」のようになります。

29
kevin

enter image description here

Githubリボン を試してみることはできますか?.

これは非常に注目に値し、コンテンツの残りの部分を奪うことはありません。

異なる色の「公式」と「自作」のリボンを用意します。

15
icc97

さまざまな色、フォントなどがあるとおっしゃっていますが、全体的にページは非常によく似ています。大きなページには視覚的なノイズが多いため、同じようなレイアウト(サイドバー、3列、同じメインロゴ)である場合、フォントを変更するだけでは十分ではありません。一見して少し目立つのは、背景とベージュ/ホワイトの両方が他のベージュと茶色の色合いにぴったり合うため、th3ユーザーはバックグラウンドの切り替えを実際に認識しません。

他の人が述べたように、バナーは通常広告であるため、人々はバナーを無視する傾向があります。

パレット全体をベージュからパープル(明るくない、ラベンダーのようなパステル色)に変更することをお勧めします。左上にあるwikiロゴを別の色に少し変更して、下に「自作」タグラインを追加することもできます。私は両方のサイトでフォントなどを同じにして、2つのサイト間の一貫性を維持します。

enter image description hereenter image description here

8
PixelSnader

公式ページ自作ページ には、異なる配色、異なるフォント、異なるテキストサイズ、異なるテーブルレイアウト、異なるタイトルスキーム、そして特に 異なるバナーがあります。 一見すると著しく異なる「公式コンテンツ」と宣言します。

...

実際にバナーに気付かせるにはどうすればよいですか?または、彼らが見ているコンテンツの自作の性質を人々に知らせるより良い方法はありますか?

質問から自家製のバナーのあるページへのリンクをたどり、スタイルを対比するための公式ページを見つけようとしました。最初に見つけたのは https://www.dandwiki.com/wiki/3e_SRD:Multiclass_Characters でした。今、多分私は盲目の奇妙なフリークです1、しかし、このページに別のバナーが表示されず、別の配色も表示されません。テキストのスタイルは異なりますが、違いの読み方を説明するチュートリアルを通じてサイトのすべてのユーザーにチャネルを設定しない限り、それほど多くはありません。

配色を大幅に変更するか、(私の好み)配色を超えて背景を変更することを検討してください。背景上のかすかな繰り返しの透かしは、バナーとして無視するのと同じ本能(任意の位置、任意のサイズ)をトリガーせず、スクロールによってスキップされません。


1 私は確かにそれらの2つに警官します。

6
Peter Taylor

問題は二つあると思います。まず第一に、問題は、ウェブサイトがWikiとしてラベル付けされており、訪問者にその意図を誤って伝えていることです。このため、このサイトの情報は、ウィザーズオブザコーストのD&D資料にある既存の情報を参照するものであると、人々は思い込みがちです。 Wikiはファンが作成したコンテンツの場所ではありません。たとえば、スタートレックを中心に展開するWikiサイトでファンのコンテンツを見つけることはほとんどありません。

他の問題は、他の人が答えたように、画面上部の自作の通知バーが、主に広告用に予約される位置にあることです。サイトの残りの部分からの衝突する色は、人々が広告であると解釈するものを見ることを気にしないので、人々がうっかりして視線をそらす原因になります。

6
Fluffy Gryphon

人々はバナーをスキャンするのを少し前にやめたと思います。それらは化粧品または広告用です。

セクションの最初に小さな警告アイコンとメッセージを表示するか、同様の方法で表示することで、チャンスが増えるでしょう。

このようにして、ユーザーはコンテンツと通知アイコン+テキストを読み始めます。

TL; DR:人々は無意識のうちにバナーを迂回している

3
Leths

私は正直に言うと、過去に何度もD&DWikiの自作ページを見てきましたが、そのバナーに実際に気づいたのはこれが初めてです。つまり、以前に見たことがありますが、常にバナー広告として登録されており、ページ自体の一部として登録されていないため、常に無視しました。

3
MalignantMind

自作バナーがあなたのウェブサイトの一部のユーザーによって無視されるいくつかの原因が考えられます:

  1. バナーの紫色の部分は、ウェブサイトの閲覧フローの外にあります。柱状レイアウトでは、2番目と3番目の列は、最終的に読み取られるように自然に残されます。紫色の部分は、バナーの2列目のような感じです。黒の部分はサイトのコンテンツにうまく流れています。それは最初のテキスト列の一部として感じられ、ユーザーをコンテンツにプッシュします。ユーザーが列の下部から次の列の上部に移動するとき、ユーザーは水平方向の罫線で停止します。バナーの色の違いと、列間のギャップを横切る警告テキストも、追加の仮想水平線として機能します。つまり、バナーの暗い部分はコンテンツに直接つながり、水平方向のルールはユーザーがバナーに戻るのを妨げます。

  2. コントラストは注意を呼びます。最大の対比はバナーの左側にあり、ユーザーに月桂樹の読み取りフローを開始させる。

  3. 意味を理解するにはテキストが多すぎます。人々はあなたが何を意味するのか理解するためにバナーの長い説明を読まなければなりません。バナーは必要ないかもしれません。「NOFICIAL CONTENT:このページはユーザー(...)によって作成されました」のようなシンプルで小さいヘッダーテキストだけです。重要な位置にある小さく直接的な明確な表現は、ユーザーの注意を引く可能性が高くなります。

  4. バナーの警告は、「Homebrew」の意味と矛盾します。これは、潜在意識がそれを取り除くのに役立ちます。自家製飲料は通常、家の所有者が作った特別な手作りの製品です。所有者はウェブマスターです。だから、それはウェブマスターからの特別なコンテンツセクションであるという感覚を伝えます。したがって公式。警告の内容とは正反対です。

  5. 他の人が述べたように、広告バナーのように見え、配色はウェブサイトと一致しません。

0
Lucas

ここでの回答の一部は複雑すぎます(これは"エキスパートの問題に対処するエキスパート"です現象:一連のトップエキスパートが明らかな問題を "指摘する必要さえありません"!)

私は謙虚に説明します

2つの途方もなく明白な問題:

  1. 画像のタイプは読み取れません。これは、グラフィックデザインの最も基本的なポイントの1つです。画像にタイプがあるので、完全に判読できません。

  2. 右側のタイプは、その周囲に「境界線」があります。これは完全に判読できません。繰り返しますが、これはグラフィックデザインの非常に基本的な問題です。

正直なところ、それは単純です。

0
Fattie

人々は、自分の目標につながらないものを無視することに優れています(この場合、おそらく「D&Dについて読みたい」でしょう)。

このバナー/通知/ヒントは、Snarky Silver Dragonの統計を表示するように見えますか?いいえ→無視します。

これは、人々が気づかないうちに無意識のうちに起こります(私たちには視線検査テストがあり、それを一目見ただけで、人々はそれについて尋ねられても要素にまったく気づきませんでした)。メッセージに気づく人々、ここにいくつかのアイデアがあります:

  • 人を遅くする-オーバーレイが表示され、アラートとボタンをクリックする必要がある場合があります(「はい、このページはD&D Canonについて記述していないことを受け入れます」)。
  • それらをさらに遅くします(オーバーレイを非表示にする前にチェックする必要があるチェックボックス「同意する」を追加します)
  • それをコンテンツの一部にして、それが後にあるもののように見えるようにし(おそらくヘッダーの下に置く)、コンテンツにさらに似せるようにします(「免責事項:このページはHomebrewであり、D&D Canonについて記述していません。 ")-段落テキストと同じかもしれませんが、境界線と感嘆符のアイコンがあるのでしょうか?
  • これがHomebrewであるという情報を彼らがすでに減速して考えているところに置いてください-私の考えはこれをリンクで行うことです。たとえば、キヤノンのリンクは単純ですが、自作のページへのリンクにはすべて「(自作)」があり、アイコンが追加されている可能性がありますか?そして、彼らは別の色を持つことができますか?そして「?」マウスオーバーで自作とは何かを説明するツールチップ?
0
Tomáš Kafka

他の人々はこれに触れました、しかし:バナーが審美的に楽しいという事実はそれがそこにあることを示唆しています審美的に楽しいこと。デザインの基本的な概念は、Xを実行するために何かがあることを明確にしたい場合は、Xのみを実行できるように作成する必要があるということです。緑、私は「何のために」と尋ねる可能性が高く、それがドアであることに気付きます。かなり宇宙のイメージが描かれた長方形のパッチがある場合、それが単なる絵画ではなく、ドアであることを登録するのにおそらくもっと時間がかかります。人々が明確な目的のない何かを見た場合、彼らはそれが何のためにあるのか疑問に思うでしょう。目的が何かに割り当てられると、他の目的がないかどうか疑問に思って座ってしまう傾向があります。

ドラマチックなイメージはテキストからも目を離し、人々がそれに気づくと読みにくくなります。ページ全体に独特の境界線や異なるフォントを使用すると、より効果的です。

0
Acccumulation