Komplexe Infografiken responsiv gestalten

Infografiken können komplexe Abläufe schnell verständlich machen. Was auf einem großen Bildschirm übersichtlich aussieht, funktioniert auf dem Smartphone jedoch nicht automatisch genauso gut. Wird eine breite Grafik lediglich verkleinert, werden Texte, Symbole und Verbindungslinien häufig zu klein. Die Grafik passt dann zwar in den Bildschirm, ist aber kaum noch lesbar.

Ungünstiges Beispiel einer Infografik

Die breite Infografik wird auf dem Smartphone nur verkleinert. Inhalte und Zusammenhänge sind kaum noch erkennbar.

Besser: Modularer, responsiver Aufbau einer Infografik

Eine gute Infografik muss deshalb nicht überall identisch aussehen. Entscheidend ist, dass ihre Inhalte und Zusammenhänge auf jedem Gerät verständlich bleiben. Die einzelnen Prozessschritte werden auf dem Smartphone untereinander angeordnet und bleiben gut lesbar.

Responsive bedeutet mehr als Verkleinern

Eine responsive Infografik sollte sich nicht nur an die verfügbare Breite anpassen. Auch ihre Struktur muss auf unterschiedlichen Bildschirmgrößen verständlich bleiben.

Bei unserem Artikel über die Verbindung von HubSpot und WordPress bestand die Prozessdarstellung ursprünglich aus einer breiten zusammenhängenden Grafik. Auf dem Desktop war der Ablauf gut erkennbar. Auf kleineren Bildschirmen wurden die einzelnen Inhalte dagegen so stark verkleinert, dass die Darstellung ihren Nutzen verlor.

Komplexe Grafiken in einzelne Bereiche aufteilen

Die bessere Lösung besteht darin, den Prozess in mehrere eigenständige Grafiken zu unterteilen. In unserem Beispiel werden daraus drei quadratische Elemente. Diese können auf großen Bildschirmen nebeneinander und auf Smartphones untereinander dargestellt werden.

Die Pfeile zwischen den Grafiken werden separat eingebunden. Dadurch können sie ihre Ausrichtung abhängig vom Bildschirm verändern: horizontal auf dem Desktop und vertikal auf dem Smartphone.

So bleibt die Reihenfolge des Prozesses auf allen Geräten klar erkennbar.

Vorteile des modularen Aufbaus

Der responsive Aufbau verbessert die Darstellung auf Smartphones. Er bietet außerdem weitere Vorteile:

• Texte und Symbole bleiben gut lesbar.
• Einzelne Prozessschritte lassen sich leichter erfassen.
• Inhalte können später einfacher ergänzt oder ausgetauscht werden.
• Die Darstellung passt sich flexibel an verschiedene Bildschirmgrößen an.
• Alternativtexte können den einzelnen Grafiken gezielter zugeordnet werden.