How to Create a Website Notification Bar + 10 Great Examples

Back in school, I had this friend who took some of the classes I took.

He was mostly on his phone so whenever the professor canceled he was the one to tell the class.

He was one of the coolest guys I knew at school, by far.

The reason why is, he would go, “yo, class canceled”, and that was it. No need for interactions, no need for a response, no annoying intro. Just “yo.”

Now that I think it over, notification bars remind me of that one guy.

They are just there, ready to give you the info you need and there is no need for you to interact with them.

But hey, in case my metaphor is not enough to explain the whole concept of notification bars, let’s dive a little deeper into:

• What a notification bar is,
• Why you should use a notification bar,
• What to put on a notification bar,
• 10 great examples of a great notification bar, and
• How you can create a notification bar yourself

Let’s go.

What is a Notification Bar on a website?

A notification bar, (aka notification banner aka announcement bar) is a user experience pattern that often appears on the header part of a website, usually used to announce a sale, a campaign, new features, or any other update concerning the product or website. They can be small, big, dismissable, or not; all depending on the design.

Now you are thinking, “Okay, cool. But why would I want a notification banner?”

Let’s answer that.

Why should you use a Notification Banner on your website?

Unless your website/app/tool/product is caught up in an unchanging status, you will always need to notify your users and announce things. Then what you do?

Figure out how to do it right.

Well, there are many ways of doing it right. Like welcome modals, tooltips, and hotspots. But there are certain reasons to go with a notification banner.

Among these reasons are:

They are non-disruptive

A notification banner often takes up about 5% of a webpage, and the best part is, website visitors don’t have to interact with it. Mostly they aren’t even bothered by it.

Moreover, since not every notification banner and its content is interesting for every website visitor or user, being non-disruptive is always a plus.

They are eye-catching

A notification bar being non-disruptive doesn’t mean it has to be passive in terms of design.

A good notification bar is designed in a certain way that will make it pop in the general color scheme of the website or the product while also keeping it subtle.

Plus, since most notification bars are placed where the header of the website is, website visitors or users automatically see the announcement first.

They are not dismissed

Don’t get me wrong, most good notification bars are dismissable.

But they are not dismissed by the users or visitors.

That means they are so well designed and so non-disruptive that the visitors or the users don’t feel the need to dismiss them. And without realizing it, they get to engage with them for a prolonged period of time.

You don’t create user frustration and by doing so, you get to engage with them more.

Total win-win.

So, if you want to go with a non-disruptive but still attention-drawing option, a notification banner is probably what you are looking for.

I bet the next question hovering in your head is “what do I put in an announcement bar?”

So, let’s now look at the type of content you can put in a website announcement bar.

What to put in your Website Announcement Bar

There are so many ways of utilizing a website announcement bar and at the end of the day, it is really up to one’s imagination.

But still, there are also very common ways website announcement bars are used.

Let’s take a look at some of them.

Discount or sale announcements

Probably one of the most common use cases of an announcement bar is discount or sale announcements.

This is probably because companies and businesses are aware that announcing a discount or sale through email might end up in the junk folder, and any other UX pattern can be too annoying for users.

So instead, they utilize an announcement bar which is something you can be sure that users and website visitors will see unless you design it really bad and place it in the worst place possible. (you literally have two options!)

Terms and conditions update announcements

A terms and conditions update is the most boring news you could get on any website. We all have been clicking on the “I agree” button without reading for years, let’s be honest there.

But of course, there might be some among us that actually feel the need to read the update OR at least be aware that the terms and conditions have changed. 

Boom. Announcement bar and you’re good to go.

It’s possibly the best ever way of informing your users of such a boring yet important piece of news, so why not use it?

New feature announcements

If you have recently introduced a new feature and you don’t necessarily have to have your users get onboarded right away, an announcement bar is a great way of introducing it.

Wonder why?

This way, you won’t frustrate your users by forcing them into learning the new feature and still give the impression that you are growing and improving as a product every day.

Moreover, you will be able to use the announcement bar as an element that will direct users to the feature page instead of waiting for them to get there as part of a contextual onboarding.

Special event announcements

Name of the event, the date in bold, some fun emojis and you have guaranteed that your users and visitors will take notice of your event. (and attend too!)

Even when you use the tiniest announcement bar, and that is the magic of announcement bars.

Truth is, lots of websites out there prefer to use a whole modal or at least a slideout in-app notification to let users and visitors know about their events.

But what they don’t realize is that users might close the modal without reading it out of annoyance. Meanwhile, in the case of an announcement bar, they see it, aren’t exactly annoyed so they don’t close it and end up engaging with it more.

Start 👏 using 👏 an announcement bar 👏 already 👏 

And of course, the next question is, “how?”

Don’t worry, I have some perfect examples for you.

10 Examples of Great Notification Bars

Practice makes perfect.

But you can’t start practicing before you see some good practices yourself.

Let’s take a look at some great examples of notification/announcement bars with different use cases.

1- Apple’s holiday banner catches the eye

Apple seems to be already over Black Friday and Cyber Monday with its holiday-themed banner that instantly catches the eye of website visitors.

The red color on the normally fully black and white design of Apple’s website pops up the notification bar and makes whatever the content is look very important and noteworthy. 

Although the content of the banner doesn’t necessarily sound like something that really should catch everyone’s attention, it actually prevents people from going through the website idly and raises the chances of the visitor becoming a buyer.

2- Uber cartes about your safety

During the pandemic, taking a cab or an Uber had all of us freaking out. It wasn’t just the driver, it was the fact that other people had been in the vehicle before.

