Informationen visualisieren: Beispiele und Tipps

Content is King. Internetseiten werden meist wegen ihren Inhalten besucht und Webdesigner sollen diese optimal präsentieren.

  • von Lennart Prange

Obox Design, ein bekannter Anbieter von WordPress Themes, hat vor kurzer Zeit eine neue Webseite online gestellt. Im Vorfeld wurde von obox mit Ausschnitten aus der neuen Seite Spannung aufgebaut und auch ich war interessiert.

Wirklich umgehauen hat mich der Relaunch nicht, ein Element ist mir aber sofort ins Auge gefallen: Die große Infografik.

thumb

Der Designer stellt dort sehr schön dar, warum man ein bezahltes Premium Theme einem freien Theme vorziehen sollte.

Die Grafik ist ein Beispiel dafür, dass gute Gestalter mit ihren Mitteln nicht nur dekorieren sondern auch exzellent kommunizieren können.

Warum

Stellen wir uns die Frage, warum man Informationen überhaupt visualisieren sollte. Schließlich kostet die Erstellung von Infografiken häufig sehr viel Zeit.

  • Leser lenken – Wie ich in der Einleitung bereits schrieb, ist mir die Grafik bei obox direkt ins Auge gefallen. Sie ist ein absoluter Eye-Catcher. Mit Infografiken kann man die Aufmerksamkeit der Leser auf bestimmte Informationen lenken. Für obox ist es beispielsweise enorm wichtig zu erklären, warum man für ein WordPress Theme Geld bezahlen soll, wenn es doch so viele freie Möglichkeiten gibt.
  • Komplexe Informationen veranschaulichen und abkürzen – Eine Grafik kann einen Text gleichwertig ersetzen, der sich über mehrere Seiten erstrecken würde und dabei deutlich übersichtlicher sein. Stellt euch beispielsweise einen U-Bahn Plan als Text vor. Oder eine Hierarchie in einem großen Unternehmen. Die Textform wäre der Horror. Wer die Textmenge gering halten möchte und gleichzeitig viele Informationen vermitteln will, hat mit Infografiken ein gutes Mittel an der Hand.
  • Das Behalten fördern – Der Betrachter kann Informationen meiner Meinung nach besser aufnehmen, wenn sie ihm vielfältig angeboten werden. Mit Video, Text und Bildern. Multimedial halt. Infografiken erleichtern also nicht nur das Verstehen sondern auch das Behalten von Informationen.
  • Dem Betrachter Wahlmöglichkeiten geben – Diagramme, die sehr viele Informationen beinhalten, werden von Betrachtern häufig nicht komplett untersucht. Stattdessen kann man sich die interessanten Werte als Leser heraussuchen, beispielsweise Mini- und Maximums. Das ist bei einem fortlaufenden Text nicht möglich.

Die Umsetzung

Wie ich oben bereits geschrieben habe, muss man viel Zeit investieren, um eine wirklich gute Infografik zu erstellen. Im Fall von obox geht es vielleicht noch, denn die Informationsmenge ist relativ gering. Aber je komplexer das Thema umso schwieriger die Erstellung einer Infografik,

An erster Stelle steht das Konzept: Wie visualisiere ich die Informationen. Nehme ich ein Balken- oder Kreisdiagramm? Oder muss ich mir etwas komplett Neues ausdenken?
Dieser Schritt dauert wahrscheinlich am längsten, denn die Grafik muss sofort verständlich sein. Sie muss aufgeräumt aussehen und dennoch viele Informationen transportieren.

An dieser Stelle sei auch gesagt, dass klassische Balkendiagramme kein wirklich gutes Mittel sind. Außer man will seriös und langweilig wirken. Denn die funktionalen aber dabei total unspektakulären Diagramme aus Excel und Co. schrecken eher ab, als dass sie die Blicke des Nutzers anziehen. Sie erinnern an Buchhaltung und wecken bei den meisten Menschen wenig Interesse.

Trotzdem sind viele Infografiken letztendlich auch nur solche Diagramme. Allerdings geben sich die Gestalter dann Mühe, sie anders aussehen zu lassen. Oder wenigstens Interessanter.

1

Global arms exporters infographic von net_efekt

