Hoje vamos aprofundar no tópico das barras laterais dinâmicas e widgets (aqueles que são relevantes ao conteúdo); mais importante ainda, como eles podem ajudar a reduzir a taxa de rejeição do seu site e, por sua vez, melhorar suas chances de uma conversão.

Mostraremos a você como criar uma barra lateral, juntamente com widgets que mostram aos seus visitantes exatamente o que eles querem ver com base no tópico ou conteúdo da página ou post atual.

O que é taxa de rejeição (Bounce Rate)?

Antes de mostrar como reduzir a taxa de rejeição exibindo barras laterais e widgets relevantes ao conteúdo, vamos primeiro definir a taxa de rejeição (Bounce Rate) .

A taxa de rejeição se refere à porcentagem de visitantes do site que entram e saem em vez de ficar para explorar outras páginas em seu site. Para reduzir a taxa de rejeição, você precisa aumentar o envolvimento e isto lhe diz muito sobre a usabilidade do seu site. Quando um visitante acha seu conteúdo útil, ele fica e está disposto a explorar o site para obter conteúdo ainda mais útil. Isto, por sua vez, lhe dá uma taxa de conversão maior. Quanto mais tempo seus visitantes permanecerem em seu site, maior será a probabilidade de mais vendas, inscrições e receita publicitária.

É claro que você quer que eles permaneçam por mais tempo, portanto você deve ter algo que os impeça de sair muito cedo — conteúdo útil.

Usabilidade: A chave para reduzir a taxa de rejeição

Você não alcança a usabilidade do site apenas fornecendo conteúdo útil aos visitantes do seu site. Você também tem que otimizar as ferramentas que exibe em cada página de tal forma que elas interajam com eles. Além disso, essas ferramentas também devem ser relevantes ao conteúdo que está sendo usado em uma determinada página.

As ferramentas a que me refiro são a barra de navegação e todas as áreas ampliadas em uma determinada página, incluindo a barra lateral. Enquanto para muitos, a barra de navegação desempenha o maior papel para garantir o engajamento do usuário, você não pode tomar por garantido o poder de suas áreas widget. Isto é especialmente verdadeiro quando você está ciente das muitas maneiras diferentes que o WordPress oferece para que você possa facilmente assumir o controle delas.

A barra lateral é o principal suporte de lugar que pode fazer ou quebrar a usabilidade do seu site. Por quê? — Porque é conveniente simplesmente colocar os widgets que você gosta na barra lateral sem pensar se tais widgets são ou não relevantes para o conteúdo principal.

O que são barras laterais dinâmicas do WordPress (relevantes para o conteúdo)?

Uma barra lateral do WordPress que é relevante ao conteúdo principal refere-se a uma que exibe widgets cuidadosamente escolhidos para aparecer ao lado de conteúdo específico em uma determinada página em termos de sua aplicabilidade. Por exemplo, uma barra lateral relevante a uma publicação específica no blog conteria widgets tais como opt-ins para newsletter e publicações relacionadas.

As telas abaixo mostram a diferença entre a barra lateral no site MarketingProfs.com.

Página de podcast (Screenshot A)

Neste artigo do blog, MarketingProfs está mostrando os seguintes widgets: sugestões, links de assinatura e os artigos mais populares.

Barra lateral dinâmica (Screenshot A)
Barra lateral dinâmica (Screenshot A)

Página do artigo (Instantâneo B)

Neste artigo do blog, MarketingProfs está mostrando os seguintes widgets: opt-in de assinatura, widgets de mídia social, os artigos mais populares.

Barra lateral dinâmica (captura de tela B)
Barra lateral dinâmica (captura de tela B)

Como as barras laterais dinâmicas ajudam a reduzir a taxa de rejeição

As barras laterais ajudam os visitantes do site a decidir qual ação tomar em seguida. Por exemplo, a partir de uma página de postagem no blog, eles podem optar por se inscrever para a assinatura da newsletter. Se você tiver várias categorias para boletins informativos, você pode exibir um widget de assinatura para a categoria em que o post do blog pertence. Cada widget leva o nome da categoria específica, para que os leitores saibam exatamente a que estão se inscrevendo. Veja as imagens abaixo tiradas do The Washington Post.

