In molte situazioni, presentare i dati in un formato accattivante e facile da digerire può offrire molti vantaggi. I widget grafici per WordPress permettono di trasformare i numeri grezzi e le statistiche in una rappresentazione bella da vedere e informativa. Il più delle volte si tratta di un plugin che permette di lavorare con i dati all’interno di WordPress.
In questo articolo parleremo dei widget grafici per WordPress, compresi i diversi tipi che da utilizzare, le situazioni in cui utilizzarli e molto altro ancora. Nella seconda parte dell’articolo, elencheremo alcuni plugin che possono aiutare a implementare i widget grafici e vi mostreremo come utilizzarne uno per le vostre esigenze.
I widget grafici in WordPress
I siti web (compresi quelli che utilizzano WordPress) utilizzano due tipi di widget: quelli grafici e quelli testuali. I tipici widget testuali possono essere efficaci, ma i widget grafici mostrano le informazioni in un formato più interessante.
Questi widget hanno componenti dinamici che utilizzano diverse rappresentazioni visive, come grafici, diagrammi, mappe e barre di avanzamento, per trasmettere informazioni complesse a colpo d’occhio. Questo può aiutarvi a comunicare meglio con i lettori, aiutandoli a comprendere e interpretare rapidamente i vostri dati. Inoltre, potrebbe migliorare il coinvolgimento e la fidelizzazione degli utenti.
Sebbene esistano diversi modi per presentare i dati, i widget grafici hanno alcuni elementi in comune:
- Mostrano i dati in modo dinamico.
- Permettono di offrire elementi interattivi per aiutare gli utenti a “scavare” nei vostri dati.
- Indipendentemente dal design del sito, è possibile personalizzare i widget per adattarli ad esso.
- Ci sono molti casi in cui è possibile offrire aggiornamenti in tempo reale ai dati presentati.
Tuttavia, i widget grafici non servono solo ad aggiungere un tocco visivo al sito. Sono una parte importante della visualizzazione e dell’interazione con i vostri dati grezzi.
Perché i widget grafici possono aiutare la presentazione dei dati sul sito
L’uso della grafica per trasmettere un messaggio presenta numerosi vantaggi. In generale, i contenuti visivi sono sempre fondamentali e sono molto importanti per il marketing online.
Per voi e i vostri dati, ci sono molti altri vantaggi da sottolineare:
- Miglioramento della visualizzazione dei dati. Gli insiemi di dati complessi possono essere più accessibili, consentendo agli utenti di cogliere rapidamente tendenze e pattern. Inoltre, possono semplificare il modo in cui fornite le informazioni utilizzando formati visivi versatili, adattabili e digeribili.
- Miglioramento del coinvolgimento degli utenti. Gli elementi interattivi offrono agli utenti l’opportunità di aumentare il tempo trascorso sul sito e le metriche di coinvolgimento complessive.
- Estetica professionale. Se il design è corretto, i widget possono migliorare l’aspetto visivo del sito. Questo aspetto curato e professionale può dare alla presentazione dei vostri dati una marcia in più.
Le informazioni visive hanno spesso un vantaggio rispetto al testo in qualsiasi campo, il che significa che è possibile presentare i dati chiave in un modo che li renda più memorabili. Per questo motivo, utilizzarli nel modo giusto sul sito è una priorità assoluta.
Quando usare i widget grafici su un sito WordPress
Troppo di una cosa buona diventa ripetitivo e saturante. Ciò significa che dovrete usare i widget grafici con cura e attenzione.
La buona notizia è che ci sono molte situazioni in cui usare i widget grafici. Il momento più chiaro per utilizzare i grafici è quando dovete semplificare concetti complessi per i vostri lettori. Tuttavia, ci sono altri casi di nicchia:
- Presentare insiemi di dati complessi, dove è necessario mostrare grandi quantità di dati o intricate relazioni tra punti di dati.
- Evidenziare le tendenze nel tempo e mostrare i cambiamenti o gli schemi dei dati in diversi periodi di tempo. Potete anche rappresentare obiettivi, traguardi o metriche di crescita.
- Confrontare più variabili per illustrare le relazioni o le differenze tra diverse categorie di dati.
- Mostrare dati geografici per luoghi specifici o quando i dati richiedono un contesto spaziale.
Potreste anche usare i widget grafici quando avete bisogno dell’interazione dell’utente, come nel caso di report dinamici o altre dashboard. La chiave è decidere se la visualizzazione dei vostri dati migliorerà la comprensione e il coinvolgimento rispetto ad altri approcci.
In breve, se il formato visivo fornisce valore e chiarezza ai vostri dati, è probabile che si presti all’uso di un widget grafico.
I diversi tipi di widget grafici per WordPress
La visualizzazione dei dati si presenta in varie forme e ogni tipo di visualizzazione si adatta a diverse esigenze di dati e di presentazione. In questa sede non ci addentreremo nei dettagli di ogni modo in cui è possibile presentare i propri dati, anche se ci sono alcune opzioni tipiche e particolari da notare.
I grafici tipici come i grafici a barre, i grafici a torta, i grafici a linee e i grafici ad area sono sempre una buona scelta per la visualizzazione dei dati. Sono i capisaldi dell’approccio:
I grafici a dispersione sono un po’ più complessi ma permettono di mostrare la relazione tra due variabili:
Le mappe possono avere varie forme. Le mappe di calore hanno casi d’uso di nicchia ma utilizzano gradienti di colore per mostrare l’intensità dei dati. Una mappa interattiva del mondo può essere utile quando si ha bisogno di mostrare l’interattività in base ai luoghi:
I contatori e le barre di avanzamento sono più indicati per i traguardi raggiunti. In questo caso, dovrete ricorrere a contatori numerici che utilizzano il conteggio dinamico fino a un valore finale. Le barre di avanzamento circolari possono aiutare a mostrare la percentuale di completamento. Potete farlo anche con una barra lineare orizzontale o verticale:
Anche le gallerie di immagini, i lightbox e gli slider possono aiutarvi a presentare i vostri dati in più diapositive, con sovrapposizioni o quasi come un evento guidato da una storia. È qui che possono entrare in gioco le visualizzazioni delle linee temporali, così come i flussi di processo. Un tipo di visualizzazione dei dati che vedrete spesso nei siti di tutorial di fotografia è il “confronto prima/dopo”.
Questo permette di confrontare due versioni di un’immagine utilizzando un cursore dinamico che si trascina sull’immagine, rivelando l’altra. Potrebbe non essere molto utilizzato per i vostri casi d’uso, ma ricordate che ogni tipo di visualizzazione ha un’applicazione ideale.
Dove utilizzare i widget grafici (esempi)
Il tipo di visualizzazione che utilizzate è importante, ma lo è anche il modo in cui lo utilizzate (e dove). In altre parole, ci sono diverse applicazioni in cui l’uso dei widget grafici è di grande utilità.
Vi accorgerete che, oltre ai casi d’uso tipici, ci sono anche applicazioni che vedete spesso ma che non associate alla visualizzazione dei dati. Nelle prossime sezioni tratteremo alcuni di questi utilizzi.
Applicazioni aziendali
Una delle applicazioni più diffuse dei widget grafici è quella di mostrare essenzialmente le vostre metriche chiave. Per le aziende si tratta di una chiara vittoria in termini di presentazione dei dati in modo accattivante. Un grafico a barre è facile da leggere con i giusti valori dell’asse e aiuta a visualizzare l’andamento delle vendite nel tempo o a confrontare diversi prodotti o servizi.
Target è una delle milioni di aziende che lo utilizzano per mostrare la crescita del fatturato annuale:
Questo dimostra anche come queste semplici presentazioni possano illustrare la relazione tra diverse metriche, come il costo di acquisizione dei clienti o il valore di vita. Anche i grafici a barre impilati possono mostrare questo tipo di confronto. WordPress utilizza questo approccio nella Plugin Directory per mostrare la ripartizione della versione di un plugin installata dagli utenti:
I grafici a torta e a ciambella sono ideali se un’azienda vuole mostrare i dati relativi alla sua clientela. Spesso sono segmentati in base all’età, alla posizione geografica o ad altri fattori rilevanti. Elementor utilizza una visualizzazione particellare unica e interessante per evidenziare le sue basi di utenti più grandi:
In altri casi, potete scegliere di mostrare le tappe fondamentali dell’azienda o l’avanzamento di un progetto. Flourish utilizza una linea temporale per mostrare la sua storia, che può avere un impatto sulla fedeltà al marchio:
In realtà, l’e-commerce va di pari passo con le applicazioni aziendali generali, quindi tutto ciò che abbiamo descritto potrebbe essere applicato anche a un negozio. Tuttavia, ci sono modi specifici in cui questo settore può visualizzare i dati.
Metriche dell’e-commerce
Le decisioni di acquisto spesso richiedono pochi secondi di riflessione, quindi è fondamentale fornire ai clienti le informazioni giuste in modo rapido. I confronti tra i prodotti tramite grafici a barre o a radar aiutano a confrontare le caratteristiche o le specifiche di diversi prodotti, ma questo è solo l’inizio.
Ad esempio, SRFACE utilizza una guida di stile interattiva per spiegare le specifiche delle sue mute e visualizzare l’aspetto di ogni variante:
Si avvicina a un’applicazione commerciale, ma potete anche utilizzare grafici e diagrammi per aiutare i visitatori a capire le tendenze di adozione dei prodotti. La WordPress Theme Directory lo fa utilizzando grafici a barre:
Potete inserire widget grafici in qualsiasi punto in cui altrimenti utilizzeresti del testo. Ad esempio, molti negozi di e-commerce utilizzano un semplice testo a contrasto per il calcolo delle scorte. Tuttavia, le barre di avanzamento potrebbero essere più adatte in questo caso, in quanto potrebbero anche aumentare l’urgenza di una vendita.
Monitoraggio delle metriche in tempo reale
Le visualizzazioni in tempo reale hanno un effetto entusiasmante perché si vede la progressione in tempo reale della metrica tracciata. Gli enti di beneficenza e le organizzazioni non profit utilizzano spesso questo tipo di widget grafici.
GoFundMe è la più grande piattaforma di crowdfunding del pianeta e ogni raccolta fondi ha un termometro o una barra di monitoraggio dei progressi che si riempie all’avvicinarsi di un obiettivo:
I contatori animati o le infografiche possono aiutare a mostrare l’impatto in tempo reale dei vostri prodotti e servizi. Ad esempio, il sito principale di WordPress.org ha una pagina dedicata per visualizzare il numero di download della piattaforma principale che si aggiorna ogni minuto:
Kinsta utilizza anche un grafico di conteggio per aiutarvi a monitorare il tempo di uptime del sito attraverso i nostri diversi servizi:
Questa strategia di aggiornamento “live” può avere applicazioni pratiche che non si limitano a fare sfoggio di sé. In alcuni casi è necessario avere una conoscenza aggiornata di alcune metriche.
Dati analitici interni
Il monitoraggio delle prestazioni ha un’ampia portata. Può essere una strategia di misurazione dei KPI in prima linea o una panoramica personalizzata di una particolare metrica. Google Analytics è un buon esempio di rappresentazione efficace dei dati di un sito di nicchia:
DeploymentHawk, l’applicazione di auditing di Google Lighthouse, utilizza una serie di grafici, diagrammi, contatori e altro ancora per snocciolare i numeri e visualizzare i risultati di un report:
Anche lo strumento APM (Application Performance Monitoring) di Kinsta e la dashboard MyKinsta fanno lo stesso, utilizzando diversi tipi di visualizzazione dei dati a seconda delle metriche da visualizzare:
La gamification può sempre essere utile se avete degli obiettivi di completamento da raggiungere. Todoist lo fa utilizzando grafici di base a barre e a linee insieme al suo sistema di punti “karma”:
Infine, alcune organizzazioni non profit rendono pubblici i loro risultati interni. Questo crea una dicotomia unica tra la presentazione al pubblico e l’utilizzo dei dati come barometro interno. Ad esempio, la Gates Foundation prende la sua filosofia e visione interna, la applica al futuro e, a sua volta, crea un eccellente esempio di statistica predittiva:
Grazie a questa flessibilità nel tipo di visualizzazione e nell’applicazione, potete anche sfruttare l’adattabilità dei widget grafici. Il resto di questo post vi mostrerà come farlo all’interno di WordPress.
Plugin per implementare i widget grafici per WordPress
Naturalmente, per implementare i widget grafici su WordPress, dovrete utilizzare un plugin. Nelle prossime sezioni vedremo alcune delle migliori opzioni disponibili, in ordine sparso.
1. Visualizer: grafici e diagrammi
Visualizer di ThemeIsle è una solida scelta di plugin grafici gratuiti. Supporta diversi tipi di grafici ed è semplice da usare, così come gli altri temi e plugin.
Offre quattro diversi tipi di grafici, un editor di dati con un’interfaccia simile a un foglio di calcolo e numerose opzioni di personalizzazione. Il plugin si integra anche con Google Charts (e altre API di Google). Tuttavia, sebbene questo plugin disponga di tutte le funzionalità, è necessario pagare la versione premium ($199 all’anno) per accedere a più tipi di grafici e di editing.
La versione gratuita, tuttavia, è adatta alla maggior parte degli utenti, soprattutto per la visualizzazione di dati basilari ma splendidi.
2. Data Tables Generator di Supsystic
A prima vista, Data Tables Generator non sembra adatto a questo elenco di plugin per widget grafici per WordPress. Dopo tutto, come suggerisce il nome, è possibile creare solo tabelle di dati testuali. Questo vale per la versione gratuita, ma l’edizione premium include molte più funzionalità, tra cui grafici e diagrammi.
La buona notizia è che le vostre creazioni possono avere un aspetto fantastico. Avete a disposizione ogni tipo di opzione di visualizzazione, come grafici a barre e a linee, grafici a ciambella, grafici a bolle e altro ancora. Riteniamo inoltre che le opzioni di ordinamento e filtraggio siano all’avanguardia.
Questo significa che il plugin è perfetto per i siti che necessitano di un alto livello di interattività, soprattutto se hanno bisogno di tabelle di dati e di rappresentazioni visive dei dati.
Nonostante ciò, nella versione gratuita non sono disponibili grafici o diagrammi. Tuttavia, con una licenza a vita del costo di 89 dollari, Data Tables Generator è un affare per le funzionalità che offre.
3. amCharts: grafici e mappe
Il plugin amCharts è unico nel suo genere in quanto si collega a un Content Delivery Network (CDN) esterno per fornire la sua libreria. Per questo motivo, il plugin aiuta solo a collegare le librerie JavaScript a WordPress piuttosto che a creare direttamente i grafici.
Le funzionalità di amCharts sono ampie e offrono un alto livello di personalizzazione. Tuttavia, dovrete utilizzare l’interfaccia di amCharts per creare i vostri widget grafici, il che significa passare da una piattaforma all’altra.
Se avete bisogno di una serie di tipi di grafici diversi e non avete problemi a utilizzare un’interfaccia di terze parti, amCharts potrebbe fare al caso vostro. Tuttavia, non esiste un livello gratuito per accedere a grafici e diagrammi, quindi dovrete acquistare una licenza premium a partire da 80 dollari all’anno.
4. Graphina: grafici e diagrammi di Elementor
Se utilizzate Elementor, avete già a disposizione alcune opzioni di widget grafici all’interno del page builder. Tuttavia, Graphina arricchisce il tutto con numerosi grafici, diagrammi e altri tipi di visualizzazione di qualità.
Questo plugin ha il maggior numero di tipi di grafici e di design in un plugin gratuito per widget grafici e ha una profonda integrazione con Elementor e Divi. Inoltre, dispone di alcune delle opzioni di personalizzazione più complete disponibili in qualsiasi plugin, per non parlare di quelli gratuiti.
Sembra incredibile, ma la versione premium aumenta ulteriormente le funzionalità e rende Graphina il plugin per widget grafici più completo per WordPress. Naturalmente, per poter usufruire di tutte queste funzionalità dovrete avere Elementor (o Divi), il che potrebbe essere un ostacolo. Per 49 $, tuttavia, potrebbe valere la pena passare a uno di questi popolari page builder.
5. wpDataTables
Come Data Tables Generator, wpDataTables non si concentra principalmente su grafici e diagrammi. Tuttavia è possibile farlo con il plugin e i risultati sono di qualità. I siti che hanno a che fare con grandi e complessi insiemi di dati vorranno dare un’occhiata a questo plugin.
Come ci si aspetterebbe, ci sono più opzioni per creare tabelle, ma c’è anche l’integrazione con Google Charts e Charts.js per offrirvi 15 diversi tipi di visualizzazione. È in grado di gestire grandi insiemi di dati e le opzioni di importazione delle fonti sono fantastiche. potete inserire dati da Excel, XML, file CSV, JSON e persino array PHP se avete esperienza di sviluppo.
Tuttavia, a causa del focus secondario sui grafici, non è così semplice costruirli con wpDataTables. Questa curva di apprendimento, oltre alla quantità di funzionalità nascoste dietro l’edizione premium (a partire da 39 dollari all’anno), potrebbe indurvi a guardare altrove.
6. Ninja Charts
L’ultimo plugin della nostra lista è completamente gratuito e non prevede prezzi premium. Ninja Charts potrebbe essere la soluzione giusta se siete alle prime armi con la visualizzazione dei dati, ma offre le funzionalità necessarie per competere con i migliori.
Offre un’ottima selezione di tipi di grafici e dà la possibilità di personalizzarli in base alle proprie esigenze. L’interfaccia è semplice e offre una profonda integrazione con un altro plugin dello stesso sviluppatore, Ninja Tables.
Tuttavia, ci sono delle limitazioni. Alcuni utenti lamentano la mancanza di funzionalità di base come l’aggregazione dei dati, ad esempio. Tuttavia, il prezzo è imbattibile e riteniamo che, grazie alle sue caratteristiche, possa essere adatto a molti siti diversi.
Come aggiungere widget grafici su WordPress con il plugin Visualizer
Vediamo rapidamente come aggiungere un widget grafico a un sito WordPress. Utilizzeremo Visualizer, dato che ci è piaciuto abbastanza da renderlo il nostro preferito.
Tuttavia, questo non è un tutorial su Visualizer. Per questo motivo, i passi che faremo qui potrebbero essere diversi da quelli della soluzione che avete scelto. A tal proposito, installate e attivate il plugin che preferite e poi create un nuovo grafico.
In Visualizer, questa opzione è disponibile al momento dell’installazione:
Molto probabilmente ci sarà un pulsante Aggiungi nuovo grafico da qualche parte nel pannello di amministrazione del plugin:
Una volta cliccato sul pulsante e selezionato il tipo di grafico, dovrete inserire i dati. La versione gratuita di Visualizer supporta solo la modifica manuale, ma il vostro plugin potrebbe offrire integrazioni e opzioni di importazione per diversi strumenti:
Successivamente, controllate le opzioni di personalizzazione a vostra disposizione. Visualizer le include nella schermata di creazione del grafico. Potete impostare ogni tipo di aspetto, come la posizione del titolo, le etichette degli assi, le linee della griglia, le dimensioni e il posizionamento del grafico e molto altro ancora:
Il passo finale consiste nell’incorporare il vostro grafico o diagramma nel vostro sito. Molti plugin utilizzano degli shortcode per questo scopo, il che significa che dovrete fare un semplice copia e incolla nel post o nella pagina desiderata:
Visualizer fornisce anche un blocco per questo scopo, comodo e in linea con il design moderno di WordPress.
Pratiche tipiche per la visualizzazione dei widget grafici
È importante considerare alcuni aspetti nella presentazione di grafici e diagrammi. In poche parole, trattateli come un contenuto importante e d’impatto e cercate di limitare il numero di widget da visualizzare. Per approfondire, però, considerate quanto segue:
- Posizionamento. I widget devono avere una collocazione naturale all’interno del flusso dei contenuti, proprio come le immagini e i video. I widget grafici spesso si trovano a cavallo tra media e contenuti.
- Velocità di caricamento. Assicuratevi di monitorare le prestazioni del sito dopo aver aggiunto i widget. Alcuni, infatti, potrebbero avere un impatto su di esse.
- Accessibilità. Anche se state offrendo dati visivi, assicuratevi di includere un testo alt appropriato e di poter navigare tramite tastiera. Questo aiuta tutti gli utenti ad accedere ai vostri widget, indipendentemente dalle capacità visive.
Per quanto riguarda le prestazioni, si tratta di un aspetto da tenere in considerazione. Ci sono molti aspetti che possono influire sulla velocità del sito, il che è logico, visto il carico della grafica aggiuntiva. Il nostro consiglio è quello di utilizzare gli SVG, ove possibile. Sono più performanti delle immagini raster per i grafici e le icone semplici e hanno una migliore scalabilità.
Anche il lazy loading e la cache possono essere d’aiuto in questo caso, poiché entrambi limitano il caricamento dei grafici in modi diversi. Se scegliete di prelevare i dati da fonti esterne, assicuratevi di scegliere connessioni efficienti per ridurre al minimo il numero di richieste HTTP. L’approccio migliore e ottimale è quello di ospitare i dati sul server del sito, anche se la decisione potrebbe non essere sotto il vostro controllo.
Riepilogo
I widget grafici per WordPress permettono di rappresentare i tipici dati testuali sul vostro sito. Questo metodo di presentazione e visualizzazione dei dati può trasformare informazioni complesse in un formato più digeribile. Potete rappresentare questi dati utilizzando grafici, diagrammi, mappe interattive e molto altro.
Il plugin giusto per questo lavoro è fondamentale e in questo post ne abbiamo visti molti. Visualizer è un’ottima opzione, così come Graphina. Tuttavia, la scelta dello strumento giusto dipende dalle vostre esigenze. Può indubbiamente avere un impatto enorme e positivo sul vostro sito e sul suo engagement.
I widget grafici per WordPress sono abbastanza importanti da essere implementati? Ci piacerebbe leggere le vostre opinioni nella sezione commenti qui sotto!
Lascia un commento