Das Beispiel zeigt, denke ich, deutlich was ich meine. Der Gestalter hätte auch ein trockenes Balkendiagramm nehmen können, hat sich aber stattdessen für eine visuell ansprechendere Möglichkeit entschieden, die das Thema verdeutlicht und genauso gut funktioniert.

Ihr könnt bei einer Infografik sehr viele grafische Mittel benutzen. Es gibt nicht nur die Möglichkeit, Balken verschiedene Höhen zu geben. Man kann, um die Grafik noch zu vereinfachen, auch jedem Balken eine andere Farbe zuweisen und vielleicht auch die Breite verändern.
Bei der obigen Grafik sind die einzelnen Hubschrauber nicht nur angesichts ihrer “Flughöhe” unterschiedlich. Auch die Größe der Hubschrauber wurde an die Daten angepasst und so fällt es dem Betrachter noch einfacher, den Inhalt schnell zu erfassen.

Als Gestalter muss man sich jedes mal, wenn man Informationen visualisieren will, erneut Gedanken machen. Da ich nicht alle Fälle abdecken kann, müssen allgemeine Tipps reichen:

Einfach halten

Es geht, wie oben beschrieben, darum, komplexe Informationen zu veranschaulichen und die Aufnahme für den Leser zu vereinfachen.
Infografiken sollten nicht zu viel Text beinhalten. Sie sind ja gerade dafür da, Text zu ersetzen oder zu verdeutlichen. Ein gutes Beispiel für Informationsüberflutung findet ihr auf einer Infografik in einem Artikel der News York Times.

3D Diagramme sind auch ein weit verbreiteter “Fehler”. In vielen Fällen sehen sie besser aus, gleichzeitig werden sie für den Betrachter aber komplexer und vor allem kann man die verschiedenen Werte schwerer vergleichen.
3D Diagramme usw. sind nicht unbedingt schlecht, aber nicht für jeden Zweck eine gute Wahl. Hat man (wenige) verschiedene Werte, die nur oberflächlich verglichen werden sollen und bei denen der Unterschied sehr deutlich ist, kann man sich ruhig dafür entscheiden. In anderen Fällen sollte man es lieber lassen.

Die erste Idee kann die beste sein…

… ist es aber häufig nicht. Hinterfragt lieber eure Lösung, bevor ihr sie zu schnell akzeptiert. Geht es nicht noch einfacher, noch anschaulicher, noch schöner?

Infografiken werden dann verwendet, wenn man wichtige Informationen vermitteln will. obox will die Besucher zum Kauf der Produkte überreden. Um die Wirkung zu maximieren, muss die Infografik möglichst perfekt sein. Daher lohnt es sich, viel Zeit zu investieren.

Testet eure Grafik

Vielleicht haltet ihr alles für nachvollziehbar, aber das muss nicht für die Besucher gelten. Eine Infografik die man gar nicht oder erst nach langem Überlegen versteht, ist nichts wert. Es kann auch sein, dass eure Grafik vollkommen falsch interpretiert werden kann.

Um das zu verhindern, solltet ihr eure Grafik vor der Veröffentlichung möglichst vielen Leuten zeigen und sie euch erklären lassen, ohne selbst dazu etwas zu sagen. So findet ihr heraus, ob ihr euren Job gut gemacht habt.

Zieht einen Beschreibungstext in Betracht

Eine gute Infografik sollte zwar für sich alleine stehen können, aber häufig ist ein beschreibender Text, der vielleicht noch ein paar Informationen transportiert oder die Grafik erklärt, sinnvoll.

Wichtig dabei ist, dass der Nutzer den Text nicht lesen muss, um die entscheidenden Informationen aufzunehmen und zu verstehen.

2

Einen Schritt weiter

Der vorherige Teil befasst sich hauptsächlich mit Infografiken. Es gibt heute aber noch ganz andere Möglichkeiten, Informationen zu visualisieren.

Es gibt mittlerweile einige Webseiten, die sich daran versuchen, die Anzeige von dynmaischen Informationen im Internet mit gestalterischen Mitteln so zu verändern, dass die Inhalte übersichtlicher und interessanter werden. Dass man mehr Faktoren mit einbeziehen kann als nur den Zeitpunkt der Veröffentlichung.

Es handelt sich bei diesen Projekten als nich meht um eine einfache, statische Grafik.

