Die Inspiration für diesen Blogbeitrag stammt aus dem erfolgreichen Webinar “Designing IoT Dashboards to Amaze Your Customers”, präsentiert von Klaus Borges, Lead Front-end Developer, und David Hall, Customer Success Manager. Das Webinar zog über 100 Teilnehmer an und lieferte wertvolle Einblicke in die Gestaltung wirkungsvoller und ansprechender IoT-Dashboards. Aufgrund seines Erfolgs haben wir die wichtigsten Punkte des Webinars zusammengefasst.
Ausgangspunkt
Für unsere Erfahrung im Dashboard-Design arbeiten wir uns von einem aus unserer Sicht schlechten Dashboard zu einem hin, das wir als herausragend bezeichnen würden. Dieses erste Dashboard sieht vielleicht gut genug aus, wenn man nicht weiter darüber nachdenkt.
Unsere Reise beginnt mit einem Dashboard-Design, das auf den ersten Blick gut genug erscheinen mag, bei genauerem Hinsehen aber mehrere gravierende Probleme aufweist. Dieses Dashboard zeigt alle Daten gleichzeitig an, was Nutzer überfordern kann. Hier sind die 6 größten Probleme, die wir festgestellt haben:
-
Zu viele Widgets: Aus unserer Erfahrung haben wir bei mehreren Dashboards mitgewirkt, die zu viele Daten und zu viele Widgets hatten. Das überlädt nicht nur die Oberfläche und überfordert die Nutzer, sondern kann auch zu einer schlechten Erfahrung beim Laden der Daten führen, da Widgets in unterschiedlichen “Ansichten” platziert werden können: in verschiedenen Dashboards, in Tabs innerhalb eines Dashboards oder in einem modalen Dialog, der sich beim Klick auf eine Schaltfläche öffnet.
-
Fehlende Maßeinheiten: Den Temperaturdaten fehlten die Einheiten, sodass Nutzer nicht wussten, ob es sich um Celsius- oder Fahrenheit-Werte handelte.
-
Überladene dynamische Tabelle: Die dynamische Tabelle #1 zeigte gedrängte Daten an, was das Verständnis erschwerte.
-
Verwirrende Alarme: Die Widgets, die die Anzahl der Alarme anzeigen, geben den Schweregrad der Alarme nicht an. Man kann sich in der Oberfläche daran gewöhnen, aber es ist in solchen Fällen immer besser, dies explizit zu machen.
-
Generische Widget-Titel und -Bezeichnungen: Die Widget-Titel und -Bezeichnungen waren zu vage und gaben wenig Kontext zu den Daten, die sie darstellten.
-
Mehrdeutige Diagramm-Untertitel: Die Untertitel im mit “Line #1” beschrifteten Diagramm waren repetitiv und lieferten keine umsetzbaren Informationen.
Mehr Kontext
Wir haben mit den Verbesserungen begonnen, indem wir:
-
den Widgets klare, beschreibende Titel und Bezeichnungen zugewiesen haben, die angeben, was sie darstellen.
-
Temperaturmaßeinheiten hinzugefügt haben (z. B. °C oder °F).
-
die Tabelle Sensor Log mit klaren Spaltennamen versehen haben, statt dieselbe Variable immer wieder zu wiederholen (alles in der Tabelle wird über Formulas aus Metadaten abgerufen)
-
die Tabelle Sensor Log aktualisiert haben, um Optionen (die nicht lesbare IDs sein können) durch Bezeichnungen zu ersetzen. Das lässt sich mit Dropdown-Feldern umsetzen, die statische Optionen (im Widget definiert) oder dynamische Optionen (in Datensätzen gespeichert) abrufen
-
die Diagramm-Untertitel überarbeitet haben, um Schweregrade und ihre jeweilige Bedeutung anzugeben. Schweregrad 1 wurde beispielsweise als die höchste Stufe festgelegt.
Das Dashboard sieht noch nicht großartig aus, aber da diese Schritte in beliebiger Reihenfolge erfolgen können, bringt dieser hier den größten Nutzen, wenn es darum geht, die Frustration der Nutzer zu verringern: Es mag schmucklos und überladen wirken, aber zumindest kann der Nutzer durch das Lesen der Texte alles nachvollziehen.
Visuelle Verbesserungen
Während sich die Funktionalität des Dashboards verbesserte, brauchte sein visuelles Erscheinungsbild noch Aufmerksamkeit.
Wir haben nun alle Widgets eingefärbt, was manchmal als die wichtigste Aufgabe hervorsticht. Mehr Kontext hinzuzufügen war jedoch wirkungsvoller, wenn es darum ging, mögliche Quellen von Verwirrung zu beseitigen. Das Einfärben ist recht einfach, da man die Farben in einem Widget anpassen und die meisten Farben sehr schnell auf die anderen Widgets im Dashboard übertragen kann. Außerdem haben wir Icons eingebaut, um Alarme visuell deutlicher abzuheben.
Die Spalten für Schweregrade und den Status “Gesehen” haben nun Icons, die als schnelle visuelle Darstellung dienen, sodass der Nutzer nicht erst eine Menge Text durchlesen muss.
Die Farben sind hier durchgängig standardisiert, sodass dieselben Farben in allen Widgets wiederverwendet werden. Wenn eine Farbe etwas bedeutet, das die Aufmerksamkeit des Nutzers erfordert, verwendet alles andere, das dieselbe Aufmerksamkeit verlangt, dieselbe Farbe.
Auch das Diagramm wurde so bearbeitet, dass die Linienfarben zum oben genannten Punkt passen.
Da die aktuelle Auswahl der Blueprint Devices für die TagoIO-Organisation gilt, ziert nun zudem das TagoIO-Logo das Dashboard und zeigt deutlich die Organisation oder das Gebäude an, das es repräsentiert.
Effektive Nutzung des Platzes
Trotz unserer bisherigen Iterationen hat das Dashboard noch Luft nach oben, was die effektive Nutzung des verfügbaren Platzes angeht. Es ist weniger überladen geworden, aber wir können die Informationen noch auf das reduzieren, was für das Dashboard notwendig ist.
Bedenken Sie, dass Sie weitere Tabs im selben Dashboard, andere Dashboards und sogar modale Dialoge nutzen können, die sich beim Klick auf eine im Dashboard platzierte Schaltfläche öffnen (z. B. die Schaltfläche History, um das Diagramm anzuzeigen).
Wir haben uns auf die wichtigsten Daten konzentriert, in diesem Szenario auf die Innentemperatur und die Luftfeuchtigkeit, um den Platz optimal zu nutzen. Wir haben die Außeninformationen und die Zähler für weniger gravierende Alarme entfernt und so die Ablenkung reduziert. Diese Informationen können auf einem separaten Tab nützlich sein, sind für das Haupt-Dashboard aber nicht entscheidend.
Wenn der Nutzer etwas Überflüssiges sieht statt dem, was er braucht, wird er frustriert sein, auch wenn er sich daran gewöhnen mag. Wenn keiner Ihrer Nutzer sich für eine Information im Dashboard interessiert, nimmt sie wichtigeren Dingen den Platz weg. Daher ist es für ein effektives Design sehr wichtig, auf Feedback zu hören und zu iterieren.
Wir haben außerdem die Tabelle verbreitert, um die Lesbarkeit zu verbessern. Das ist möglich, weil wir die Diagramme in einen modalen Dialog verschoben haben, da es in diesem Anwendungsfall weniger wichtig ist, auf den ersten Blick zu sehen, wie Alarme im Zeitverlauf steigen und fallen.
Beim Entwerfen von Dashboards, die Freude bei der Nutzung machen, ist es wichtig herauszufinden, welche Daten in einer “Ansicht” (Dashboard oder Tab) am wichtigsten sind, statt einfach alles dort abzuladen und zu schauen, was hängen bleibt.
Nutzer mögen sich daran gewöhnen, durch gedrängte und überladene Dashboards zu navigieren, aber das heißt nicht, dass sie nicht viel Frustration erleben, besonders wenn sie sich Daten ansehen müssen, um fundierte, kritische Entscheidungen zu treffen.
Herausragende Nutzererfahrung
Eine herausragende Nutzererfahrung zu schaffen erfordert Liebe zum Detail.
Wir haben den Abstand zwischen den Widgets verringert, damit Nutzer zusammengehörige Informationen als Gruppe wahrnehmen. Da wir die Einheiten schon zuvor verbessert haben, haben wir Dynamic Formulas verwendet, mit denen Sie zwischen beliebigen benötigten Einheiten umrechnen können. Wir haben die Temperatureinheiten hervorgehoben, aber Sie können Ihren Nutzern eine großartige Erfahrung bieten, indem Sie ihnen erlauben, Einheiten nach ihren Vorlieben auszuwählen, was in einem globalen Kontext sehr wichtig ist.
Außerdem gibt es einige Dinge, die in diesem Blogbeitrag nicht gezeigt werden, aber die Nutzererfahrung verbessern. Was die Lokalisierung angeht, bieten wir Dictionaries an, die sich perfekt eignen, um Ihre Anwendung in mehreren Sprachen nutzbar zu machen.
Beim Entwerfen der Dashboards für diese Präsentation wurde Dictionary in jedem einzelnen Widget verwendet, da Sprachen bei Bedarf später hinzugefügt werden können.
Was das Diagramm betrifft: Ein Klick auf die Schaltfläche History im Sensor-Alarm-Log blendet es ein und stellt so sicher, dass unkritische Informationen zugänglich bleiben, ohne die Hauptansicht zu überladen. Weitere Funktionen können die Erfahrung zusätzlich verbessern, etwa Color- und Icon-Conditions, um visuelle Indikatoren und Farben optimal zu nutzen.
Bei der Nutzung Ihrer Plattform geht es bei einem effektiven Dashboard-Design um mehr als nur Optik; es kann durch das Ändern der Farben oder durch den Einsatz von Transparenz und Hintergrundbildern erreicht werden.
Wir haben den iterativen Ansatz gewählt, um zu verdeutlichen, dass Sie diese Schritte in kleinen Etappen gehen können und jeder davon die Nutzererfahrung deutlich verbessern kann.
Auch dieser Blogbeitrag wurde durch das Webinar “Designing IoT Dashboards to Amaze your Customers” inspiriert, in dem Klaus Borges und David Hall Einblicke in die Gestaltung von IoT-Dashboards gaben. Ihre Expertise, kombiniert mit dem Feedback von über 100 Teilnehmern, hat uns zu dieser Zusammenfassung motiviert. Wenn Sie diese Richtlinien befolgen, können Sie Dashboards erstellen, die Daten wirkungsvoll präsentieren und eine reibungslose und ansprechende Nutzererfahrung bieten. Für weitere ähnliche Webinare besuchen Sie den YouTube-Kanal von TagoIO.
