In veel situaties kan het presenteren van gegevens in een aantrekkelijk format, een die gemakkelijk te begrijpen is, veel voordelen bieden. Met grafische widgets voor WordPress kun je de rauwe cijfers en statistieken omzetten in een visuele en informatieve weergave die mensen aanspreekt. Meestal komt dit in de vorm van een plugin, waarmee je binnen WordPress met die gegevens kunt werken.
In dit artikel verkennen we grafische widgets voor WordPress, inclusief de verschillende soorten die je kunt gebruiken, de situaties waarin je ze kunt gebruiken en nog veel meer. In de tweede helft van het artikel zetten we een aantal plugins op een rij die je kunnen helpen bij het implementeren van grafische widgets en laten we je zien hoe je er een kunt gebruiken voor je eigen behoeften.
Grafische widgets in WordPress
Websites (waaronder die met WordPress) gebruiken twee soorten widgets: grafische en op tekst gebaseerde. Typische tekstwidgets kunnen boeiend zijn, maar grafische widgets geven informatie in een boeiender formaat weer.
Deze widgets hebben dynamische componenten die verschillende visuele weergaven gebruiken – zoals grafieken, kaarten en voortgangsbalken – om complexe informatie in één oogopslag over te brengen. Dit kan je helpen om beter met je lezers te communiceren, waardoor ze je gegevens snel begrijpen en interpreteren. Het kan ook je gebruikersbetrokkenheid en retentie verbeteren.
Hoewel er verschillende manieren zijn om je gegevens te presenteren, hebben grafische widgets een paar elementen gemeen:
- Ze geven gegevens op een dynamische manier weer.
- Je kunt interactieve elementen aanbieden om gebruikers te helpen in je gegevens te ‘duiken’.
- Ongeacht het ontwerp van je site, kun je je widgets daaraan aanpassen.
- Er zijn veel gevallen waarin je realtime updates kunt bieden van de gegevens die je presenteert.
Grafische widgets zijn echter niet alleen bedoeld om visuele flair aan je site toe te voegen. Ze maken een groot deel uit van de visualisatie van en interactie met je ruwe data.
Waarom grafische widgets je kunnen helpen bij de presentatie van je gegevens op je site
Er zijn veel voordelen verbonden aan het gebruik van afbeeldingen om een boodschap over te brengen. Over het algemeen is visuele content big business en superbelangrijk voor online marketing.
Voor jou en je gegevens zijn er nog veel meer positieve punten om rekening mee te houden:
- Verbeterde visualisatie van gegevens. Complexe datasets kunnen toegankelijker worden gemaakt, zodat gebruikers trends en patronen snel begrijpen. Ze kunnen ook de manier waarop je informatie levert vereenvoudigen door veelzijdige, aanpasbare en verteerbare visuele indelingen te gebruiken.
- Verbeterde betrokkenheid van gebruikers. Interactieve elementen geven gebruikers de mogelijkheid om hun tijd op locatie en hun algemene betrokkenheid te verbeteren.
- Professionele esthetiek. Als je het ontwerp goed aanpast, kunnen widgets de visuele aantrekkingskracht van je site vergroten. Deze gepolijste en professionele uitstraling kan je gegevenspresentatie een voorsprong geven.
Visuele informatie heeft vaak een streepje voor op tekst op welk gebied dan ook, wat betekent dat je belangrijke gegevenspunten kunt presenteren op een manier waardoor ze ‘blijven hangen’ Daarom is het een topprioriteit om ze op de juiste manier op je site te gebruiken.
Wanneer grafische widgets te gebruiken op je WordPress website
Te veel van het goede wordt repetitief en verzadigend. Dit betekent dat je grafische widgets met zorg en aandacht moet gebruiken.
Het goede nieuws is dat er genoeg situaties zijn waarin je grafische widgets kunt gebruiken. Het duidelijkste moment om grafieken te gebruiken is wanneer je complexe concepten moet vereenvoudigen voor je lezers. Er zijn echter ook andere nichegevallen:
- Het presenteren van complexe datasets, waarbij je grote hoeveelheden gegevens of ingewikkelde relaties tussen gegevenspunten moet laten zien.
- Trends in de tijd benadrukken en veranderingen of patronen in gegevens over verschillende tijdsperioden weergeven. Je kunt zelfs doelen, mijlpalen of groeicijfers weergeven.
- Meerdere variabelen vergelijken om de relaties of verschillen tussen verschillende gegevenscategorieën te illustreren.
- Geografische gegevens weergeven voor specifieke locaties of wanneer je gegevens een ruimtelijke context nodig hebben.
Je zou zelfs grafische widgets kunnen gebruiken als je gebruikersinteractie nodig hebt, zoals voor dynamische rapporten of andere dashboards. Het belangrijkste is om te beslissen of het visueel weergeven van je gegevens het begrip en de betrokkenheid zal vergroten ten opzichte van andere benaderingen.
Kortom, als de visuele indeling waarde en duidelijkheid geeft aan je gegevens, dan passen ze waarschijnlijk goed bij een grafische widget.
De verschillende soorten grafische widgets voor WordPress
Datavisualisatie zelf is er in verschillende vormen, en elk weergavetype past bij verschillende gegevens en presentatiebehoeften. We zullen hier niet ingaan op de details van elke manier waarop je je gegevens kunt presenteren, hoewel er een paar typische en opvallende opties zijn om op te noemen.
Typische grafieken zoals staafdiagrammen, taartdiagrammen, lijndiagrammen en vlakdiagrammen zijn altijd een goede keuze voor gegevensvisualisatie. Deze vormen de basis, en je ziet ze dan ook vaak:
Scatterplots zijn iets ingewikkelder, maar laten je wel goed de relatie tussen twee variabelen zien:
Kaarten kunnen er in verschillende vormen zijn. Heat maps hebben niche-toepassingen, maar gebruiken kleurverlopen om de intensiteit van datasets weer te geven. Een interactieve wereldkaart kan goed zijn als je interactiviteit nodig hebt op basis van locaties:
Tellers en voortgangsbalken zijn meer voor mijlpalen. Hier gebruik je cijfertellers die dynamisch tellen tot een eindwaarde. Ronde voortgangsbalken kunnen helpen bij het weergeven van voltooide percentages. Je kunt dit ook doen met een lineaire horizontale of verticale balk:
Zelfs afbeeldingsgalerijen, lightboxes en schuifbalken kunnen je helpen om je gegevens te presenteren in meerdere dia’s, met overlays of bijna als een verhaalgedreven gebeurtenis. Dit is waar tijdlijnvisualisaties een rol kunnen spelen, net als processtromen. Een soort datavisualisatie die je veel ziet op websites met fotografiehandleidingen is een ‘Voor/Na vergelijking’
Hiermee kun je twee versies van een afbeelding vergelijken met behulp van een dynamische schuifregelaar die over de afbeelding sleept en de andere onthult. Dit zal misschien niet veel gebruikt worden in jouw gebruikssituaties, maar onthoud: elk visualisatietype heeft een ideale toepassing.
Waar je grafische widgets kunt gebruiken (inclusief voorbeelden)
Het type visualisatie dat je gebruikt is belangrijk, maar hoe je het gebruikt (en waar) is ook belangrijk. Dat wil zeggen, er zijn verschillende toepassingen waarbij het gebruik van grafische widgets veel voordeel oplevert.
Je zult zien dat er naast typische use cases ook toepassingen zijn die je vaak ziet, maar die je niet associeert met datavisualisatie. In de volgende paragrafen zullen we een paar van deze toepassingen behandelen.
Zakelijke toepassingen
Een van de ‘go-to’ implementaties van grafische widgets is om je belangrijkste statistieken te laten zien. Voor bedrijven is dit een duidelijke winst om hun gegevens op een aantrekkelijke manier te presenteren. Een staafdiagram is gemakkelijk te lezen met de juiste aswaarden en helpt bij het visualiseren van verkooptrends in de loop van de tijd of het vergelijken van verschillende producten of diensten.
Target is een van de waarschijnlijk miljoenen bedrijven die dit gebruiken om de jaarlijkse omzetgroei te laten zien:
Dit laat ook zien hoe deze eenvoudige presentaties de relatie tussen verschillende statistieken kunnen illustreren, zoals de kosten voor klantenwerving of de levenslange waarde. Gestapelde staafdiagrammen kunnen dit soort vergelijkingen ook weergeven. WordPress gebruikt deze benadering in de Plugin Directory om de uitsplitsing weer te geven van welke versie van een plugin gebruikers installeren:
Taartdiagrammen en donutdiagrammen zijn geweldig als een bedrijf gegevens wil laten zien over zijn klantenbestand. Vaak wordt dit gesegmenteerd op leeftijd, locatie of een andere relevante factor. Elementor gebruikt een coole en unieke deeltjesvisualisatie om de grootste gebruikersbestanden te laten zien:
In andere gevallen kun je ervoor kiezen om mijlpalen van een bedrijf of de voortgang van een project te laten zien. Flourish gebruikt een tijdlijn om zijn geschiedenis te laten zien, wat invloed kan hebben op merkloyaliteit:
In feite loopt e-commerce parallel aan algemene zakelijke toepassingen, dus alles wat hier staat zou ook van toepassing kunnen zijn op een winkel. Toch zijn er ook voor deze branche specifieke manieren om gegevens te visualiseren.
E-commerce statistieken
Over aankoopbeslissingen moet je vaak een paar seconden nadenken, dus het is cruciaal om klanten snel de juiste informatie te geven. Productvergelijkingen met behulp van staafdiagrammen of radardiagrammen helpen je bij het vergelijken van kenmerken of specificaties van verschillende producten, maar dat is nog maar het begin.
SRFACE gebruikt bijvoorbeeld een interactieve stijlgids om de specificaties van zijn wetsuits uit te leggen en het uiterlijk van elke variant te visualiseren:
Het komt dicht in de buurt van een zakelijke toepassing, maar je kunt ook grafieken en diagrammen gebruiken om bezoekers inzicht te geven in trends in productadoptie. De WordPress Theme Directory doet dit met staafdiagrammen:
Je kunt grafische widgets overal plaatsen waar je anders tekst zou gebruiken. Veel e-commerce winkels gebruiken bijvoorbeeld eenvoudige contrasterende tekst voor voorraadberekeningen. Maar voortgangsbalken passen hier misschien beter, omdat ze ook de urgentie van een verkoop kunnen verhogen.
Real-time metrics bijhouden
Real-time visualisaties geven een fijn gevoel omdat je een live verloop ziet van de bijgehouden metric. Goede doelen en non-profits gebruiken dit soort grafische widgets vaak.
GoFundMe is het grootste crowdfundingplatform ter wereld en elke fondsenwerver krijgt een thermometer of voortgangsbalk die zich vult als een doel nadert:
Geanimeerde tellers of infographics kunnen helpen om de real-time impact van je producten en diensten te laten zien. De hoofdwebsite WordPress.org heeft bijvoorbeeld een speciale pagina om het aantal downloads van het kernplatform weer te geven, die elke minuut wordt bijgewerkt:
Kinsta gebruikt een grafiek om je te helpen de uptime van je site over onze verschillende services te monitoren:
Deze ‘live’ update-strategie kan andere praktische toepassingen hebben dan alleen showboating en flair. In sommige gevallen heb je actuele kennis nodig van bepaalde statistieken.
Interne analyses
Prestatiemonitoring heeft een breed bereik. Het kan een frontline, KPI meetstrategie zijn, of een gepersonaliseerd overzicht van een bepaalde metric. Google Analytics is een goed voorbeeld van het op een boeiende manier weergeven van een schat aan gegevens over niche sites:
Google Lighthouse auditing app DeploymentHawk gebruikt een aantal verschillende grafieken, diagrammen, tellers en meer om de cijfers te laten zien en de resultaten van een rapport te visualiseren:
De Kinsta Application Performance Monitoring (APM) tool en het MyKinsta dashboard doen dit ook en gebruiken veel verschillende soorten datavisualisatie, afhankelijk van de statistieken die je wilt zien:
Gamification kan altijd helpen als je voltooiingsdoelen moet halen. Todoist doet dit met basis staaf- en lijndiagrammen naast het ‘karma’ puntensysteem:
Tot slot maken sommige non-profitorganisaties hun interne bevindingen openbaar. Dit creëert een unieke dichotomie tussen presentatie voor het publiek en het gebruik van gegevens als interne barometer. De Gates Foundation neemt bijvoorbeeld haar interne filosofie en visie, past die toe op de toekomst en creëert zo een uitstekend voorbeeld van voorspellende statistieken:
Met deze flexibiliteit in visualisatietype en -toepassing kun je ook gebruik maken van de aanpasbaarheid van grafische widgets. De rest van dit artikel laat je zien hoe je dit kunt doen binnen WordPress.
Plugins die je helpen bij het weergeven van grafische widgets voor WordPress
Om grafische widgets voor WordPress te implementeren, gebruik je natuurlijk een plugin. In de volgende paragrafen bekijken we enkele van de beste opties die je hebt – in willekeurige volgorde.
1. Visualisator: Tables and Graphs Manager
ThemeIsle’s Visualizer is een goede keuze voor gratis grafische widget plugins. Het ondersteunt verschillende soorten grafieken en is eenvoudig te gebruiken, net als de andere thema’s en plugins.
Het biedt vier verschillende soorten grafieken, een gegevenseditor met een spreadsheet-achtige interface en veel aanpassingsmogelijkheden. De plugin integreert ook met Google Charts (en andere Google API’s). Hoewel deze plugin volledige functionaliteit biedt, moet je betalen voor de premium versie ($199 per jaar) om toegang te krijgen tot meer grafieken en bewerkingstypen.
De gratis versie zal echter geschikt zijn voor de meeste gebruikers, vooral voor eenvoudige maar prachtige datavisualisatie.
2. Data Tables Generator van Supsystic
Op het eerste gezicht lijkt Data Tables Generator niet te passen in deze lijst van grafische widget plugins voor WordPress. Zoals de naam al doet vermoeden, kun je immers alleen gegevenstabellen met tekst maken. Dit geldt voor de gratis versie, maar de premium editie bevat veel meer functionaliteit, waaronder grafieken en diagrammen.
Het goede nieuws is dat je creaties er fantastisch uit kunnen zien. Je hebt allerlei visualisatieopties, zoals staaf- en lijndiagrammen, donutdiagrammen, bubbelgrafieken en meer. Wij vinden ook dat de sorteer- en filteropties toonaangevend zijn.
Dit betekent dat de plugin zeer geschikt is voor sites die een hoge mate van interactiviteit nodig hebben, vooral als ze ook gegevenstabellen en meer visuele gegevensweergaven nodig hebben.
Desondanks zijn er geen grafieken of diagrammen beschikbaar in de gratis versie. Met een levenslange licentie die $89 kost, is Data Tables Generator echter een koopje voor de functionaliteit die je krijgt.
3. amCharts: Charts and Maps
De amCharts plugin is uniek omdat het verbinding maakt met een extern Content Delivery Network (CDN) om zijn bibliotheek te leveren. Als zodanig helpt de plugin je alleen om de JavaScript bibliotheken met WordPress te verbinden in plaats van de grafieken direct te maken.
De functionaliteit van amCharts is uitgebreid en je kunt het op een hoog niveau aanpassen. Je moet echter de amCharts interface gebruiken om je grafische widgets te maken, wat betekent dat je moet schakelen tussen twee platforms.
Als je een gevarieerde set van grafiektypes nodig hebt en tevreden bent met de interface van derden, dan zou amCharts voor jou kunnen werken. Er is echter geen gratis niveau voor toegang tot grafieken, dus je hebt een premium licentie nodig die begint vanaf $80 per jaar.
4. Graphina – Elementor Graphs and Tables
Als je Elementor gebruikt, heb je al een aantal grafische widgetopties binnen de paginabouwer. Graphina vult dit echter aan met een heleboel kwaliteitsgrafieken, grafieken en andere visualisatietypes.
Deze plugin heeft het grootste aantal grafiektypes en -ontwerpen in een gratis grafische widget plugin en heeft een diepe integratie met Elementor en Divi. Je hebt ook enkele van de meest uitgebreide aanpassingsopties die beschikbaar zijn in een plugin, laat staan een gratis plugin.
Het lijkt ongelooflijk, maar de premium versie breidt de functionaliteit nog verder uit en maakt Graphina de meest diepgaande grafische widget plugin voor WordPress. Natuurlijk heb je Elementor (of Divi) nodig om te kunnen profiteren van de features, wat een obstakel kan zijn. Voor $49 kan het echter de moeite waard zijn om over te stappen op een van deze populaire paginabouwers.
5. wpDataTables
Net als Data Tables Generator is wpDataTables niet primair gericht op grafieken en diagrammen. Je kunt het echter wel met de plugin doen, en de resultaten zijn van hoge kwaliteit. Websites die te maken hebben met grote, complexe datasets zullen deze plugin eens willen bekijken.
Zoals je zou verwachten, zijn er hier meer opties om tabellen te maken, maar er is integratie met zowel Google Charts als Charts.js om je 15 verschillende visualisatietypes te geven. Het is bedreven in het verwerken van grote datasets en de opties voor het importeren van bronnen zijn fantastisch. Je kunt gegevens invoeren vanuit Excel, XML, CSV-bestanden, JSON en zelfs PHP arrays als je ontwikkelervaring hebt.
Vanwege de secundaire focus op grafieken is het echter niet zo eenvoudig om ze te bouwen met wpDataTables. Deze leercurve, naast de hoeveelheid functionaliteit die schuilgaat achter de premium editie (vanaf $39 per jaar), kan ervoor zorgen dat je ergens anders gaat kijken.
6. Ninja Charts
De laatste plugin op onze lijst is helemaal gratis, zonder premium prijzen. Ninja Charts zou de juiste oplossing kunnen zijn als je nieuw bent op het gebied van datavisualisatie, maar biedt de functionaliteit om je concurrentie voor te blijven.
Het biedt een grote selectie aan grafiektypen en geeft je de mogelijkheid om ze aan te passen aan je behoeften. De interface is rechttoe rechtaan en het biedt diepgaande integratie met een andere plugin van dezelfde ontwikkelaar, Ninja Tables.
Toch zijn er ook beperkingen. Sommige gebruikers klagen bijvoorbeeld over het ontbreken van basisfunctionaliteit zoals het samenvoegen van gegevens. Je kunt echter niet op tegen de prijs, en wij geloven nog steeds dat het geschikt is voor veel verschillende sites met wat het biedt.
Hoe grafische widgets toevoegen voor WordPress met de Visualizer plugin
Laten we snel het proces doorlopen om een grafische widget toe te voegen aan je WordPress website. We gebruiken Visualizer, omdat we het leuk genoeg vonden om er onze favoriet van te maken.
Dit is echter niet bedoeld als een Visualizer tutorial. Als zodanig kunnen de stappen die we hier nemen verschillen van die van de door jou gekozen oplossing. Met dit in gedachten installeer en activeer je de plugin van je keuze en maak je een nieuwe grafiek.
In Visualizer krijgen we die optie bij de installatie:
Waarschijnlijk is er ergens in het beheerpaneel van de plugin een knop Add new chart:
Zodra je op de knop hebt geklikt en je grafiektype hebt geselecteerd, moet je je gegevens invoeren. De gratis versie van Visualizer ondersteunt alleen handmatige bewerking, maar je plugin zou integraties en importopties kunnen bieden voor verschillende tools:
Bekijk vervolgens de aanpassingsopties die beschikbaar zijn. Visualizer bevat deze in het scherm voor het maken van grafieken. Je hebt instellingen voor allerlei aspecten, zoals de titelpositie, aslabels, rasterlijnen, grootte en plaatsing van de grafiek en nog veel meer:
De laatste stap is het invoegen van je grafiek op je site. Veel plugins gebruiken hiervoor shortcodes, wat betekent dat je deze eenvoudig kunt kopiëren en plakken in je gewenste bericht of pagina:
Visualizer biedt hier ook een Block voor, wat handig is en past bij het moderne WordPress design.
Typische manieren om je grafische widgets weer te geven
Het is belangrijk om met een paar aspecten rekening te houden bij het presenteren van je grafieken en diagrammen. In een notendop: behandel ze als de belangrijke en impactvolle inhoud die ze zijn en beperk het aantal widgets dat je weergeeft. Maar om er dieper op in te gaan, kun je het volgende overwegen:
- Plaatsing. Je widgets moeten op een natuurlijke manier in je contentflow passen, net zoals je afbeeldingen en video’s dat doen. Grafische widgets bevinden zich vaak op de grens tussen media en inhoud.
- Laadsnelheid. Zorg ervoor dat je de prestaties van je site in de gaten houdt nadat je widgets hebt toegevoegd. Sommige kunnen de prestaties van je site beïnvloeden.
- Toegankelijkheid. Hoewel je visuele gegevens aanbiedt, moet je ervoor zorgen dat je passende alt-tekst toevoegt en dat je via het toetsenbord kunt navigeren. Dit helpt alle gebruikers toegang te krijgen tot je widgets, ongeacht hun gezichtsvermogen.
Als het gaat om prestaties, is dit iets om rekening mee te houden. Er zijn veel facetten die de snelheid van je site kunnen beïnvloeden, wat logisch is gezien de belasting van je extra afbeeldingen. Ons advies is om waar mogelijk SVG’s te gebruiken. Ze presteren beter dan rasterafbeeldingen voor eenvoudige grafieken en pictogrammen en zijn beter schaalbaar.
Lazy loading en caching kunnen hier ook helpen, omdat beide het laden van je grafieken op verschillende manieren beperken. Als je ervoor kiest om gegevens van externe bronnen te halen, zorg er dan voor dat je efficiënte verbindingen kiest om het aantal HTTP-verzoeken te minimaliseren. De beste en meest optimale aanpak is om die gegevens op de server van je site te hosten, hoewel je daar misschien geen controle over hebt.
Samenvatting
Met grafische widgets voor WordPress kun je typische tekstgegevens op je site visualiseren. Deze methode van gegevenspresentatie en -visualisatie kan complexe informatie omzetten in een beter verteerbare format. Je kunt deze gegevens weergeven met grafieken, diagrammen, interactieve kaarten en meer.
De juiste plugin voor deze taak is cruciaal en we behandelden er veel in dit artikel. Visualizer is een geweldige optie, net als Graphina. De juiste tool hangt echter af van je eigen behoeften. Het kan ongetwijfeld een enorme, positieve impact hebben op je site en de betrokkenheid ervan.
Zijn grafische widgets voor WordPress belangrijk genoeg voor jou om te implementeren? We horen graag wat je ervan vindt in de comments hieronder!
Laat een reactie achter