KI helfen, klar zu sehen: Eine Fallstudie zum Dashboard-Design

Künstliche Intelligenz (KI) ist heute in vielen Branchen im Einsatz. Es hilft Einzelhändlern bei der Bestandsverwaltung und Vorhersage der Nachfrage, erleichtert Ärzten die Erkennung von Krebs in Lungenscans und ermöglicht es Autos, selbst zu fahren.

Aber die KI-gestützte Automatisierung entwickelt sich weiter und erfordert immer noch menschliches Eingreifen. In dieser Fallstudie zum Dashboard-Design beschreibe ich, wie ich Benutzeroberflächen entwickelt habe, die menschlichen Bedienern helfen, KI-Erkennungsprozesse zu verbessern.

Der Kunde

Der Kunde war ein US-Startup, das seinen Kunden hilft, KI-Bilderkennungsfehler für mehrere Branchen in Echtzeit zu lösen. Die angebotenen Lösungen verbessern automatisierte Systeme, die Geländekartierung, Pflanzenklassifizierung, Einzelhandelsproduktidentifikation, Barcode-Scannen und mehr ermöglichen.

KI-Bilderkennungssysteme werden darauf trainiert, visuelle Eingaben zu erkennen und zu interpretieren und Entscheidungen auf der Grundlage dessen zu treffen, was sie „sehen“. Aber manchmal stoßen diese Systeme auf Ausnahmen – Bilder, die sie nicht verarbeiten können, weil das Objekt ein unerwartetes Aussehen hat. Eine Ausnahme kann dazu führen, dass ein KI-System wichtige Informationen nicht identifiziert oder falsch identifiziert, was es sieht. Beispielsweise erkennt ein Lebensmittelscanner möglicherweise eine Orangensaftpackung nicht, weil sich der Behälter geändert hat, oder ein selbstfahrender Farmroboter kann durch ein Hindernis verwirrt werden. Probleme wie diese können zu Verzögerungen oder Unterbrechungen des Geschäftsbetriebs führen.

Um diese Probleme zu lösen, integriert sich die Software des Kunden in die KI-Systeme seiner Kunden, sodass menschliche Bediener Erkennungsprobleme in Echtzeit überprüfen und lösen können. Aber Operatoren lösen nicht nur Ausnahmen: Sie bringen KI-Systemen auch bei, was sie tun sollen, wenn sie das nächste Mal auf etwas Ähnliches stoßen. Dies führt zu KI-Systemen, die besser gerüstet sind, um eine größere Bandbreite von Bildern zu identifizieren.

Der Auftrag

Im Laufe von zwei Monaten arbeitete ich mit dem Kunden zusammen, um Entwürfe für ein Bediener-Dashboard und ein Kunden-Dashboard zu liefern. Ich habe auch eine Komponentenbibliothek und einen Styleguide vorbereitet, die diese Ergebnisse begleiteten.

Mein Ansatz folgt dem Design-Thinking-Prozess, der Recherche, Brainstorming, Low-Fidelity-Prototyping, High-Fidelity-Prototyping und Benutzertests umfasst. Ich passe diesen Prozess immer an die Verfügbarkeit von Zeit, Kapital und Menschen an.

Während des Projekts arbeitete ich eng mit dem Gründungsteam und dem Front-End-Entwickler des Kunden zusammen und teilte tägliche Updates, die allen halfen, über meine Fortschritte auf dem Laufenden zu bleiben. Ich habe auch mit zwei Bedienern zusammengearbeitet, die mir wertvolle Einblicke in ihre tägliche Arbeit gewährt haben.

Verbesserung des Bediener-Dashboards

Das Herzstück des Kundenprodukts ist das Bediener-Dashboard – die Schnittstelle, die seine KI-Spezialisten verwenden, um Probleme mit der Bilderkennung zu lösen. Wenn ein KI-System Probleme hat, ein Bild zu identifizieren, wird dieses Bild an das Dashboard eines Bedieners gesendet. Der Bediener beschriftet das Bild manuell, indem er jedes Objekt markiert und anhand vorgegebener Bezeichnungen wie „Mensch“, „Baum“ oder „großes Hindernis“ klassifiziert.

Als ich die Bediener des Kunden interviewte, zeigten sie mir den aktuellen Stand der von ihnen verwendeten Software und erlaubten mir, sie bei ihrer Arbeit zu beobachten. Aus dieser anfänglichen Recherche sammelte ich Erkenntnisse, Schmerzpunkte und Verbesserungsmöglichkeiten, die meine Designs beeinflussen würden.

