Kurz gesagt: Für die Website der NCM Naturcement Manufaktur habe ich eine Erklärgrafik in Bewegung gebracht und vier Unterseiten zu einer gut gegliederten Seite zusammengeführt.Beides hat dasselbe Ziel: Fachwissen so zeigen, dass man es auf Anhieb versteht, am Schreibtisch genauso wie auf dem Smartphone.
Die NCM Naturcement Manufaktur stellt mineralische Mörtel und Restauriersysteme für Denkmalpflege und Altbau her. Das ist Fachwissen, das man nicht in zwei Sätzen erklärt.Die Inhalte waren alle da. Sie waren nur nicht so aufbereitet, dass man sie schnell erfasst.Ein bisschen wie im Museum: Eine Schautafel voller Text stimmt zwar, aber erst ein guter Führer zeigt Schritt für Schritt, worauf es ankommt.
1. Vorher: eine Grafik, die alles auf einmal zeigt
Auf der Seite „Muschel & Kalk“ erklärt eine Grafik, wie Fugen aus Muschelkalkmörtel Regenwasser aufnehmen, verteilen und wieder abgeben.Fachlich war sie korrekt. Nur zeigte sie alles gleichzeitig: Ziegel, Fugen, Pfeile, Stichpunkte, Schritte.
Auf dem Smartphone wurde das Bild so klein, dass man die Texte kaum noch lesen konnte.Und weil die Beschriftung Teil des Bildes war, konnten weder Suchmaschinen noch Vorleseprogramme etwas damit anfangen.
2. Nachher: die Grafik erzählt in drei Schritten
Ich habe die Grafik neu gezeichnet, nicht als Bild, sondern direkt im Code der Website.Sobald man zu ihr scrollt, baut sich die Wand auf, es beginnt zu regnen, und die drei Schritte erscheinen nacheinander: Aufnahme, Verteilung, Entlastung.
So sieht sie auf naturcement.de aus, hier mit freundlicher Genehmigung eingebunden:
MUSCHELKALKMÖRTEL IN DEN FUGEN
- hohe Kapillarität durch Muschelschalen und Kalkmatrix
- große, offene Porenstruktur
- schnelle Aufnahme von Schlagregen
- Verteilung über das Fugennetzwerk
- kontrollierte Rücktrocknung nach außen
Fugen: kapillaraktiv, feuchteregulierend, salzaufnahmefähig, diffusionsoffen
Ziegeloberfläche (mineralisch, saugfähig): schlagregennass nur oberflächennah
Weil alles aus Linien und echtem Text besteht, bleibt die Grafik in jeder Größe scharf, lädt schnell und ist für Suchmaschinen lesbar.Wer Bewegung in den Systemeinstellungen abgeschaltet hat, sieht die fertige Grafik ohne Animation.
Auf dem Smartphone und auch hier im Beitrag zeigt sie eine eigene Fassung im Hochformat: nur die Wand, groß und deutlich.Die Erklärungen stehen darunter als nummerierte Schritte, gut lesbar ohne Zoomen.
Tipp: Ihre Grafiken auf dem Smartphone prüfen
Öffnen Sie Ihre eigene Website auf dem Handy und schauen Sie sich jede Grafik an:
- Können Sie die Beschriftung lesen, ohne zu zoomen?
- Will die Grafik mehr als drei Dinge auf einmal erklären?
- Steht wichtiger Text nur im Bild und nirgends sonst auf der Seite?
Trifft eins davon zu, lohnt sich ein zweiter Blick.
Oft reicht es schon, den Text aus dem Bild in die Seite zu holen.
3. Aus vier Seiten wird eine
Das Minerva-System bestand bisher aus einer Übersichtsseite und drei eigenen Seiten für die einzelnen Produkte. Wer vergleichen wollte, musste hin- und herklicken.Jetzt steht alles auf einer Seite: erst das Prinzip, dann die Ausführung, dann die Produkte im Detail.
Die Produkte liegen dort in Registern nebeneinander, wie in einem Aktenordner mit Trennblättern statt in vier einzelnen Ordnern.Man sieht sofort, was es gibt, und klappt nur auf, was einen gerade interessiert.
4. Großer Bildschirm & Smartphone: zwei Darstellungen
Register funktionieren auf breiten Bildschirmen gut. Auf dem Smartphone wären sie gequetscht und kaum zu treffen.Deshalb werden sie dort automatisch zu aufklappbaren Abschnitten, untereinander und mit dem Daumen gut zu bedienen.
Auch das Menü ist angepasst: Ein Klick auf ein Produkt führt direkt zum passenden Register, statt erst auf den Anfang der Seite.
5. Damit nichts verloren geht: Weiterleitungen
Die alten Produktseiten gibt es nicht mehr. Ihre Adressen stehen aber noch in Lesezeichen, in E-Mails und bei Google.Deshalb leitet jede alte Adresse jetzt auf den passenden Abschnitt der neuen Seite weiter, wie ein Nachsendeauftrag nach einem Umzug.
Was Sie daraus mitnehmen können
Weniger Seiten heißt nicht weniger Inhalt. Es heißt oft nur: weniger Klicks bis zur Antwort.Und eine Grafik, die in Schritten erzählt, erklärt mehr als eine, die alles auf einmal zeigt.
Das Ergebnis können Sie sich direkt ansehen: auf naturcement.de unter Muschel & Kalk und auf der Minerva-Seite.Was ich sonst für Websites tue, steht unter Webdesign.
