Barra de Anúncios: Aprenda a criar com 10 exemplos

Na época da escola, tinha um amigo que estudava junto comigo do qual me lembro bem.

Ele estava quase o tempo todo no telefone, então sempre que o professor cancelava a aula, era ele quem contava para o resto da classe.

Ele era um dos caras mais legais que eu conhecia na escola, de longe.

O motivo para isso é que ele ia lá e falava, "Galera, a aula foi cancelada". E era só por isso mesmo. Sem necessidade de interações, sem necessidade de uma resposta, sem apresentações chatas. Ele só mandava um "Galera…".

E pensando bem sobre isso, as barras de notificação me lembram um pouco aquele cara.

Elas estão ali, prontas para dar as informações que você precisa e sem necessidade nenhuma de interagir com elas.

Mas, caso minha metáfora não seja suficiente para explicar todo o conceito por trás das barras de anúncios, vamos dar uma olhada mais a fundo em alguns assuntos:

• O que é uma barra de anúncios
• Por que você deveria usar uma barra de anúncios
• O que incluir em uma barra de anúncios
• 10 ótimos exemplos de ótimas barras de anúncios
• Como você pode criar uma barra de anúncios sozinho

Vamos nessa?

O que é uma barra de anúncios em um site?

Uma barra de anúncios – também chamada de banner de anúncios ou barra de notificações – é um padrão de experiência do usuário que aparece com frequência no cabeçalho de um site, normalmente anunciando uma oferta, uma campanha, novos recursos, ou qualquer outra atualização com relação ao produto ou ao site. Elas podem ser pequenas, grandes, dispensáveis, ou não; tudo depende do design.

Agora, você deve estar pensando, “Ok, beleza. Mas por que eu iria querer uma barra de anúncios?”

Já vamos responder a essa pergunta.

Por que você deveria usar uma barra de anúncios no seu site?

A menos que seu site/app/ferramenta/produto tenha um status imutável, você sempre precisará notificar seus usuários e anunciar certas coisas. E qual o melhor jeito de fazer isso?

Você vai precisar ver o que se aplica ao seu caso.

Existem muitas maneiras de fazer isso do jeito certo. Como modais, tooltips e hotspots de boas-vindas. Mas existem certos motivos para escolher um banner ou uma barra de anúncios.

Entre esses motivos podemos mencionar:

Elas não interrompem a navegação

Uma barra de anúncios costuma ocupar cerca de 5% de uma página web, e a melhor parte é que os visitantes do site não precisam interagir com ela. Na maioria das vezes, eles nem se preocupam com ela lá.

Além disso, como nem todos os banners de anúncios e seu conteúdo são interessantes para todos os visitantes do site, o fato de não interromperem a navegação é sempre uma vantagem.

Elas chamam a atenção

O fato de as barras de anúncios não interromperem a navegação não significa que ela tenha que ser passiva em termos de seu design.

Uma boa barra de anúncios é projetada de tal maneira que combine com o esquema geral de cores do site ou do produto, mantendo-a relevante, porém, sutil ao mesmo tempo.

Além disso, como a maioria das barras de anúncios é colocada onde está o cabeçalho do site, os visitantes do site automaticamente olham primeiro para ela.

Os usuários não as ocultam

Não me entenda mal, a maioria das boas barras de anúncios são dispensáveis.

Mas elas não são dispensadas pelos usuários ou visitantes.

Isso significa que elas são tão bem projetadas e tão sutis que os usuários não sentem a necessidade de ocultá-las. E sem se darem conta, eles podem interagir com esse elemento por um período maior.

Não se cria frustração nos usuários e, ao fazer isso, é possível interagir mais com eles.

Todos saem ganhando.

Portanto, se você quiser uma opção sem interrupções, mas que ainda chame a atenção, uma barra de anúncios é provavelmente o que você está procurando.

Aposto que a próxima pergunta que está em sua cabeça é: "O que eu coloco num banner de anúncios?"

Certo, então vamos ver o tipo de conteúdo que você pode incluir em uma barra de anúncios no seu site.

