ioBroker Visualisierung – Worauf du achten musst

Veröffentlicht von Lukas am

Die Steuerung des eigenen Smart Home ist immer wieder ein großer Streitpunkt. Welchen Weg sollte man gehen? Visualisierung oder doch lieber Sprachassistent? Ich bin der festen Überzeugung, dass eine richtige Tablet-Steuerung den Alltag vereinfachen kann. Denn nicht jeder Sprachbefehl kommt dir sofort in den Sinn, wenn du ihn einmal brauchst. Und auch für Gäste kann eine geführte Bedienung über das Tablet durchaus leichter sein. Doch worauf muss man bei einer ioBroker Visualisierung achten? Und wie sieht die perfekte ioBroker Visualisierung aus?

In diesem Artikel möchte ich meinen Eindrücken, Erfahrungen und vor allem meiner Meinung Raum geben. Da ich mich in den vergangenen Wochen intensiv mit dem Thema beschäftigt und eigene Vorlagen erstellt habe. Dazu habe ich mir das Tool Canva zur Hilfe gezogen. Hiermit kann ich wunderbar Vorlagen erstellen, um Möglichkeiten abzuchecken und zu erörtern, ob meine Visualisierung so umsetzbar ist.

Leider bin ich kein Designer, daher kann ich selbst nicht auf das entsprechende Expertenwissen zurückgreifen. Meine Expertise liegt vielmehr in der Umsetzung, da ich im Bereich der Softwareentwicklung meinen Schwerpunkt habe. Da ich im Laufe meiner beruflichen Karriere allerdings schon in einem Unternehmen gearbeitet habe, dessen Schwerpunkt die Erstellung von UIs ist, konnte ich ein paar Tipps und Tricks aufschnappen. Diese habe ich versucht in meine Vorlagen zu packen.

ioBroker Vis Future Vorlage

#1 Das Überladen der Visualisierung

Um für mich die richtige Visualisierung zu finden, habe ich viel im Internet recherchiert. Dabei gibt es unzählige Visualisierungen, die auf den ersten Blick super schön aussehen. Doch bei genauerer Betrachtung erkennt man deutlich, dass sie einfach völlig überladen sind.

Der Gedanke, der viele umtreibt ist vermutlich, dass man möglichst viel auf einen Blick erkennen soll. Man erspart sich so eine lästige Navigation und kann eine einzige Ansicht dauerhaft anzeigen. Doch wie sinnvoll ist das eigentlich?

Meine Herangehensweise ist diejenige, dass ich mich bei jeder Änderung frage, ob ich das wirklich auf dem Tablet sehen muss. Ein klassisches Beispiel hierfür ist die Anwesenheit. Muss mir auf dem Tablet angezeigt werden, wer daheim ist? Weiß ich das nicht selbst schon? Und wo liegt der Mehrwert dieser Information?

Persönlich bin ich zu dem Entschluss gekommen, dass diese Anzeige ein Nice-To-Have-Feature ist. Es bringt mir keinen Mehrwert und kann ersatzlos aus der Visualisierung gestrichen werden. Und schon haben wir ein Element weniger, das angezeigt werden muss. Du wirst sehen, dass du im Laufe der Zeit immer mehr Elemente verbannen kannst, da sie keinen entscheidenden Vorteil bringen. Behalte dabei immer im Hinterkopf, für wen du dieses Dashboard überhaupt erstellst. Nämlich für dich selbst!

Du kannst dir natürlich auch überlegen, auf welche Elemente du täglich blickst. Gilt dein erster Blick am Morgen dem Wetter? Dann rein in die Visualisierung damit! Schaust du jeden Morgen auf deinen Stromverbrauch? Nein? Dann weg damit von der ersten Seite. Nutze den Platz sinnvoller!

Nach und nach wird sich für dich ein Bild dessen ergeben, was wichtig ist und welche Elemente du nicht in deiner ioBroker Visualisierung brauchst. Oder zumindest nicht auf der ersten Seite.

Bist du mit deiner derzeitigen Visualisierung zufrieden?

Ergebnisse    Archiv

#2 Lass dich von der UI führen

