Gedankenlesen mit adaptiven UIs

Es war der letzte Vortrag vor dem Mittagessen des ersten Tages und ich war davor bereits begeistert. Allein schon wegen des Titels musste das hier mein Lieblingsvortrag sein. David Khourshid @davidkpalmer nahm sich auf der AgendConf 2020 die Zeit, um über die Magie hinter adaptiven Benutzeroberflächen zu sprechen.

Die meisten von Ihnen kennen Slack oder haben zumindest davon gehört. Ein irgendeiner Weise sind Sie sicher mit Slacks Rich Text Editor in Kontakt gekommen. Ist Ihnen auch schon aufgefallen, dass er nicht so toll ist, wie man sich wünschen würde? Er ist weder anpassbar (man kann ihn in den Einstellungen nicht ausschalten) noch adaptiv (alle Benutzer müssen ihn benutzen).

Bis vor einiger Zeit gab es keine Einstellungen zum Aktivieren/Deaktivieren des Rich-Text-Editors in Slack.


Bis vor einiger Zeit gab es keine Einstellungen zum Aktivieren/Deaktivieren des Rich-Text-Editors in Slack.

Ein weiteres Beispiel für schlechte UX durch nicht adaptive UIs wäre dies:

A/B-Testing

Wenn Sie etwas an Ihrer Benutzeroberfläche ändern oder kleine Überprüfungen vornehmen möchten, um Ihren Verkaufszahlen nochmals einen Kick zu geben, sollten Sie dies in A/B-Tests durchzuführen. Bei diesen Tests teilen Sie Ihre Benutzer nach dem Zufallsprinzip in zwei Gruppen auf und ändern eine einzige Variable, die Sie dann testen.

Ein Beispiel:

Sie sind Verkäufer von Kletterausrüstung und wollen sehen, wie Sie Ihre Verkäufe steigern können. Nach einigen Recherchen stellen Sie fest, dass die CTR (Click-Through-Rate) Ihres Haupt-CTA (Call-To-Action) viel niedriger ist als erwartet. Sie entscheiden sich, einen A/B-Test zu starten, um zu sehen, welche Einrichtung Ihren Umsatz erhöht.

  • Für die Gruppe A werden Sie den CTA in der Navigationsleiste Ihrer Website platzieren

  • Für die Gruppe B werden Sie den CTA in den Herobereich Ihrer Website stellen.

Durch Tools wie Google Optimize werden Nutzer zufällig in zwei Nutzergruppen aufgeteilt, um ihnen entweder die Benutzeroberfläche für die Gruppe A oder die Gruppe B auszuspielen. Nach einiger Zeit überprüfen Sie die Ergebnisse und stellen fest, dass die Verkäufe für die Gruppe A um 10% gestiegen sind, während die Gruppe B nur 2% mehr Käufe abgeschlossen hat. Die logische Konsequenz daraus wäre, das Gruppe B-Design über Bord zu werfen und das Gruppe A-Design allen Nutzern auszuspielen.

Aber was ist mit den 2% von Gruppe B? Vielleicht verlieren Sie die Gruppe durch das neue Design komplett. Denn dies ist keine einschließende, sondern eine ausschließende Wahl. Dasselbe gilt für Flussdiagramme von Seiten.

AUIs – Prefetching und Machine Learning

Prefetching der Klickpfade auf der Website ist eine Möglichkeit, die Ladezeiten zwischen den Websites zu verkürzen. Wenn Sie jedoch falsche Annahmen über die Art und Weise treffen, wie Ihr Benutzer durch Ihre Website navigiert, erhalten Sie am Ende das gleiche Ergebnis, als hätten Sie gar nicht erst etwas vorgeladen.

Sie können erwarten, dass jeder Benutzer denselben Weg geht, um das zu tun, was Sie von ihm auf Ihrer Website erwarten. Aber je größer die Anwendungen ist, desto wahrscheinlicher driftet Ihr User von seinem Weg ab.

Eine Bibliothek zur Lösung dieses Problems ist GuessJS. Es verwendet Google Analytics-Daten, um ein gewichtetes Modell zu erstellen, das durch Machine Learning Wahrscheinlichkeiten erstellt, wohin der Benutzer navigieren könnte – und ladet auf dieser Grundlage die URL vor. Dies erleichtert den Entwicklern nicht nur die Integration von Prefetching, sondern verringert auch die Ladezeiten zwischen den Seiten um ein Vielfaches.

Eine andere Möglichkeit, die Erfahrung Ihrer Nutzer auf der Website zu verbessern, ist die Verwendung der Standards, die Google Chrome als eingebautes, sogenanntes adaptives Laden (react-adaptive-hooks  bspw.) bereitstellt. In diesem GitHub-Repository sehen Entwickler, wie integrierte Browser-APIs, aktuelle CPU/RAM-Auslastung oder Netzwerkgeschwindigkeit ein bemerkenswert besseres Benutzererlebnis schaffen.

Der Vorteil adaptiver Benutzeroberflächen ist, dass sie nicht nur für responsive Websites (die bis 2020 ein Standard sein sollten), sondern auch auf allen Interfaces funktionieren, die auf die Bedürfnisse der Benutzer zugeschnitten sind.

