Intelligentes Farbsystem für komplexe Energiedaten

NeoVac misst und berechnet den Verbrauch von Strom, Wärme und Wasser für über 600 000 Wohnungen in der Schweiz. Mit ihrem Portfolio deckt NeoVac das komplette Spektrum von Messgeräten bis hin zum Energie-Monitoring ab.

Die Energie-Monitoring-App »Monitoring Pro« ermöglicht Hausverwalter:innen und Eigentümer:innen Verbrauchsdaten von ihren Arealen, Gebäuden bis hin zu Wohnungen auszuwerten. Die Daten werden chartbasiert dargestellt und bilden die Grundlage für fundierte Entscheidungen für Optimierungen oder Sanierungen, die beispielsweise auf Basis von zu hohen Verbräuchen getroffen werden.  

Bisher zeigten sich alle Linien- und Balkendiagramme in derselben gelben Farbpalette. Das sieht vielleicht einheitlich aus, führte aber zu einem echten UX-Pain. Nutzer:innen konnten durch diese sehr eintönig wirkende Farbpalette ihre Energieverbrauchsdaten schlecht unterscheiden. Bei Charts mit mehreren Zählern rauchten den Nutzer:innen die Köpfe. Ein Tool, das täglich genutzt wird, braucht Klarheit.

Das Ziel lautete daher: Das Farbsystem in der Monitoring-App so klar und intuitiv zu gestalten, dass Nutzer:innen auf einen Blick erkennen, um welche Art des Energieverbrauchs es sich handelt und wo Handlungsbedarf besteht. 

Verständlichkeit und Accessibility als oberstes Ziel

Unser Anspruch war deshalb klar. Charts müssen auf einen Blick verständlich sein. Das muss auch funktionieren, wenn bis zu fünf Linien oder Balken gleichzeitig durch das Diagramm laufen. Wir definierten drei Ziele:

1. Intuitive Farbzuordnung: Blau für Wasser oder Rot für Wärme. Farben müssen ohne Nachdenken funktionieren.
2. Automatische Farbvergabe: Neue Charts oder Datenkonstellationen müssen ohne manuelles Gefrickel regelbasiert und korrekt dargestellt werden.
3. Accessibility: Ausreichende Kontraste und Unterstützung für Farbsehschwächen sind Pflicht.

1. Intuitive Farbzuordnung 

Da in »Monitoring Pro« maximal fünf Zähler pro Chart möglich sind, haben wir für jede Farbe eine Palette mit fünf Abstufungen entwickelt. Hier wurde es knifflig. Eine einzelne Farbe linear von hell nach dunkel zu sortieren, funktioniert bei feinen Liniencharts nicht. Der Kontrast fehlt schlichtweg.

1.1. Ein Farbsystem statt bunter Bilder

Wir haben aufgeräumt und eine logische sowie semantische Farbzuordnung definiert. So ist sofort erkennbar, worum es geht. Wärme ist rot und Strom ist gelb. Kälte und Wasser werden blau dargestellt. Vergleichskurven sind violett und Sonderfälle schwarz.

1.2. Kontrast durch Kombination

Statt einer starren Reihenfolge entwickelten wir ein intelligentes Kombinationsprinzip. Ein Beispiel gefällig? Bei drei Wasserzählern in einem Chart werden nicht benachbarte Blautöne genutzt. Das System mixt gezielt kontraststarke Abstufungen wie etwa 100, 500 und 700. Das sorgt für maximale Unterscheidbarkeit innerhalb einer Farbgruppe. Einzelne Werte werden dabei nicht ungewollt hervorgehoben. Da Balken- und Liniencharts visuell völlig unterschiedlich funktionieren, haben wir hierfür jeweils separate Regeln definiert.

2. Automatische Farbvergabe

Damit das System im Alltag verlässlich performt, arbeitet im Hintergrund ein mehrstufiger Regelkatalog. Die passende Farbe lässt sich nämlich nicht immer direkt aus einer sauberen Kategorie ableiten. Unser System prüft daher verschiedene Parameter. Handelt es sich um eine Vergleichskurve? Welche Flusskategorie liegt vor? Wird eine vordefinierte Einheit erkannt?

Erst auf Basis dieser Kette entscheidet die Logik automatisch über Palette, Reihenfolge und Kombination. So bleibt die Darstellung konsistent. Auch bei heterogenen Daten.

Accessibility ist mehr als nur Farbe

Gerade bei den häufig genutzten Liniencharts war uns klar, dass Farbe allein nicht reicht. Um die Barrierefreiheit sicherzustellen, ergänzten wir die Visualisierung um unterschiedliche Symbole wie Kreis, Quadrat oder Raute pro Linie. So bleiben die Daten auch bei eingeschränkter Farbwahrnehmung lesbar. Zusätzlich helfen Hover-Effekte. Die aktive Linie wird hervorgehoben und der Rest tritt visuell in den Hintergrund.

Fazit

Was auf den ersten Blick wie eine visuelle Anpassung wirkt, ist in Wirklichkeit ein struktureller Eingriff in die Entscheidungsgrundlage.

NeoVac arbeitet täglich mit hochkomplexen Verbrauchsdaten. Wenn Visualisierungen Interpretationsspielraum lassen, entstehen Unsicherheit, Rückfragen und ineffiziente Prozesse. Durch das neue Farbsystem verstehen Nutzer:innen die Energiedaten in den Charts ohne lange Suchen oder Interpretieren. Entscheidungen zum Energiesparen auf Basis der Verbräuche können so schneller getroffen werden. Außerdem reduzieren sich Unsicherheiten bei den Nutzer:innen spürbar und entlasten so direkt den Kundenservice von überflüssigen Rückfragen.

Durch die semantische Farbzuordnung, kontraststarke Kombinationslogik und konsequente Accessibility-Integration wurde Monitoring Pro übersichtlicher, belastbarer und skalierbar für zukünftige Anforderungen.

Denn bei Energiedaten geht es nicht um »schöne Charts«. Es geht um Klarheit, Vergleichbarkeit und verlässliche Entscheidungsgrundlagen.