Community Website Design: Rules for The Banner
What do you notice about the following four communities?
Oracle Community |
NTEN Community |
IDERA Community |
Dropbox Community |
….they all have terrible banners.
Most community banners today are doing more harm than good. They’re static monstrosities filling far too much real-estate with bland messaging trying to appeal to every member segment.
A banner is not a game-changer for any community, but it is a useful tool to drive the kind of behavior you need, help with the signal to noise problem, and set the tone for a community.
But banners come at a big cost, they push activity off the page. They make it harder for members to see who or what is new in the community. The bigger the banner, the greater the cost. Your banner comes at the direct expense of activity.
The Big Problems With Most Banners
The problem with banners comes in 5 areas. These are:
1) The design. Many community banners have curiously bad design. This often includes an ugly palette of colors, text that doesn’t contrast well with the background, or bland photoshopped images.
2) The size. Most are far too big and take up far too much space. You generally don’t want to push activity below the fold.
3) The contents. No-one really cares much about being ‘welcomed’ to the community. Online communities have been around a while, most people know they can ‘connect’, ‘share’, and ‘learn’ from each other in one. What makes your community unique/different/surprising?
4) Static. The same message is often shown in the community regardless of whether members have already read it 10,000 times. It’s rarely updated with new information and members can’t get rid of it even if they wanted to.
5) Same banners appear to everybody. Far too often, the same banner is shown to every visitor regardless if they’re arriving for the very first time or visiting for the 10,000th time.
There are some exceptions to these challenges. A customer support community, for example, should have a question box right at the top for all visitors to easily ask questions. However, even this should be regularly adjusted and augmented.
The Design
Most organizations easily have the budget to do a better job with the design of their community banners and avoid most of the common mistakes. These tend to fall within 3 categories.
1) Not using brand colours. Sometimes you want the community to have a unique brand, but generally you want to keep the colors relatively on brand. Try to avoid using a full palette of primary colors here.
2) Stock images of people. Stock images of people don’t tend to work well in brand banners. Use either a generic image (like Fico) or avoid using images entirely. You don’t need an image for a banner to work well.
3) Contrast. Make sure the text contrasts well with the background. If it doesn’t, either change the color of the text/background or add a layer behind with a degree of opacity behind it. You can use any text if you had a layer behind it. We do this on FeverBee experts too.
Getting The Size Right
This should be easy. A banner should be as short as possible. It should take up 30% of the page at best, 50% at the very worst.
Any more than that, and you might want to consider removing copy. As we can see in the examples below, you can often move a few features around to reduce the size of the copy.
You might need more height than Alteryx, but you should be able to reduce the copy or contents of a banner until it fits to less than 50% of the page.
The Message And The Call To Action
This is by far the critical part of it. It’s inseparable from the message itself. What you don’t want is a bland “welcome to the community” banner which offers nothing.
The right messaging and call to action may include:
- Headline personifying what makes the community special (this is usually critical)
- Clear next steps to take.
- A search box (vital for customer support communities).
- Trending topics
- Most popular topics/questions
- Registration/login information.
- Videos/multimedia messaging.
- Community Statistics (although these can usually be avoided)
The messaging and calls to action you use should depend largely upon who the audience is trying to reach and what you want them to do.
This will depend upon the type of community you’re trying to build as well. Trending topics works well for fields where there are new, major, issues. Registration/login works well for visitors. Videos/multimedia messaging works well when there are major announcements that you can frequently update. Search boxes work well for customer support communities etc…
Static/Never Changing Banners
With few exceptions, a banner which is static and rarely changes is never a good sign. There are two good solutions to this.
1) Regularly update the banner with new, useful, information. This means with new content/activity that members need to see. This works well when you make frequent new announcements and there are new things to see.
2) Let members hide the banner. One common problem is members can’t get rid of the banner even if they wanted to. This doesn’t make much sense. If members have read/seen the message, you may want to let them hide it.
Both are reasonable options. You can also update the banner based upon a member’s previous contributions to the community.
Showing the same banner to everybody
It make no sense to show the same banner to your first-time visitors, your newly registered members and your top community members.
The most common solution to this is to create two separate banners for members who are logged in from those who aren’t. The former focuses on activity, the latter focuses on signing up.
An even better solution is to use conditional logic to guide members to the next action they should take based upon their previous contribution to the community.
We’ve been exploring this below in our community.
Summary
If you’re running a community, you probably should have a banner. The banner though has to drive real value.
It has to be well designed, not take up too much space, have a clear call(s) to action, allow members to hide it, and be updated frequently.
Don’t let the banner be an afterthought, it takes up the community’s most valuable real-estate.
Thanks for the shout out about the Zuora Community @richard_millington! We’re looking into a possible redesign this year so all of this info is super helpful.
So this is pretty fantastic, and I love what you guys have done with your Discourse theme. Any chance you’ll share a construct of the theme? =)
Hi Jeremy,
Probably not. Just a limit on our resources here.
I can help here. Which aspects do you mean?
The ‘homepage’ stuff was done by @JoeBuhlig so you could talk to him about that. The rest was done by me and I’m happy to share (obv not the exact code but the process for replicating).
Edit: Just realised that you’re talking about the custom banner stuff, which was done after my time so I prob can’t help after all. It’s easy enough to do something similar though. Start a topic on Meta if you want to talk it through.