Nicht wirklich statisch ist beispielsweise das Projekt bigspy von Digg. Dort werden Diggs gelistet, die wahlweise neu oder beliebt sind. Dabei läuft das Ganze nicht nur chronologisch ab.

3

Wählt man beispielsweise oben “popular stories” aus, erscheinen beliebte Diggs, die gerade erneut gediggt wurden, oben. Je mehr diggs die einzelnen Stories haben, desto größer ist aber auch der Schriftgrad der Überschrift.

So stößt der Nutzer nicht nur auf immer neue News. Ihm wird auch noch gezeigt, welche besonders interessant sind.

Ebenfalls dynamisch ist die Internetseite breathingearth. Sie enthält Informationen wie die CO² Emissionen einzelner Länder, weiß wie häufig Menschen in Deutschland geboren werden und sterben.

4

Nicht nur aus inhaltlicher Sicht ist dieses Projekt hochinteressant. Die Informationen werden dort in ansprechender und hilfreicher Form präsentiert. Es ist für den Besucher ein vollkommen anderes Erlebnis als ein Text. Diese ganzen Daten wären in Textform für viele uninteressant und würden nicht gelesen werden.

Ein anderes Projekt, dass Informationen ganz anders aufbereitet, als eine klassische Internetseite, ist Newsmap.

5

Als Quelle wird Google News benutzt. Die einzelnen Informationen werden einerseits nach Alter sortiert – die Kästen mit der geringsten Sättigung enthalten die ältesten News und andersrum – andererseits nach Wichtigkeit: Die News, für deren Inhalt am meisten ähnliche Artikel gefunden wurde, wird in dem größten Kasten dargestellt.
Weiterhin werden die Neuigkeiten durch unterschiedliche Farben in Kategorien unterteilt.

Was schafft Newsmap dadurch? Auf der gleichen Fläche können viel mehr News dargestellt werden als bei einer normalen Newsseite, ohne dass die Webseite unübersichtlich wird (vielleicht braucht es eine kleine Eingewöhnungszeit). Die News können nach viel mehr Faktoren sortiert werden und der Leser kann dadurch viel schneller informiert werden.

Fazit

Informationen visualisieren – das hört sich nicht nur gut an.

Wir haben viele verschiedene Mittel zur Verfügung, die wir dafür nutzen können, Internetseiten interessanter, benutzerfreundlicher und effektiver zu machen.

Man muss nicht gleich versuchen, alles zu revolutionieren. Es reichen schon kleine Veränderungen der üblichen Darstellung, wie es zum Beispiel bei Engadget zu sehen ist. Die meist kommentierten Beiträge sind nicht in einer nackten Liste dargestellt. Sie sind zusätzlich mit verschiedenen Farben unterlegt und stehen in Kästen mit abnehmender Größe. Das fördert die Übersicht und sieht auch noch gut aus. Mehr kann sich ein Designer doch kaum wünschen.

Ich hoffe in Zukunft mehr Infografiken auf Webseiten zu sehen und bin gespannt, wie Inhalte in Zukunft präsentiert werden.

Newsmap ist schon ein sehr interessanter und dazu auch noch funktionierender Versuch, Nachrichtenportale besser zu gestalten und geht weit über das bisher Bekannte und Normale (zum Beispiel Tagclouds und Tabellen) hinaus.

Einige der oben genannten Beispiele wirken vielleicht Gewöhnungsbedürftig, könnten in Zukunft aber schon völlig normal sein und die Art, wie wir Informationen im Internet aufnehmen verändern und verbessern.

