Dierekt zum Inhalt
VisionConnect Blog / Design

Responsive Infografiken

19. April 2018
Responsive Infografiken

Informationen, die mit Bildern verknüpft sind, werden von Gehirn leichter aufgenommen. Der Spruch „ein Bild sagt mehr als tausend Worte“ gilt auch gerade im Bereich komplexer Sachverhalte und großer Datenmengen und ist aktueller als je zuvor.

Die optische Wahrnehmung dominiert alle anderen Arten unserer Wahrnehmung. Informationen, die mit Bildern verknüpft sind, werden von Gehirn leichter aufgenommen.

Der Spruch „ein Bild sagt mehr als tausend Worte“ gilt auch gerade im Bereich komplexer Sachverhalte und großer Datenmengen und ist aktueller als je zuvor.

Lesen vs. sehen

Im Markt der Versicherungen, die relativ komplexe Sachverhalte und große Datenmengen z.B. als Basiswissen für Entscheidungen ihren Kundinnen und Kunden vermitteln wollen und müssen, sind gut konzipierte Infografiken ein fester Bestandteil der Content-Marketingstrategie.

Infografiken sammeln und organisieren diese Daten und wandeln sie in eine einfach zu verstehende Grafik um. Um beim Beispiel der Versicherungen zu bleiben: hier kann es wichtig sein, über potenzielle Risiken und Schäden durch Extremwetter aufzuklären.

Mit guten Infografiken schafft man es

  1. komplexe Sachverhalte klar und auf den Punkt darzustellen
  2. die eigene Marke und deren Wahrnehmung zu stärken, indem die Grafiken gebrandet werden (Corporate Colors usw)
  3. Aufmerksamkeit auf sich zu ziehen, in dem man sie auf allen Kanälen spielt: Website, Print, Social Media.
  4. im Bereich der sozialen Medien häufiger weiterverteilt und wahrgenommen zu werden, als mit bloßem Text.
  5. die eigene Website durch Backlinks zu pushen (SEO)
  6. eine direkte Verbindung zum Leser und zur Leserin herzustellen. Gut gemachte Infografiken sind unterhaltsam und informativ.

Ein bisschen verspielt darf es sein

Kein gar nicht so neuer Trend sind interaktive Infografiken. Entweder werden spieltypische Elemente im spielfremden Kontext eingebaut (Gamification) oder auf einen einfachen Klick oder Touch erscheinen neue Informationen (Clickable Map).

Infografik Dangerous things
Beispiel: Dangerous Things Teens Do In Car

Und dann auch noch responsive

Bei all den Vorteilen muss man natürlich bedenken, dass die Grafiken responsive sein sollten. Was nutzt eine in die Breite angelegte Infografik, wenn sie am Smartphone betrachtet wird und man umständlich mit dem Finger zoomen oder das Display kippen muss (was die wenigsten tun, ausser beim Fotografieren), um die Texte lesen zu können.

Bei der Konzeption kann man auch mal darüber nachdenken, ob man die Grafik so konzipiert, dass sie aus mehreren Teilen besteht, die in der Desktop-Ansicht nebeneinander platziert werden und in schmaleren Devices untereinander.

Vorteile, wenn Infografiken im SVG-Format eingebunden werden

  1. SVG-Grafiken lassen sich schneller laden und da Google den XML-Code der Grafik ausliest, kann dies auch einen SEO-Vorteil bedeuten
  2. SVG-Grafiken sind ausgesprochen gut zu skalieren. Um eine solche Datei responsive einzubinden findet man sehr viele Hinweise im Netz, Stichwort responsive svg
  3. theoretisch könnte auch eine komplette Website als responsive Infografik gestaltet sein. Ein schönes Beispiel: http://www.education.auburn.edu. Das erfordert allerdings eine sehr gute konzeptionelle Vorarbeit.
  4. Texte sind deutlich schärfer, allerdings muss man hier berücksichtigen, dass die Textgröße beim Skalieren unter Umständen sehr klein wird, d.h. hier muss man entweder von vorne herein die Texte groß genug anlegen oder die Grafik so anlegen, dass man per CSS hier noch eingreifen kann
  5. Per CSS lassen sich Elemente im der SVG-Datei ansteuern, d.h. diese können auch animiert werden. Mehr dazu: https://designmodo.com/svg-infographic/

Bildnachweise

www.gdv.de/de/themen/news/so-suchen-die-deutschen-im-internet-nach-versicherungen-16144

www.ruv-blog.de/vorsorgepyramide/

/www.pfefferminzia.de/uploads/fm/1498222217-Infografik_SL_Teil1.jpg

ccafs.cgiar.org/blog/how-can-index-insurance-help-smallholder-farmers-check-out-infographic#.WtCTIS_5zUI

www.enhancedinsurance.com/health-insurance/infographic/

killerinfographics.com/project/interactive-dangerous-things-teens-cars

www.buyagift.co.uk/content/foodchallenges/main.html

designmodo.com/svg-infographic/

Yvonne Scherzer

Seit mehr als 15 Jahren arbeite ich als Webdesignerin bei VisionConnect GmbH. Eine Aufgabe, die sehr vielfältig ist und wirklich Spaß macht. Neben der virtuellen Arbeit tausche ich in meiner Freizeit gerne Monitor gegen Pinsel und Staffelei.