Datenvisualisierung auf der Website: Mit Diagrammen, Karten und Tabellen mehr Interaktion erzielen

Datenvisualisierung gehört zu den wirksamsten Mitteln, um trockene Zahlen auf einer Website in Diagramme, Karten und interaktive Tabellen zu verwandeln und Besuchern schneller zu einer Entscheidung zu verhelfen. In diesem Beitrag zeige ich, wie ich für jede Frage das passende Diagramm wähle. Außerdem geht es um Barrierefreiheit, Ladezeit, Werkzeuge und Messung. Ich arbeite seit 2012 an Unternehmenswebsites; deshalb bekommen Sie hier einen Entscheidungsrahmen aus der Praxis, keine Schablone.
Was ist Datenvisualisierung auf einer Website?
Datenvisualisierung bedeutet, Zahlen in visuelle Formen wie Diagramme, Infografiken, Karten oder interaktive Tabellen zu übersetzen. Auf einer Website soll sie Besuchern helfen, einen Vergleich, einen Trend oder einen Anteil in Sekunden zu erfassen. Ein gutes Diagramm zeigt also auf einen Blick, was ein langer Absatz nur mühsam erklärt.
Unternehmenswebsites brauchen das öfter, als man denkt. Zum Beispiel möchte ein Energieversorger Einsparungen zeigen. Ein Logistiker will Lieferzeiten belegen, und ein Softwareanbieter möchte die Leistung neuer Versionen darstellen. Stehen diese Zahlen nur im Fließtext, muss der Besucher sie im Kopf vergleichen. Ein Diagramm nimmt ihm diese Arbeit dagegen ab.
Allerdings braucht nicht jede Zahl ein Diagramm. Wenn Sie eine einzelne Kennzahl hervorheben wollen, wirkt eine große, fett gesetzte Zahl oft klarer als jede Grafik. Die erste Frage lautet deshalb immer: Was soll der Besucher mit diesen Daten vergleichen?
Warum steigern Diagramme die Interaktion der Besucher?
Diagramme steigern die Interaktion, weil sie passive Leser zu aktiven Entdeckern machen. Ein Besucher fährt mit der Maus über einen Balken, wählt ein Jahr oder sucht auf einer Karte seine Region. Solche kleinen Aktionen halten Menschen länger auf der Seite, und zudem bleiben die Inhalte besser im Gedächtnis.
Andererseits sollte Interaktion nie das einzige Ziel sein. Es ist schön, wenn Besucher mit einem Diagramm spielen. Entscheidend ist aber, ob das Diagramm sie zum nächsten Schritt führt. Fehlt zum Beispiel unter einem Preisvergleich der Button für ein Angebot, verpufft die Interaktion.
In meinen Projekten sehe ich vor allem ein Muster. Seiten mit eigener Datenvisualisierung erhalten häufiger Erwähnungen und Links von anderen Websites. Das stärkt die SEO somit indirekt. Trotzdem handelt es sich um eine Beobachtung aus der Praxis, nicht um eine Garantie. Wie Linkaufbau funktioniert, erkläre ich im Beitrag über Backlinks und Linkqualität.
Welcher Diagrammtyp passt zu welchen Daten?
Bei der Datenvisualisierung hängt der richtige Diagrammtyp von der Struktur Ihrer Daten und von der Frage des Besuchers ab. Eine falsche Wahl macht selbst korrekte Daten irreführend. Deshalb notiere ich zuerst die Frage und wähle dann das Diagramm.
| Frage des Besuchers | Gute Wahl | Besser vermeiden |
|---|---|---|
| Was ist größer? | Horizontales oder vertikales Balkendiagramm | 3D Balken, Tortendiagramm |
| Wie hat es sich entwickelt? | Liniendiagramm | Dutzende einzelne Balken |
| Welcher Anteil am Ganzen? | Gestapelter Balken oder Ring mit höchstens vier Segmenten | Torte mit zehn Stücken |
| Wo ist es am häufigsten? | Flächenkarte mit Farbskala | Rohe Zahlen ohne Bezug zur Bevölkerung |
| Hängen zwei Werte zusammen? | Streudiagramm | Liniendiagramm mit zwei Achsen |
| Ich brauche den exakten Wert | Sortierbare Tabelle | Diagramm ohne Beschriftung |
Die letzte Zeile ist wichtig. Sucht ein Besucher eine exakte Zahl, ist eine gut aufgebaute Tabelle manchmal die beste Datenvisualisierung. Das Diagramm zeigt also den Trend, die Tabelle dagegen das Detail.
Wann ist ein Tortendiagramm die falsche Wahl?
Ein Tortendiagramm ist die falsche Wahl, wenn es viele Segmente gibt oder die Werte nah beieinanderliegen. Das menschliche Auge vergleicht Winkel und Flächen nämlich ungenauer als Längen. Daher erkennt man den Unterschied zwischen 23 und 27 Prozent in einer Torte kaum. Im Balkendiagramm fällt er dagegen sofort auf.
Torten oder Ringe nutze ich nur, wenn ein Teil das Ganze klar dominiert. Ein Ring mit zwei Segmenten genügt zum Beispiel für die Aussage „die meisten unserer Kunden sind Konzerne“. Ab fünf Kategorien wechsle ich allerdings zu einem sortierten Balkendiagramm.
Eine dreidimensionale Torte ist fast immer ein Fehler. Die Perspektive lässt das vordere Stück größer wirken und verzerrt die Daten. Kurz gesagt: Die auffälligste Variante ist oft die am wenigsten ehrliche.
Infografik oder interaktives Diagramm: Was passt besser?
Eine Infografik erzählt eine Geschichte in einem festen Bild. Ein interaktives Diagramm lässt Besucher die Daten dagegen selbst erkunden. Beide Formen der Datenvisualisierung erfüllen verschiedene Zwecke, und keines ersetzt das andere.
- Infografiken eignen sich für Zusammenfassungen, die Menschen in sozialen Netzwerken teilen, in Präsentationen nutzen oder drucken.
- Interaktive Diagramme eignen sich für Daten mit vielen Kategorien, Jahren oder Regionen, in denen Besucher ihre eigene Situation suchen.
- Statische SVG Diagramme sind die ausgewogenste Lösung für Seiten mit wenigen Daten, die schnell laden müssen.
Das häufigste Problem bei Infografiken: wichtiger Text steckt im Bild. Die Google Richtlinien für Bilder raten davon ab, wichtigen Text in Bilder einzubetten. Schreiben Sie die zentralen Aussagen deshalb zusätzlich als HTML Text auf die Seite. So erreichen Suchmaschinen und Nutzer von Screenreadern den Inhalt ebenfalls.
Wo bringen interaktive Karten und Tabellen einen Mehrwert?
Interaktive Karten lohnen sich, wenn der Standort die Entscheidung prägt. Ein Hersteller mit Händlernetz, ein Dienstleister mit Filialen oder ein Exporteur mit vielen Zielmärkten gehört in diese Gruppe. Besucher finden dann ihre Region und erreichen den nächsten Ansprechpartner.
Interaktive Tabellen helfen Websites, die viele Produkte, technische Daten oder Preisoptionen vergleichen. Mit Sortierung, Filter und Suche finden Besucher die richtige Zeile unter Hunderten in Sekunden. Gerade Industrieunternehmen entlasten so ihren Vertrieb; mehr dazu lesen Sie im Beitrag über Websites für Industrieunternehmen.
Trotzdem gilt: Karten und Tabellen nie nur zur Dekoration einbauen. Für eine Firma mit fünf Filialen ist eine einfache Adressliste oft nützlicher als eine schwere Kartenbibliothek.
Wie wählen Sie Farben für die Datenvisualisierung?
In der Datenvisualisierung wählen Sie Farben nach Bedeutung, nicht nach Geschmack. Jede Farbe steht für eine Kategorie, einen Wert oder eine Betonung. Zufällige Farben ermüden das Auge und deuten außerdem Zusammenhänge an, die es gar nicht gibt.
Ich arbeite mit drei Palettentypen. Zunächst trennt eine kategoriale Palette unabhängige Gruppen, etwa Produktlinien. Dann zeigt eine sequenzielle Palette mit Abstufungen einer Farbe von hell nach dunkel, wo weniger und wo mehr ist. Schließlich läuft eine divergierende Palette von einer neutralen Mitte in zwei Richtungen und passt somit zu Wachstum und Rückgang.
Zudem zwinge ich Markenfarben nicht in jedes Diagramm. Hat die Markenpalette zwei sehr ähnliche Blautöne, kann sie im Diagramm niemand unterscheiden. In diesem Fall reserviere ich die Hauptfarbe für die Betonung und nutze für die übrigen Reihen neutrale Grautöne. Das Auge springt also direkt zur wichtigen Reihe. Farbwerte finden und testen Sie mit meinem Werkzeug für HTML Farbcodes.
Welche Regeln der Barrierefreiheit gelten für Diagramme?
Ein barrierefreies Diagramm liefert dieselbe Information auch Menschen, die Farben nicht unterscheiden, die Ansicht vergrößern oder einen Screenreader nutzen. Die WCAG 2.2 des W3C geben dafür einige Grundregeln vor. Ich nutze sie deshalb in jedem Unternehmensprojekt als Basis.
- Vermitteln Sie Information nie allein über Farbe (WCAG 1.4.1). Ergänzen Sie Muster, Formen oder direkte Beschriftungen.
- Halten Sie zwischen Diagrammelementen und Hintergrund mindestens einen Kontrast von 3:1 ein (WCAG 1.4.11). Hellgraue Linien auf Weiß scheitern daran oft.
- Streben Sie für normale Textbeschriftungen mindestens 4,5:1 an (WCAG 1.4.3).
- Bieten Sie für Inhalte ohne Text eine Textalternative an (WCAG 1.1.1). Bei komplexen Diagrammen heißt das: kurzer Alternativtext plus ausführliche Beschreibung.
Diese Regeln der barrierefreien Datenvisualisierung helfen weit mehr Menschen als nur Nutzern mit Einschränkungen. Auch wer bei Sonnenlicht aufs Smartphone schaut, profitiert davon. Barrierefreiheit verbessert also die Lesbarkeit Ihrer Diagramme insgesamt.
Wie schreiben Sie eine Textalternative für ein komplexes Diagramm?
Sie schreiben sie in zwei Ebenen: einen kurzen Alternativtext und eine längere Beschreibung direkt beim Diagramm. Auch das W3C Tutorial zu komplexen Bildern empfiehlt diesen zweistufigen Ansatz.
Der kurze Alternativtext nennt die Art des Diagramms und seine Kernaussage. Zum Beispiel: „Liniendiagramm zum Anteil der Onlinebestellungen am Gesamtumsatz über fünf Jahre; der Anteil steigt jedes Jahr.“ Die lange Beschreibung liefert dann die vollständigen Daten. Am praktischsten ist ein Link „Daten als Tabelle anzeigen“ unter dem Diagramm, der dieselben Zahlen in einer HTML Tabelle zeigt.
Diese Tabelle bringt zudem einen Bonus. Suchmaschinen lesen die Zahlen als Text, und auch KI gestützte Suchergebnisse finden so eine saubere Quelle für exakte Werte. Den Hintergrund erkläre ich im Beitrag Content für AI Overviews schreiben.
Wie beeinflussen Diagramme die Ladezeit?
Diagramme beeinflussen die Ladezeit auf drei Wegen. Zunächst zählt die Größe der geladenen Bibliothek. Dann folgt die Rechenzeit, die das Zeichnen braucht. Schließlich kann sich das Layout verschieben, während das Diagramm lädt. Alle drei Faktoren wirken somit direkt auf die Core Web Vitals.
Laut dem CLS Leitfaden auf web.dev sollte der Wert für Layoutverschiebungen für eine gute Nutzererfahrung bei 0,1 oder darunter liegen. Reservieren Sie keine Höhe für den Diagrammbereich, schiebt das Diagramm beim Laden den Text darunter nach unten. Die Lösung ist einfach: Geben Sie dem Container ein festes Seitenverhältnis oder eine Mindesthöhe.
Bei der Interaktion kommt außerdem INP ins Spiel. Ein Diagramm, das nach jedem Filterklick Tausende Punkte neu zeichnet, kann den Hauptthread des Browsers blockieren. Bei großen Datenmengen fasse ich die Daten daher lieber auf dem Server zusammen. Mehr dazu lesen Sie im Beitrag Wie beeinflusst die Ladezeit SEO?
SVG, Canvas oder statisches Bild: Was sollten Sie nutzen?
Datenmenge und Interaktionsbedarf entscheiden. SVG hält jeden Teil des Diagramms als eigenes Element. Es bleibt scharf, lässt sich mit CSS gestalten, und Beschriftungen für Barrierefreiheit sind leicht ergänzt. Bei Zehntausenden Punkten wird SVG allerdings schwer.
Canvas zeichnet das Diagramm auf eine einzige Pixelfläche. Bei sehr großen Datenmengen ist es deshalb schneller. Dafür bleiben seine Elemente für Screenreader zunächst unsichtbar. Wer Canvas nutzt, braucht also zwingend eine Textalternative und eine Datentabelle.
Ein statisches Bild, etwa ein PNG oder WebP Export, ist die leichteste Lösung für Daten, die sich nie ändern. Das Übersichtsdiagramm eines Jahresberichts passt zum Beispiel hierher. Verkleinern Sie die Datei vor dem Hochladen; dabei hilft mein Werkzeug Bild verkleinern. Kurz gesagt: SVG für kleine interaktive Daten, Canvas für riesige Datenmengen, ein optimiertes Bild für feste Daten.
Welche Werkzeuge eignen sich für Diagramme auf der Website?
Bei Werkzeugen für Datenvisualisierung bestimmen die Fähigkeiten Ihres Teams und die Häufigkeit der Aktualisierung die Wahl. Ein Marketingteam ohne Programmierkenntnisse hat andere Bedürfnisse als ein Entwicklerteam.
- Dienste ohne Code: Werkzeuge wie Datawrapper und Flourish erstellen aus Vorlagen schnell einbettbare Diagramme. Sie passen daher gut zu redaktionellen Inhalten.
- JavaScript Bibliotheken: Chart.js ist eine schlanke Option für einfache Diagramme. D3.js bietet volle Kontrolle, braucht aber mehr Einarbeitung. Apache ECharts kommt zudem gut mit großen Datenmengen zurecht.
- Dashboard Werkzeuge: Looker Studio eignet sich für internes Reporting. Auf einer öffentlichen Seite verlieren Sie allerdings Kontrolle über Tempo und Optik.
- Handgeschriebenes SVG: Ein einfaches Diagramm mit wenigen Balken braucht gar keine Bibliothek.
Bei eingebetteten Diensten sollten Sie auf eines achten. Das Diagramm lädt konkret von einem fremden Server. Wird dieser Dienst langsam oder stellt er den Betrieb ein, verschwindet das Diagramm auf Ihrer Seite. Für wichtige Seiten halte ich deshalb immer eine statische Ersatzversion bereit.
Helfen Diagramme bei der SEO?
Datenvisualisierung hilft der SEO indirekt. Suchmaschinen verstehen den Text und die Daten rund um ein Diagramm viel besser als das Diagramm selbst. Eine Zahl, die in einem Canvas Element steht, liest Google nicht zuverlässig als Text. Nennen Sie die Kernaussage daher in Überschrift, Bildunterschrift und Tabelle.
Eigene Daten sind dagegen ein echter SEO Vorteil. Visualisieren Sie eine eigene Umfrage, Branchendaten oder Kundenstatistiken, zitieren andere Websites Sie als Quelle. Solche Inhalte behalten ihren Wert zudem viel länger als ein gewöhnlicher Ratgeber.
Bieten Sie den Datensatz auch zum Download an, lohnt ein Blick in die Google Dokumentation zu strukturierten Daten für Datasets. Dieses Markup hilft, dass Ihr Datensatz in der Google Datensatzsuche erscheint. Die Grundlagen erkläre ich im Beitrag über Schema Markup. Den Code erstellen Sie außerdem schneller mit dem Schema Generator.
Wie machen Sie Diagramme auf dem Smartphone lesbar?
Damit ein Diagramm mobil lesbar bleibt, sollten Sie es neu denken, statt die Desktopversion zu verkleinern. Auf einem schmalen Bildschirm wird ein Balkendiagramm mit zwölf Monaten schnell zu einem Gewirr überlappender Beschriftungen.
Ich folge daher einigen Regeln. Erstens drehe ich vertikale Balken mobil in horizontale, damit Kategorienamen Platz haben. Zweitens entferne ich die Legende und beschrifte die Reihen direkt. Drittens öffnen sich Details per Antippen statt per Mauszeiger, denn Smartphones haben keine Maus.
Weniger Datenpunkte helfen mobil ebenfalls. Zeigen Sie zum Beispiel auf dem Desktop Tageswerte und mobil eine Wochenübersicht. Das Diagramm wird leichter, und der Haupttrend tritt somit klarer hervor. Die allgemeinen Prinzipien finden Sie im Beitrag Was ist Mobile First Design?
Welche irreführenden Diagrammfehler sind am häufigsten?
Fehler in der Datenvisualisierung entstehen meist aus Nachlässigkeit, nicht aus böser Absicht. Bemerken Besucher den Fehler allerdings, verlieren sie das Vertrauen in die ganze Website.
- Balkendiagramme, deren y Achse nicht bei null beginnt. Ein kleiner Unterschied wirkt dann riesig.
- Zwei Diagramme nebeneinander mit unterschiedlicher Skala. Besucher vergleichen die Balkenhöhe, nicht die Skala.
- Keine Quelle und kein Datum. Ohne beides fehlt einer Zahl somit jede Glaubwürdigkeit.
- Ein selektiver Zeitraum. Wer nur die gute Phase zeigt, verzerrt den Trend.
- Eine verschwiegene Stichprobengröße. Achtzig Prozent von zehn Befragten sind also etwas anderes als achtzig Prozent von tausend.
Machen Sie es sich zur Gewohnheit, unter jedes Diagramm Quelle, Datum und bei Bedarf die Stichprobe zu schreiben. Diese kleine Notiz stärkt die Glaubwürdigkeit deutlich.
Wie bereiten Sie Daten für die Datenvisualisierung vor?
Ein gutes Diagramm beginnt mit sauberen Daten. Prüfen Sie vor jeder Gestaltung, ob die Daten konsistent, aktuell und aus einer einzigen Quelle sind. Sonst transportiert ein schönes Diagramm eine falsche Aussage nur überzeugender.
In meinem Ablauf übertrage ich die Daten zunächst in eine Tabelle. Dann prüfe ich fehlende Werte, doppelte Zeilen und gemischte Einheiten. Steht eine Spalte in Tausend Euro und eine andere in Euro, ist das Diagramm von Anfang an falsch. Danach notiere ich kurz, was jede Spalte bedeutet.
Anschließend lege ich die Verantwortung für Aktualisierungen fest. Ändert sich das Diagramm jährlich oder monatlich, und wer kümmert sich darum? Ohne Antwort veraltet es binnen Monaten. Ein veraltetes Diagramm ist zudem schlimmer als gar keins, denn Besucher schließen daraus, dass niemand die Website pflegt. Warum Aktualität zählt, erkläre ich im Beitrag Content aktualisieren für SEO.
Sollten Sie Live Daten oder statische Daten zeigen?
Live Daten sind sinnvoll, wenn Besucher auf Basis der aktuellen Lage entscheiden. Statische Daten genügen dagegen überall dort, wo Sie Vergangenheit oder einen allgemeinen Trend beschreiben. Ein Preisdiagramm, das an Wechselkurse gekoppelt ist, sollte zum Beispiel live sein. Ihr Wachstumsdiagramm über fünf Jahre verliert dagegen nichts, wenn Sie es einmal im Jahr aktualisieren.
Live Daten haben allerdings versteckte Kosten. Das Diagramm fragt bei jedem Aufruf eine API ab. Wird diese langsam, bremst sie die Seite, und fällt sie aus, bleibt das Diagramm leer. Deshalb plane ich bei jedem Live Diagramm einen Cache und einen Fehlerzustand. Kommen keine Daten, sehen Besucher den letzten bekannten Wert samt Datum statt einer leeren Box.
Im Zweifel hilft eine Frage: Würde der Besucher anders entscheiden, wenn er die Daten von vor einer Stunde sähe? Wenn nicht, erzeugen Sie die Daten einmal täglich auf dem Server und liefern sie statisch aus. Das ist also schneller und zuverlässiger.
Wie gestalten Sie interaktive Filter?
Gestalten Sie interaktive Filter entlang der Unterscheidungen, nach denen Besucher am häufigsten fragen. Jede Spalte filterbar zu machen, wirkt verlockend. Ein Filterbereich mit zehn Optionen vertreibt viele Menschen allerdings, bevor sie das Diagramm überhaupt berühren.
- Starten Sie mit der aussagekräftigsten Standardansicht, damit Besucher die Kernaussage ohne Klick sehen.
- Begrenzen Sie die Filter möglichst auf drei. Jahr, Region und Produktgruppe decken die meisten Szenarien im Unternehmen ab.
- Wiederholen Sie den aktiven Filter im Diagrammtitel, damit Besucher wissen, was sie gerade sehen.
- Halten Sie Filter per Tastatur bedienbar und machen Sie den Fokus sichtbar.
So wird Interaktion von einer Last zu einer Abkürzung zur eigenen Frage des Besuchers. Allgemeine Prinzipien der Nutzbarkeit behandle ich im Beitrag UX und SEO in Einklang bringen.
Wie stärkt Data Storytelling ein Diagramm?
Data Storytelling ergänzt die Datenvisualisierung: Es bedeutet, ein Diagramm mit Kontext, Spannung und Schlussfolgerung zu präsentieren, statt es allein stehen zu lassen. Besucher erfahren so nicht nur die Zahl, sondern auch ihre Bedeutung. Dasselbe Diagramm bleibt dadurch deutlich besser im Kopf.
In der Praxis nutze ich ein Muster aus drei Teilen. Zunächst beschreibe ich die Lage: In der Branche sind Lieferzeiten lang. Dann zeige ich die Veränderung: Unsere Lieferzeiten sind in zwei Jahren gesunken, und das Diagramm belegt es. Schließlich sage ich, was das für den Besucher heißt: Ihre Bestellung kommt schneller an. Das Diagramm wird somit zum Beleg eines Arguments, nicht zur Dekoration.
Bei langen Berichten können Sie scrollgesteuertes Storytelling einsetzen, bei dem sich das Diagramm beim Scrollen schrittweise verändert. Das erhöht allerdings Entwicklungsaufwand und mobile Risiken. Ich reserviere es daher für Leuchtturminhalte wie Jahresberichte oder eigene Studien. Wie solche Inhalte Traffic bringen, erkläre ich im Beitrag Mit Content Marketing Website Traffic steigern.
Wo platzieren Sie ein Diagramm auf der Seite?
Platzieren Sie ein Diagramm direkt neben der Aussage, die es belegt. Schreiben Sie im Text „unsere Lieferzeiten sind in zwei Jahren gesunken“, gehört das Diagramm unmittelbar unter diesen Satz. Diagramme, die am Seitenende gesammelt stehen, verlieren ihren Kontext.
Geben Sie außerdem jedem Diagramm einen Titel mit Botschaft. Statt „Monatliche Lieferzeiten“ schreiben Sie etwa „Lieferzeit in zwei Jahren deutlich gesunken“. Das sagt Besuchern, worauf sie achten sollen. Auch wer selten Diagramme liest, erfasst so die Kernaussage.
Setzen Sie schließlich den nächsten Schritt unter das Diagramm. Nach einem Vergleichsdiagramm passt ein Angebotsformular, nach einer Regionalkarte ein Link zum nächsten Händler. Diesen Weg zu bauen, ist der Kern von conversionorientiertem Webdesign.
Wann ist Datenvisualisierung überflüssig?
Datenvisualisierung ist überflüssig, wenn es kaum Daten gibt, wenn die Botschaft aus einer einzigen Zahl besteht oder wenn die Daten für die Entscheidung keine Rolle spielen. Ein Diagramm ist schnell eingebaut. Jedes zusätzliche Element bringt allerdings Gewicht und Pflegeaufwand mit.
„20 Jahre Erfahrung“ als Zeitleiste darzustellen, bringt zum Beispiel selten etwas. Ebenso lesen sich drei Zahlen in einem kurzen Satz oder drei schlichten Kästen schneller.
Mein Test ist einfach. Verliert der Besucher eine Information oder einen Vergleich, wenn ich dieses Diagramm entferne? Wenn nicht, lasse ich es weg. Die Seite bleibt somit schnell, und die wirklich wichtigen Diagramme fallen auf. Wie überflüssige Elemente den Umsatz drücken, zeige ich im Beitrag UX Fehler, die Umsatz kosten.
Wie baue ich den Prozess der Datenvisualisierung im Projekt auf?
Ich arbeite in fünf Schritten. Sie funktionieren für eine kleine Dienstleisterseite ebenso wie für eine Unternehmenswebsite mit Hunderten Seiten.
- Fragenliste: Gemeinsam mit Vertrieb und Kundenservice notiere ich die Fragen, die Besucher mit den Daten beantworten wollen.
- Dateninventur: Ich kläre, wo die Daten liegen, wer dafür verantwortlich ist und wie oft sie sich ändern.
- Entwurf: Ich wähle den Diagrammtyp, skizziere zunächst in Grautönen und prüfe, ob die Botschaft klar ist.
- Barrierefreiheit und Tempo: Ich prüfe Kontrast, Textalternative, Datentabelle und Layoutverschiebung.
- Messung: Ich richte Ereignisse in GA4 ein und prüfe nach einigen Wochen, welche Diagramme wirken.
Für die Messung nutze ich meist drei eigene Ereignisse: Das Diagramm erscheint im Sichtbereich, ein Filter ändert sich, die Datentabelle öffnet sich. Dann vergleiche ich die Conversion Rate der Besucher mit und ohne Interaktion. Ein deutlicher Abstand deutet auf einen Beitrag hin, ist aber eine Korrelation und kein Beweis. Welche Kennzahlen sich lohnen, zeige ich im Beitrag über Online Marketing KPIs.
Mit wem sollten Sie ein Projekt zur Datenvisualisierung umsetzen?
Für einfache Diagramme genügen Werkzeuge ohne Code und etwas Sorgfalt. Ändern sich Ihre Daten jedoch häufig, brauchen Sie interaktive Karten oder große Tabellen oder haben Sie Pflichten zur Barrierefreiheit, sollten Gestaltung und Entwicklung die Arbeit gemeinsam angehen.
In solchen Projekten behandle ich Datenvisualisierung nicht als separate Aufgabe. Ich plane sie als Teil des Webdesigns. Wenn Botschaft, Seitenstruktur, Tempo und Messung zusammenpassen, wird das Ergebnis deutlich stimmiger. Haben Sie Daten, die sich auf Ihrer Website schwer erklären lassen, dann schreiben Sie mir. Im ersten Gespräch sehen wir uns Daten, Zielgruppe und Zweck der Seite an, danach melde ich mich mit einem konkreten Vorschlag.




