web-dev-qa-db-fra.com

Pourquoi les gens ne remarquent-ils pas notre énorme bannière violette, proéminente, claire et contrastée?

Je fais partie d'un site MediaWiki appelé D&D Wiki . Entre autres , l'un de nos problèmes de longue date aux yeux du public était notre incapacité à étiqueter suffisamment clairement que certaines pages sont catégorisées comme 'Homebrew', par opposition à ' Officiel'.

Par conséquent, nous avons proposé une solution dans laquelle toutes les pages qui ne sont pas "officielles" sont étiquetées avec cette belle bannière homebrew . Contrastant avec la lumière du site, bruns crème, effrontément affichée est cette bannière noire/violet foncé/rouge saisissante sur toute la page, avec un texte blanc bordé de noir qui affiche très largement et clairement les mots "Page Homebrew", avec un supplément explication mineure.

Pages officielles et pages homebrew ont différents schémas de couleurs, différentes polices, différentes tailles de texte, différentes dispositions de tableau, différents schémas de titres et, notamment, un bannière différente le déclarant "contenu officiel" qui est sensiblement différent au premier coup d'œil.

Cependant, j'ai entendu plusieurs fois depuis reddit, sur notre chat, s'empiler en échange, et je cite: " la bannière homebrew est inexplicablement difficile à remarquer malgré le violet vif. ". D'une manière ou d'une autre, les gens confondent toujours ces deux catégories de pages?

Je professe ma propre incapacité à comprendre cette situation. Avons-nous dépassé la perception humaine? Avons-nous rendu cela si visible, si ... évident, qu'il ne pouvait pas être vu de l'intérieur; Comme l'humanité elle-même ignorant l'intégralité de l'univers qui les entoure?

Comment faire en sorte que les gens remarquent réellement notre bannière? Ou existe-t-il une meilleure façon d'informer les gens de la nature homebrew du contenu qu'ils voient? Ces aveugles sont-ils tous des monstres bizarres, ou suis-je en quelque sorte décontenancé?

enter image description here

EDIT: Merci à tous pour l'intérêt et les réponses utiles! Pour ceux qui sont intéressés, notre discussion ultérieure sur la question peut être trouvée sur le site, ici .

219
user2979044

Ce phénomène est appelé cécité de bannière . Votre étiquetage ressemble à une bannière publicitaire et est donc inconsciemment ignoré. Les utilisateurs ont été conditionnés à ignorer des sections complètes de contenu si leur expérience précédente leur a appris qu'il contient toujours des éléments non pertinents. Plus la bannière tente d'attirer l'attention, plus elle est ignorée. Si vous voulez que les gens remarquent une étiquette comme "homebrew" ou "officiel", vous devez le placer quelque part que les utilisateurs recherchent naturellement.

Dans votre cas, pensez à le placer à côté du titre de la page. Vous voudrez peut-être également travailler avec des icônes d'alerte, car elles ne sont généralement pas ignorées par les utilisateurs si elles sont peu utilisées. De préférence une couleur contrastante avec le reste de votre palette de couleurs.

571
Wanda

La bannière est magnifique mais le style ne correspond pas au reste de la page. Vous savez ce qui est partout sur Internet avec des styles graphiques inégalés? Annonces .

Comme d'autres l'ont dit, le problème est que les utilisateurs ne le considèrent pas comme faisant partie du contenu. Il semble que ce soit une annonce, alors ils la sautent.

Je pense que l'action cruciale à prendre est de l'intégrer profondément avec le reste de la page. Faites-en une partie du contenu et, plus important encore, adaptez le style pour qu'il ne semble pas étranger.

Aussi, il y a une bande XKCD pour ressembler à une annonce .

260
Rad80

C'est le design. Visuellement, cela ne fait pas partie du site ou de la page. C'est un carré de contenu qui n'appartient pas visuellement au site, ce qui indique qu'il s'agit d'une publicité pour les utilisateurs.

Concevez la bannière pour qu'elle fasse partie du site visuellement.

Le moyen le plus simple est de le concevoir à partir de sa conception environnante. Cela en fait une partie visuelle du site. Voici un exemple.

Ici, vous pouvez voir à quel point la bannière violette est envahissante lorsqu'elle est retirée:

enter image description here

Voici un exemple de bannière conçue pour faire partie du site:

enter image description here

116
moot

Comme indiqué précédemment, la bannière induit la cécité de la bannière non pas malgré mais parce que il est tellement énorme, proéminent, clair et contrasté de pourpre. De plus, son emplacement juste au-dessus du contenu le rend facile à ignorer. Le lecteur commence à lire le titre. Tout ce qui est au-dessus est facilement ignoré.

