Funktionserweiterung für eine B2B Platform

Wie sich komplexe Anforderungen an individuelle Energiekennzahlen in einen intuitiven Konfigurationsflow übersetzen lassen.

Überblick

Ausgangslage & Problem

Für das Dashboard einer Energiemanagement Plattform soll eine Funktionserweiterung geschaffen werden. Aktuell gibt es auf jedem Standort-Dashboard eine Reihe von vordefinierten KPI Kacheln, die zentralen Energiewerte abhängig vom ausgewählten Zeitraum anzeigen. Dabei handelt es sich um grundlegende Kennzahlen wie Verbrauch und Erzeugung. Jeder Standort hat die gleichen Standardkacheln bereits im Dashboard hinzugefügt, kann diese aber beliebig, löschen, umsortieren und um ein paar weitere vorgegebene Kacheln ergänzen, die im Katalog enthalten sind.

Während das vorhandene System viele grundlegende Kennzahlen umfasst, wurde durch Feedback von verschiedenen Kunden deutlich, dass die vorgegebenen Kennzahlen nicht alle Anwendungsfälle abdecken. Bei weiterer Discovery stellte sich außerdem heraus, dass die potenzielle Lösung auch für ein weiteres, relevantes Feature auf der Plattform Einsatz finden könnte.

Aktuelle KPI Auswahl

Um im vorherigen Setup KPI-Kacheln (zuvor „Mini-Widgets“) hinzuzufügen oder zu löschen, mussten User über den Button „Mini-Widgets hinzufügen“ in der Topbar das Menü öffnen und dort alle gewünschten Kacheln auswählen, ungewünschte abwählen und letztlich bestätigen. Suboptimal ist dabei, dass der Löschprozess damit vom Löschen von Charts auf dem Dashboard abweicht. Auch das Menü an sich ist verbesserungswürdig, so ist die Anordnung der Kacheln bisher willkürlich, eine Gruppierung nach bereits ausgewählten und verfügbaren KPI könnte hier sinnvoll sein sowie eine intentionelle Sortierung bspw. nach Wichtigkeit oder KPI Titel.

Ermittlung der Anforderungen

Ausgehend von einem einzelnen Kundenwunsch nach einem bestimmten KPI im Dashboard, wurde die Product Discovery gestartet. Es sollte herausgefunden werden, welche Anwendungsfälle neben dem initialen noch bestehen, um in erster Linie zu prüfen, ob der Aufwand für eine Funktionserweiterung gerechtfertigt ist und wenn zutreffend, eine Lösung auszuarbeiten, die möglichst alle Cases abdeckt und einfach zu bedienen ist. Dazu wurden ausgewählte Kunden befragt. Es stellte sich heraus, dass weitere Kunden von mehr Auswahlmöglichkeiten von KPI Cards profitieren würden und sie nicht vor etwaigen Einrichtungsaufwand abgeschreckt sind. Die weitere Discovery ergab folgende konkrete Anforderungen:

• Höchstmögliche Benutzerdefinierbarkeit bei möglichst niedrigem Aufwand und Ermüdung
• KPI-Kachel-Flows analog zu Chart-Flows zur Vermeidung von Friction aufgrund bestehendem mentalen Model
• Custom KPI-Titel zur Vermeidung kryptischer oder zu langer Titel
• Weitere Aggregationsmöglichkeiten der Daten (Durchschnitt, Minimum etc.)
• Erweiterte Templateauswahl für Casual User

Ziel

Es sollte eine neuer User Flow für einen erweiterten Funktionsumfang der KPI Kacheln ausgearbeitet werden, der für Power User alle nötigen Anwendungsfälle abdeckt, aber nicht den Kunden im Weg stehen, für die die bestehenden Templates hinreichend sind.

Lösung

Die Herausforderung bestand darin, möglichst viel Flexibilität zu ermöglichen, ohne den Konfigurationsprozess unnötig komplex zu gestalten. Dabei standen die unterschiedlichen technischen Vorkenntnisse und Nutzungsbedürfnisse der User im Mittelpunkt.

Grundstruktur

Analog zum Flow für das Erstellen von Custom Charts, wird ein zweiteiliges Modal aus einer Preview der Kachel und einem Einstellungspanel verwendet. Die Vorschau sorgt dafür, dass User beim Einstellen direkt die Auswirkung ihrer Aktionen sehen und so potenzielle Missverständnisse oder Fehleinstellungen vermieden werden können. Beim Modal selbst handelt es sich um die zweitgrößte Variante der Komponente, damit genügend Platz für eine bequeme Konfiguration vorhanden ist, aber der Kontext nicht vollständig verloren geht, da User noch sehen, dass sie auf dem Dashboard sind.

Datenauswahl

Zentrale Aktion im Flow ist das Auswählen der Daten, also der KPI, die in der Kachel angezeigt werden soll. Daher wurde ein Fokus darauf gesetzt, den Prozess möglichst einfach und nahtlos zu gestalten.