As barras laterais relevantes para o conteúdo também ajudam na comercialização direcionada. Você pode criar uma barra lateral dedicada aos usuários do site que você agrupa com base em informações demográficas. Por exemplo, você pode fazer barras laterais para as versões em vários idiomas do seu site, exibir nelas links de contato dependendo do local, ou mostrar promoções de produtos com base em seus interesses. Ou você cria diferentes barras laterais com base na categoria do seus artigos no blog.

O Washington Post tem o “Must Reads” como uma de suas categorias para boletins informativos. O widget aparece neste artigo intitulado “Salmonella-tainted chicken killed 1, sickened 17 in a multi-state outbreak, diz o CDC” e todos os outros artigos pertencentes à mesma categoria.

Dispositivo dinâmico de barra lateral A
Dispositivo dinâmico de barra lateral A

Por outro lado, este artigo técnico, “Facebook e executivos do Twitter para testemunhar ao Congresso na próxima semana”, do The Washington Post, tem o widget “Alertas de notícias técnicas por e-mail” exibido na barra lateral, direcionado aos leitores de histórias relacionadas à tecnologia.

Dispositivo dinâmico de barra lateral A
Dispositivo dinâmico de barra lateral A

Barras laterais com widgets relevantes para o conteúdo também podem ajudar a melhorar a SEO. Usar as tags de cabeçalho inteiras ou uma parte delas como títulos de widgets pode criar um impacto pequeno mas significativo na otimização dos mecanismos de busca.

Adicionando Widgets Relevantes à Barra Lateral

O primeiro passo para criar barras laterais relevantes ao conteúdo é decidir o que é relevante e o que não é. Decidir quais widgets devem aparecer em uma página ou post requer um entendimento profundo do propósito e por que você criou aquela página ou post em primeiro lugar.

Por exemplo, você criou uma página de produto não apenas para explicar as características, benefícios e preços do produto. Você também o fez para levar os visitantes a comprá-lo ou a considerar produtos similares ou relacionados. Além disso, você pode querer exibir as melhores avaliações e as melhores críticas do produto que podem ajudá-los a decidir comprá-lo. Ou, você pode querer ajudá-los a se conectar a um representante de vendas para responder perguntas. Qualquer que seja a ação que eles tomem, a página deve mostrar-lhes o caminho para fazê-lo. A barra lateral é um dos melhores lugares para colocar aqueles botões de chamada para ação. Portanto, a barra lateral torna-se uma ferramenta muito poderosa para manter seus visitantes engajados em seu website.

Kinsta, por exemplo, usa diferentes CTAs em seu blog com base na categoria do post do blog. Isto ajuda a garantir que as mensagens sejam direcionadas e relevantes para o tópico do artigo.

CTA widget Sidebar
CTA widget Sidebar

Eliminação de Widgets não relacionados

Além disso, decidir o que não colocar na barra lateral é tão importante quanto decidir o que colocar ali. A densidade da barra lateral e outras áreas de widget na página contribui para sua aparência geral. A eliminação de widgets irrelevantes ou redundantes aborda a mesma questão com taxas de rejeição. Na verdade, alguns sites podem descobrir que nenhuma barra lateral é um caminho melhor.

Talvez você tenha jogado um monte de widgets em sua barra lateral porque acha que eles podem ser úteis para seus visitantes. Entretanto, uma página com aparência superlotada pode desligar um cliente em potencial. Se houver muita coisa acontecendo na página, os visitantes podem perder o foco sobre o que os fez vir em primeiro lugar. Com isto, quero dizer muitos widgets de anúncios externos ou muitos links de produtos.

Simplificando, decidir qual conteúdo da barra lateral é relevante ou não é crítico para aumentar o envolvimento do usuário.

Destacando Widgets Importantes

Depois de decidir o que colocar na barra lateral, você pode fazer com que certos widgets se destaquem dos demais. Uma maneira é fazê-los aparecer em outras áreas de widgets, tais como o rodapé. Outra maneira é fazê-los fixos e flutuando sobre a página enquanto os usuários rolam. Isto permite que os usuários interajam instantaneamente com eles sem ter que rolar para cima ou para baixo.

Próximo passo: Escolha os melhores métodos