Mein Tipp Nummer 2 ist eigentlich ziemlich banal. Das User Interface, also deine ioBroker Visualisierung, soll dich durch dein Smart Home führen. Das bedeutet, dass die Aufteilung nach Unterseiten einer logischen Struktur folgt. Diese Struktur führt dich gezielt durch die richtige Bedienung. Nehmen wir uns als Beispiel iOS vor.

Nach dem Entsperren des iPhones erscheinen die unterschiedlichen Apps auf deinem Homescreen. Der Homescreen ist dabei der Ausgangspunkt für all das, was du mit deinem iPhone tun kannst. Wenn du nun in die Einstellungen navigierst ist dir klar, dass du hier dein iPhone verwalten kannst. Was iOS aber nun tut ist, dass es dich gezielt durch die gewünschten Einstellungen führt. Du siehst diverse Apps, deren Berechtigung du in einer weiteren Unterseite verwalten kannst.

Aus einem Untermenü navigierst du per Pfeil zurück auf die letzte Ebene. Ein Wischen von unten nach oben führt dich hingegen auf die Startseite, also den Homescreen, zurück. Diese Art der Steuerung haben wir so verinnerlicht, dass wir gar nicht mehr darüber nachdenken (müssen). Mach dir das bei deiner ioBroker Visualisierung zu nutze. Erstelle eine klare Führung durch dein Design und nutze dabei Elemente, die jeder Nutzer kennt.

Du wirst sehen, dass eine gute Struktur deiner Hausautomation so viel leichter in der Bedienung sein kann als das Anzeigen von allen Elementen auf einer einzigen Seite. Vor allem findest du viel schneller und einfacher genau das, was du wirklich suchst.

Vertiefe dein Wissen:  3 Tipps für deine ioBroker Visualisierung

#3 Benutze Icons in deiner ioBroker Visualisierung

Auch wenn ich sehr gerne Texte schreibe, bin ich doch auch ein großer Freund von Icons und Bildern. Dazu fällt mir immer ein Spruch ein, den du mit großer Sicherheit auch kennst:

Ein Bild sagt mehr als tausend Worte.

Das bedeutet nun konkret für die Visualisierung, dass du stark auf visuelle Eindrücke setzen solltest. Sie wirken in meinen Augen edler und brauchen deutlich weniger Platz. Zum Beispiel kannst du anstatt dem langen Wort Wohnzimmer auch einfach ein Symbol einer Couch verwenden. Anstatt dem Wort Arbeitszimmer nutzt du ein Icon von Ordnern oder eines Computers. Wichtig dabei ist, dass du eine klare Struktur behältst. Fange also nicht an, die Icons für unterschiedliche Zwecke zu mischen.

Wenn das Icon eines Hauses zu Beginn deiner Visualisierung für Homescreen steht, kannst du dieses Icon nicht einfach für die Außenbeleuchtung nutzen. Das geht nicht, denn hier geht der rote Faden verloren und der Nutzer ist in der Anwendung wirklich verwirrt.

Icons sind außerdem äußerst hilfreich, um Texte zu vermeiden. Eine intuitive Bedienung ist für mich persönlich nicht, wenn ich viele Texte lesen muss. Stattdessen tippe ich ganz von allein auf das richtige Symbol für den jeweiligen Raum, in dem ich mich befinde. Oder ich tippe auf die Wetterwolke, um mehr über das aktuelle Wetter zu erfahren.

Ein gutes Beispiel hierfür ist glaube ich dein Auto. Leuchtet die Öl-Lampe auf, dann weißt du, dass du nach dem Ölstand schauen musst. Leuchtet hingegen die Motorkontrollleuchte, stimmt etwas mit dem Motor nicht. Dabei braucht es keine Texte, denn du weißt direkt, was dein Auto dir sagen möchte.

Zuletzt aktualisiert 2024-12-21 / (*) Affiliate Links / (**) Affiliate Links, Preis kann abweichen (andere Plattform) / Bilder von der Amazon Product Advertising API / Der angegebene Preis kann seit der letzten Aktualisierung gestiegen sein.

#4 Farben sparen Platz ein

Blicken wir nun noch auf verschiedene Zustände, von denen es in einem Smart Home wirklich unzählige gibt. Klassisches Beispiel ist die ein- oder ausgeschaltete Steckdose.

