En muchas situaciones, presentar los datos en un formato atractivo y fácil de digerir puede ofrecer muchas ventajas. Los widgets gráficos para WordPress te permiten transformar números y estadísticas en bruto en una presentación visual e informativa que resulte atractiva. Lo más habitual es que esto se haga a través de un plugin, que te permite trabajar con esos datos dentro de WordPress.
En este artículo, vamos a explorar los widgets gráficos para WordPress, incluyendo los distintos tipos que puedes utilizar, las situaciones en las que los usarías y mucho más. En la segunda mitad del artículo, vamos a recopilar algunos plugins que pueden ayudarte a implementar widgets gráficos y, a continuación, te mostraremos cómo utilizar uno para tus propias necesidades.
Comprender los widgets gráficos en WordPress
Los sitios web (incluidos los que utilizan WordPress) utilizan dos tipos de widgets: gráficos y de texto. Los widgets de texto típicos pueden ser cautivadores, pero los widgets gráficos mostrarán la información en un formato más atractivo.
Estos widgets tendrán componentes dinámicos que utilizan diferentes representaciones visuales — como tablas, gráficos, mapas y barras de progreso — para transmitir información compleja de un vistazo. Esto puede ayudarte a comunicarte mejor con tus lectores, lo que a su vez les ayuda a comprender e interpretar tus datos rápidamente. También podría mejorar la participación y retención de tus usuarios.
Aunque hay distintas formas de presentar tus datos, los widgets gráficos tienen algunos elementos en común:
- Mostrarán los datos de forma dinámica.
- Podrás ofrecer elementos interactivos para ayudar a los usuarios a «profundizar» en tus datos.
- Independientemente del diseño de tu sitio web, podrás personalizar tus widgets para que se adapten a él.
- Hay muchos casos en los que podrías ofrecer actualizaciones en tiempo real de los datos que presentas.
Sin embargo, los widgets gráficos no sólo sirven para añadir un toque visual a tu sitio. Son una parte importante de la visualización e interacción con tus datos brutos.
Por qué los widgets gráficos pueden ayudar a la presentación de tus datos en tu sitio
Utilizar gráficos para transmitir un mensaje tiene muchas ventajas. En general, el contenido visual es un gran negocio y muy importante para el marketing online.
Hay muchos otros aspectos positivos para ti y tus datos:
- Mejor visualización de los datos. Los conjuntos de datos complejos pueden ser más accesibles, permitiendo a los usuarios captar tendencias y patrones rápidamente. También pueden simplificar la forma en que ofreces la información, utilizando formatos visuales versátiles, adaptables y digeribles.
- Mayor compromiso del usuario. Los elementos interactivos dan a los usuarios la oportunidad de aumentar su tiempo en el sitio y mejorar las métricas generales de compromiso.
- Estética profesional. Si aciertas con el diseño, los widgets pueden elevar el atractivo visual de tu sitio. Este aspecto pulido y profesional puede dar una ventaja a la presentación de tus datos.
La información visual suele tener ventaja sobre el texto en cualquier campo, lo que significa que puedes presentar puntos de datos clave de forma que «se queden grabados». Por ello, utilizarlos de la forma adecuada en tu sitio web es una prioridad absoluta.
Cuándo utilizar widgets gráficos en tu sitio web de WordPress
El exceso de algo bueno se volverá repetitivo y saturará. Esto significa que deberás utilizar los widgets gráficos con cuidado y atención.
La buena noticia es que hay muchas situaciones en las que puedes utilizar widgets gráficos. El momento más claro para sacar los gráficos es cuando necesitas simplificar conceptos complejos para tus lectores. Sin embargo, hay otros casos específicos:
- Presentar conjuntos de datos complejos, cuando necesitas mostrar grandes cantidades de datos o relaciones intrincadas entre puntos de datos.
- Destacar tendencias a lo largo del tiempo y mostrar cambios o patrones en los datos a lo largo de distintos periodos de tiempo. Incluso podrías representar objetivos, hitos o métricas de crecimiento.
- Comparar múltiples variables para ilustrar las relaciones o diferencias entre diversas categorías de datos.
- Mostrar datos geográficos de ubicaciones concretas o cuando tus datos requieran un contexto espacial.
Incluso puedes utilizar widgets gráficos cuando necesites la interacción del usuario, como para informes dinámicos u otros cuadros de mando. La clave está en decidir si mostrar tus datos visualmente mejorará su comprensión y compromiso respecto a otros enfoques.
En resumen, si el formato visual aporta valor y claridad a tus datos, es probable que encajen bien en un widget gráfico.
Los distintos tipos de widgets gráficos para WordPress
La propia visualización de datos se presenta de varias formas, y cada tipo de visualización se adaptará a diferentes datos y necesidades de presentación. No entraremos aquí en los pormenores de cada forma de presentar tus datos, aunque hay algunas opciones típicas y destacadas que conviene tener en cuenta.
Los diagramas y gráficos típicos, como los diagramas de barras, los diagramas circulares, los gráficos lineales y los gráficos de área, son siempre una buena opción para la visualización de datos. Son elementos básicos del enfoque:
Los gráficos de dispersión son un poco más complejos, pero te permitirán mostrar la relación entre dos variables:
Los mapas pueden tener varias formas. Los mapas de calor tienen casos de uso específicos, pero utilizan gradientes de color para mostrar la intensidad de los conjuntos de datos. Un mapamundi interactivo puede ser bueno cuando necesites interactividad basada en ubicaciones:
Los contadores y las barras de progreso son más para logros de hitos. En este caso, recurrirás a contadores numéricos que utilicen el recuento dinámico hasta un valor final. Las barras de progreso circulares pueden ayudar a mostrar los porcentajes de finalización. También puedes hacerlo con una barra lineal horizontal o vertical:
Incluso las galerías de imágenes, las cajas de luz y los deslizadores pueden ayudarte a presentar tus datos en varias diapositivas, con superposiciones o como si se tratara de una historia. Aquí es donde pueden entrar en juego las visualizaciones de líneas temporales, al igual que los flujos de procesos. Un tipo de visualización de datos que verás mucho en los sitios de tutoriales de fotografía es la comparación «Antes/Después».
Esto te permite comparar dos versiones de una imagen utilizando un deslizador dinámico que se arrastra por la imagen, revelando la otra. Puede que no tenga mucha utilidad para tus casos de uso, pero recuerda: cada tipo de visualización tiene una aplicación ideal.
Dónde utilizarías los widgets gráficos (incluyendo ejemplos)
El tipo de visualización que utilices importa, pero cómo lo utilices (y dónde) también es importante. Es decir, hay distintas aplicaciones en las que utilizar widgets gráficos tendrá un gran beneficio.
Te darás cuenta de que, aparte de los casos de uso típicos, también hay aplicaciones que ves a menudo pero que no asocias con la visualización de datos. En las próximas secciones, vamos a abordar algunos de estos usos.
Aplicaciones empresariales
Una de las aplicaciones «de moda» de los widgets gráficos es mostrar esencialmente tus métricas clave. Para las empresas, esto supone una clara ventaja a la hora de presentar sus datos de forma atractiva. Un gráfico de barras es fácil de leer con los valores de eje adecuados y ayuda a visualizar las tendencias de ventas a lo largo del tiempo o a comparar diferentes productos o servicios.
Target es una de las millones de empresas que probablemente lo utilicen para mostrar el crecimiento anual de sus ingresos:
Esto también muestra cómo estas sencillas presentaciones pueden ilustrar la relación entre diferentes métricas, como el coste de adquisición de clientes o el valor del tiempo de vida. Los gráficos de barras apiladas también pueden mostrar este tipo de comparación. WordPress utiliza este enfoque en el Directorio de Plugins para mostrar el desglose de qué versión de un plugin instalan los usuarios:
Los gráficos circulares y de rosquilla son estupendos si una empresa quiere mostrar datos sobre su base de clientes. A menudo, estarán segmentados por edad, ubicación u otro factor relevante. Elementor utiliza una visualización de partículas genial y única para destacar sus mayores bases de usuarios:
En otros casos, puedes optar por mostrar los hitos de la empresa o la progresión de un proyecto. Flourish utiliza una línea de tiempo para mostrar su historia, que puede repercutir en la fidelidad a la marca:
En realidad, el comercio electrónico funciona en paralelo a las aplicaciones empresariales generales, por lo que todo lo que se explica aquí podría aplicarse también a una tienda. Aun así, también hay formas específicas en las que este sector puede visualizar los datos.
Métricas del comercio electrónico
Las decisiones de compra suelen implicar unos segundos de deliberación, por lo que es crucial hacer llegar rápidamente la información adecuada a los clientes. Las comparaciones de productos mediante gráficos de barras o de radar te ayudan a comparar las características o especificaciones de distintos productos, pero eso es sólo el principio.
Por ejemplo, SRFACE utiliza una guía de estilo interactiva para explicar las especificaciones de sus trajes de neopreno y visualizar el aspecto de cada variante:
También puedes utilizar tablas y gráficos para ayudar a los visitantes a comprender las tendencias en la adopción de productos. El Directorio de Temas de WordPress hace esto utilizando gráficos de barras:
Podrías incluir widgets gráficos en cualquier lugar en el que, de otro modo, utilizarías texto. Por ejemplo, muchas tiendas de comercio electrónico utilizan texto simple en contraste para calcular las existencias. Sin embargo, las barras de progreso podrían encajar mejor aquí, ya que también podrían aumentar la urgencia de una venta.
Seguimiento de métricas en tiempo real
Las visualizaciones en tiempo real tienen una sensación emocionante porque ves una progresión en directo de la métrica rastreada. Las organizaciones benéficas y sin ánimo de lucro utilizan con frecuencia este tipo de widgets gráficos.
GoFundMe es la mayor plataforma de crowdfunding del planeta, y cada recaudador de fondos tiene un termómetro o barra de seguimiento del progreso que se va llenando a medida que se acerca un objetivo:
Los contadores animados o las infografías pueden ayudar a mostrar el impacto en tiempo real de tus productos y servicios. Por ejemplo, el sitio web principal de WordPress.org tiene una página dedicada a mostrar el número de descargas de la plataforma principal que se actualiza cada minuto:
Kinsta incluso utiliza un gráfico para ayudarte a controlar el tiempo de actividad de tu sitio en nuestros diferentes servicios:
Esta estrategia de actualización «en directo» puede tener aplicaciones prácticas más allá del simple alarde y la ostentación. En algunos casos, necesitarás tener un conocimiento actualizado de determinadas métricas.
Analíticas internas
La supervisión del rendimiento tiene un amplio alcance. Puede ser una estrategia directa de medición de KPI, o una visión general personalizada de una métrica concreta. Google Analytics es un buen ejemplo de cómo mostrar una gran cantidad de datos de tu sitio de forma atractiva:
La aplicación de auditoría DeploymentHawk de Google Lighthouse utiliza diferentes tablas, gráficos, contadores y otros elementos para hacer números y visualizar los resultados de un informe:
La herramienta de Monitorización del Rendimiento de las Aplicaciones (APM) de Kinsta y el panel de MyKinsta también lo hacen, utilizando muchos tipos diferentes de visualización de datos en función de las métricas que necesites ver:
La gamificación siempre puede ayudarte si tienes que cumplir objetivos. Todoist lo hace utilizando gráficos básicos de barras y líneas junto con su sistema de puntos ‘karma’:
Por último, algunas organizaciones sin ánimo de lucro hacen públicos sus resultados internos. Esto genera una dicotomía única entre la presentación de cara al público y el uso de los datos como barómetro interno. Por ejemplo, la Fundación Gates toma su filosofía y visión internas, las aplica al futuro y, a su vez, crea un excelente ejemplo de estadística predictiva:
Con esta flexibilidad en el tipo de visualización y aplicación, también puedes aprovechar la adaptabilidad de los widgets gráficos. El resto de este post te mostrará cómo hacerlo dentro de WordPress.
Plugins que te ayudan a visualizar widgets gráficos para WordPress
Por supuesto, para implementar widgets gráficos para WordPress, utilizarás un plugin. A lo largo de las siguientes secciones, veremos algunas de las mejores opciones que tienes – sin ningún orden en particular.
1. Visualizer: Tables and Charts
Visualizer de ThemeIsle es una opción sólida entre los plugins gratuitos de widgets gráficos. Admite una gran variedad de tipos de gráficos y es fácil de usar, al igual que sus otros temas y plugins.
Ofrece cuatro tipos de gráficos diferentes, un editor de datos con una interfaz similar a la de una hoja de cálculo y muchas opciones de personalización. El plugin también se integra con Google Charts (y otras API de Google). Sin embargo, aunque este plugin tiene una funcionalidad completa, tienes que pagar por la versión premium (199 $ al año) para acceder a más tipos de gráficos y de edición.
No obstante, la versión gratuita será adecuada para la mayoría de los usuarios, especialmente para una visualización de datos básica pero magnífica.
2. Data Tables Generator by Supsystic
A primera vista, Data Tables Generator no parece encajar en esta lista de plugins de widgets gráficos para WordPress. Después de todo, como su nombre indica, sólo puedes crear tablas de datos de texto. Esto es cierto para la versión gratuita, pero la edición premium incluye muchas más funciones, como tablas y gráficos.
La buena noticia es que tus creaciones pueden tener un aspecto fantástico desde el primer momento. Tienes todo tipo de opciones de visualización, como gráficos de barras y líneas, gráficos de donut, gráficos de burbujas y mucho más. También creemos que las opciones de ordenación y filtrado están a la cabeza.
Esto significa que el plugin encajará muy bien en sitios que necesiten un alto nivel de interactividad, especialmente si también necesitan tablas de datos y representaciones de datos más visuales.
A pesar de esto, no hay tablas ni gráficos disponibles en la versión gratuita. Sin embargo, con una licencia de por vida que cuesta 89 $, Data Tables Generator es una ganga para la funcionalidad que obtienes.
3. amCharts: Charts and Maps
El plugin amCharts es único en el sentido de que se conecta a una Red de Entrega de Contenidos (CDN) externa para entregar su biblioteca. Como tal, el plugin sólo te ayuda a conectar las bibliotecas JavaScript a WordPress en lugar de crear los gráficos directamente.
La funcionalidad de amCharts es amplia, y viene con un alto nivel de personalización. Sin embargo, tienes que utilizar la interfaz de amCharts para crear tus widgets gráficos, lo que significa cambiar entre dos plataformas.
Si necesitas una gran variedad de clases de gráficos y no te importa utilizar la interfaz de terceros, amCharts puede serte útil. Sin embargo, no hay un nivel gratuito para acceder a los gráficos, por lo que necesitarás una licencia premium que cuesta desde 80 $ al año.
4. Graphina – Elementor Charts and Graphs
Si utilizas Elementor, ya tienes algunas opciones de widgets gráficos dentro del constructor de páginas. Sin embargo, Graphina lo refuerza con un montón de tablas, gráficos y otros tipos de visualización de calidad.
Este plugin tiene la mayor cantidad de tipos y diseños de gráficos en un plugin gratuito de widgets gráficos y tiene una profunda integración con Elementor y Divi. También dispone de algunas de las opciones de personalización más completas disponibles en cualquier plugin, y más aún en uno gratuito.
Parece increíble, pero la versión premium aumenta aún más la funcionalidad para hacer de Graphina el plugin de widgets gráficos más completo para WordPress. Por supuesto, necesitarás Elementor (o Divi) para aprovechar el conjunto de funciones, lo que podría ser un obstáculo. Sin embargo, por 49 $, puede merecer la pena cambiar a uno de estos populares creadores de páginas.
5. wpDataTables
Al igual que Data Tables Generator, wpDataTables no se centra principalmente en diagramas y gráficos. Sin embargo, puedes hacerlo con el plugin, y los resultados son de calidad. Los sitios que trabajan con conjuntos de datos grandes y complejos deberían echar un vistazo a este plugin.
Como era de esperar, aquí encontrarás más opciones para crear tablas, pero hay integración tanto con Google Charts como con Charts.js para ofrecerte 15 tipos de visualización diferentes. Es experto en la gestión de grandes conjuntos de datos, y las opciones de importación de fuentes son fantásticas. Puedes introducir datos desde Excel, XML, archivos CSV, JSON e incluso arrays PHP si tienes experiencia en desarrollo.
Sin embargo, debido al enfoque secundario en los gráficos, no es tan sencillo construirlos con wpDataTables. Esta curva de aprendizaje, junto con la cantidad de funcionalidades ocultas en la edición premium (a partir de 39 $ al año), puede hacer que busques otra opción.
6. Ninja Charts
El último plugin de nuestra lista es completamente gratuito, sin nivel de precios premium. Ninja Charts podría ser la solución adecuada si eres nuevo en la visualización de datos, pero ofrece la funcionalidad necesaria para competir con los mejores.
Ofrece una gran selección de estilos de gráficos y te da la posibilidad de personalizarlos según tus necesidades. La interfaz es sencilla, y ofrece una profunda integración con otro plugin del mismo desarrollador, Ninja Tables.
Incluso así, existen limitaciones. Otros usuarios se quejan de la falta de funciones básicas como por ejemplo la agregación de datos. Sin embargo, el precio es imbatible, y seguimos creyendo que puede adaptarse a muchos sitios diferentes con lo que ofrece.
Cómo añadir widgets gráficos a WordPress con el plugin Visualizer
Vamos a ver rápidamente el proceso de añadir un widget gráfico a tu sitio web de WordPress. Utilizaremos Visualizer, ya que nos gustó lo suficiente como para convertirlo en nuestro favorito.
Sin embargo, esto no pretende ser un tutorial de Visualizer. Como tal, los pasos que demos aquí podrían diferir de los de tu solución elegida. Teniendo esto en cuenta, instala y activa el plugin de tu elección y, a continuación, crea un nuevo gráfico.
En Visualizer, tenemos esa opción al instalarlo:
Lo más probable es que haya un botón Añadir nuevo gráfico en algún lugar del panel de administración del plugin:
Una vez que hagas clic en el botón y selecciones el tipo de gráfico, tendrás que introducir los datos. La versión gratuita de Visualizer sólo admite la edición manual, pero tu plugin podría ofrecer integraciones y opciones de importación para diversas herramientas:
A continuación, comprueba las opciones de personalización de que dispones. Visualizer las incluye en la pantalla de creación del gráfico. Tienes ajustes para todo tipo de aspectos, como la posición del título, las etiquetas de los ejes, las líneas de la cuadrícula, el tamaño y la colocación del gráfico, y mucho más:
El último paso es incrustar tu gráfico en tu sitio web. Muchos plugins utilizan shortcodes para ello, lo que significa que basta con copiar y pegar en la entrada o página deseada:
Visualizer también proporciona un Bloque para esto, que es práctico y acorde con el diseño moderno de WordPress.
Prácticas habituales para mostrar tus widgets gráficos
Es importante que tengas en cuenta algunos aspectos a la hora de presentar tus tablas y gráficos. En pocas palabras, trátalos como el contenido importante e impactante que son, y procura limitar el número de widgets que muestras. Sin embargo, para profundizar más, ten en cuenta lo siguiente:
- Colocación. Tus widgets deben encajar de forma natural en tu flujo de contenidos, al igual que tus imágenes y vídeos. Los widgets gráficos suelen estar a caballo entre los medios y el contenido.
- Velocidad de carga. Asegúrate de controlar el rendimiento de tu sitio después de añadir widgets. Algunos podrían afectar al rendimiento de tu sitio.
- Accesibilidad. Aunque ofrezcan datos visuales, asegúrate de que incluyan el texto alternativo adecuado y sean navegables mediante teclado. Esto ayuda a todos los usuarios a acceder a tus widgets, independientemente de su capacidad visual.
En cuanto al rendimiento, es algo que hay que tener en cuenta. Hay muchas facetas que pueden afectar a la velocidad de tu sitio, lo que tiene sentido, dada la carga de tus gráficos adicionales. Nuestro consejo es que utilices SVG siempre que sea posible. Tienen más rendimiento que las imágenes de trama para gráficos e iconos sencillos, con mejor escalabilidad.
Lazy loading y el almacenamiento en caché también pueden ayudar en este caso, ya que ambos restringen la carga de tus gráficos de diferentes maneras. Si decides extraer datos de fuentes externas, asegúrate de elegir conexiones eficientes para minimizar el número de peticiones HTTP que sirves. Lo mejor y más óptimo es alojar esos datos en el servidor de tu sitio, aunque la decisión puede no estar bajo tu control.
Resumen
Los widgets gráficos para WordPress te permiten visualizar los datos de texto típicos de tu sitio. Este método de presentación y visualización de datos puede transformar información compleja en un formato más digerible. Puedes mostrar estos datos mediante tablas, gráficos, mapas interactivos y mucho más.
El plugin adecuado para el trabajo es crucial, y en este post abordamos muchos de ellos. Visualizer es una gran opción, al igual que Graphina. Sin embargo, la herramienta correcta para el trabajo depende de tus propias necesidades. Sin duda, puede tener un impacto enorme y positivo en tu sitio y en su participación.
¿Son los widgets gráficos para WordPress lo suficientemente importantes como para que los implementes? Nos encantaría conocer tu opinión en la sección de comentarios
Deja una respuesta