„Intelligente Benutzerschnittstellen (IUIs) sind Mensch-Maschine-Schnittstellen, die darauf abzielen, die Effizienz, Effektivität und Natürlichkeit der Mensch-Maschine-Interaktion zu verbessern, indem sie Modelle des Benutzers, der Domäne, der Aufgabe, des Diskurses und der Medien (z.B. Grafiken, natürliche Sprache, Gesten) repräsentieren, begründen und auf diese reagieren.

Mark Maybury – Lesungen über intelligente Benutzeroberflächen, 1999


Ein wirklich cooles Beispiel für AUIs (adaptive Benutzeroberflächen) ist Google Mail mit seinen automatischen Vorschlägen:

Durch AUIs lassen sich Power-User, die nur ihre Arbeit erledigen wollen, von neuen Nutzern unterscheiden, die ein wenig Hilfe bei der Navigation benötigen. Alles, was Ihre Anwendung dazu braucht, sind Daten… und State-Machines!

State-Machines

State-Machines werden zur Darstellung von Systemen mit einer begrenzten Anzahl von Modi (Verhaltensmodellen) verwendet. State-Machines haben einen Anfangszustand, eine endliche Anzahl von Zuständen (States) und Ereignissen, die Abbildung von Zuständen durch Übergänge von Ereignissen und eine endliche Anzahl von Endzuständen. Durch State-Machines lassen sich sowohl einfache Maschinen als auch Space Shuttles abbilden.


Ein einfaches Beispiel für einen State-Machines von David Khourshid

Jetzt können wir all dieses Wissen, das wir in den letzten Absätzen erworben haben, nutzen und ein kleines Feedback-Modal skizzieren, das sich an unsere Benutzer anpasst. Wenn der Benutzer beschließt, keine Rückmeldung zu geben, wollen wir ihm ein Modal zeigen und ihn fragen, warum.


Das Statechart sieht folgendermaßen aus:

Das war nur ein sehr einfacher Ansatz zur Lösung dieses Problems. Wenn wir etwas komplexeres wollen, benötigen wir einen Gameplan:

  • Abstraktes Modell

  • Übergangs-Analytik

  • Adaptive Pfade identifizieren

  • Nutzungsanalyse zur Anpassung

Und das Ergebnis davon sind gewichtete Graphen. Gewichtete Graphen werden oft in Verbindung mit Machine Learning verwendet – genau das ist unser Ziel. Wir möchten grundlegende, maschinelle Lernprogramme nutzen, um ein abstraktes Modell unserer Website zu erstellen, das sich den Bedürfnissen unserer Benutzer anpasst.

Mit Hilfe von gewichteten Graphen ermitteln wir die wahrscheinlichste Route, die der Benutzer in unseren Anwendungen nimmt. Gewichtete Graphen können mit guessJS oder ähnlichen Bibliotheken implementiert werden. Ein wichtiger Hinweis am Rande: Sie sollten nicht vergessen, die vollständige Sitemap mit all Ihren Routen zu verwenden, damit der Machine Learning-Algorithmus die Wünsche und Bedürfnisse des Benutzers vollständig erfasst und versteht.

Snippets aus der Mitte des Flusses zu nehmen, mag auf den ersten Blick richtig erscheinen...

... aber es ist wichtig zu verstehen, von welchem Ausgangspunkt Ihre Benutzer kommen (Markov-Modelle höherer Ordnung)

Der gesamte Prozess wird durch den Einsatz von Deep Reinforcement Learning weiter verbessert. Deep Reinforcement-Modelle lernen durch Feedback, d.h. wenn das Modell etwas Falsches vorhersagt, wird es die falsche Option niedriger gewichten und wenn der Benutzer das nächste Mal etwas klickt, das erlernte berücksichtigen. Zum Beispiel:

Benutzer A möchte von der Landing Page zum Shop-Seite navigieren. Unsere Analytik zeigt, dass der 0815-Benutzer auf unseren Blog als unsere zweite Seite zugreifen möchte. Daher denkt unser Machine Learning-Algorithmus, dass es für uns besser wäre, zuerst eine Blog-Seite zu laden. Wenn der Benutzer sich so verhält, was das Modell nicht vorhersagt (bspw. User navigiert beim nächsten Klick auf die Shop-Seite), sagen wir dem Modell, dass seine Vorhersage nicht stimmt und geben ihm den neuen Wert (Landing Page -> Shop Seite) als Feedback für das nächste Mal. Und durch diesen automatisierten Prozess wird sich der Machine Learning Algorithmus selbst verbessern.

Alles in allem haben wir also das folgende Bild als unseren Prozess einer adaptiven Benutzeroberfläche:

Dies ist das am meisten verallgemeinerte Modell, das ich über adaptive UIs gefunden habe.


Durch die Implementierung dieses Prozesses können wir nicht nur die Erfahrung unserer Benutzer verbessern, sondern auch unsere Klickraten und Verkäufe. Eine Änderung die direkt zu Buche schlägt.