Em muitas situações, apresentar dados em um formato atraente e fácil de digerir pode oferecer muitos benefícios. Os widgets gráficos para WordPress permitem que você transforme números brutos e estatísticas em uma exibição visual e informativa atraente. Na maioria das vezes, isso vem na forma de um plugin, que permite que você trabalhe com esses dados no WordPress.
Neste artigo exploraremos os widgets gráficos para WordPress, incluindo diferentes tipos que você pode usar, situações em que você os usaria e muito mais. Na segunda parte do artigo, reuniremos alguns plugins que podem ajudar você a implementar widgets gráficos e, em seguida, mostraremos como usar um deles para suas próprias necessidades.
Entendendo os widgets gráficos no WordPress
Os sites (inclusive os que usam WordPress) utilizam dois tipos de widgets: gráficos e baseados em texto. Os widgets de texto típicos podem ser cativantes, mas os widgets gráficos exibem informações em um formato mais atraente.
Esses widgets terão componentes dinâmicos que usam diferentes representações visuais, como tabelas, gráficos, mapas e barras de progresso, para que você possa transmitir informações complexas em um relance. Isso pode ajudá-lo a se comunicar melhor com seus leitores, o que, por sua vez, os ajuda a compreender e interpretar seus dados rapidamente. Isso também pode melhorar o engajamento e a retenção do usuário.
Embora existam diferentes maneiras de apresentar seus dados, os widgets gráficos têm alguns elementos em comum:
- Exibem dados de forma dinâmica.
- Você poderá oferecer elementos interativos para ajudar os usuários a “mergulhar” nos dados.
- Independentemente do design do seu site, você poderá personalizar os widgets.
- Há muitos casos em que você pode oferecer atualizações em tempo real para os dados que apresenta.
No entanto, os widgets gráficos não servem apenas para dar um toque visual ao seu site. Eles são uma grande parte da visualização e da interação com seus dados brutos.
Por que os widgets gráficos podem ajudar na apresentação de dados no site
Há muitos benefícios em usar gráficos para transmitir uma mensagem. De modo geral, o conteúdo visual é um grande negócio, muito importante para o marketing on-line.
Para você e seus dados, há muitos outros aspectos positivos a serem observados:
- Visualização aprimorada de dados. Conjuntos de dados complexos podem ser mais acessíveis, permitindo que os usuários compreendam tendências e padrões rapidamente. Também podem simplificar a forma de fornecer informações, usando formatos visuais versáteis, adaptáveis e digeríveis.
- Maior engajamento do usuário. Os elementos interativos dão aos usuários a oportunidade de aumentar o tempo que passam no site e as métricas gerais de engajamento.
- Estética profissional. Se você fizer o design certo, os widgets poderão elevar o apelo visual do seu site. Essa aparência polida e profissional pode dar uma vantagem à sua apresentação de dados.
Informações visuais geralmente têm vantagem sobre texto em qualquer campo, o que significa que você pode apresentar os principais pontos dos dados de uma forma que os faça “grudar”. Por isso, usá-los da maneira correta em seu site é uma prioridade máxima.
Quando usar widgets gráficos no seu site WordPress
O excesso de uma coisa boa se tornará repetitivo, saturado. Isso significa que você deve usar os widgets gráficos com cuidado e atenção.
A boa notícia é que há muitas situações em que você pode usar widgets gráficos. O momento mais evidente para usar gráficos é quando você precisa simplificar conceitos complexos para os seus leitores. No entanto, há outros casos de nicho:
- Apresentação de conjuntos de dados complexos, em que você precisa mostrar uma abundância de dados ou relações complexas entre pontos dos dados.
- Destacar tendências ao longo do tempo e exibir alterações ou padrões nos dados em diferentes períodos de tempo. Você pode até mesmo representar metas, marcos ou métricas de crescimento.
- Comparar diversas variáveis para ilustrar relações ou diferenças entre várias categorias de dados.
- Mostrar dados geográficos para locais específicos ou quando seus dados exigirem contexto espacial.
Você pode até usar widgets gráficos quando precisar da interação do usuário, como em relatórios dinâmicos ou outros painéis. A chave é decidir se a exibição visual dos seus dados aumentará a compreensão e o engajamento em relação a outras abordagens.
Em suma, se o formato visual agregar valor e clareza aos seus dados, é provável que você se adapte bem a um widget gráfico.
Os diferentes tipos de widgets gráficos para WordPress
A visualização de dados em si vem em várias formas, e cada tipo de exibição atenderá a diferentes necessidades de dados e apresentação. Não abordaremos aqui os detalhes de cada forma de apresentação de dados, embora existam algumas opções típicas e de destaque que você deve observar.
Gráficos típicos, como gráficos de barras, de pizza, de linhas e de área, são sempre uma boa opção para a visualização de dados. Estes são os elementos básicos da abordagem:
Os gráficos de dispersão são um pouco mais complexos, mas permitem que você mostre a relação entre duas variáveis:
Mapas podem ser apresentados de várias formas. Mapas de calor têm casos de uso específicos, mas usam gradientes de cores para exibir a intensidade dos conjuntos de dados. Um mapa-múndi interativo pode ser bom quando você precisa de interatividade com base em locais:
Contadores e barras de progresso são mais adequados para o atingimento de metas. Aqui, você recorrerá a contadores de números que usam contagem dinâmica até um valor final. As barras de progresso circulares podem mostrar a porcentagem concluída. Você também pode fazer isso com uma barra linear horizontal ou vertical:
Até mesmo galerias de imagens, lightboxes e controles deslizantes podem ajudar você a apresentar seus dados em vários slides, com sobreposições ou quase como um evento orientado por uma narrativa. É nesse ponto que as visualizações de linha do tempo podem entrar em ação, assim como os fluxos de processo. Um tipo de visualização de dados que você verá muito em sites de tutoriais de fotografia é a comparação “Antes/Depois”.
Isso permite comparar duas versões de uma imagem usando um controle deslizante dinâmico que se arrasta pela imagem, revelando a outra. Talvez você não veja muita utilidade para seus casos de uso, mas lembre-se: todo tipo de visualização tem uma aplicação ideal.
Onde você usaria widgets gráficos (incluindo exemplos)
O tipo de visualização que você usa é importante, mas como você o usa (e onde) também é. Ou seja, há diferentes aplicações em que o uso de widgets gráficos trará grandes benefícios.
Você perceberá que, além dos casos de uso típicos, há também aplicativos que você vê com frequência, mas não associa à visualização de dados. Nas próximas seções, abordaremos alguns desses usos.
Aplicativos de negócios
Uma das implementações mais comuns de widgets gráficos é basicamente mostrar suas principais métricas. Para as empresas, esse é um excelente recurso em termos de apresentação dos dados de forma atraente. Um gráfico de barras é fácil de ler, com os valores corretos nos eixos, e ajuda a visualizar as tendências de vendas ao longo do tempo ou a comparar diferentes produtos ou serviços.
A Target é uma das milhões de empresas que provavelmente usam isso para mostrar o crescimento da receita anual:
Isso também mostra como essas apresentações simples podem ilustrar a relação entre diferentes métricas, como o custo de aquisição de clientes ou o valor da vida útil. Os gráficos de barras empilhadas também podem exibir esse tipo de comparação. O WordPress usa essa abordagem no Diretório de Plugins para exibir o detalhamento da versão de um plugin que os usuários instalam:
Os gráficos de pizza e de rosca são ótimos se uma empresa quiser mostrar dados sobre a sua base de clientes. Muitas vezes, isso será segmentado por idade, local ou outro fator relevante. O Elementor usa uma visualização de partículas interessante e exclusiva para destacar suas maiores bases de usuários:
Em outros casos, você pode optar por mostrar os marcos da empresa ou a progressão do projeto. O Flourish usa uma linha do tempo para mostrar sua história, o que pode ter um impacto na fidelidade à marca:
Na verdade, o eCommerce é executado paralelamente aos aplicativos de negócios em geral, então tudo o que está aqui também pode ser aplicado a uma loja. Mesmo assim, há também maneiras específicas como esse setor pode visualizar dados.
Métricas de eCommerce
Decisões de compra geralmente envolvem alguns segundos de deliberação, e assim, é fundamental que você forneça as informações corretas aos clientes rapidamente. As comparações de produtos usando gráficos de barras ou gráficos de radar ajudam você a comparar recursos ou especificações de diferentes produtos, mas isso é apenas o começo.
Por exemplo, a SRFACE usa um guia de estilo interativo para explicar as especificações de suas roupas de mergulho e visualizar o visual de cada variante:
Isso se aproxima de um aplicativo comercial, mas você também pode usar tabelas e gráficos para ajudar os visitantes a entender tendências na adoção de produtos. O Diretório de Temas WordPress faz isso usando gráficos de barras:
Você pode instalar widgets gráficos em qualquer lugar onde, de outra forma, usaria texto. Por exemplo, muitas lojas de eCommerce usam texto simples e contrastante para cálculos de estoque. No entanto, as barras de progresso podem ser mais adequadas aqui, pois também podem aumentar a urgência de uma venda.
Rastreamento de métricas em tempo real
As visualizações em tempo real têm uma sensação empolgante porque você vê uma progressão ao vivo da métrica rastreada. Instituições de caridade e organizações sem fins lucrativos usam esses tipos de widgets gráficos com frequência.
A GoFundMe é a maior plataforma de crowdfunding do planeta, e todo arrecadador de fundos recebe um termômetro ou uma barra de rastreamento de progresso que se enche à medida que a meta se aproxima:
Contadores animados ou infográficos podem ajudar a mostrar o impacto em tempo real dos seus produtos e serviços. Por exemplo, o site principal do WordPress.org tem uma página dedicada a exibir o número de downloads da plataforma principal que é atualizada a cada minuto:
A Kinsta usa até mesmo um gráfico de contagem para ajudar você a monitorar o tempo de atividade do seu site em nossos diferentes serviços:
Essa estratégia de atualização “ao vivo” pode ter outras aplicações práticas além da simples ostentação e do estilo. Em alguns casos, você precisará ter conhecimento atualizado de determinadas métricas.
Análise interna
O monitoramento do desempenho tem um escopo amplo. Pode ser uma linha de frente, uma estratégia de medição de KPI ou uma visão geral personalizada de uma determinada métrica. O Google Analytics é um bom exemplo de exibição de uma grande quantidade de dados de sites de nicho de uma forma cativante:
O aplicativo de auditoria do Google Lighthouse, DeploymentHawk, usa vários quadros, gráficos, contadores e outros para analisar os números e visualizar os resultados de um relatório:
A ferramenta APM (Application Performance Monitoring) da Kinsta e o painel MyKinsta também fazem isso, usando vários tipos diferentes de visualização de dados, dependendo das métricas que você precisa ver:
A gamificação sempre pode ajudar se você tiver metas de conclusão a cumprir. O Todoist faz isso usando gráficos básicos de barras e linhas junto com seu sistema de pontos de “karma”:
Por fim, algumas organizações sem fins lucrativos divulgarão suas descobertas internas. Isso cria uma dicotomia única entre a apresentação para o público e o uso de dados como um barômetro interno. Por exemplo, a Fundação Gates utiliza sua filosofia e visão internas, aplica-as ao futuro e, por sua vez, cria um excelente exemplo de estatística preditiva:
Com essa flexibilidade de tipos de visualização e aplicação, você também pode aproveitar a adaptabilidade dos widgets gráficos. O restante deste artigo mostrará como você pode fazer isso no WordPress.
Plugins que ajudam a exibir widgets gráficos para o WordPress
Obviamente, para implementar widgets gráficos no WordPress, você usará um plugin. Nas próximas seções, veremos algumas das melhores opções que você tem, sem nenhuma ordem específica.
1. Visualizer: Gráficos e diagramas
O Visualizer da ThemeIsle é uma opção sólida para plugins de widgets gráficos gratuitos. Oferece suporte a vários tipos de gráficos e é fácil de usar, assim como seus outros temas e plugins.
Ele oferece quatro tipos diferentes de gráficos, um editor de dados com uma interface semelhante a uma planilha e muitas opções de personalização. O plugin também se integra ao Google Charts (e a outras APIs do Google). No entanto, embora esse plugin tenha funcionalidade completa, você precisa pagar pela versão premium (US$ 199 por ano) para acessar mais tipos de gráficos e edição.
No entanto, a versão gratuita é adequada para a maioria dos usuários, especialmente para a visualização de dados básica, que é excelente.
2. Data Tables Generator da Supsystic
À primeira vista, o Data Tables Generator não parece se encaixar nesta lista de plugins de widgets gráficos para WordPress. Afinal, como o próprio nome sugere, você só pode criar tabelas de dados de texto. Isso é verdade para a versão gratuita, mas a edição premium inclui muito mais funcionalidades, inclusive tabelas e gráficos.
A boa notícia é que suas criações podem ter um visual fantástico e pronto para uso. Você tem todos os tipos de opções de visualização, como gráficos de barras e linhas, gráficos de rosca, gráficos de bolhas e outros. Também achamos que as opções de classificação e filtragem são as melhores do setor.
Isso significa que o plugin será uma ótima opção para sites que precisam de um alto nível de interatividade, especialmente se também precisarem de tabelas de dados e representações de dados mais visuais.
Apesar disso, não há tabelas ou gráficos disponíveis na versão gratuita. No entanto, com uma licença vitalícia que custa US$ 89, o Data Tables Generator é uma pechincha pela funcionalidade que você obtém.
3. amCharts: Gráficos e mapas
O plugin amCharts é único, pois se conecta a um CDN (Content Delivery Network) externo para fornecer sua biblioteca. Dessa forma, o plugin só ajuda você a conectar as bibliotecas JavaScript ao WordPress, em vez de criar os gráficos diretamente.
A funcionalidade do amCharts é extensa e vem com um alto nível de personalização. No entanto, você precisa usar a interface do amCharts para criar seus widgets gráficos, o que significa alternar entre duas plataformas.
Se você precisa de um conjunto diversificado de tipos de gráficos e não se importa em usar a interface de terceiros, o amCharts pode ser ideal para você. Contudo, não há um plano gratuito para acessar tabelas ou gráficos, portanto você precisará de uma licença premium que custa a partir de US$ 80 por ano.
4. Graphina — Gráficos e tabelas do Elementor
Se você usa o Elementor, já tem algumas opções de widgets gráficos no construtor de páginas. No entanto, o Graphina reforça isso com muitos gráficos de qualidade, tabelas e outros tipos de visualização.
Esse plugin tem o maior número de tipos e designs de gráficos em um plugin de widget gráfico gratuito e tem profunda integração com o Elementor e o Divi. Você também tem algumas das opções de personalização mais abrangentes disponíveis em qualquer plugin, gratuito ou não.
Parece inacreditável, mas a versão premium amplia ainda mais a funcionalidade, tornando o Graphina o plugin de widget gráfico mais detalhado para WordPress. É claro que você precisará do Elementor (ou Divi) para aproveitar o conjunto de recursos, o que pode ser um obstáculo. No entanto, por US$ 49, pode valer a pena migrar para um desses construtores de páginas populares.
5. wpDataTables
Assim como o Data Tables Generator, o wpDataTables não tem como foco principal tabelas e gráficos. No entanto, você pode fazer isso com o plugin, e os resultados são de qualidade. Os sites que lidam com conjuntos de dados grandes e complexos devem dar uma olhada nesse plugin.
Como era de esperar, há mais opções para criar tabelas aqui, mas há integração com o Google Charts e o Charts.js para que você tenha 15 tipos diferentes de visualização. Pode lidar com grandes conjuntos de dados, e as opções de importação de fontes são fantásticas. Você pode trazer dados do Excel, XML, arquivos CSV, JSON e até mesmo arrays PHP se tiver experiência em desenvolvimento.
Entretanto, devido ao foco secundário em gráficos, não é tão simples criá-los com o wpDataTables. Essa curva de aprendizado, além da quantidade de funcionalidades ocultas por trás da edição premium (a partir de US$ 39 por ano), pode fazer com que você procure outra opção.
6. Ninja Charts
O último plugin da nossa lista é totalmente gratuito, sem nenhum nível de preço premium. O Ninja Charts pode ser a solução certa se você for iniciante na visualização de dados, mas oferece a funcionalidade necessária para competir com os melhores.
Ele oferece uma grande variedade de tipos de gráficos e permite que você os personalize de acordo com suas necessidades. A interface é simples e oferece profunda integração com outro plugin do mesmo desenvolvedor, o Ninja Tables.
Mesmo assim, há limitações. Outros usuários reclamam da falta de funcionalidades básicas, como a agregação de dados, por exemplo. No entanto, você não consegue superar o preço, e ainda acreditamos que ele pode se adequar a muitos sites diferentes com o que oferece.
Como adicionar widgets gráficos ao WordPress usando o plugin Visualizer
Vamos examinar rapidamente o processo de adição de um widget gráfico ao seu site WordPress. Usaremos o Visualizer, já que gostamos dele o suficiente para torná-lo o nosso favorito.
Entretanto, este não é um tutorial do Visualizer. Por isso, as etapas que seguimos aqui podem ser diferentes das da solução que você escolheu. Com isso em mente, instale e ative o plugin de sua preferência e crie um novo gráfico ou diagrama.
No Visualizer, você tem essa opção na instalação:
Provavelmente, haverá um botão Adicionar Novo Gráfico em algum lugar do painel de administração do plugin:
Depois de clicar no botão e selecionar o tipo de gráfico, você precisará inserir seus dados. A versão gratuita do Visualizer só oferece suporte à edição manual, mas seu plugin pode oferecer integrações e opções de importação para uma variedade de ferramentas:
Em seguida, verifique as opções de personalização disponíveis para você. O Visualizer inclui essas opções na tela de criação de gráficos. Você tem configurações para todos os tipos de aspectos, como a posição do título, rótulos de eixo, linhas de grade, tamanho e posicionamento do gráfico e muito mais:
A etapa final é incorporar o gráfico ao seu site. Muitos plugins usam shortcodes para isso, o que significa que você pode simplesmente copiar e colar na publicação ou na página desejada:
O Visualizer também fornece um Bloco para isso, o que é útil e em harmonia com o design moderno do WordPress.
Práticas típicas para a exibição dos seus widgets gráficos
É importante considerar alguns aspectos ao apresentar seus gráficos e diagramas. Em resumo, trate-os como o conteúdo importante e impactante que são e procure limitar o número de widgets que você exibe. Para se aprofundar mais, porém, considere o seguinte:
- Posicionamento. Seus widgets devem encaixar-se naturalmente no fluxo de conteúdo, da mesma forma que suas imagens e vídeos. Os widgets gráficos muitas vezes ultrapassam a linha entre mídia e conteúdo.
- Velocidade de carregamento. Certifique-se de monitorar o desempenho do site depois que você adicionar widgets. Alguns podem afetar esse desempenho.
- Acessibilidade. Embora você esteja oferecendo dados visuais, certifique-se de incluir o texto alternativo apropriado e que seja possível navegar pelo teclado. Isso ajuda todos os usuários a acessar seus widgets, independentemente da capacidade de visão.
Quando se trata de desempenho, você deve estar atento. Há muitas facetas que podem afetar a velocidade do seu site, o que faz sentido, considerando a carga dos gráficos adicionais. Nossa recomendação é usar SVGs sempre que possível. Eles são mais eficientes do que as imagens rasterizadas para gráficos e ícones simples, com melhor escalabilidade.
O lazy loading e o armazenamento em cache também podem ajudar aqui, pois ambos restringem a forma como os gráficos são carregados de maneiras diferentes. Se você optar por extrair dados de fontes externas, certifique-se de escolher conexões eficientes para minimizar o número de solicitações HTTP que você atende. A melhor e mais otimizada abordagem é hospedar esses dados no servidor do seu site, embora você talvez não tenha controle sobre essa decisão.
Resumo
Os widgets gráficos para WordPress permitem visualizar dados típicos de texto no seu site. Esse método de apresentação e visualização de dados pode transformar informações complexas em um formato mais digerível. Você pode exibir esses dados usando tabelas, gráficos, mapas interativos e outros.
O plugin certo para o trabalho é crucial, e abordamos muitos deles neste artigo. O Visualizer é uma ótima opção, assim como o Graphina. No entanto, a ferramenta correta para o trabalho depende das suas próprias necessidades. Sem dúvida, pode ter um impacto enorme e positivo em seu site e no engajamento.
Os widgets gráficos para WordPress são importantes o suficiente para que você os implemente? Gostaríamos muito de saber o que você pensa na seção de comentários abaixo!
Deixe um comentário