Step by Step: Klimafreundliches UX und UI-Design

Klimafreundliches Handeln assoziieren wir meistens mit Themen wie Verkehr, Energieerzeugung oder Ernährung. Doch als Tech-Liebhaber und Dienstleister in der digitalen Branche spüren wir Verantwortung in einem Bereich, der seltener thematisiert wird. Unsere Angewohnheiten wie Streaming, Videocalls und Dateimanagement per Cloud erfordern eine hohe Rechenleistung in gigantischen Server-Farmen. Jedes Jahr verursacht so jede*r Deutsche durchschnittlich 849 kg CO2 nur durch Informationstechnik. Zum Vergleich: Das ist etwa so viel CO2, wie ein mittelalter, dieselbetriebener PKW auf einer Fahrt von 4.000 km ausstößt.

Für Webprojekte setzen wir als digitale Kreativagentur es zum Ziel, CO2-Emissionen stark zu reduzieren. Wie auch ihr dieses Vorhaben umsetzen könnt, lernt ihr in den folgenden acht Schritten.

1. Datenmengen reduzieren

Große Videos und Fotos fressen nicht nur das Datenvolumen, sondern belegen auch viel Platz auf Servern. Mit Tools wie Image Optim sollten alle Bilder vor dem Upload komprimiert werden. Bei Fotos lassen sich mit dem noch jungen Format WebP einige MBs und KBs im Vergleich zu JPG einsparen. Bilder sollten bereits beim Upload die passende Größe haben und nicht erst per CSS kleiner skaliert werden. Ob Videos wirklich notwendig sind, sollte ebenfalls überdacht werden.

2. Lazy Loading

Durch Lazy Loading werden Inhalte erst geladen, wenn sie im Viewport erscheinen, und nicht bereits „below the fold” — also außerhalb des sichtbaren Bereichs. Scrollt ein User also nicht weiter nach unten, wird das unnötige Laden von Inhalten eingespart. Das ist besonders interessant für umfangreiche Seiten, die auf eine Paginierung verzichten sondern automatisch neue Inhalte nachladen. Ein prominentes Beispiel ist hier etwa Pinterest.

3. Schlanker Code

Durch einen sauberen Code kann die Ladezeit einer Website reduziert werden und die Performance verbessert sich. Davon profitiert nicht nur die Performance, sondern auch der Energieverbrauch. Es empfiehlt sich, den Einsatz von JavaScript auf ein Minimum zu reduzieren und Interactions oder Animationen mit beispielsweise CSS umzusetzen. Veraltete oder nutzlose Elemente im Code sollten eliminiert werden.

4. Browser Caching

Beim Caching werden Daten der Website aus einem Zwischenspeicher geladen. So vermeiden wir, dass diese Elemente bei jedem Website-Aufruf neu übertragen werden. Interessant ist diese Technik gerade, wenn User häufig wiederkehren, etwa bei Online-Shops.

5. Grünes Hosting

Bei der Wahl des Webhosts empfiehlt es sich, einen Anbieter auszuwählen, der seine Dienste mit Ökostrom betreibt. So kann sichergestellt werden, dass beim Surfen zumindest kein Strom aus Kohlekraftwerken beansprucht wird. Webhosting-Anbieter, die Ökostrom beziehen, sind beispielsweise GreenSta, Raidboxes, Avalon Networks oder Biohost.

6. Smartes UX

Eigentlich logisch: Umso eindeutiger und intuitiver das UX einer Website oder App ist, umso schneller kommen User zum Ziel. Auf diese Weise werden weniger Klickpfade notwendig und somit auch weniger Elemente geladen. Nicht nur eine gute Informationsaufbereitung und Informationsarchitektur sind relevant. Vielmehr kann eine strukturierte Navigation das Nutzerverhalten deutlich steigern. In einigen Fällen bietet sich daher ein vertikales Navigationskonzept an.

7. Dark Mode

Bei Geräten mit OLED-Displays spart der Betrieb im Dark Mode Strom und damit auch wieder CO2 ein. Das betrifft beispielsweise neuere iPhone-Modelle. Nicht nur Apps, sondern auch Websites sollten die Möglichkeit einer Darstellung im Dark Mode anbieten.

Was Web-User beitragen können

Wer nicht als UX-Designer oder Entwickler arbeitet, kann trotzdem bei der Benutzung digitaler Anwendungen einen Beitrag leisten, zum Beispiel:

• Videoübertragung ist sehr energieaufwendig, daher ist telefonieren die ökologischere Option.
• Gibt man eine bekannte URL direkt vollständig ein anstatt den Umweg über Google zu gehen, so spart man 0,2 g CO2 ein.
• Durch die Abbestellung von Newslettern spart man nicht nur CO2 ein, sondern kann sich auch über ein aufgeräumtes Postfach freuen.