Ich habe mir ein Dashboard zur Steuerung meiner Rasenbewässerung gebaut und dabei ein kleines UX-Feature umgesetzt, das vielleicht für den einen oder anderen interessant ist.
Ausgangssituation:
Meine Gartenbewässerung läuft über eine Grundwasserpumpe. Gleichzeitig wird über dieselbe Wasserquelle auch mein Teich befüllt. Da die Pumpe nicht genug Leistung hat, um beides parallel zu versorgen, müssen die Rasensprenger gesperrt werden, sobald die Teichbefüllung aktiv ist.
Umsetzung im Dashboard:
Ich habe das Ganze über eine picture-elements Karte gelöst und arbeite dort mit conditional-Elementen:
-
Wenn die Teichbefüllung nicht aktiv ist:
-
Der Regner-Button ist normal bedienbar
-
Bei aktiviertem Regner wird ein animiertes GIF (Regen-Effekt) über die Fläche gelegt
-
So sieht man direkt visuell, welche Zone gerade läuft
-
-
Wenn die Teichbefüllung aktiv ist:
-
Der Button wird deaktiviert (
tap_action: none) -
Zusätzlich bekommt er per CSS-Filter ein „ausgegrautes“ Aussehen (
grayscale + opacity) -
Ein Schloss-Icon wird darübergelegt, um die Sperre klar zu visualisieren
-
Ein Hinweistext wird eingeblendet, warum die Steuerung aktuell gesperrt ist
-
Vorteile der Lösung:
-
Klare visuelle Rückmeldung (kein Rätselraten, warum nichts klickbar ist)
-
Zustand (aktiv / gesperrt) sofort erkennbar
-
Schöne Darstellung durch das animierte GIF bei aktiver Bewässerung
-
Vollständig ohne komplexe Custom Cards umgesetzt
Gruß
Christian