Zur Bedienung kannst du nun entweder zwei verschiedene Buttons nutzen, die jeweils für einen Zustand stehen. Alternativ bietet sich aber auch die Möglichkeit, dass Farben gezielt eingesetzt werden, um ein Verständnis über den aktuellen Zustand zu geben. Eine grüne Umrandung bedeutet in diesem Fall, dass die Steckdose eingeschaltet ist. Eine rote steht für den ausgeschalteten Zustand.

Diese Art der Anzeige kannst du auf viele Dinge im Smart Home übertragen. Die Alarmanlage zum Beispiel ist grün, wenn sie eingeschaltet (oder ausgeschaltet) ist. Rot ist entsprechend der gegenteilige Zustand. Auch die Anwesenheit lässt sich so anzeigen, wenn sie dir in deiner Visualisierung wichtig ist.

Aber Achtung. Auch bei den Farben gilt es wieder zu beachten, dass du die Bedeutung nicht mischst und auf bewährte Techniken zurückgreifst. Die Farbe Rot zum Beispiel steht in der Regel für Warnung, Gefahr oder Fehler. Diese nun dafür zu nutzen, dass alles in Ordnung ist, sorgt für viel Verwirrung.

Mir hilft dabei immer der Gedanke an einen Chat. Ein blauer Punkt bedeutet für mich, dass es eine nicht gesehene Information gibt, die ich abrufen sollte. Ein grüner Punkt bedeutet, dass mein Gegenüber gerade verfügbar ist. Ein roter Punkt hingegen steht dafür, dass mein Gegenüber nicht gestört werden möchte oder nicht verfügbar ist.


Stay connected!

Das Smart Home ist ständig verbunden, warum nicht auch wir?

Folge mir auf der Plattform deiner Wahl.


#5 Die Outside-In-Perspektive – sei dein eigener Gast

Der letzte, aber wirklich entscheidende Tipp ist, dass du dich in die Rolle deines eigenen Gasts versetzt. Theoretisch sollte eine ioBroker Visualisierung so aufgebaut sein, dass jeder Gast ohne Einweisung dazu in der Lage ist, das Licht bei dir einzuschalten. Die Steigerung bildet die Steuerung von sämtlichen anderen Funktionen im Smart Home.

Aus diesem Grund ist es sehr ratsam, wie ein Gast zu denken, der noch nie mit deinem Smart Home in Berührung gekommen ist. Er blickt auf die Visualisierung und erkennt sofort anhand der Symbolik, welchen Button er drücken muss. Für die Beleuchtung wird ein Button mit einer Glühbirne anzeigt und zur Farbauswahl gibt es einen sogenannten Colorpicker. Doch müssen beide Elemente nebeneinander stehen?

Oft genügt es, wenn du deinen Gast auf das Icon tippen lässt, dessen hinterlegtes Gerät er steuern möchte. Danach erhält der Gast sämtliche Einstellungsmöglichkeiten, die er auswählen oder verändern kann. Durch die einheitliche Navigation wird auch sofort klar, welches Licht er konkret steuert. Da er sich vom Hauptmenü in das Untermenü Wohnbereich navigiert hat weiß dein Gast, dass er nun die Beleuchtung für den Wohnbereich verändert. Auf der Startseite hingegen müsstest du zuerst eine Erklärung dafür liefern, um welche Lampe es konkret geht.

Dein Ziel sollte es sein, dass jeder Gast sofort nach Betreten deiner Wohnung mit der Tablet-Steuerung zurecht kommt. Er darf keine lange Einweisung absolvieren müssen, nur um zu verstehen, wie er das Licht einschaltet.

Ein gutes Beispiel hierfür sind in der physischen Welt die Lichtschalter. Niemand wird dich in deinem Zuhause fragen, ob der Lichtschalter das Licht einschaltet. Es kommt höchstens die Frage auf, welcher Lichtschalter denn nun der richtige ist. Diesem Beispiel solltest du bei der Erstellung deines Dashboards folgen. So erreichst du eine intuitive Bedienung, ohne dass hierfür ein langes Handbuch notwendig ist.

Darüber hinaus sorgst du so auch dafür, dass du nach einem Jahr immer noch genau weißt, wie deine eigene Steuerung funktioniert. Das macht dir nicht nur die Bedienung leichter, sondern auch die Anpassung, sofern du etwas verändern willst.