Ich stellte fest, dass wichtige Funktionen fehlten und dass bestimmte Aufgaben unnötig kompliziert waren, was die Verwendung der Benutzeroberfläche erschwerte. Um beispielsweise ein Bild zu kennzeichnen, musste der Bediener jedes Mal zwischen der Symbolleiste und dem Bild hin und her gehen, um es auszuwählen, zu kennzeichnen, zu überprüfen und einzureichen. Ebenso fehlte die Möglichkeit, eine Aktion rückgängig zu machen oder zu wiederholen, was bedeutete, dass die Bediener Aufgaben wiederholen oder zusätzliche Schritte unternehmen mussten, wenn sie einen Fehler machten.

Ein weiteres Problem war, dass die Benutzeroberfläche kein einheitliches Erscheinungsbild hatte, da sie hauptsächlich auf einer Mischung aus vorgefertigten Komponenten beruhte. Diese Inkonsistenzen machten es schwierig, bestimmte Elemente und Funktionen zu finden oder zu verwenden.

Mit diesen Verbesserungsmöglichkeiten im Hinterkopf habe ich erste Konzepte erarbeitet und Wireframes erstellt, die ich mit den beiden Bedienern geteilt habe. Jeden Tag, im Laufe einer Woche, präsentierte ich den Bedienern Wireframes und diskutierte ihre ersten Eindrücke in virtuellen Feedback-Sitzungen. Die Sitzungen waren sehr kooperativ und halfen mir, Ideen zur Verfeinerung des Dashboards zusammenzustellen.

Ein interessanter Punkt, der während der Feedback-Sitzung auftauchte, betraf die Menge an Informationen, die auf der rechten Symbolleiste angezeigt wurden, wo die Bediener ihre Aktionen auswählten. Mein ursprüngliches Design schlug eine sehr minimalistische Lösung vor – eine Symbolleiste, die zu einem schmalen Feld zusammengeklappt werden konnte, das nur Symbole zeigte. Dies, so glaubte ich, würde es ermöglichen, sich auf das zentrale Bild zu konzentrieren.

Die Idee gefiel den Bedienern jedoch nicht, da es auf einen Blick schwer zu verstehen war, was die Symbole bedeuteten und was die wichtigsten Aktionen waren. Mit dieser wichtigen Erkenntnis wurde mir klar, dass einfacher nicht immer besser ist. In diesem Fall half es den Bedienern, effizienter zu arbeiten, wenn mehr Informationen sichtbar blieben.

Nachdem ich die anfänglichen Wireframes verbessert und verfeinert hatte, erstellte ich einen interaktiven Low-Fidelity-Prototyp in Figma und schickte ihn an die Betreiber und Beteiligten, damit sie ihn testen konnten. Nachdem ich ihr Feedback erhalten hatte, wiederholte ich das Design, bis alle zufrieden waren.

Wie ich bereits erwähnt habe, wurde das ursprüngliche Dashboard mit einer Mischung aus vorgefertigten UI-Komponenten erstellt, und die Erfahrung im Produkt war nicht durchgehend konsistent.

Aus Zeit- und Kostengründen wollten die Beteiligten jedoch möglichst die vorgefertigten Komponenten beibehalten. In Zusammenarbeit mit dem Front-End-Entwickler passte ich die vorhandenen Komponenten, darunter Schaltflächen, Formulare und Felder sowie andere UI-Elemente, an das Erscheinungsbild der neuen Dashboards an. Diese Anpassungen wirkten sich auf Farben, Schriftarten, Abstände und andere Details aus. In Fällen, in denen es nicht möglich war, vorhandene Komponenten zu aktualisieren, wie z. B. die Fortschrittsanimationen in der Live-Ansicht, haben wir neue erstellt. Der größte Teil des Bediener-Dashboards wurde auf diese Weise von Grund auf neu erstellt.

Anschließend erstellte ich einen navigierbaren High-Fidelity-Prototyp, der Farbe und die Arten von Fotos enthielt, die Bediener normalerweise in der Software sehen würden. Ich habe auch Auswahlwerkzeuge wie Rechtecke, Bleistifte und Polygone eingefügt und am unteren Bildschirmrand ein Bedienfeld hinzugefügt, in dem die Bediener Bildverbesserungen vornehmen konnten. Schließlich schickte ich den Prototyp zusammen mit Spezifikationen für in After Effects animierte Mikrointeraktionen an den Front-End-Entwickler, damit sie das Dashboard erstellen konnten.

