Iyfjky

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?

enter image description here

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.

Not an answer, just suggestion - use slightly different color schema for homebrew pages. — Aug 27 at 10:28
Just some food for thought; if the banner is so big and clear then why did you think it was necessary to circle it for us? It is the only banner on the page after all... — Aug 27 at 12:24
On first glance, I thought it was an ad. Ads are frequently jarringly colored and I think we're trained to just look past them. Also, the 'warning' about being homebrew isn't prominently featured in the body. I'd suggest you look at the wiki for Star Trek and Star Wars, both of which feature alerts for canon and non-canon pages (memory alpha/beta in the first case, and regular/legends in the latter). — Aug 27 at 14:27
@user2979044 On behalf of many people I've gamed with, thank you so much for making this effort. The fix that you really need is quite simple: PUT "HOMEBREW" IN THE PAGE TITLES, so that it's immediately obvious in search results. — Aug 27 at 14:38
Thank you so much for asking this question. I was actually one of the users that never noticed the banner and when I finally did I thought "Man, they shouldn't have the banner look just like an ad for a videogame or something, they should change that." — Aug 27 at 17:35

Mayo 5,37052433 · Accepted Answer · 2018-08-29 20:41:45Z

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.

Totally agree. In any case, I would recommend placing the alert or banner underneath the page title: that's where the content goes, and where the reader will jump to instinctively. — Aug 27 at 12:02
Spot on I think, even after reading the question my head still filters it out... — Aug 27 at 13:03
Another thing that could help is changing the shape of the banner entirely - the image is blocked on this computer, but anything that is a long rectangle shape (like the ad below these comments) will be assumed to be an ad - if instead you make it a perfect circle, people will stop thinking of it as a banner entirely. — Aug 27 at 19:31
I'll just emphasise the "subconsciously" in this answer. Users aren't even choosing not to look at it. It has to all intents vanished. It's a general psychological process called "Inattentional Blindness" . — Aug 28 at 16:05
I guess I totally spoiled myself by effectively blocking all web ads for so many years. I never evolved this mechanism. Freaky deaky, but makes sense. — Aug 29 at 19:38

Rob E 3,8661438 · Answer 2 · 2018-08-27 11:47:12Z

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.

@John Is there an XKCD about there being an XKCD for everything? — Aug 29 at 21:27
BTW, I really hate sites disguising ads as fake comments from users. That's about the only kind of ads I get to read. — Aug 31 at 6:43

moot 1,960169 · Answer 3 · 2018-08-27 14:48:27Z

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:

enter image description here

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

enter image description here

The example you gave is exactly what I'd want to see on the site as a user. — Aug 27 at 17:37
It's better but I'd still miss it because my eyes start reading at "Main Page". I tend to ignore anything above because it's presumed to be part of the site stye. It's doesn't feel like part of this specific page. — Aug 27 at 23:30
Solving a problem by not trying to solve it is the fine art of web design. — Aug 28 at 15:30
This is really good, but I'd drop the word "PAGE" that isn't adding anything and have it just say "HOMEBREW" to focus on the detail that matters. — Aug 28 at 16:01
Honestly this banner shouldn't be on the homepage in the first place. The page has no content of its own, and its defining feature is that it links to both homebrew and official content. — Aug 29 at 3:19

score 54 · Answer 4 · 2018-08-27 13:31:07Z

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.