Die Schwierigkeiten einer ioBroker Visualisierung

In meinen Augen gibt es bei der richtigen Visualisierung trotz aller Tipps eine große Herausforderung. Wir sind mit vielen verschiedenen Daten konfrontiert, die alle relevant für den Betrieb des Smart Homes sind. Dabei verlieren wir alle schnell aus dem Blick, was denn nun wichtig ist zu wissen und welche Informationen eher irrelevant sind.

Wenn du dich an die Erstellung einer Steuerung machst, solltest du daher in zwei Kategorien einteilen. Kategorie 1 beschreibt alle Zustände, die zum Betrieb des Smart Homes notwendig sind. Darunter zählen zum Beispiel auch Informationen zur Signalstärke oder Erreichbarkeit der jeweiligen Geräte und Zentralen im Smart Home. Kategorie 2 beschreibt hingegen alle Informationen, die visualisiert werden sollten, da sie der Steuerung des Zuhauses dienen.

Dabei ist es manchmal auch hilfreich, bestimmte Informationen nur dann anzuzeigen, sofern sie gerade wichtig sind. Ich habe mich zum Beispiel dafür entschieden, keine Statusinformationen zur Batterieleistung in der Visualisierung anzuzeigen. Stattdessen soll an einer geeigneten Stelle ein Batteriesymbol auftauchen, sobald eine Batterie ein kritisches Level erreicht. Um dann nicht im Dunkeln zu tappen, komme ich beim Tippen auf dieses Icon auf eine Übersichtsseite aller Batterien und kann damit entscheiden, welche ich austauschen muss.

Sobald der Austausch abgeschlossen ist und alle Geräte über genug Batteriekapazität verfügen, wird der Button wieder ausgeblendet, da er für meinen Alltag nicht mehr relevant ist.

Die gleiche Vorgehensweise kannst du zum Beispiel nutzen, um anzuzeigen, wenn der Briefträger dir Post in den Briefkasten geworfen hat.

Diese Art der Visualisierung kommt übrigens auch bei Windows vor. In der Taskleiste erscheinen Anwendungen erst dann, wenn sie geöffnet sind. Andernfalls sind sie für die Anzeige in der Taskleiste nicht relevant und können weggelassen werden. Natürlich sofern sie nicht angeheftet sind.

Vertiefe dein Wissen:  ioBroker Blockly - Der ausführliche Leitfaden

Von den Großen lernen

Prinzipiell solltest du immer mit offenen Augen durchs Leben gehen. Besonders bei der Erstellung deiner ioBroker Visualisierung hilft es dir dabei, wenn du dir die Plattformen ganz genau ansiehst, die du täglich nutzt. Gerade die Großen, wie zum Beispiel Apple oder Microsoft investieren große Summen in das richtige User Interface. Dabei werden Designer, UX-Profis (User Experience) und Psychologen eingespannt. Auch Techniken wie das Eye-Tracking helfen den Großen dabei, die perfekte UI zu erschaffen.

Wenn du dir diese Erkenntnisse indirekt zu nutze machst, indem du gute Umsetzungen auf deine Visualisierung überträgst, kannst du dir selbst eine sehr intuitive Visualisierung erstellen. Alles was du hierfür brauchst, hast du bereits seit deiner Geburt: die Augen.

Darüber hinaus kannst du natürlich auch mit deinem näheren Umfeld über genau diese Pläne sprechen. Frag doch mal die eigenen Eltern, Kinder oder Freunde, worauf sie auf deiner Visualisierung tippen würden, wenn sie das Licht einschalten wollen. Sobald die Antwort „Ich weiß es nicht“ kommt, ist das Konzept vielleicht nicht ganz so gut.

Hinterfrage außerdem immer wieder die angezeigten Elemente in deiner Visualisierung. Brauchst du sie wirklich? Wann hast du sie zuletzt genutzt? Sind sie vielleicht zu prominent platziert?

Auf Basis dieser Erkenntnisse und Erfahrungen, kannst du deine ioBroker Visualisierung immer wieder anpassen. Manchmal genügt es dabei schon, einzelne Elemente anders anzuordnen.

Und wenn es dann nicht besser wird?