Entwerfen eines Kunden-Dashboards von Grund auf neu

Die zweite Phase des Projekts war ein Kunden-Dashboard, das es den Eigentümern der KI-Systeme ermöglicht, den Fortschritt der Lösung ihrer Probleme zu beobachten. Der Kunde wollte diese Erfahrung verbessern, bevor er das Produkt für mehr Kunden einführte.

Ursprünglich mussten die Kunden des Auftraggebers Fortschrittsberichte per E-Mail anfordern. Jeder Bericht war eine PDF- oder CSV-Datei, die angab, welche Ausnahmen behoben wurden oder noch in Bearbeitung sind. Der Kunde benötigte eine Möglichkeit für Kunden, den Status jeder Ausnahme auf einen Blick zu überprüfen.

Mit dem von mir entworfenen Dashboard können sich Kunden anmelden und den Fortschritt jeder Ausnahme in Echtzeit überwachen. Sie können die eingegangenen und überprüften Bilder sowie die bereits behobenen Ausnahmen sehen. Sie können auch die Details jeder Lösung anzeigen, um besser zu verstehen, wie das Problem gelöst wurde.

Das Dashboard enthält Diagramme und Visualisierungen, um Kunden dabei zu helfen, zusammenfassende Daten wie Gesamtengagements und Gesamtlösungen besser zu verstehen. Kunden können auch einfach auf die geschäftlichen Aspekte ihrer Konten zugreifen und diese verwalten, einschließlich Zahlungsmethoden und Anmeldeinformationen.

Für den Kunden-Dashboard-Prototyp habe ich Animationen in After Effects erstellt, um zu demonstrieren, wie sich bestimmte UI-Elemente verhalten würden. Beispielsweise habe ich eine Fortschrittsanimation erstellt, um eine Ausnahme in der Überprüfung anzuzeigen, die zu einem Häkchen wird, wenn die Ausnahme behoben wurde. Ich habe auch einen pulsierenden Punkt entworfen, um anzuzeigen, wann ein Projekt live ist.

Erstellen einer Komponentenbibliothek in Figma

Ein wichtiger Aspekt bei der Entwicklung skalierbarer und wartungsfreundlicher Produkte ist die Erstellung einer Komponentenbibliothek und eines Styleguides. Standardisierte und wiederverwendbare Designkomponenten gewährleisten sowohl Konsistenz als auch Geschwindigkeit beim Skalieren und Hinzufügen von Funktionen zu einem digitalen Produkt.

Ich habe mich dafür entschieden, die Bibliothek des Kunden in Figma unterzubringen, weil es einfach ist, Komponenten zu ändern und zu aktualisieren, wo immer sie in einem Design erscheinen. Alle Komponenten und Stile wurden anhand eines Acht-Punkte-Rasters dokumentiert. Die Bibliothek enthielt Kernkomponenten wie Menüs, Seitenleisten, Registerkarten, Eingabesymbole und Schaltflächen, während der Styleguide Elemente wie Typografie, Farben, Symbole, Abstände und Raster abdeckte.

In Zukunft kann sich die Komponentenbibliothek zu einem vollwertigen Konstruktionssystem entwickeln. Aber im Moment dient es als Grundlage für das Wachstum des Produkts und als Referenz für zukünftige Designer, seien es interne Mitarbeiter, Freiberufler oder Agenturprofis.

User Research Matters

Dieses Projekt war lohnend, weil es mir die Möglichkeit bot, ein digitales Produkt zu verfeinern, das automatisierte Systeme in mehreren Branchen verbessert und die Art und Weise prägt, wie KI die Welt interpretiert. Es verstärkte auch die Bedeutung der Benutzerforschung und der direkten Beobachtung. Die Möglichkeit, den Bedienern bei ihrer Arbeit zuzusehen und Fragen zu stellen, war für die Bereitstellung von Dashboards, mit denen sie effizienter und effektiver arbeiten konnten, von entscheidender Bedeutung. Ein Designer kann die Art und Weise, wie jemand arbeitet, nicht verbessern, bis er seine Erfahrung überhaupt versteht.

Weiterführende Literatur im Toptal Blog:

• Dashboard-Design – Überlegungen und Best Practices
• Konsistenz ist der Schlüssel – So bauen Sie ein Figma-Designsystem auf
• UX-Forschungstechniken und ihre Anwendungen
• Der Wert der Nutzerforschung
• Der wahre ROI von UX: Die Executive Suite überzeugen