Solutions possibles:

  • Mettez tout le contenu "Homebrew" dans un propre espace de noms Wiki, comme vous l'avez fait avec le matériel SRD. De cette façon, les titres de tous les articles homebrew se lisent "5e Homebrew: ArticleTitle" tout comme le matériel officiel se lit "5e SRD: ArticleTitle".
  • Mettez la bannière qui indique à l'utilisateur ce qu'il lit sous le titre. N'utilisez pas d'image. Utilisez une boîte de modèle qui utilise la syntaxe de balisage MediaWiki normale afin qu'elle s'intègre mieux dans la conception du site. Vous pouvez utiliser les modèles de Wikipedia comme "Cet article a besoin de travail" ou "la neutralité de cet article est contestée" comme exemples. Les Wikipédiens ont trouvé un assez bon équilibre entre être suffisamment visibles et ne pas être si visibles qu'ils induisent la cécité des bannières.
  • Créez deux wikis complètement séparés, un pour l'homebrew et un pour le matériel officiel. Donnez-leur différents noms et logos.
57
Philipp

Si vous regardez un article Wikipedia avec une bannière qui n'est pas différente du vôtre sur le plan fonctionnel (cet article doit être amélioré) , vous verrez qu'il existe un certain nombre de différences de conception. À savoir:

  • La bannière fait partie de l'article, placée directement sous le titre de l'article
  • La bannière n'est pas aussi large que l'article, elle est centrée mais légèrement plus petite que le texte de l'article.
  • Il a des couleurs neutres, correspondant au reste de la page, mais il y a une icône contrastée qui attire l'attention.
  • Le texte de la bannière n'est pas standard, avec des parties en gras et en italique et divers liens bleus.

Tout cela rend la bannière difficile à manquer et facile à analyser. Si vous ouvrez la page, vous la remarquerez immédiatement et il est facile de deviner ce qu'elle essaie de vous dire.
En appliquant cela à votre bannière, je créerais une zone de rembourrage entre les bords de la bannière et les bords de l'article. À l'heure actuelle, cela ressemble à une barre des tâches, une barre de menus ou une bannière publicitaire, quelque chose à ignorer, sauf si vous le recherchez. J'abandonnerais la couleur d'arrière-plan contrastée, optant pour une seule icône avec du texte sur un arrière-plan uni pour communiquer son intention. Si vous pensez qu'avec ces changements, la bannière n'attire pas suffisamment l'attention, vous pouvez essayer de changer sa position, jouer avec cela et peut-être changer la mise en forme du texte. Vous pouvez ajouter un lien vers une page avec une explication plus complète et peut-être faire homebrew page et d&d wiki audacieux.

Alternativement, si vous êtes assez courageux, vous pouvez essayer de modifier la police de l'article. Je pense que pour quelque chose comme un wiki D&D, vous pourriez vous en tirer avec une police de style d'écriture manuscrite (qui est toujours lisible) pour les articles créés par les utilisateurs. Il distingue clairement les articles utilisateurs des articles officiels et, en raison du conflit formel/informel, il pourrait transmettre l'intention de cette façon. Cela ressemblerait alors davantage à des "notes" d'un utilisateur sur un sujet, plutôt qu'à un article.

29
kevin

enter image description here

Puis-je suggérer d'essayer les rubans Github .

Ceci est remarquablement perceptible et n'enlève rien au reste du contenu.

Ayez un ruban pour "officiel" et "homebrew" avec des couleurs différentes.

15
icc97

Vous dites que vous avez différentes couleurs, polices, etc., mais dans l'ensemble, les pages sont très similaires. Une grande page a tellement de bruit visuel que le simple changement de police ne sera pas suffisant si la présentation est toujours similaire (barre latérale, 3 colonnes, même logo principal). La seule chose un peu perceptible en un coup d'œil est l'arrière-plan et le beige/blanc s'intègrent tous les deux étroitement aux autres teintes beiges et marron, de sorte que l'utilisateur ne perçoit pas vraiment l'échange d'arrière-plan.

Et comme d'autres l'ont mentionné, les gens ont tendance à ignorer les bannières car ce sont généralement des publicités.

Je suggérerais de changer toute la palette du beige au violet (pas brillant, plus pastel comme la lavande) et peut-être changer légèrement le logo wiki dans le topleft à une couleur différente et peut-être ajouter un slogan "homebrew" en dessous. Je garderais les polices et les mêmes sur les deux sites pour garder une certaine cohérence entre les deux.

enter image description hereenter image description here

8
PixelSnader

Pages officielles et pages homebrew ont différents schémas de couleurs, différentes polices, différentes tailles de texte, différentes dispositions de tableau, différents schémas de titres et, notamment, un bannière différente le déclarant "contenu officiel" qui est sensiblement différent au premier coup d'œil.

...

Comment faire en sorte que les gens remarquent réellement notre bannière? Ou existe-t-il une meilleure façon d'informer les gens de la nature homebrew du contenu qu'ils voient?

J'ai suivi un lien de la question à une page avec une bannière homebrew puis j'ai essayé de trouver une page officielle pour contraster les styles. Le premier que j'ai trouvé était https://www.dandwiki.com/wiki/3e_SRD:Multiclass_Characters . Maintenant, peut-être que je suis un monstre bizarre aveugle1, mais je ne vois pas les différentes bannières sur cette page, et je ne vois pas les différentes couleurs. Le style du texte est différent, mais à moins de canaliser tous les utilisateurs du site via un tutoriel qui explique comment lire les différences, ce n'est pas grand-chose.

Pensez à faire des changements plus drastiques dans le jeu de couleurs, ou (ma préférence) au-delà du jeu de couleurs pour changer l'arrière-plan. Un léger filigrane répétitif en arrière-plan ne déclenche pas le même instinct à ignorer qu'une bannière (dans n'importe quelle position, de n'importe quelle taille) et n'est pas ignoré par le défilement.


1 J'en ferai certainement deux.

6
Peter Taylor

Je dirais que le problème est double. Je crois, avant tout, que le problème est que le site Web est étiqueté comme un wiki et communique mal ses intentions aux visiteurs. Pour cette raison, les gens sont plus susceptibles de supposer que toute information sur ce site sera des références à des informations existantes trouvées dans Wizards of the Coast D&D. Un wiki n'est pas vraiment un endroit pour du contenu créé par des fans. Il est peu probable que vous trouviez du contenu de fan sur un site Wiki tournant autour de Star Trek, par exemple.

L'autre problème est que, comme d'autres l'ont répondu, votre barre de notification homebrew en haut de l'écran est située dans une position qui serait principalement réservée aux annonces. Les couleurs opposées du reste du site incitent par inadvertance les gens à détourner leur regard car ils ne se soucient pas de regarder ce qu'ils interprètent comme une publicité.

6
Fluffy Gryphon

Je pense que les gens ont arrêté de scanner Banner il y a un moment. Ils sont soit cosmétiques, soit pour des publicités.

Vous auriez plus de chances d'avoir une petite icône d'avertissement et le message au début de la section, ou quelque chose de la même manière.

De cette façon, l'utilisateur commencera à lire le contenu et l'avis icône + texte.

TL; DR: les gens contournent inconsciemment les bannières

3
Leths

Je vais être honnête, j'ai regardé les pages homebrew D & DWiki d'innombrables fois dans le passé, et c'est la première fois que je remarque cette bannière. Je veux dire, je sais que je l'ai déjà vu, mais il est toujours enregistré en tant que bannière publicitaire, et non en tant que partie de la page elle-même, donc je l'ai toujours ignoré.

3
MalignantMind

Je vois quelques causes possibles pour que la bannière homebrew soit ignorée par certains des utilisateurs de votre site Web:

  1. La partie violette de la bannière est en dehors du flux de lecture du site. Dans une disposition en colonnes, les deuxième et troisième colonnes sont naturellement laissées pour être lues à la fin. La partie violette ressemble à une deuxième colonne dans la bannière. La partie noire coule bien dans le contenu du site. Il fait partie de la première colonne de texte, poussant l'utilisateur vers le contenu. Lorsque l'utilisateur passe du bas d'une colonne au haut de la suivante, il s'arrête dans la règle horizontale. La différence de couleur de la bannière et le texte d'avertissement traversant l'espace entre les colonnes agissent également en tant que règles horizontales virtuelles supplémentaires. Bref, la partie sombre de la bannière mène directement au contenu et les règles horizontales bloquent les utilisateurs pour revenir à la dernière bannière.

  2. Le contraste attire l'attention. Le plus grand contraste se trouve à gauche de la bannière et conduit l'utilisateur à démarrer le flux de lecture colunaire.

  3. Trop de texte pour avoir le sens. Les gens doivent lire la longue explication dans la bannière pour comprendre ce que vous voulez dire. Peut-être n'avez-vous pas besoin d'une bannière, juste d'un texte d'en-tête simple et plus petit comme "CONTENU UNOFICIAL: cette page a été créée par un utilisateur (...)". De petites expressions directes et claires dans des positions clés ont plus de chance d'attirer l'attention de l'utilisateur.

  4. L'avertissement sur la bannière contredit ce que signifie "Homebrew". Cela aide notre subconscient à le filtrer. Les boissons Homebrew sont généralement un produit artisanal spécial fabriqué par le propriétaire de la maison. Le propriétaire est le webmaster. Ainsi, il transmet le sentiment qu'il s'agit d'une section de contenu spéciale du webmaster. Par conséquent officiel. Exactement le contraire de ce que dit l'avertissement.

  5. Comme d'autres l'ont dit, cela ressemble à une bannière publicitaire et le jeu de couleurs ne correspond pas au site Web.