Agora que já discutimos a importância de quais widgets você usa, o próximo passo é escolher um método para criar essas barras laterais relevantes ao conteúdo. Aqui estão duas maneiras:

Opção 1 – Visibilidade dos Widgets de Controle com um plugin WordPress

Uma das maneiras mais fáceis de controlar a visibilidade do widget em sua barra lateral é usando um plugin WordPress. Um plugin como o Widget Options permite fazer exatamente isso com alguns simples cliques. Você pode mostrar ou ocultar o conteúdo da barra lateral por postagem ou página com condições, incluindo categorias, tags, nomes de páginas, etc.

Widget Options WordPress pluginOpções de Widget Plugin WordPress
Opções de Widget Plugin WordPress

O plug-in Widget Options tem atualmente mais de 70.000 instalações ativas com uma impressionante classificação de 5 das 5 estrelas. Você pode baixá-lo do repositório WordPress ou procurar por “opções de widgets” dentro do seu painel de controle do WordPress em “Plugins → Adicionar novo”. Depois clique em “Instalar agora” e ative o plugin.

Instalar o plug-in Widget Options
Instalar o plug-in Widget Options

Ocultando Widgets de uma página específica

Uma vez que você tenha o plugin Widget Options instalado e ativado, você pode facilmente esconder um widget de uma página específica em apenas alguns cliques. Para ilustrar, aqui está a captura de tela de um widget de cupom. Sob as configurações do widget, há agora uma opção de visibilidade: você pode escolher entre esconder e mostrar este widget nas páginas selecionadas.

Widget Options' Hide/Show Widgets em Páginas Específicas
Widget Options’ Hide/Show Widgets em Páginas Específicas

Widgets restritivos de artigos específicos

Você também pode esconder widgets de postagens de blogs usando tags condicionais. Usando Opções de Widgets, este processo requer mais alguns passos do que simplesmente esconder-se das páginas. Você precisa primeiro localizara identificação do post, assim como deverá incluir nas tags condicionais onde você quer esconder o post.

Para encontrar o ID do correio, navegue até o correio e flutue (não clique) sobre a opção “Editar correio” em sua barra de ferramentas de administração do WordPress. Na parte inferior esquerda do seu navegador você deve ver o número de identificação do post.

WordPress find post ID
WordPress find post ID

Uma vez que você tenha a(s) identificação(ões) postal(is), você pode utilizá-la(s) com as seguintes etiquetas condicionais.

Esconder um Widget de múltiplos postes:

!is_single(array('Post ID', 'Post ID'))

Esconder um Widget de um único poste:

!is_single( 'Post ID' )

No widget que você quer que seja escondido do correio, vá para a aba “Logic” e insira a tag como mostrado abaixo.

Lógica do widget WordPress
Lógica do widget WordPress

Além disso, caso você precise usar um título de widget relevante para as etiquetas de cabeçalho de uma página ou postagem, você pode colocar tantas cópias desse widget quantas forem necessárias e fazer um título único para cada uma delas.

Ocultar Widgets nos Dispositivos Móveis

Você também pode restringir a visibilidade de widgets quando uma página ou postagem é visualizada em tipos de dispositivos específicos.

Devido ao tamanho limitado da tela, é fácil fazer com que uma página ou postagem pareça lotada quando vista de um dispositivo móvel, como um smartphone ou um tablet. Queremos ter certeza de que cada página não pareça muito densa tanto em uma visualização desktop quanto em um celular. Entretanto, também queremos aproveitar a tela maior da área de trabalho para exibir widgets relevantes no maior número possível de áreas de widgets.

Por exemplo, queremos que o e-mail opt-in apareça tanto na barra lateral quanto no rodapé da página. Quando visto no celular, por outro lado, queremos nos livrar de widgets repetitivos. As opções de widgets permitem esconder os widgets na visualização móvel.

Ocultar widget em dispositivos móveis
Ocultar widget em dispositivos móveis

Fazer Widgets de barras laterais fixas

Outra maneira de controlar a visibilidade dos widgets é torná-los fixos, o que significa que eles seguirão os usuários como o scroll para cima e para baixo em uma página ou post de blog. Se você mantiver sua barra lateral limpa, ou aplicar isto apenas a um ou dois widgets, não precisa se preocupar em tornar isto muito intrusivo. Veja a captura de tela abaixo. O WPMU Dev tem uma ótima aplicação disto em seu blog.