Wenn du selbst nach einem großen zeitlichen Aufwand immer noch ratlos bist, kannst du selbstverständlich auch professionelle Hilfe in Anspruch nehmen. Es gibt viele Designer und Experten, die dich bei deiner Visualisierung unterstützen können. Vielleicht kennst du sogar jemanden bei der Arbeit oder aus deinem Privatleben, den du fragen kannst.

Und selbst wenn das nicht der Fall sein soll, helfen dir andere gerne weiter. Da sind natürlich auf der einen Seite etablierte Unternehmen, die dir helfen können. Auf der anderen Seite gibt es allerdings auch sehr viele Freelancer, die nur auf neue Aufträge warten. Letztere sind meist sogar deutlich günstiger. Ein guter Anlaufpunkt ist dabei die Plattform Fiverr, die ich selbst im Laufe meines Berufslebens kennengelernt habe.

Mache dem Freelancer klar, welcher Ausgangspunkt gerade herrscht. Zeige der Person die aktuelle Steuerung und erkläre, worauf du besonders viel Wert legst. Im Anschluss könnt ihr dann besprechen, was genau zutun ist.

Von Designern bekommst du im Nachgang meist eine Vorlage, anhand derer du die notwendigen Anpassungen vornehmen kannst. Dabei musst du selbst entscheiden, ob dir ein Design für die Startseite genügt um es nachzubauen, oder ob du ein komplettes Design für jede einzelne Unterseite brauchst. Die Preise orientieren sich hierbei natürlich an der gewünschten Leistung, das muss dir klar sein.

Fazit zur ioBroker Visualisierung

Was können wir nun aus diesen Informationen mitnehmen?

Die richtige Gestaltung einer Visualisierung braucht vor allem Zeit. Diese Zeit musst du investieren, um eine für dich ideale Steuerung in deinem Smart Home zu haben. Am besten beginnst du mit einem Entwurf in einem Grafikprogramm, so dass du schnell Anpassungen vornehmen kannst.

Diese Vorlagen, die dabei entstehen, kannst du mit deinem Haushalt, deiner Familie oder deinen Freunden besprechen. Sie sagen dir meist sehr klar, ob sie etwas verstehen oder Probleme dabei haben. Diese Erkenntnisse kannst du wiederum nutzen, um deine Visualisierung zu verbessern.

Expertentipps im Internet können darüber hinaus eine weitere Sichtweise eröffnen. So gibt es im Internet diverse Quellen dazu, welche Grundsätze im User Interface Design herrschen. Schau am besten mal danach und lass dich davon inspirieren.

Um Praxiseinblicke zu sammeln kannst du zudem einen genauen Blick auf die Plattformen werfen, die du täglich nutzt. Dort findest du oft im Detail wichtige Erkenntnisse, die dir bei der richtigen Aufteilung helfen können.

Und zuletzt kannst du selbstverständlich immer wieder Optimierungen vornehmen, die deine Oberfläche noch besser machen. Wenn du einmal selbst den richtigen Menüpunkt suchen musst, dann nutze diese Erkenntnis, um genau diesen Menüpunkt besser zu platzieren. Gerade wenn du kein Experte bist, wirst du sehr viel durch Ausprobieren lernen können. Die daraus entstehenden Erkenntnisse kommen dann wiederum deinen Skills zu Gute, die du auf eine so tolle Art und Weise immer weiter ausbauen kannst.

Wer sagt also, dass Smart Home nur eine Spielerei ist? 😉

Kategorien: ioBroker

Avatar-Foto

Lukas

Als Softwareentwickler und Projektmanager mit einem Master of Science in Wirtschaftsinformatik weiß ich genau, wie die Dinge in der IT zu funktionieren haben. In meinem Blog kombiniere ich seit mehr als 7 Jahren mein Wissen mit meiner Neugier im Bereich Smart Home. Transparenz und Praxisnähe stehen für mich dabei im Vordergrund. Mein Fokus liegt vor allem auf der Software ioBroker, da ich mein eigenes Smart Home damit betreibe. Meine Beiträge basieren somit nicht nur auf theoretischem Know-how, sondern auch auf praktischen Erfahrungen aus meinem vernetzten Zuhause. Mein persönliches Ziel ist es, dir Einblicke in das Smart Home zu geben, die dich wirklich voranbringen.

0 Kommentare

Schreibe einen Kommentar

Avatar-Platzhalter

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert