Why do people not notice our enormous, prominent, clear and contrasting purple banner?

Question

I'm part of a MediaWiki site called D&D Wiki. Among others, one of our longstanding issues in the public eye was our failure to label clearly enough that certain pages are categorised 'Homebrew', as opposed to 'Official'.

Consequently, we pushed through a solution wherein all pages that are not 'Official' are labelled with this lovely homebrew banner. Contrasting with the site's light, creamy-browns, brazenly displayed is this page-wide, striking black/dark purple/red banner, complete with black-bordered white text that is very largely and clearly displaying the words "Homebrew Page", with extra minor explanation.

Official pages and homebrew pages have different colour schemes, different fonts, different text sizes, different table layouts, different title schemes, and, notably, a different banner declaring it 'official content' that is noticeably different at the shortest glance.

However, I have heard multiple times from reddit, to our chat, to stackexchange itself that, and I quote: "the homebrew banner is inexplicably hard to notice despite being bright purple.". Somehow people are still getting these two categories of pages mixed up?

I profess my own inability to understand this situation. Did we overshoot human perception? Did we make it so noticeable, so.. obvious, that it could not be seen from within; Like humanity itself being unaware of the entirety of the universe around them?

How do we make people actually notice our banner? Or is there a better way to inform people of the homebrew nature of the content they're seeing? Are these blind people all weird freaks, or am I somehow off my nut?

EDIT: Thanks all for the interest and helpful responses! For those interested, our subsequent discussion on the matter can be found on the site, here (archived).

Answer 1

This phenomenon is called banner blindness. Your labeling looks like a banner advertisement and is therefore subconsciously skipped. Users have been conditioned to ignore complete sections of content if their previous experience taught them that it always contains irrelevant stuff. The more attention the banner tries to pull, the more it's ignored. If you want people to notice a label like "homebrew" or "official", you need to place it somewhere that users are scanning for naturally.

In your case, consider putting it next to the page title. You may also want to work with alert icons, as these tend not to be ignored by users if they are used sparsely. Preferably a contrasting colour with the rest of your colour scheme.

Answer 2

The banner is beautiful but the style does not match the rest of the page. You know what is everywhere on the Internet with unmatching graphic styles? Ads.

As others have said, the problem is that users are not considering it as part of the content. It appears to be an ad, so they skip it.

I think the crucial action to be taken is to integrate it deeply with the rest of the page. Make it part of the content and, most importantly, make the style fit so that it does not feel extraneous.

Also, there is an XKCD strip about looking like an ad.

Answer 3

It's the design. Visually it's not part of the site or page. It's a square of content that doesn't belong to the site visually which indicates it's an advertisement to users.

Design the banner to be part of the site visually.

The most simple way is to design it out of its surrounding design. This makes it part of the site visually. Below is an example.

Here you can see how obtrusive the purple banner is when it's removed:

Here is an example of the banner designed to be a part of the site:

Answer 4

As previously said, the banner is inducing banner blindness not despite but because it is so enormous, prominent, clear and contrasting purple. Also, its placement just above the content makes it easy to ignore. The reader starts reading at the headline. Anything above it is easily ignored.

Possible solutions:

• Put all the "Homebrew" content into an own Wiki namespace, just like you did with the SRD material. That way the headlines of all homebrew articles read "5e Homebrew:ArticleTitle" just like the official material reads "5e SRD:ArticleTitle".
• Put the banner which tells the user what they are reading below the headline. Don't use an image. Use a template box which uses the normal MediaWiki markup syntax so it better blends into the site design. You can use the templates from Wikipedia like "This article needs work" or "the neutrality of this article is disputed" as examples. The Wikipedians figured out a pretty good balance between being visible enough and not being so visible they induce banner blindness.
• Create two completely separate wikis, one for homebrew and one for official material. Give them different names and logos.

Answer 5

If you look at a Wikipedia article with a banner that's functionally not unlike yours (this article needs improving), you'll see there are a number of design differences. Namely:

• The banner is part of the article, placed directly under the article's title
• The banner is not as wide as the article, it's centered but slightly smaller than the article text.
• It has neutral colors, matching the rest of the page, but there's a contrasting icon drawing attention to it.
• The text in the banner is non-standard, with bold and italic parts and various blue links.

All of this makes the banner hard to miss and easy to parse. If you open the page you'll notice it immediately and it's easy to guess what it's trying to tell you.
Applying this to your banner, I'd create a padding area between the banner's edges and the article's edges. Right now it looks like a taskbar, window-menubar or ad-banner, something to ignore unless you're looking for it. I'd ditch the contrasting background color, opting for a single icon with text on a plain background to communicate its intent. If you feel like with these changes the banner doesn't draw enough attention you can try to change its position, play around with that, and perhaps change the text formatting. You can add a link to a page with a more complete explanation and perhaps make homebrew page and d&d wiki bold.

Alternatively, if you're brave enough, you could try altering the article's font. I think for something like a D&D wiki you could get away with a handwriting style font (one that's still legible) for user-made articles. It clearly distinguishes the user articles from the official ones and because of the formal/informal clash it might convey the intent that way. It would then become more like a user's 'notes' on a subject, instead of an article.

Answer 6

Can I suggest trying the Github ribbons.

This is remarkably noticable and doesn't take away from the rest of the content.

Have a ribbon for 'official' and 'homebrew' with differing colours.

Answer 7

You say you have different colors, fonts etcetera, but overall the pages look very similar. A large page has so much visual noise that simply changing thw font won't be enough if it's still a similar layout (sidebar, 3 columns, same main logo). The only thing somewhat noticeable at a glance is the background and beige/white both fit in closely with the other beige and brown tints so th3 user doesn't really perceive the background swap.

And as others mentioned, people tend to ignore banners because they're usually advertisements.

I'd suggest changing the whole palette from beige to purple (not bright, more pastel like lavender) and maybe slightly change the wiki logo in the topleft to a different color and maybe add a "homebrew" tagline underneath. I'd keep the fonts and such the same on both sites to still keep some consistency between the two.

Answer 8

Official pages and homebrew pages have different colour schemes, different fonts, different text sizes, different table layouts, different title schemes, and, notably, a different banner declaring it 'official content' that is noticeably different at the shortest glance.

...

How do we make people actually notice our banner? Or is there a better way to inform people of the homebrew nature of the content they're seeing?

I followed one link from the question to a page with a homebrew banner and then tried to find an official page to contrast the styles. The first one I found was https://www.dandwiki.com/wiki/3e_SRD:Multiclass_Characters. Now, maybe I am a blind weird freak¹, but I can't see the different banner on this page, and I can't see the different colour scheme. The text styling is different, but unless you channel all users of the site through a tutorial which explains how to read the differences, that's not much.

Consider making more drastic changes in the colour scheme, or (my preference) going beyond colour scheme to change the background. A faint repeating watermark on the background doesn't trigger the same instinct to ignore as a banner (in any position, of any size) and isn't skipped by scrolling.

---

¹ I'll certainly cop to two of those.

Answer 9

I would say that the problem is twofold. I believe, first and foremost, the problem is that the website is labeled as a Wiki and is miscommunicating its intentions to visitors. Because of this, people are more likely to assume that any information on this site is going to be references of existing information found in Wizards of the Coast D&D material. A wiki isn't really a place for fan-made content. You're unlikely to find fan content on a Wiki site revolving around Star Trek, for instance.

The other problem is that, as others have answered, your homebrew notification bar at the top of the screen is located in a position that primarily would be reserved for ads. The clashing colors from the rest of the site inadvertently causes people to avert their gaze because they don't care to look at what they interpret to be an ad.

Answer 10

I believe people stopped scanning Banner a while ago. They are either cosmetic or they are for ads.

You would have better chance by having a little warning icon and the message at the beginning of the section, or something in a similar fashion.

This way the user will start reading the content and notice icon + text.

TL;DR : People subsconsciously bypass banners

Answer 11

I'll be honest, I've looked at the D&DWiki homebrew pages countless times in the past, and this is the first time I've actually noticed that banner. I mean, I know I've seen it before, but it always registered as a banner ad, and not as part of the page itself, so I always ignored it.

Answer 12

Other people have touched on this, but: the very fact that the banner is aesthetically pleasing suggests that it's there to be aesthetically pleasing. A basic concept of design is that if you want to be clear that something is there to do X, then you should make it so it can only do X. If I look at a wall and see a rectangular patch that is an ugly shade of green, I'm likely to ask "What's that for", and notice that it's a door. If there's a rectangular patch that has a pretty cosmic image painted on it, it's probably going to take me longer to register that it's a door, and not just a painting. If people see something with no apparent purpose, then they're going to wonder what it's there for. Once a purpose can be assigned to something, people tend to not sit around wondering whether there's some other purpose they're missing.

The dramatic image also takes attention away from the text, and makes it harder to read if people do notice it. It would be more effective for the entire page to have a distinctive border and/or a different font.

Answer 13

Some of the answers here are too complex (it's the "experts addressing expert issues" phenomenon: where a bunch of top experts "don't even bother pointing out" the obvious problems!)

I'll humbly explain the

Two ridiculously obvious problems:

1. Type on an image is unreadable. This is one of the most basic points of graphic design. You have type on an image, so it is totally unreadable.

2. The type on the right has "border" all around it. This is totally unreadable. Again this is a very basic issue in graphic design.

It's honestly that simple.

Answer 14

People are excellent at ignoring what doesn't lead to their goals (in this case probably "wanting to read about D&D").

Does this banner/notice/hint look like it will get me to Snarky Silver Dragon's stats? Nope → ignore.

This happens subconsciously without people realizing it (we had eye tracking tests showing they glanced over the thing and people being totally unaware of the element when asked about it), so if you want to slightly improve (let's set up a realistic goal) percentage of people noticing the message, here are some ideas:

• slow people down - there can be overlay with an alert and a button they need to click ("Yes, I accept this page doesn't describe D&D canon.")
• slow them down even more (add a checkbox "I accept that" that needs to be checked before it's possible to hide the overlay)
• make it a part of the content so that it looks like a thing they are after (maybe put under the header) and make it look more similar to content ("Disclaimer: this page is a Homebrew and it doesn't describe a D&D canon.") - maybe same as paragraph text, but with some border and maybe an exclamation mark icon?
• put the information that this is a Homebrew somewhere where they are already slowing down and thinking - my idea is to do this on links. For example, canon links would be plain, but links to homebrew pages would all have " (Homebrew)" and maybe some icon added? And they could have a different color? And a "?" tooltip that would explain what is homebrew on mouseover?

Answer 15

I see a few possible causes for the homebrew banner getting ignored by some of the users of your website:

1. The purple part of the banner is outside of the reading flow of the website. In a columnar layout the second and third columns are naturally left to be read in the end. The purple part feels like a second column in the banner. The black part flows nicely to the site content. It feels part of the first text column, pushing the user to the content. When the user is going from the bottom of a column to the top of the next, he or she stops in the horizontal rule. The color differential of the banner and the warning text crossing over the gap between columns also act extra virtual horizontal rules. In short, the dark part of the banner lead directly to the content and the horizontal rules block the users to get back to the banner latter.

2. Contrast calls the user's attention. The biggest contrast is in the left of the banner and lead the user to start the columnar reading flow.

3. Too much text to get the meaning. People have to read the long explanation in the banner to understand what you mean. Maybe you do not need a banner, just a simple and smaller header text like "UNOFFICIAL CONTENT: this page was created by an user (...)". Small, direct, clear expressions in key positions have more chance to catch the user attention.

4. The warning on the banner contradicts what "Homebrew" means. This helps our subconscious to filter it out. Homebrew beverages are usually a special hand crafted product made by the owner of the house. The owner is the webmaster. So, it conveys the feeling that is a special content section from the webmaster. Therefore official. Exactly the opposite of what the warning states.

5. As others have stated, it looks like an ad banner and the color scheme does not match the website.

Answer 16

Beyond the technical and perceptive data analyzed in each of the answers, the page has a very serious drawback regarding color perception and it is precisely the color choice.

Each color has, in addition to its optical and psychological characteristics, a type of affectation to the perception that is quite difficult to avoid or counteract.

Regarding the colors of the web and taking them to the maximum purity from where they come, perceptually they are characterized by:

• Yellow = better color recall, little or no shape recall
• Purple = Better memory of shape, poor color memory

The intensity of yellow or any color within the same range never goes unnoticed and perceptually it has the ability to devour any other color and shape. While low tonal value colors like purple, brown, or blue tend to look like backgrounds.

Explained in another way, referring to the previous image, if we could see it in perspective, the result would be yellow placed ALWAYS on top:

There is no way to shine more than yellow, we can only contain its strength by using a neutralizing color like gray, but never shine more than it. Even using pure RGB colors, yellow always prevails:

In fact, in the color memory exercise, all of them tend to blend in, except for yellow:

In the case of the web example, the proportion doesn't help either. The light color similar to yellow occupies 90% of the page in a desktop window with maximum magnification, favoring the already null presence of the banner.

Solutions

Knowing this color combination complexity and that one element has to stand out above another, I would recommend experimenting with another contrast type, within the possible ones, for which it can be helpful to use basic shapes respecting the percentages

---

Some contrast examples (not final solutions)

Strengthen the current Color contrast:

Or use another type of contrast or combination within the possible depending on the element to represent the banner.

Style contrast

Texture contrast

Shape contrast

The timeline contrast (animation or video) would be the best option and always outstanding, but this depends on the technical possibilities of the web construction.