O que incluir na barra de anúncios do seu site

Existem várias maneiras de utilizar a barra de anúncios do seu site. No fim das contas, seu uso vai depender da imaginação de cada um.

Ainda assim, existem formas muito comuns de utilizar barras de anúncios em sites.

Vamos dar uma olhada em algumas delas:

Anúncios de ofertas ou descontos

Provavelmente um dos casos mais comuns de uso de uma barra de anúncios é para apresentar descontos ou promoções.

Isso provavelmente acontece porque as empresas estão cientes de que anunciar um desconto ou promoção por e-mail pode acabar na pasta de spam, e qualquer outro padrão de UX pode ser irritante demais para os usuários.

Portanto, em vez dessas opções, podemos utilizar uma barra de anúncios que é algo que você pode ter certeza de que os usuários e visitantes do site verão, a menos que você a desenhe muito mal e a coloque no pior lugar possível. (você tem literalmente só duas opções!)

Anúncios de atualizações nos termos e condições

Uma atualização nos termos e condições é a notícia mais chata que você poderia receber em qualquer sitew. Sejamos sinceros, todos nós clicamos no botão "Concordo" sem ler.

Mas é claro, pode haver alguns entre nós que realmente sentem a necessidade de ler a atualização ou pelo menos de estar ciente de que os termos e condições mudaram. 

Pronto. A barra de anúncios é uma ótima opção para esse tipo de aviso.

É possivelmente a melhor maneira de informar seus usuários sobre uma notícia tão chata, porém importante. Então por que não usá-la?

Anúncios de novos recursos

Se você lançou recentemente uma nova funcionalidade e não precisa fazer o onboarding dos seus usuários imediatamente, uma barra de anúncios é uma ótima maneira de apresentá-la.

E por quê?

Bem, porque dessa forma você não frustra os seus usuários ao forçá-los a aprender sobre o novo recurso e ainda dá a impressão de que o seu produto está crescendo e melhorando a cada dia.

Além disso, você poderá usar a barra de anúncios como um elemento que irá direcionar os usuários para a página do recurso em vez de esperar que eles cheguem lá como parte de um onboarding contextual.

Anúncios de eventos especiais

O nome do evento, a data em negrito, alguns emojis divertidos e você garante que os seus usuários e visitantes tomarão conhecimento – e participarão – do seu evento.

Funciona mesmo que você use uma barra de anúncios minúscula, e esta é a magia desse recurso.

A verdade é que muitos sites por aí preferem usar um modal completo ou pelo menos uma notificação in-app de slideout para que os usuários e visitantes saibam de seus eventos.

Mas o que eles não percebem é que os usuários podem fechar o modal sem ler nada por estarem ansiosos para acessar logo o site. Enquanto isso, no caso de uma barra de anúncios, eles a veem, não se incomodam a ponto de fechá-la, logo acabam dando uma chance para ler o que está lá.

Comece 👏 a usar 👏 uma barra de anúncios 👏 agora mesmo 👏 

E é claro que a próxima pergunta é: "Como?"

Não se preocupe, eu tenho alguns exemplos perfeitos para você.

10 ótimos exemplos de barras de anúncios

A prática leva à perfeição.

Mas você não pode começar a praticar antes de ver alguns exemplos de boas práticas com seus próprios olhos.

Vamos dar uma olhada em alguns ótimos exemplos de barras de anúncios com diferentes casos de uso.

1- O banner de feriado da Apple chama a atenção

A Apple parece já ter superado a Black Friday e a Cyber Monday com seu banner temático de feriado que chama a atenção dos visitantes do site imediatamente.

Sua cor vermelha no design totalmente preto e branco do site da Apple faz a barra de anúncios se destacar, parecendo ser um aviso muito importante. 

Embora o conteúdo do banner não soe necessariamente como algo que deveria chamar a atenção de todos, na verdade ele impede que as pessoas passem pelo site sem fazer nada e aumenta as chances do visitante se tornar um comprador.