Kunden können eine sehr große Menge Anlagen und zugehörige Datensätze haben, daher war die Integration einer Suche unerlässlich. Userinterviews zu den Anforderungen ergaben, dass die Suche der präferierte Weg zur Datenauswahl ist, allerdings sollte die Liste dennoch möglichst nutzerfreundlich sein. So beliben etwa die Header beim Scrollen sticky, damit User wissen zu welchen Anlagen die Datensätze gehören, da die Namen wie “Verbrauch” nicht eindeutig sind.

Bis User einen Datensatz auswählen, verbleibt die Vorschau Kachel im Emty State. Nach der Auswahl müssen die Daten des Zeitraumes geladen werden, der momentan auf dem Dashboard ausgewählt ist (default = heute). Dabei erscheinen die Elemente als Skeleton Loading Animation.
Die größten Veränderungen bei Datenauswahl passieren im Einstellungspanel. So schließt sich die Liste, sodass nur noch die ausgewählte KPI zu sehen ist. Erst jetzt erscheinen alle weiteren Einstellungsmöglichkeiten. Hierzu wurden Usertests durchgeführt und drei Varianten geprüft. Sowohl beim Bestehen lassen der Liste als auch bei der Aufteilung auf Tabs wurden Einstellungen übersehen. Das Einklappen der Liste war somit die präferierte Variante. Einziger Nachteil ist dabei, dass User die Liste wieder aufklappen müssen, falls sie sich verklicken. Der Vorteil der Auffindbarkeit der Einstellungen und der insgesamt übersichtlicheren Darstellung überwiegt hier aber deutlich.

Kacheltitel

Eine Funktionsanforderung, die sich durch die Interviews ergeben hat, ist das Festlegen von eigenen KPI-Titeln. Dafür gibt es verschiedene Use Cases: zum einen können die Namen sehr lang werden, mit eigenen Titel können bspw. eigene Abkürzungen verwendet werden. Darüber hinaus sind viele Namen sehr technisch oder gar kryptisch und können so verständlicher gemacht werden. Grund dafür liegt eigentlich im Backend und es würde langfristig mehr Sinn machen, alle Namen einheitlich anzulegen, aufgrund des Zeitaufwandes konnte dies allerdings noch nicht stattfinden.

Das Stift Icon neben dem KPI Titel und der Hover State signalisiert, dass er bearbeitet werden kann. Beim Anklicken wird der Titel zum Textfeld und User können den Titel frei wählen und mit Enter oder Rausklicken übernehmen. Ein Reset Button taucht außerdem auf, wenn der Titel bearbeitet wurde, um ihn bei Bedarf auf Default zurückzusetzen.

Benutzerdefinierte Titel sind hier ein Zusatzfeature und kein Muss. Die Kacheln erhalten automatisch Titel, basierend auf gewähltem Attribut, Aggregation und Zeitraum.

Die Ergänzung der Titelfunktion sorgte dafür, dass das Komponent der KPI-Kachel an sich angepasst werden musste, um ggf. Aggregation und Zeitraum abzubilden sowie langen Titeln gerecht zu werden. Verschiedenste Möglichkeiten die zusätzlichen Informationen abzubilden, wurden exploriert und sich letztlich für die Integration in den KPI Titel entschieden, da es die visuell ruhigste Darstellungsform war. So ergaben sich insgesamt 16 verschiedene Varianten, die ins Design System aufgenommen wurden. Auch diverse States wurden berücksichtig, wie bspw. fehlende oder veraltete Daten.

Templates

Während die benutzerdefinierbaren KPI-Kacheln eine Funktionserweiterung für Pro-User darstellt, dient die Templateauswahl dem Erhalt des vorherigen Use Case. User können auf eine Reihe von sinnvollen vordefinierten Kacheln zurückgreifen, wenn sie ihr bisheriges Dashboard erweitern oder anpassen wollen. Im Rahmen des Redesigns wurden die User zu den aktuellen Auswahlmöglichkeiten befragt: es ergab sich nur eine KPI, die bisher noch nicht in der Auswahl vorhanden war, die entsprechend ergänzt wurde – der maximale Netzbezug.
Insgesamt sind die User zufrieden mit den standardmäßig hinzugefügten KPI-Kacheln auf dem Standard Dashboard, sodass erwartet wird, dass das Template Menü selten aufgerufen wird. Es ist entsprechend anzunehmen, dass ein anpassungswilliger User eher eine Custom Kachel erstellt. So finden User das Template Menü nicht mehr wie zuvor als Primary Action beim Hinzufügen von KPI, sondern als Secondary Action, indem sie unter der Card Preview im Hilfstext auf “Template öffnen” klicken.

Es öffnet sich ein weiteres Modal über dem Konfigurationsmodal. Generell gilt, dass Modal über Modal ein Pattern ist, was in der Regel vermieden werden sollte, so wurden weitere Möglichkeiten exploriert, es ergab sich aber dennoch als die beste Variante, weil nur so genügend Platz ist um eine bequeme Auswahl zu treffen und einen guten Überblick zu bewahren. Hinzu kommt, dass es sich um eine seltene, Secondary Action handelt, sodass dieser “Regelbruch” hier vernachlässigbar ist und der Usability zuträglich ist.

