Machine Learning in frühen Prototyping-Phasen

Gerade bei fachlich komplexen Businessanwendungen ist es wichtig, möglichst früh den Nutzer einzubeziehen, mehr über seine täglichen Arbeitsprozesse und Bedürfnisse zu erfahren und diese dann in ein intuitiv bedienbares User Interface umzusetzen. Bei MaibornWolff werden schon seit vielen Jahren nutzerzentrierte Prototyping-Formate gelebt.

Besonders hervorzuheben ist hier das eigens entwickelte Format „Partizipativer Paralleler Designprozess“, kurz PPD. Dabei stehen konkrete Use Cases im Vordergrund, die mit dem System erfüllt werden sollen, zum Beispiel „Wie lege ich eine neue Vokabel in einer Vokabellern-App an?“. Hier werden in Kleingruppen bestehend aus Kunden, Entwicklern und UX-Consultants in kürzester Zeit Ideen skizziert, voneinander abgekupfert und weiterentwickelt. In meiner Zeit als Werkstudentin ist mir immer wieder aufgefallen, mit welch einer Selbstverständlichkeit diese Workshops in den Designprozess integriert werden, wie die Ideen der Nutzer direkt in das Produkt einfließen und wie positiv sich diese Einbindung auf das Klima im Projekt auswirkt.

Von Skribbles zu Papier-Prototypen

Leider ist die Organisation solcher Workshops zeitaufwändig und kostenintensiv, so dass nicht in allen Projekten Zeit oder Ressourcen dafür da sind. Besonders die Nachbereitung, in der aus den Skribbles der Workshop-Teilnehmer ein Wireframe der späteren Anwendung gebaut wird, ist viel Aufwand. In ihrer Konsolidierungsphase übertragen die Usability Consultants bei MaibornWolff die schnell gezeichneten Skribbles in Papier-Prototypen, die dann auch schon in frühen Nutzertests verwendet werden. Diese müssen dann wiederum auch wieder in ein digitales Format übertragen werden, wofür jedes Element auf der Zeichnung (Button, Dropdown, Checkboxes) eins zu eins in ein Wireframing-Programm wie Axure, Balsamiq oder Sketch übertragen wird.

Inspiriert durch die vielen spannenden Machine-Learning-Projekte, die bei den internen Innotalks und F&E-Espresso-Talks vorgestellt wurde – zum Beispiel der Lego-Sortiermaschine (zum Beispiel in diesem Video zu sehen)  – habe ich mir die Frage gestellt: Geht das nicht einfacher? Hier lag der Anknüpfungspunkt meiner Masterarbeit: Lässt sich der Prototyping-Prozess in frühen Phasen durch Machine Learning vereinfachen?

Von Papier zu Digital

Dafür habe ich in meiner Masterarbeit Interviews mit vier erfahrenen Usability Consultants geführt, um mehr über die frühen Prototyping-Phasen und die Überführung der Ideen ins digitale Format zu erfahren. Sie haben mir berichtet, wie sie bei der Erstellung ihrer Entwürfe vorgehen und welche Schwierigkeiten es gibt. Diese initialen Interviews haben mir geholfen, meine Fragestellung zu schärfen und konkrete Anforderungen an ein Tool zu stellen, das den Protoyping-Prozess automatisiert unterstützt.

Ich stellte mir als Ideal ein Tool vor, mit dem die Usability Consultants und UX Designer einfach nur ein Foto von ihren Zeichnungen machen müssen und diese mithilfe von Bilderkennung automatisch in bearbeitbare, digitale Wireframes umgewandelt werden. Tatsächlich gab es schon einige wissenschaftliche Paper, die einen ähnlichen Use Case mit Machine Learning untersuchen. Allerdings ging es bei diesen oft darum, Papierskizzen direkt in Code umzuwandeln – das ist zwar der Traum vieler Entwickler_innen. Ich wollte aber die Möglichkeit, digitale Klickprototypen zu erstellen, im Designprozess behalten. Bei mir sollte ein Tool entstehen, dass den Designern mehr Zeit für Nutzertests und andere wirklich kreative Aufgaben lässt, statt manuelle Fleißaufgaben zu erledigen.

Und dann kam Machine Learning ins Spiel

Da gab es allerdings noch ein Problem: Von der praktischen Programmierung einer Image Recognition App hatte ich ehrlich gesagt keinen blassen Schimmer. Je mehr ich mich damit beschäftigte, desto mehr Arbeit schien sich aufzutürmen, da wie bei allen Machine-Learning-Applikationen ein riesiges Datenset unumgänglich ist und viel Geduld beim Trainieren des Modells erfordert wird. Dafür, dass ich einfach nur mal testen wollte, ob und wie Designer ein solches Tool nutzen würden, würde dieser Aufwand definitiv den Rahmen der Arbeit sprengen.