Os widgets de ações sociais estão flutuando sobre a página sem ofuscar o conteúdo principal e incentivam os visitantes a agir sempre que estiverem prontos para fazê-lo. Isto significa que eles não precisam voltar para a área da barra lateral para interagir com estes widgets.

Exemplo de um widget de barra lateral fixa
Exemplo de um widget de barra lateral fixa

Widget Options oferece uma opção onde você pode fazer qualquer widget fixo e seguir os visitantes enquanto eles rolam. Você pode escolher fazer todos os widgets de barra lateral fixos ou apenas escolher um ou dois que você acha que precisam de mais exposição do que os demais.

Dispositivo de barra lateral fixa
Dispositivo de barra lateral fixa

Opção 2 – Adicionar barras laterais personalizadas

Sua segunda opção seria criar manualmente barras laterais personalizadas através de codificação. Isto é um pouco mais tedioso do que usar um plugin de terceiros que lhe permite criar barras laterais em apenas alguns cliques. No entanto, como o WordPress oferece muitas opções de codificação, você pode optar por ele. Desta forma, você pode criar exatamente o que você quer.

Para começar, você precisa registrar uma área ampliada. Em seguida, salve-a e carregue-a em seu servidor para torná-la acessível a partir do menu widget. Para fazer isso, você precisará inserir o seguinte código no arquivo function.php do seu tema filho (Child Theme). Ou você pode usar um plugin gratuito como o Code Snippets.

Ele vem com alguns elementos que você pode mudar para atender às suas necessidades. Veja o exemplo a seguir:

<?php
/*
* Create Custom Widget Area for Pages Only
*/
function page_only_custom_sidebar() {
register_sidebar(
array (
'name' => __( 'For Pages Only', 'your-site' ),
'id' => 'page-only-custom-sidebar',
'description' => __( 'Contents to this widget area will be displayed on pages only.', 'your-site' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => "</section>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
)
);
}
add_action( 'widgets_init', 'page_only_custom_sidebar' );
?>

O próximo passo é tornar a barra lateral visível em algum lugar do site. Para que funcione, adicione-a ao(s) arquivo(s) modelo(s) dos locais que você deseja que sejam visíveis. Dê uma olhada no código abaixo que visa fazer com que a barra lateral apareça apenas nas páginas.

Para isso, o colocamos dentro do arquivo page.php de nosso tema. No caso do tema dos Vinte e Dezessete, isso significa que ficaria assim:

<?php if ( is_active_sidebar( 'page-only-custom-sidebar' ) && is_page() ) : ?>
<aside id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'page-only-custom-sidebar' ); ?>
</aside>
<?php endif; ?>

Sua vez: Como você reduz a taxa de rejeição?

O que eu mostrei aqui é apenas uma pequena fração de algumas maneiras de reduzir sua taxa de rejeição. As barras laterais, um dos lugares mais freqüentemente negligenciados nos websites, podem se tornar ferramentas poderosas para fazer com que os visitantes explorem seu website, aumentando assim a chance de conversões. Criar barras laterais relevantes ao conteúdo não tem que ser difícil, especialmente com todos os plugins fáceis de usar no repositório WordPress.

Além disso, como o compromisso é uma das principais formas de reduzir a taxa de rejeição, para alcançá-lo, é necessário verificar usabilidade do seu site.

Para alcançar a usabilidade, tenha em mente que o conteúdo é rei! Seus widgets, links ou barras laterais relevantes ao conteúdo devem guiar os usuários ao redor do seu site — levando-os a outros conteúdos que eles possam achar úteis. Ou, você poderia remover completamente suasbarras laterais para que seus usuários se concentrem em seu conteúdo… mas essa é outra abordagem!

Você já usou barras laterais dinâmicas do WordPress ou widgets em seu site? Em caso afirmativo, quais foram os resultados?

Jeffrey Carandang

Jeffrey creates and develops carefully cooked WordPress Plugins over at Phpbits. Just the right blend of creativity, user-friendliness, and functionality!