Das neue Modal ist neu sortiert, anstatt eine feste Reihenfolge permanent beizubehalten, gibt es eine Aufteilung auf zur Verfügung stehende KPI und bereits im Dashboard vorhandene. Dadurch sieht der User die Kacheln zuerst, die er überhaupt hinzufügen kann.

Sobald User die gewünschte Kachel anklicken, schließt sich das Menü und sie finden sich im Konfigurationsmodal. Hier können sie bei Bedarf Anpassungen vornehmen. In User Tests wurden überprüft, ob es sich dabei um das erwartete Verhalten bei der Auswahl von Templates handelt, dies wurde bestätigt. User erwarten aufgrund des Namings “Template”, dass es sich um eine vordefinierte Kachel handelt, die weiter bearbeitet werden kann. Was einzelne User darüber hinaus noch erwarteten, ist, dass sie eigene Templates speichern können, um sie für Dashboards anderer Standorte wiederverwenden können. Diese Funktion wurde aufgrund des gewünschten Zeitrahmens der Umsetzung allerdings vorerst ausgeklammert.

Edge Cases

Bei der Ausarbeitung der notwendigen Einstellungsmöglichkeiten um alle Anwendungsfälle abzudecken, ergaben sich ein paar Edge Cases für die Lösungen erarbeitet werden mussten:

KPI Lastspitze

Problem bei dieser KPI ist der Vergleichszeitraum. In der Regel wird der Vergleichszeitraum automatisch festgelegt, abhängig vom KPI-Zeitraum, ist dieser z. B. Heute, so wird der Wert für die Trendangabe mit dem Vortag verglichen. Die Lastspitze muss allerdings mit dem bisher im aktuellen Jahr höchsten Wert verglichen werden. Anstatt dies im Einstellungsmenü abzubilden und es damit unnötig komplexer zu machen und unerwartete Kombinationsmöglichkeiten zu erzeugen, wurde sich entschieden, dass User bei Auswahl dieser Kachel keine nachträgliche Bearbeitungsmöglichkeiten erhalten. Diese Logikabweichung ist vernachlässigter, da Lastspitze ohnehin im Standard-Dashboard vorhanden ist und so der Case damit ohnehin vrsl. nie oder extrem selten eintritt.

Diese Entscheidung sorgte allerdings für eine neue Problematik: die Unterscheidung zwischen benutzerdefinierbaren und fixen KPI-Kacheln. Dies muss im KPI-Kachel Design bedacht werden. Standardmäßig können User Kacheln bearbeiten, indem sie über darüber Hovern und auf den dann auftauchenden Settings-Icon-Button klicken. Analog dazu taucht im neuen Design nun bei fixen KPI ein disabled Schloss Icon auf, das beim Hovern den Hilfstext „Diese KPI ist vordefiniert und 
kann nicht bearbeitet werden.“ anzeigt. Diese Unterscheidung ist wichtig zu kommunizieren, damit User durch die Featureerweiterung die Erwartung aufbauen können, dass alle KPI bearbeitbar sind und sich ohne Erklärung Frustration aufbauen kann und ggf. ein Bug angenommen werden könnte.

Attribute kombinieren

Eine weitere Anforderung, die sich in der Feature Discovery ergeben hatte, war die Möglichkeit nicht nur eine KPI auszuwählen, sondern mehrere zu einer neuen zu Kombinieren. Diese Anforderung wurde allerdings fürs erste verworfen, da sie das Feature um ein vielfaches verkomplizieren würde und diverse unabsehbare Cases erzeugen würde, für die eine einheitliche Anpassung der Einstellungen kaum möglich machen würde. So wurde ein Workaround etabliert, der den Anwendungsfall über das Backend löst. Vorteil dabei ist auch, dass so der Aufwand vom Kunden abgewendet wird, was zwar schlechter skalierbar ist, aber als MVP Lösung zum Zeitpunkt die sinnvollste Lösung darstellt.

Ergebnis & Erkenntnisse

Mit dem neuen Konfigurationsflow können User KPI-Kacheln individuell erstellen und an ihre Anforderungen anpassen. Neben erweiterten Aggregationsmöglichkeiten und frei wählbaren Titeln stehen weiterhin vordefinierte Templates für einen schnellen Einstieg zur Verfügung.

Die Angleichung der Erstellungs-, Bearbeitungs- und Löschprozesse an bestehende Chart-Flows sorgt für ein konsistenteres Interaktionsmodell. Gleichzeitig ermöglicht die Live-Vorschau eine direkte Rückmeldung während der Konfiguration.

Eine zentrale Erkenntnis war, dass Flexibilität nicht auf Kosten der Zugänglichkeit gehen darf. Durch die Kombination aus individueller Konfiguration und Templates werden sowohl spezifische Anforderungen von Power Usern als auch der schnelle Einstieg für weniger erfahrene User berücksichtigt.

Auch bei der Feature Discovery zeigte sich, dass nicht jeder Anwendungsfall unmittelbar in den initialen Funktionsumfang aufgenommen werden muss. Durch bewusste Abgrenzung des MVP und pragmatische Workarounds konnte der Funktionsumfang erweitert werden, ohne den Konfigurationsflow unnötig zu verkomplizieren.

---