Für solche Fälle gibt es glücklicherweise eine Vielzahl von Image Recognition APIs, zum Beispiel von Microsoft oder IBM, bei denen man nur eine kleine Anzahl von Trainingsbildern hochladen muss, da diese schon mit vielen Bildern vortrainiert sind. Die Anbindung an die eigentliche Applikation erfolgt über einen schnell integrierten API call, der zurückgibt, mit welcher Wahrscheinlichkeit ein bestimmtes Objekt auf dem Bild zu sehen ist und wo es sich befindet.

Als zweiten Schritt brauchte ich noch eine geeignete Nutzeroberfläche, über die Designer Entwürfe hochladen und umwandeln können. Anstatt ein komplett eigenes Tool zu bauen, entschied ich mich, ein Plugin für Sketch zu programmieren, da dieses Programm ohnehin viel bei MaibornWolff und anderen Designern genutzt wird. Durch ein JavaScript-Polyfill und eine gute Onlinedokumentation hatte ich in relativ kurzer Zeit einen funktionierenden Prototyp zum Testen. Ich zeige ihn in diesem Video:

Sie sehen gerade einen Platzhalterinhalt von Youtube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Inhalt entsperren Erforderlichen Service akzeptieren und Inhalte entsperren

Eine weitere Herausforderung war, ein gutes Testszenario zu skizzieren. Ziel der Masterarbeit war, einen Anknüpfungspunkt für Machine Learning im Prototyping-Prozess zu finden – und nicht, eine möglichst performante Bilderkennungsapplikation zu programmieren. Als Testmaterial erhielten die Teilnehmer daher ein paar vorbereitete Skizzen, die sie einmal per Hand in ein Wireframe umwandeln sollten und einmal mithilfe des Tools.

Schnelligkeit versus Kontrollverlust

Der Test hat gezeigt, dass die Benutzung eines solchen Tools die Arbeit extrem beschleunigen würde. Viele Testpersonen waren überrascht von der Geschwindigkeit und waren dankbar, nun nicht mehr manuell alles platzieren zu müssen. Außerdem war die Platzierung der Elemente weniger präzise ist als die automatisierte Variante. Kritisch anzumerken ist, wie bei vielen AI-basierten Anwendungen, der Kontrollverlust. Einige Teilnehmer merkten an, dass als Außenstehender kaum sichtbar ist, wie die Umwandlung erfolgt und wie eingegriffen werden kann. Es bleibt spannend, welche Entwicklung Machine Learning im Design nehmen wird. Mittlerweile gibt es von den eingangs erwähnten Papern kommerzielle Lösungen (z.B. Uizard). Dies bestätigt die Relevanz des Use Cases. Durch die zunehmende Systematisierung von Designs durch Libraries scheint eine solche Entwicklung zumindest unumgänglich.

Learnings: nicht alles selbst bauen und auf Bekanntes aufbauen

Zwei Learnings habe ich aus dem Entstehungsprozess meiner Masterarbeit mitgenommen: Zum einen, dass man für einen Proof-of-Concept nicht an sich selbst den Anspruch stellen sollte, von vorne bis hinten eine technisch einwandfreie Lösung selbst auf die Beine zu stellen. So vermeidet man, dass man sich schon in frühen Phasen zu lange mit schwierigen Themen aufhält und somit am Ende keine Zeit mehr fürs Testing ist. Oft gibt es bereits gute Frameworks, hier beschrieben im Zusammenhang mit Image Recognition, auf die man zurückgreifen kann und die weniger fehleranfällig sind.

Zum anderen hat sich in meinem Fall bewährt, an eine bereits existierende Gewohnheiten oder Anwendungen anzuknüpfen. Hier lohnt es sich, den Nutzern genau zuzuhören, welche Programme sie aktuell nutzen und ob es möglich ist, dafür Add-Ons selbst zu programmieren – auch darauf kann gut aufgebaut werden. So muss sich der Nutzer an keine komplett neue Umgebung gewöhnen und kann die altbekannten Funktionen mit den neuen verknüpfen.

Zuallerletzt kann ich nur dazu raten, möglichst früh Feedback einzuholen – zum Beispiel bei Kollegen 😉 Ich möchte mich in diesem Zusammenhang noch einmal bei allen für die Unterstützung bei der Masterarbeit bedanken. Ich hatte eine schöne Zeit bei MaibornWolff!

---

Über die Autorin