And that’s exactly why Uber’s notification banner matters so much.

Uber was aware that people would be checking their website looking for anything about a safety measure. That’s why they chose to use a notification banner AND put it on the main page AND make it extra large.

They really did understand the assignment.

3- Nike keeps it simple but dynamic

Nike’s minimalistic website design is just what every retail website needs. 

And their notification bar goes with the theme too.

Nike uses a sliding notification bar with different announcements that they want websites visitors to keep in mind, like their free shipping options, discounts, and coupon benefits.

It’s a subtle and non-distractive way of announcing the tiny details that can make a shoppers day easier, and they know the visitors will be able to see it since the bar s the only thing dynamic on the website.

A job well done.

4- Bershka redefines notification bar

Like in Nike’s case, we are all used to retail websites notifying their delivery conditions on a notification bar.

We have also just seen sliding notification bars.

But what Bershka’s website design does is that it puts the bar below and keeps the same message over and over again. Remind you of something?

A news ticker. Absolutely genius.

5- ClickUp redirects to the blog

ClickUp has some good news.

They have raised $400 Million in their Series C and are now collaborating with other companies. They write a blog post about it. They want to share the news with everyone. But they are aware that some might not care.

They go with an announcement bar.

Simple as that. At the end of the day, it is exciting news, and those are big numbers. But existing users’ won’t change suddenly just because they heard the news. A modal or a slideout is too much.

Good job to ClickUp for their success and their foresight.

6- Slack announces new features through a notification bar

Not too long ago, Slack launched pretty cool new features, like Huddle for example.

And as a form of feature showcasing, Slack features a Slack-blue notification bar on their main page that takes website visitors to a blog post explaining the features.

Although this might not look like a super stable way of showing features to a potential customer, what Slack does is get the customers to somewhere they can truly understand what these features are capable of by reading.

Also, let’s not forget the power of call-to-action words. If someone says “let’s go”, I simply follow. So you know Slack knows what they are doing 😎

7- Intercom’s in-app notification for enhancements pops up

Intercom’s notification bar looks quite similar to Slack’s at first sight, but let me prove you wrong.

First of all, Intercom’s notification bar is an in-app one that uses a very unusual color considering their tool design.

This is because they are directly targeting their existing users to show their latest enhancements and they are trying their very best to make sure the banner is noticed. The emoji and the text styling also helps.

The CTA is also very engaging, and the link takes the users to an update page with few details so that the users don’t waste much time.

8- Koan’s fun-size notification bar draws the attention of web visitors

Very similar to how ClickUp was sharing big news with its website visitors, Koan also announces big news through a cool notification bar.

Although the bar fits the website design color scheme justright, because of its fun shape it is easy enough to catch a glimpse of what it says. Again, it might not be very interesting news for every website visitor.

So using a notification bar was the right call for Koan too.

9- Zapier announces year-end sale with a notification bar

Zapier’s teeny tiny year-end sale announcement banner might not look like much, but when it’s a sale announcement, you know everyone will see it.

It is also important to keep in mind that Zapier most probably uses other methods of announcing its sale, yet it is still a great idea to announce it with a notification bar since otherwise with a modal or a tooltip it might come off as sales-y.

10- Podcast.co takes the chance to say something nice

Now folks listen up.

We all love to see a good sales banner or a new feature announcement bar. But the one thing we always want to see is…

Something nice.

Podcast.co takes a chance to use a notification bar not to sell something or make users check something out. They greet and wish their users a happy new year. That’s something you can’t find everywhere.

Cheers to you Podcast.co 🥂

How to Create a Website Notification Banner in X Steps

We have seen what a notification banner is, meaning and practice. Now it is time to put it into practice.

"Wait a second, do I need to code?" I hear you ask, and the answer is: absolutely not.

UserGuiding' no-code user onboarding solution is all you need and as a matter of fact, it is one of the easiest solutions out there. (Wanna give it a try?)

Let me walk you through it in 3 steps.

1- Create a Guide on UserGuiding

Start by going to the UserGuiding Management Dashboard and click on Guides.

After being directed to the Guides page, click on the "New Guide" button.

On the menu that appears once you have clicked the button, give your guide a name, type in the Url you would like to use the announcement banner on, and finally, set a theme if you want a specific one.

Then click "start".

2- Pick a Modal & Customize

Once you are done with the settings on the dashboard, you will be directed to the URL you want to use the announcement banner on.

There, you can view the modal templates you can use on the UserGuiding sidebar.

Among the modals we can use for our notification bar are a campaign banner, an upsell banner, a webinar registration banner, and an announcement banner.

After choosing a notification bar modal, it is time to customize it.

You can choose where it will be located, whether there will be a background shadow, when the banner will appear, and more.

After saving your progress, you can preview your banner easily.

3- Save It & Go

After we are done with the design and settings of the notification bar, we can go back to the UserGuiding Management Dashboard to save and activate our banner.

Go to your guide on the lists of guides you've created where you will see a button indicating the banner is not yet active.

To get the banner live, we will go to settings.

By simply clicking on the "active" button, we can activate the banner. For more settings and customization, use the options below.

Once you have clicked the "save" button, your settings are set.

To actually put the banner on your website, all you need to do is click on the "Publish changes" button.

And you are good to go!

👉 Start your free trial NOW 👈

Conclusion

A notification bar is a handy tool for so many occasions.

Having seen examples of it and an easy guide to how they are created, hopefully, you will be able to create your own notification bars as well.

Go inform those website visitors!