2- A Uber se importa com a sua segurança

Durante a pandemia, pegar um táxi ou um Uber fez com que todos nós nos ficássemos paranoicos. Não era apenas o motorista, era o fato de que outras pessoas já haviam estado no veículo antes.

E é exatamente por isso que a barra de anúncios da Uber é tão importante.

Eles estavam cientes de que as pessoas estariam verificando seu site na Internet à procura de qualquer coisa sobre uma medida de segurança. É por isso que eles escolheram usar um banner de anúncios, o colocaram na página principal e o deixaram bem grande.

Eles realmente entenderam o que tinha que ser feito.

3- A Nike adotou uma abordagem simples, porém dinâmica

O design minimalista do site da Nike é exatamente o que todo site de vendas precisa. 

E sua barra de anúncios combina bem com o tema do site.

A Nike usa uma barra de anúncios deslizante com diferentes anúncios que eles querem que os visitantes vejam, como suas opções de envio grátis, descontos e cupons.

É uma forma sutil e de anunciar pequenos detalhes que podem facilitar a vida dos compradores, e eles sabem que os visitantes poderão ver esses anúncios, já que o banner de anúncios é o único elemento dinâmico no site.

Um ótimo trabalho.

4- A Bershka redefine o conceito de barras de anúncios

Como no caso da Nike, todos nós estamos acostumados com os sites de varejo explicando suas condições de entrega em uma barra de notificações.

Acabamos de ver também barras de anúncios deslizantes.

Mas o que o design do site da Bershka faz é que ele coloca a barra embaixo e faz com que a mesma mensagem seja repetida. Parece familiar?

A referência são aquelas barras dos noticiários. Genial!

5- O ClickUp redireciona o visitante para o blog

O ClickUp tem boas notícias.

Eles receberam um investimento de $400 milhões e agora estão colaborando com outras empresas. Eles escrevem um post no blog sobre o assunto. Eles querem compartilhar as notícias com todo mundo, mas estão cientes de que alguns podem não se importar muito com isso.

Então, por que não uma barra de anúncios?

Simples assim. No fim das contas, é uma notícia muito legal e os números são respeitáveis. Mas os usuários atuais não vão mudar de repente só porque souberam de uma notícia desse tipo. Um modal ou um slideout são demais para isso.

Parabéns ao ClickUp por seu sucesso e sua visão de futuro.

6- O Slack anuncia novos recursos por meio de uma barra de anúncios

Não faz muito tempo que o Slack lançou novos recursos bem legais, como o Huddle, por exemplo.

E como uma forma de apresentar seus novos recursos, o Slack conta com uma barra de anúncios azul (no tom típico do Slack) em sua página principal que leva os visitantes do site para um post explicando esses recursos.

Embora isso possa não parecer uma forma muito estável de mostrar os recursos a um cliente em potencial, o que o Slack faz é levar os clientes a um lugar onde eles possam realmente entender o que esses recursos são capazes de fazer.

Além disso, não podemos esquecer o poder das palavras dos call-to-actions. Se alguém diz "Vamos nessa!", a tendência é que as pessoas sigam a mensagem. É por essas e outras que dizemos que o pessoal do Slack sabe o que está fazendo. 😎

7- A notificação in-app do Intercom para falar de suas melhorias

À primeira vista, a barra de anúncios do Intercom é muito parecida com a do Slack, mas vou provar para você que não é bem assim.

Em primeiro lugar, a barra de anúncios do Intercom é uma barra que usa uma cor bastante incomum, considerando o design da ferramenta.

Isso porque eles focam nos usuários atuais para mostrar suas últimas melhorias e fazem seu melhor para garantir que o banner seja notado por todos. O emoji e o estilo do texto também ajudam nessa missão.

O CTA também chama a atenção, e o link leva os usuários até uma página de atualização com apenas alguns detalhes para que os usuários não percam muito tempo.

8- A barra de anúncios divertida da Koan chama a atenção dos visitantes do site

