Was der Betrieb sich wünschen könnte.
Der erfundene Fachbetrieb Lichtwerk plant Solaranlagen, Speicher, Wärmepumpen und Wallboxen. Interessierte kennen die Begriffe einzeln. Wie die Geräte zusammenarbeiten und warum ein Speicher am Abend hilft, bleibt oft unklar. Der angenommene Wunsch: Die Leistungsübersicht soll dieses Zusammenspiel zeigen und das erste Beratungsgespräch vorbereiten.
Unser Ansatz
Die größte Kachel zeigt ein Haus im Schnitt, alle Geräte hängen an einem gemeinsamen Hausanschluss. Ein Regler führt durch einen typischen Tag von 0 bis 23 Uhr. Daneben stehen der Einstieg in die Planung und das Versprechen, dass eine Person das ganze Haus plant. Darunter folgen die vier Leistungen einzeln.
Die Entscheidungen im Entwurf.
Ein ganzer Tag
Der Morgen, an dem die Anlage erst einen Teil liefert, gehört genauso dazu wie die Nacht, in der der Speicher leer läuft. Mit dem Regler sieht man alle vier Phasen. Die Sonne wandert dabei über das Dach, der Himmel wird dunkel und in den Fenstern geht Licht an.
Pfeile zeigen die Richtung
Jede Leitung trägt einen Pfeil, der zeigt, ob ein Gerät Strom abgibt oder bezieht. Laufende Striche verstärken das. Bei reduzierter Bewegung stehen sie still, die Pfeile bleiben.
Jedes Gerät bekommt einen Satz
Unter der Zeichnung steht für jedes der sechs Geräte, was es gerade tut, etwa „Speicher: lädt“. Ein weiterer Satz fasst die Tageszeit zusammen. Der Zustand ist damit auch ohne die Grafik verständlich.
Ein Prinzip, keine Berechnung
Der Tagesverlauf ist typisch und vereinfacht. Die Demo rechnet weder Ertrag noch Autarkie oder Einsparung aus und sagt das direkt unter der Zeichnung.
Der Weg dorthin.
Erste Skizze: Kreise und Linien
Sonne, Speicher und Haus als drei Symbole, verbunden durch gestrichelte Linien, dazu zwei Buttons für Tag und Abend. Das Diagramm stimmte, sah aber aus wie ein Schaltplan. Ein Haus war darin nicht zu erkennen.
Das Haus als Bühne
Wir haben jedes Gerät dorthin gesetzt, wo es tatsächlich steht: Module auf dem Dach, Wärmepumpe neben dem Haus, Speicher im Hauswirtschaftsraum, Wallbox unter dem Carport, Netz am Mast.
Eine einzige Frage: Wie spät ist es?
Mehrere Schalter hätten mehr Kombinationen erlaubt, die es im Alltag nicht gibt. Himmel, Fenster, Speicherstand und Pfeile folgen jetzt nur der Uhrzeit.
Was die fertige Section leistet.
Die fertige Section zeigt ein Haus mit Solaranlage, Speicher, Wärmepumpe, Wallbox und Netzanschluss. Regler und „Tag abspielen“ führen durch 24 Stunden, Statusliste und Tageszeit-Satz erklären, was zu sehen ist. Auf dem Smartphone stehen Zeichnung, Regler und Liste in dieser Reihenfolge untereinander.
In einem echten Nutzertest würden wir fragen, ob die Beziehung zwischen Anlage und Speicher verstanden wurde und welche Angaben für die Beratung noch fehlen. Die Demo weist keine wirtschaftliche Wirkung nach.
Verständlich für Suche und KI.
Leistungsbegriffe, Statusliste und Tageszeit-Satz stehen als Text im HTML. Eine Frage wie „Was macht ein Stromspeicher am Abend?“ lässt sich daraus ohne die Grafik beantworten. Im Kundenprojekt führt jeder relevante Teil zu einer ausführlichen Leistungsseite mit Voraussetzungen, Ablauf und Antworten auf typische Fragen. Technische Daten und Leistungsversprechen würden fachlich geprüft. Das Diagramm allein ersetzt diese Inhalte nicht.
Diese Fallstudie hat eine eigene URL, einen beschreibenden Seitentitel und strukturierte Daten als kreatives Werk. Briefing, Entscheidungen und Grenzen sind direkt im HTML lesbar. Unser Vorgehen bei SEO und KI-Suche erklärt die gemeinsamen Grundlagen.
Auch ohne Maus verständlich.
Die Uhrzeit ist ein nativer Schieberegler. Pfeiltasten verstellen ihn stundenweise, und Screenreader hören die Uhrzeit mit Tageszeit, etwa „18:00 Uhr, Abend“. Der Tageszeit-Satz wird bei jeder Änderung angesagt. „Tag abspielen“ lässt sich jederzeit anhalten und entfällt bei reduzierter Bewegung. Ohne JavaScript zeigt die Section den Mittag mit allen Erklärungen.
Fragen zur Demo.
Wann eignet sich ein Bento-Grid?
Wenn mehrere Informationen zusammengehören, aber unterschiedlich viel Gewicht brauchen. Die Größe und Reihenfolge der Flächen müssen eine Entscheidung unterstützen. Für lange, zusammenhängende Erklärungen ist Fließtext meist geeigneter.
Zeigt die Demo echte Energiedaten?
Nein. Der Tagesverlauf ist ein typisches, vereinfachtes Beispiel. Es werden keine Messwerte, Erträge oder Einsparungen simuliert.
Warum ein Regler und keine Animation, die von selbst läuft?
Wer selbst stellt, bestimmt das Tempo und kann bei einer Uhrzeit stehen bleiben. Die Wiedergabe startet nur auf Klick.