Das Digital Experience Kit für Dashboards funktioniert wie ein Kochbuch. ODSU, das Designsystem, liefert die Zutaten, das Kit die Rezepte. Es ist ein gemeinsamer Bauplan für alle Designerinnen und Designer bei Roche. Ich habe Version 1.0 mitverfasst, die im Juni 2024 erschien.
Eine Roche-Kundin öffnet ein Dashboard zum Start in den Tag, wirft auf dem Handy einen Blick darauf oder liest es auf einem Wandbildschirm am anderen Ende des Raums. Wo es auch läuft, hat es eine Aufgabe: auf einen Blick zu zeigen, ob sie auf Kurs ist.
Jedes Produktteam musste dieselben Fragen beantworten: wie gross ein Widget ist, was es beim Laden oder ohne Daten zeigt, wie Nutzende von einer Warnung zu ihrer Ursache kommen. Jedes Team beantwortete sie für sich. Das kostete Zeit in Design und Entwicklung, machte das Erlebnis über die Roche-Produkte hinweg uneinheitlich und erhöhte die kognitive Last für die Kundschaft.
Könnte ein einziges Kit diese Fragen ein für alle Mal beantworten, für jedes Roche-Dashboard und jeden Bildschirm, auf dem es läuft?
Wir schrieben die Antworten einmal auf, im Digital Experience Kit for Dashboard Applications: einem Bauplan aus Interaktionsregeln, den UX-Standards von Roche untergeordnet und aufgebaut auf ODSU. Das Kit zerlegt jedes Dashboard in Page Shell, Abschnitte und Widgets auf einem 12-Spalten-Raster. Es legt drei Bildschirmbereiche fest, vom Handy bis zum Wandbildschirm, und führt den Drill-down durch eine einzige Kette: Warnung, Wo, Warum, Massnahme. Version 1.0 erschien im Juni 2024, neben einem Schwester-Kit für manuell bediente Geräte.
Meine Rolle
Principal UX, Co-Author. Ich habe Version 1.0 des Digital Experience Kit for Dashboard Applications mitverfasst, einen 51-seitigen Leitfaden, zusammen mit einem Design Lead und dem Subchapter Lead für Digital Design und User Testing Services. Jeder Abschnitt verweist auf die Quellen hinter den Regeln: ODSU, Ergonomie und Playbooks.
Was es schwierig machte
Drei Arten von Dashboards
Startseiten, Monitoring auf Handy und Wandbildschirm sowie datenintensive Analysen brauchen unterschiedlich viel Tiefe. Deshalb klammerte Version 1.0 den analytischen Typ aus.
Handy bis Wandbildschirm
Dasselbe Widget musste auf einem Handy mit 320 px funktionieren und auf einem Wandbildschirm, den man aus mehr als drei Metern Entfernung liest.
Drei Wege der Umsetzung
Teams bauen Dashboards als Custom Web Components, in Tableau oder in Superset, und jeder Weg unterstützt einen anderen Teil der Patterns.
Struktur vor Stil
Version 1.0 klärte zuerst die Struktur. Zeiträume, Datenvisualisierung, Beschriftung und Animation blieben als «in Vorbereitung» markiert.
Fragen, die wir stellten
Erkennt jemand am anderen Ende des Raums, ob ein KPI auf Kurs ist oder nicht?
Soll die Grösse eines Widgets in Pixeln festgelegt werden oder in Rasterspalten?
Was soll ein Widget zeigen, während seine Daten laden oder wenn es keine hat?
Wie kommen Nutzende von einer Warnung zur Massnahme, die das Problem behebt?
01
Zwei Kits, ein Hub
Roche ordnet die Kits nach der Produktart, für die sie gedacht sind. Eines deckt manuell bediente Systeme ab: Geräte mit einem Arbeitsbereich für jede Stufe, die bei jedem Schritt eine Bedienperson brauchen. Das andere deckt Dashboard-Anwendungen ab: Software aus Widgets, die mit verschiedenen Datenquellen verbunden sind. Beide sind über einen internen Hub erreichbar.
Die Kit-Übersicht im Hub; beide Dokumente sind Version 1.0, datiert Juni 2024.
02
Zwischen Standards und ODSU
Ein Kit ist eine Best Practice. Es ordnet sich den verbindlichen UX-Standards und Implementierungsleitfäden von Roche unter und übersetzt sie in Interaktionsregeln für eine Produktklasse. ODSU, das Designsystem, liefert die Bausteine: Farb-Tokens, Typografie, Icons, Side Sheets und Illustrationen für Leerzustände. Vor dem Kit steht ein Research-Playbook, danach folgen die Dashboard-Patterns von ODSU.
Der Film zu den Kits nennt fünf Versprechen, von den Roche-UX-Standards bis zum doppelten Tempo in Design und Entwicklung.
03
Der Ablauf im Design
Wer ein Dashboard gestaltet, beginnt in Discover und Define mit dem Research-Playbook. In Design und Test arbeitet man auf die sechs Experience-Ziele des Kits hin, von handlungsrelevanter Information an erster Stelle bis zu Screens, die das echte Gerät widerspiegeln. Dann prüft man, was der eigene Umsetzungsweg kann: Custom Web Components unterstützen fast jedes Pattern, Tableau und Superset weniger.
Drei Folien aus dem Kit, dann sein Inhaltsverzeichnis: vier Teile, 30 Themen.
04
Shell, Abschnitte, Widgets
Jedes Dashboard ist gleich aufgebaut. Die Page Shell umfasst Header, Footer und Seitennavigation, der Inhaltsbereich enthält Abschnitte, und in den Abschnitten sitzen Widgets. Widget-Grössen werden relativ angegeben, nicht in Pixeln: Ein 1×1-Widget belegt drei Spalten und drei Zeilen eines 12-Spalten-Rasters, wobei eine Zeile so hoch ist, wie eine Spalte breit ist.
Ein Widget hat höchstens vier Grössen; ein 1×1-Titel fasst 20 Zeichen, dann folgen Auslassungspunkte.
05
Vom Handy zum Wandbildschirm
Das Kit legt drei Bildschirmbereiche fest. Handys und Tablets, von 320 bis 951 px, halten die Interaktion minimal. Desktops, von 951 bis 1’920 px, unterstützen detaillierte Analysen. Grosse TV-Bildschirme über 1’920 px liest man aus mehr als drei Metern Entfernung, deshalb geht dort Lesbarkeit auf Distanz vor Interaktion. Jeder Bereich hat sein eigenes Raster und seine eigene Schriftskala.
Die Bereiche nach Betrachtungsabstand; die Schriftskalierung wurde mit Nutzenden auf Lesbarkeit getestet.
06
Jeder Zustand gestaltet
Die Standardzustände eines Widgets sind Hover, Fokus und Deaktiviert. Beim Anpassen kommen zwei Zustände dazu, Ziehen und Skalieren, in Schritten, die am Raster einrasten. Gibt es nichts zu zeigen, ersetzt ein Leerzustand das Layout, erklärt den Grund und zeigt einen Weg weiter. Während Daten laden, hält ein Skeleton die Form des Widgets.
Fünf Widget-Zustände und ein Leerzustand, gezeichnet mit den Illustrationen aus ODSU.
07
Warnung, Wo, Warum, Massnahme
Der Drill-down folgt einer Kette aus dem Dashboard-Design-Playbook. Ein KPI muss messbar sein, und weicht er vom Kurs ab, kombiniert die Warnung Farbe mit einem Icon oder einem Label. Eine Dimension pro KPI, deren Name mit «By» beginnt, zeigt das Wo. Ein Side Sheet zeigt das Warum und was zu tun ist; es schiebt den zugehörigen Seiteninhalt nach innen, statt ihn zu überdecken.
Die Kette in vier Schritten. Statusfarben folgen der Ampelbewertung Rot, Gelb und Grün und stehen nie allein.
In Bewegung
Ergebnisse
3Bildschirmbereiche, vom Handy bis zum Wandbildschirm
>3 mLeseabstand im Bereich für grosse Bildschirme
12Rasterspalten hinter jeder Widget-Grösse
Dashboard-Kit im Juni 2024 veröffentlicht: ein Dokument, mit dem alle Designerinnen und Designer bei Roche arbeiten
Mit dem Kit für manuell bediente Systeme in einem internen Hub zusammengeführt
Jedes Pattern mit Custom Web Components, Tableau und Superset abgeglichen
Schriftskalierung mit Nutzenden auf Lesbarkeit aus der Distanz getestet
Beide Kits in einem Film von 87 Sekunden vorgestellt
Was ich mitnehme
Für die Distanz gestalten, nicht für das Gerät. Die Bereiche richten sich danach, aus welcher Entfernung Menschen den Bildschirm lesen, deshalb bekommt ein Wandbildschirm sein eigenes Raster und seine eigene Schriftskala.
Zuerst die Struktur ausliefern. Version 1.0 legte Shell, Abschnitte und Widgets fest und markierte Zeiträume, Datenvisualisierung, Beschriftung und Animation als «in Vorbereitung».
Farbe nie allein wirken lassen. Jede Statusfarbe kommt mit einem Label oder einem Icon, damit auch farbenblinde Nutzende dieselbe Warnung lesen.