De forma parecida com o ClickUp, a Koan também anuncia notícias importantes por meio de uma barra de anúncios muito legal.

Embora a barra se encaixe perfeitamente no esquema de cores do site, por conta da sua forma divertida, fica muito fácil identificar o que a mensagem que ela está querendo transmitir. Mais uma vez, as notícias podem não ser muito relevantes para todos os visitantes do site.

Portanto, usar uma barra de anúncios também foi a decisão certa para a Koan.

9- O Zapier anuncia uma oferta de final de ano com uma barra de anúncios

O anúncio minúsculo de uma oferta de final de ano do Zapier pode não parecer muita coisa, mas quando se trata de um anúncio de oferta, pode ter certeza que todo mundo o notará.

Também é importante ter em mente que o Zapier provavelmente usa outros métodos para anunciar sua oferta, mas ainda é uma ótima ideia anunciá-la com uma barra de anúncios. Afinal, se tivessem utilizado um modal ou tooltip, poderia parecer que eles estão forçando a barra.

10- A Podcast.co aproveita para dizer algo legal

Certo, agora preste atenção.

Todos nós gostamos de ver um bom banner de ofertas ou uma barra de anúncios com novos recursos. Mas uma coisa é certa:

Nós queremos ver algo agradável.

A Podcast.co usa uma barra de notificações não para vender algo ou para fazer os usuários conhecerem um recurso novo; eles simplesmente cumprimentam os usuários e desejam um feliz ano novo. Isso não é algo muito comum de se ver por aí.

Um brinde a vocês, Podcast.co! 🥂

Como criar uma barra de anúncios para o seu site em 3 passos

Já vimos o que é uma barra de anúncios na teoria e na prática. Chegou a hora de colocar uma dessas no seu site.

"Mas espera aí, eu preciso saber programar?"

E a resposta é: claro que não!

A solução de onboarding de usuários no-code da UserGuiding é tudo o que você precisa e ainda é uma das soluções mais fáceis de usar do mercado. (Quer experimentar?)

Vou guiá-lo com três passos simples.

1- Crie um Guia na UserGuiding

Para começar, acesse o Painel da UserGuiding e clique em Guides.

Na página de Guias, clique no botão "+ New Guide".

No modal que apareceu, dê um nome ao seu guia, digite a URL em que você gostaria de inserir a barra de anúncios e defina um tema se você quiser usar um tema específico.

Por fim, clique em "Start".

2- Escolha um modal e personalize-o

Após concluir as configurações no painel, você será direcionado para a URL na qual deseja usar a barra de anúncios.

Lá, você poderá visualizar os templates de modais que pode usar na barra lateral da UserGuiding.

Entre os modais que podemos usar para nossa barra de anúncios estão um banner de campanha, um banner de upsell, um banner de inscrição em um webinar e um banner de anúncios.

Após escolher um modal para a barra de notificações, é hora de personalizá-la.

Você pode escolher onde ela ficará, se haverá uma sombra de fundo, quando o banner aparecerá, e muito mais.

Após salvar o seu progresso, você pode visualizar seu banner facilmente a qualquer momento.

3- Salve e pronto!

Após concluir o projeto e as configurações da barra de anúncios, volte ao Painel da UserGuiding para salvar e ativar o nosso banner.

Encontre o seu guia nas listas de guias criados; você verá um botão indicando que o banner ainda não está ativo.

Para colocar o banner no ar, vamos para as configurações.

Ao clicar no botão "Active", ativamos o banner. Para mais configurações e personalização, use as opções abaixo.

Após clicar no botão "Save", suas configurações serão definidas.

Para colocar o banner no seu site, basta clicar no botão "Publish changes".

E está tudo pronto!

👉 Inicie o seu teste grátis AGORA 👈

Conclusão

Uma barra de anúncios em um site é um recurso muito útil para diversas ocasiões.

Com os exemplos de barras de anúncios e um guia simples de como criar uma para o seu site, você poderá criar suas próprias barras de notificações facilmente.

Não perca tempo, mantenha os visitantes do seu site sempre bem informados!