While the Wikipedia banners are not quite as ad-like as the example in the question, they're still sufficiently banner-like that most users will probably not read their contents -- especially if they're used to seeing similar banners on Wikipedia. At best, you'll probably manage to communicate that "somebody thinks there's some issue with this page." That said, I'll give you a +1 for the other suggestions, which I think are solid. — Aug 27 at 23:34
@user2979044 This "two wikis" suggestion raises an interesting question for me: what is the primary purpose of D&D Wiki? Your tagline ("Home of user-generated, homebrew pages!") suggests that the homebrew stuff is the main attraction rather than an out-of-control sideshow, in which case you should just rename the site "D&D Homebrew Wiki" and have dandwiki.com redirect to dandhomebrewwiki.com. (Also, shouldn't it be "www.danddwiki.com"?) — Aug 29 at 3:13
We host both SRD and homebrew, that is our primary purpose~ I do appreciate the suggestions, but changing namespaces and splitting wikis is kinda technically implausible and unwanted for a variety of confusing reasons at the moment. Very much appreciate it, and you raise some good points, thank you! — Aug 29 at 18:44

Tanner Swett 1136 · Answer 5 · 2018-08-27 17:51:41Z

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.

Another difference from the Wikipedia example: the D&D Wiki banner appears on the homepage. So the user registers it as "normal part of the website, safe to ignore" instead of "hey, this is different". — Aug 29 at 2:38
By the way, research suggests that those warnings on Wikipedia pages do make a difference: mediawiki.org/wiki/Reading/Web/Projects/Mobile_Page_Issues/â€¦ — Aug 29 at 12:00
It also helps that Wikipedia doesn't have ads, so users consciously know that the banners aren't ads. — Aug 29 at 19:06

score 14 · Answer 6 · 2018-09-05 07:51:35Z

enter image description here

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.

PixelSnader 7,4301434 · Answer 7 · 2018-08-27 10:53:50Z

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.

enter image description here

I appreciate that you included examples of both pages in your answer. — Aug 27 at 15:16
Perhaps if the font/colorscheme was purple instead of a purple banner it would be more clear. Honestly I had to do a doubletake between the two screen shots to see the difference. — Aug 27 at 15:43

Peter Taylor 1612 · Answer 8 · 2018-08-27 14:05:16Z

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.

Oddly there seem to be three designs: with homebrew banner, with non-homebrew banner, and with no banner at all. You have stumbled onto the third one. Here is an example of a non-homebrew banner: dandwiki.com/wiki/UA:Variant_Rules — Aug 29 at 2:34
3e SRD is a new official namespace that's a work-in-progress, so you just stumbled an unfortunate, temporary direction that will be rectified soon~ — Aug 29 at 20:19
I'll copy on Peter's suggestion - Try to create more significant change in the overall look. Let the official pages be brown-orange tinted and the homebrew purple tinted. All page background, text beckground and text matching each colour scheme. — Sep 5 at 15:23

Fluffy Gryphon 611 · Answer 9 · 2018-08-28 13:45:38Z

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.

Love your first point. For comparison, I might bring in scp-wiki.net. Like the D&D Wiki, it emphasizes original user-created content, and it is a wiki under the hood. But you'll note that it avoids using the word "wiki" in its logo. Then again, I have to wonder if inherent to the software; any site that uses the MediaWiki software is going to remind people of Wikipedia, for better or for worse... — Aug 29 at 6:03
Your first point is an unfortunately common misconception probably caused by Wikipedia. Though this idea might still be part of the miscommunication as you say, a wiki is exactly a place for user-generated content (while an encyclopedia is not). — 2 days ago

Leths 1,4941715 · Answer 10 · 2018-08-27 09:10:08Z

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

MalignantMind 391 · Answer 11 · 2018-08-28 06:33:47Z

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.

While this is definitely a relevant comment, it's not exactly answering the question itself! It may be better moved to the comment section on the actual question, or ideally expanded into a full answer. — Aug 28 at 14:31

Mayo 5,37052433 · Answer 12 · 2018-08-29 20:43:29Z

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

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.

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

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 "UNOFICIAL CONTENT: this page was created by an user (...)". Small, direct, clear expressions in key positions have more chance to catch the user attention.

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.

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

On point 4, your description suggests (and I may be misinterpreting here) that you might not be familiar with how the word "homebrew" is used in the tabletop gaming community. It is a widely used piece of jargon even outside this specific website, and means "not an official company release". Though I feel your description gets at the deeper problem: as far as I can tell, the "special hand crafted product" is the website's main attraction, and yet the design seems to treat homebrew as a deviation from the norm, warding us away from it. — Aug 29 at 3:38

Fattie 773517 · Answer 13 · 2018-08-31 14:37:33Z

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:

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.

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.

TomÃ¡Ã…Â¡ Kafka 28516 · Answer 14 · 2018-09-03 14:35:05Z

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?

Acccumulation 1512 · Answer 15 · 2018-09-04 18:18:49Z

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.

Mayo 5,37052433 · Accepted Answer · 2018-08-29 20:41:45Z

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.

Totally agree. In any case, I would recommend placing the alert or banner underneath the page title: that's where the content goes, and where the reader will jump to instinctively. — Aug 27 at 12:02
Spot on I think, even after reading the question my head still filters it out... — Aug 27 at 13:03
Another thing that could help is changing the shape of the banner entirely - the image is blocked on this computer, but anything that is a long rectangle shape (like the ad below these comments) will be assumed to be an ad - if instead you make it a perfect circle, people will stop thinking of it as a banner entirely. — Aug 27 at 19:31
I'll just emphasise the "subconsciously" in this answer. Users aren't even choosing not to look at it. It has to all intents vanished. It's a general psychological process called "Inattentional Blindness" . — Aug 28 at 16:05
I guess I totally spoiled myself by effectively blocking all web ads for so many years. I never evolved this mechanism. Freaky deaky, but makes sense. — Aug 29 at 19:38

Rob E 3,8661438 · Answer 17 · 2018-08-27 11:47:12Z

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.

@John Is there an XKCD about there being an XKCD for everything? — Aug 29 at 21:27
BTW, I really hate sites disguising ads as fake comments from users. That's about the only kind of ads I get to read. — Aug 31 at 6:43

moot 1,960169 · Answer 18 · 2018-08-27 14:48:27Z

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:

enter image description here

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

enter image description here

The example you gave is exactly what I'd want to see on the site as a user. — Aug 27 at 17:37
It's better but I'd still miss it because my eyes start reading at "Main Page". I tend to ignore anything above because it's presumed to be part of the site stye. It's doesn't feel like part of this specific page. — Aug 27 at 23:30
Solving a problem by not trying to solve it is the fine art of web design. — Aug 28 at 15:30
This is really good, but I'd drop the word "PAGE" that isn't adding anything and have it just say "HOMEBREW" to focus on the detail that matters. — Aug 28 at 16:01
Honestly this banner shouldn't be on the homepage in the first place. The page has no content of its own, and its defining feature is that it links to both homebrew and official content. — Aug 29 at 3:19

score 54 · Answer 19 · 2018-08-27 13:31:07Z

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.

While the Wikipedia banners are not quite as ad-like as the example in the question, they're still sufficiently banner-like that most users will probably not read their contents -- especially if they're used to seeing similar banners on Wikipedia. At best, you'll probably manage to communicate that "somebody thinks there's some issue with this page." That said, I'll give you a +1 for the other suggestions, which I think are solid. — Aug 27 at 23:34
@user2979044 This "two wikis" suggestion raises an interesting question for me: what is the primary purpose of D&D Wiki? Your tagline ("Home of user-generated, homebrew pages!") suggests that the homebrew stuff is the main attraction rather than an out-of-control sideshow, in which case you should just rename the site "D&D Homebrew Wiki" and have dandwiki.com redirect to dandhomebrewwiki.com. (Also, shouldn't it be "www.danddwiki.com"?) — Aug 29 at 3:13
We host both SRD and homebrew, that is our primary purpose~ I do appreciate the suggestions, but changing namespaces and splitting wikis is kinda technically implausible and unwanted for a variety of confusing reasons at the moment. Very much appreciate it, and you raise some good points, thank you! — Aug 29 at 18:44

Tanner Swett 1136 · Answer 20 · 2018-08-27 17:51:41Z

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.

Another difference from the Wikipedia example: the D&D Wiki banner appears on the homepage. So the user registers it as "normal part of the website, safe to ignore" instead of "hey, this is different". — Aug 29 at 2:38
By the way, research suggests that those warnings on Wikipedia pages do make a difference: mediawiki.org/wiki/Reading/Web/Projects/Mobile_Page_Issues/â€¦ — Aug 29 at 12:00
It also helps that Wikipedia doesn't have ads, so users consciously know that the banners aren't ads. — Aug 29 at 19:06

score 14 · Answer 21 · 2018-09-05 07:51:35Z

enter image description here

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.

PixelSnader 7,4301434 · Answer 22 · 2018-08-27 10:53:50Z

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.

enter image description here

I appreciate that you included examples of both pages in your answer. — Aug 27 at 15:16
Perhaps if the font/colorscheme was purple instead of a purple banner it would be more clear. Honestly I had to do a doubletake between the two screen shots to see the difference. — Aug 27 at 15:43

Peter Taylor 1612 · Answer 23 · 2018-08-27 14:05:16Z

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.

Oddly there seem to be three designs: with homebrew banner, with non-homebrew banner, and with no banner at all. You have stumbled onto the third one. Here is an example of a non-homebrew banner: dandwiki.com/wiki/UA:Variant_Rules — Aug 29 at 2:34
3e SRD is a new official namespace that's a work-in-progress, so you just stumbled an unfortunate, temporary direction that will be rectified soon~ — Aug 29 at 20:19
I'll copy on Peter's suggestion - Try to create more significant change in the overall look. Let the official pages be brown-orange tinted and the homebrew purple tinted. All page background, text beckground and text matching each colour scheme. — Sep 5 at 15:23

Fluffy Gryphon 611 · Answer 24 · 2018-08-28 13:45:38Z

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.

Love your first point. For comparison, I might bring in scp-wiki.net. Like the D&D Wiki, it emphasizes original user-created content, and it is a wiki under the hood. But you'll note that it avoids using the word "wiki" in its logo. Then again, I have to wonder if inherent to the software; any site that uses the MediaWiki software is going to remind people of Wikipedia, for better or for worse... — Aug 29 at 6:03
Your first point is an unfortunately common misconception probably caused by Wikipedia. Though this idea might still be part of the miscommunication as you say, a wiki is exactly a place for user-generated content (while an encyclopedia is not). — 2 days ago

Leths 1,4941715 · Answer 25 · 2018-08-27 09:10:08Z

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

MalignantMind 391 · Answer 26 · 2018-08-28 06:33:47Z

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.

While this is definitely a relevant comment, it's not exactly answering the question itself! It may be better moved to the comment section on the actual question, or ideally expanded into a full answer. — Aug 28 at 14:31

Mayo 5,37052433 · Answer 27 · 2018-08-29 20:43:29Z

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

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.

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

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 "UNOFICIAL CONTENT: this page was created by an user (...)". Small, direct, clear expressions in key positions have more chance to catch the user attention.

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.

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

On point 4, your description suggests (and I may be misinterpreting here) that you might not be familiar with how the word "homebrew" is used in the tabletop gaming community. It is a widely used piece of jargon even outside this specific website, and means "not an official company release". Though I feel your description gets at the deeper problem: as far as I can tell, the "special hand crafted product" is the website's main attraction, and yet the design seems to treat homebrew as a deviation from the norm, warding us away from it. — Aug 29 at 3:38

Fattie 773517 · Answer 28 · 2018-08-31 14:37:33Z

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:

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.

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.

TomÃ¡Ã…Â¡ Kafka 28516 · Answer 29 · 2018-09-03 14:35:05Z

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?

Acccumulation 1512 · Answer 30 · 2018-09-04 18:18:49Z

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.

Search This Blog

Iyfjky

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

15 Answers
15

Two ridiculously obvious problems:

protected by Communityâ™¦ Aug 28 at 13:45

15 Answers
15

15 Answers
15

Two ridiculously obvious problems:

Two ridiculously obvious problems:

Two ridiculously obvious problems:

Two ridiculously obvious problems:

protected by Communityâ™¦ Aug 28 at 13:45

Comments

Post a Comment

Popular posts from this blog

What does second last employer means? [closed]

List of Gilmore Girls characters

Confectionery

Category

Random preview

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

15 Answers 15

Two ridiculously obvious problems:

protected by Communityâ™¦ Aug 28 at 13:45

15 Answers 15

15 Answers 15

Two ridiculously obvious problems:

Two ridiculously obvious problems:

Two ridiculously obvious problems:

Two ridiculously obvious problems:

protected by Communityâ™¦ Aug 28 at 13:45

Comments

Post a Comment

Popular posts from this blog

What does second last employer means? [closed]

List of Gilmore Girls characters

Confectionery

15 Answers
15

15 Answers
15

15 Answers
15