32 Kommentare

  1. Patrick Offczorz
    17. Mai 2010 um 00:31 Uhr

    Klasse Beitrag.

  2. tobi
    17. Mai 2010 um 11:23 Uhr

    Super Artikel! Übersichtlich und verständlich geschrieben.
    Wie man Grafiken bewusst fälschen kann, um bestimmte Informationen zu transportieren, wurde bei Smashing Magazine gut dokumentiert: http://www.smashingmagazine.com/2010/05/10/imagine-a-pie-chart-stomping-on-an-infographic-forever/

    • Lennart Prange
      17. Mai 2010 um 17:05 Uhr

      Danke für das Lob und auch für den guten Link 🙂

  3. TomKay
    17. Mai 2010 um 11:24 Uhr

    Danke für den informativen Beitrag. Inspiriert mich zu neuen Sachen.

    • Lennart Prange
      17. Mai 2010 um 17:06 Uhr

      Freut mich! Wie im Beitrag geschrieben: Es wäre schön ein paar neue spannende Konzepte und mehr Infografiken im Web zu sehen .

  4. Manuel
    18. Mai 2010 um 11:38 Uhr

    Für mich sind solche Infografiken sehr oft ein zweischneidiges Schwert.
    Sicherlich sehen die (meist eher wenigen) Informationen gleich viel aufwändiger und spannender aus als in einer tabelarischen Auflistung. Leider habe ich es schon oft erlebt, dass selbst einfachste Vergleiche mit nur wenigen Inhalten gestalterisch dermaßen abstrus umgesetzt wurden, dass sowohl Nutzwert, als auch der eigentliche Inhalt praktisch nicht mehr zu erkennen waren.
    Grad solche Infografiken wie von Newsmap und Bigspy finde ich persönlich schrecklich Nutzerunfreundlich.
    Da ist mir eine gestalterisch aufgehübschte Tabelle mit leicht zu erfassenden Vergleichen doch noch um einiges lieber.

  5. Helmut
    18. Mai 2010 um 11:50 Uhr

    Auch wenn Content King ist, nicht umsonst heisst es doch “Bilder sagen mehr als 1000 Worte”

  6. Stefan
    18. Mai 2010 um 21:41 Uhr

    Ich stimme Dir voll zu, dass Infografiken ein wesentlich besseres Mittel sind, um Informationen zu vermitteln. Allerdings sollte man den Inhalt für Suchmaschinen nicht vernachlässigen, was bei reinen Grafiken vollständig untergeht. Ebenso ist auch die Barrierefreiheit wichtig, da z.B. sehbehinderte Menschen mit Grafiken nichts anfangen können. Deshalb finde ich Dein Beispiel mit der Kombination aus Grafik und detailierter Beschreibung einen guten Weg.
    Schöner Artikel!

    • Lennart Prange
      18. Mai 2010 um 22:37 Uhr

      Sehr gute Ergänzungen! Danke.

  7. nicolas
    23. Mai 2010 um 10:14 Uhr

    Ich bin eigentlich auch ein grosser Fan von Infografiken und dem visualisieren von Informationen, denke aber momentan ist es noch nicht das Wahre, da Google und Co. diese Informationen nicht richtig Lesen und interpretieren können. Mit HTML5 und CSS3 wird es aber sicher mehr und bessere Möglichkeiten geben.

  8. Klaus
    24. Mai 2010 um 11:06 Uhr

    Das sehe ich ähnlich. Eine gute Kombination aus Grafik und Beschreibung ist sehr wichtig. Sehbehinderte Menschen werden es uns danken.
    Apropo Grafik: Ich denke, ich werde mir mal was für meine Seite überlegen.

    Der Artikel hat mich auf jeden Fall dazu angeregt. Es macht halt viel aus, wenn man die Dinge, so wie hier geschehen, gut und anschaulich beschreiben kann.

    Herzlichen Gruß
    Klaus

  9. Webdesign Mannheim
    13. Juli 2010 um 16:52 Uhr

    Sehr lesenswert.

  10. AdWords Agentur
    17. Juli 2010 um 21:30 Uhr

    Top Beitrag

  11. Webdesign Agentur
    17. Juli 2010 um 21:32 Uhr

    Klasse Beitrag.

  12. Der Webdesigner aus Kassel
    28. April 2011 um 20:39 Uhr

    Ich stehe auch auf Infografiken. Das Problem bei der Suchmaschinenoptimierung ist halt das man Texte verbauen muss/will die eigentlich garnicht gebraucht werden für den User.

  13. Webdesign
    28. Juli 2011 um 10:55 Uhr

    Die Grafik ist toll. Ich suche immer wieder Inspiration in dieser Richtung.

  14. Tom N.
    5. August 2011 um 11:03 Uhr

    Das Beispiel mit den größten Waffenexporteuren ist echt Klasse. Der Punkt “keep it simple” ist wirklich das A und O bei solchen Infografiken, da muss ich voll und ganz zustimmen. Es bringt wirklich nichts wenn die Grafik so überladen ist.

    Den großen Knackpunkt sehe ich leider nach wie vor in der Zeitinvestition für solche Infografiken, zumal neben der Erstellung dann auch wie bereits von meinen Vorrednern angemerkt, beispielsweise die Barrierefreiheit durch weitere Maßnahmen unterstützt werden muss bzw. sollte.

  15. Trick
    5. Februar 2012 um 15:56 Uhr

    Das schaut immer so einfach aus. Aber wehe man öffnet selbst mal Photoshop.. 😀

  16. Christian Siebold
    7. Februar 2012 um 16:43 Uhr

    Eine visuell ansprechende Infografik oder Foto mit ergänzendem Text ist einer schwer zugänglichen “Bleiwüste” ohne Zweifel vorzuziehen. Auch die Informationsinhalte lassen sich durch Fotos und Grafiken durch eine geeignete Bildsprache hervorragend unterstützen.

  17. male enhancement
    2. März 2012 um 11:01 Uhr

    Auch wenn Content King ist, nicht umsonst heisst es doch “Bilder sagen mehr als 1000 Worte”!

  18. Sebastian
    2. März 2012 um 11:12 Uhr

    WoW! Das ist mal ein toller Beitrag mir richtig Mehrwert.

    Ich denke, dass es in Zukunft immer mehr Nachfrage nach entsprechenden Infografiken geben wird, weil die Informationsmenge einfach zunimmt und man einen Weg finden werden muss, diese Menge an Informationen in Form einer Grafik darzustellen.

    Auch weiß ich, dass es für manche schwierig ist, so eine Infografik zu erstellen – vielleicht startet mal jemand so ein Internet-Tool mit dem man Infografiken per Drag&Drop erstellen kann? 😉

  19. Peter
    18. April 2012 um 21:46 Uhr

    Ein Beitrag, der es verdient hat, von vorne bis hinten durchgelesen zu werden, Hut ab!
    Infografiken muss man aber nicht zwangsläufig immer selbst erstellen. Peer hat einige Seiten zusammengestellt, wo immer mal wieder Infografiken veröffentlicht werden.
    http://www.selbstaendig-im-netz.de/2012/03/15/selbstaendig/10-online-business-infografiken/

  20. Kevin
    1. Mai 2012 um 13:11 Uhr

    Ich kann mich Sebastian nur anschliessen, toller Artikel. Heute, in 2012, sind Infografiken aus dem Netz nicht mehr wegzudenken, man schaue sich nur zum Beispiel die am meisten geteilten Beiträge bei Pinterest – das sind fast immer Infografiken. Viele grosse Tech-Portale haben die Power erkannt und setzen immer mehr darauf indem sie zu jedem x-ten Post eine Infografik liefern…

    Gruss

  21. Cosy
    12. Mai 2012 um 01:49 Uhr

    Ich kann mich da Sebastian nur anschließen, bei der Menge an Informationen die heutzutage von allen seiten auf uns einprasseln wir es immer wichtiger die relevanten Informationen übersichtlich und verständlich darzustellen.

  22. Roni
    15. Mai 2012 um 15:00 Uhr

    Ich muss auch sagen, ein sehr guter Beitrag.
    Zu Sebastian (mein Vorposter). Es gibt bereits Tools zum erstellen von Infografiken. Eine Sammlung hab ich hier gefunden: http://karrierebibel.de/malen-nach-zahlen-15-tools-zum-erstellen-von-infografiken/

  23. Jenny
    1. Juni 2012 um 17:42 Uhr

    Dein Artikel gefällt mir. Mir fehlt für solche Desginarbeiten meist die Zeit und lasse es deshalb von meinem Grafiker machen.

  24. Chris
    6. Juni 2012 um 16:53 Uhr

    Dank der tollen Grafiken ist das auch für Laien verständlich, super!

  25. Nackte frauen
    22. Juni 2012 um 22:56 Uhr

    Designer schauen nur für schönes Design, aber ich denke, dass Wichtigste ist, eine einfache Navigation und Hilfe für Anwender, was er ist auf der Suche nach so schnell wie möglich finden

Trackbacks/Pingbacks