0
Lucas

Certaines des réponses ici sont trop complexes (c'est le phénomène "experts traitant des questions d'experts": où un groupe d'experts de haut niveau "ne prend même pas la peine de signaler" les problèmes évidents!)

Je vais expliquer humblement la

Deux problèmes ridiculement évidents:

  1. Le type sur une image est illisible. C'est l'un des points les plus fondamentaux de la conception graphique. Vous avez tapé une image, elle est donc totalement illisible.

  2. Le type à droite a une "bordure" tout autour. C'est totalement illisible. Encore une fois, c'est un problème très fondamental dans la conception graphique.

C'est honnêtement aussi simple que cela.

0
Fattie

Les gens sont excellents pour ignorer ce qui ne mène pas à leurs objectifs (dans ce cas, probablement "vouloir lire sur D&D").

Est-ce que cette bannière/cet avis/cet indice me permettra d'accéder aux statistiques de Snarky Silver Dragon? Non → ignorer.

Cela se produit inconsciemment sans que les gens le réalisent (nous avons eu des tests de suivi des yeux montrant qu'ils ont jeté un coup d'œil sur la chose et que les gens ignorent totalement l'élément lorsqu'on le leur a demandé), donc si vous voulez améliorer légèrement (fixons un objectif réaliste) le pourcentage de les gens remarquant le message, voici quelques idées:

  • ralentir les gens - il peut y avoir une superposition avec une alerte et un bouton sur lequel ils doivent cliquer ("Oui, j'accepte que cette page ne décrive pas D&D Canon.")
  • ralentissez-les encore plus (ajoutez une case à cocher "J'accepte cela" qui doit être cochée avant de pouvoir masquer la superposition)
  • en faire une partie du contenu afin qu'il ressemble à quelque chose qu'ils recherchent (peut-être placé sous l'en-tête) et le rendre plus similaire au contenu ("Avertissement: cette page est un Homebrew et ne décrit pas un Canon D&D . ") - peut-être le même que le texte du paragraphe, mais avec une bordure et peut-être une icône de point d'exclamation?
  • mettre l'information que c'est un Homebrew quelque part où ils ralentissent déjà et pensent - mon idée est de le faire sur des liens. Par exemple, les liens Canon seraient clairs, mais les liens vers les pages homebrew auraient tous "(Homebrew)" et peut-être une icône ajoutée? Et ils pourraient avoir une couleur différente? Et un "?" info-bulle qui expliquerait ce qu'est l'homebrew au survol de la souris?
0
Tomáš Kafka

D'autres personnes en ont parlé, mais: le fait même que la bannière soit esthétiquement agréable suggère qu'elle est là pour être esthétiquement agréable. Un concept de base du design est que si vous voulez être clair que quelque chose est là pour faire X, alors vous devez le faire pour qu'il ne puisse faire que X. Si je regarde un mur et que je vois un patch rectangulaire qui est une ombre laide de vert, je vais probablement demander "A quoi ça sert", et remarquer que c'est une porte. S'il y a un patch rectangulaire sur lequel est peinte une jolie image cosmique, cela me prendra probablement plus de temps pour enregistrer qu'il s'agit d'une porte, et pas seulement d'une peinture. Si les gens voient quelque chose sans but apparent, ils se demanderont à quoi cela sert. Une fois qu'un objectif peut être attribué à quelque chose, les gens ont tendance à ne pas s'asseoir pour se demander s'il manque un autre objectif.

L'image dramatique détourne également l'attention du texte et la rend plus difficile à lire si les gens la remarquent. Il serait plus efficace que la page entière ait une bordure distinctive et/ou une police différente.

0
Acccumulation