A/B-Tests von UX für komponentenbasierte Frameworks

Sich mit Codierung vertraut zu machen, kann für Designer von großem Nutzen sein. Folglich haben viele den Sprung gewagt und gelernt, wie man mit Code arbeitet (oder zumindest bis zu einem gewissen Grad seine Sprache spricht), um effektiver mit Ingenieuren zusammenzuarbeiten. JavaScript, die wohl beliebteste Skriptsprache des Webs, hat eine robuste Community, die die Zukunft des Webs mit den von ihr erstellten Frameworks gestaltet.

Aufgrund ihrer Struktur und technischen Einschränkungen sind Frameworks wie Vue.js, React.js und Material UI für Designer wichtig, da sie als Bausteine ​​für robuste Designsysteme dienen. Darüber hinaus ist es auch praktisch, zu wissen, wie Code funktioniert, wenn es darum geht, datengesteuerte Designtechniken in einer Entwicklungsumgebung wie A/B-Tests zu erleichtern.

Bei einem kürzlich durchgeführten Projekt für ein Start-up, das eine Patientenverwaltungsplattform zur Verbindung von Einzelpersonen mit Fachleuten für psychische Gesundheit erstellte, stellten wir fest, dass die Einrichtung und Verwaltung von Patientenkonten mit so wenig Reibung wie möglich für eine Reihe unserer klinischen Berater von entscheidender Bedeutung war. Die Konzentration auf die Schaffung einer intuitiven Browsing-Erfahrung für Patientenprofile war von entscheidender Bedeutung, ebenso wie die Einrichtung eines optimalen Benutzerflusses zum Erstellen, Bearbeiten und Zuweisen von Wellness-Aktivitäten zu Patienten.

Bei der Besprechung des Projekts mit dem technischen Leiter wurde festgestellt, dass die Anwendung im Grunde recht einfach war: Kliniker mussten in der Lage sein, Patientenprofile zu erstellen und zu bearbeiten, eine Bibliothek mit Wellnessaktivitäten anzuzeigen und Patienten Lektionen zuzuweisen.

Das Team beschloss, das Design des Projekts an das Material-UI-Framework anzupassen und Basiselemente wie Popup-Modals, Anzeigekarten, aktive/inaktive Schaltflächen, Akkordeonlisten und eine Reihe von Erfolgs- und Warnmeldungen zu verwenden. Nachdem die Komponenten, aus denen die Basiselemente bestehen würden, definiert waren, äußerte sich das Produktteam unterschiedlich zum Layout der Anwendung.

Während Diskussionen über das UI-Design des Projekts erläuterte der Entwickler den Unterschied zwischen funktionalen und Anzeigekomponenten und wie funktionale Komponenten den Datenfluss einer Anwendung steuern, während Anzeigekomponenten für UI und Layout relevant sind.

Einfach ausgedrückt definieren Anzeigekomponenten die visuelle Sprache einer Anwendung, und funktionale Komponenten helfen dabei, sie zum Leben zu erwecken .

Diese Struktur bietet Designern einzigartige Möglichkeiten, da Code, der sich mit der Verwaltung der Logik einer Anwendung befasst, normalerweise in einer Datei isoliert ist, die von derjenigen getrennt ist, die das Layout der Benutzeroberfläche steuert. Bei richtiger Ausführung gewährleistet dieser Ansatz für das Softwaredesign eine modulare und robuste Codebasis , die einen testgesteuerten Prozess ermöglicht.

Könnten identische Features in alternativen Layouts mit minimalem Engineering-Aufwand getestet werden? Die Antwort ist „Ja“, und wenn sie früh im Prozess mit einer A/B-Methode durchgeführt wird, wird sie in einen schlanken Produktentwicklungslebenszyklus eingebrannt. (Lean-Produktentwicklung ist ein Ableger des japanischen Kaizen-Konzepts, der Geschäftsphilosophie, Arbeitsabläufe, Praktiken, Techniken und – in diesem Fall – Produkte schrittweise zu verbessern.)

Eric Ries, Serienunternehmer und Autor, erläutert in seinem Buch The Lean Startup einen praktischen Leitfaden für den Lean-Produktentwicklungslebenszyklus. Die Methode folgt einem Arbeitsablauf, bei dem Produkte mit einer klaren Hypothese erstellt, das Geschaffene getestet und basierend auf dem Gelernten iteriert wird.

Die Lean-Startup-Methode

Definieren des A/B-Testansatzes

A/B-Tests sind eine Kernkomponente des Toolkits eines jeden erfahrenen UX-Profis. Seine Rolle im Lebenszyklus der Softwareentwicklung besteht darin, die Benutzerfreundlichkeit von Anwendungen zu verbessern. In Kombination mit Heatmapping-Daten können Teams wertvolle Einblicke in das Benutzerverhalten gewinnen, insbesondere wenn es um Reibungspunkte im Ablauf einer Anwendung geht.

Bevor Sie mit A/B-Tests beginnen, sind hier einige Fragen, um den Prozess zu fokussieren:

• Wie werden A/B-Tests in UX verwendet?
• Welche Methoden der A/B-Analyse gibt es?
• Warum A/B-Tests beim Wireframing entwerfen?
• Worauf testen wir?

Die gebräuchlichste Methode für A/B-Tests im großen Maßstab ist ein Split-Test , bei dem Live-Benutzern leicht unterschiedliche Versionen einer Anwendung oder Website bereitgestellt werden. Ein Split-Test ist oft außerhalb des Rahmens und/oder Budgets für ein Startup oder ein kleines Unternehmen. Es gibt jedoch Alternativen zu groß angelegten Split-Tests, die zugänglicher sind und Folgendes umfassen: persönliche Interviews, Fokusgruppen und Online-Dienste, die Sie mit einem Netzwerk von Testbenutzern verbinden.

A/B Testgetriebenes Design

Während des Wireframing-Prozesses ist es wichtig, die Möglichkeiten von A/B-Tests aus Layout- und Navigationsperspektive zu berücksichtigen. Einfache Variationen von Anzeigekomponenten können leicht verändern, wie Informationen präsentiert werden. Komponentenbasierte Frameworks geben Ihnen die Freiheit, mit der Organisation von Inhalten zu experimentieren, ohne die Kernfunktionalität eines Produkts neu entwickeln zu müssen.

Wie jedes Designvorhaben sollten effektive A/B-Tests einer klar definierten Methodik folgen. Entscheiden Sie zunächst, auf welche Variable Sie testen. Definieren Sie als Nächstes, was Erfolg ausmacht. Beenden Sie die Auswertung der Daten und legen Sie fest, was der nächste Schritt sein sollte.

In einem Fall wurde beispielsweise die Layout-Hierarchie getestet. Layout A bestand aus einem zweispaltigen Raster mit der Patientenlistenkomponente auf der linken Seite des Bildschirms und der Patientenprofilkomponente auf der rechten Seite. Layout B hatte eine einspaltige Patientenliste, durch die man sich zur Profilkomponente des Patienten durchklicken konnte.

Unser erster Test war für Klarheit. Wir haben klinische Berater in Interviewsitzungen gefragt, welches der beiden Designs sich am organisiertesten anfühlt. Entgegen interner Annahmen wurde das einspaltige Raster stark als die intuitivere Designlösung angezeigt. Unsere Berater empfanden die Kombination einer Patientenliste und eines Profils in derselben Anzeige als „beschäftigt“ und „unübersichtlich“. Im Gegensatz dazu waren die Worte zur Beschreibung des einspaltigen Rasterlayouts klar und „sauber“.

Das „Baukastenmodell“

Für diese Webanwendung haben wir React verwendet, ein Framework, das auf Konzepten der Zustandsverwaltung und modularen Komponenten basiert. React ist eine deklarative, effiziente und flexible JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Damit können Sie komplexe UIs aus kleinen, isolierten Codestücken, die als „Komponenten“ bezeichnet werden, zusammenstellen. Diese Modularität führt zu Flexibilität bei der Arbeit an einem Produkt, an dem sowohl Entwickler als auch Designer beteiligt sind.

Ich habe dieses Framework durch die Inspiration des HTML+CSS-Box-Modells verstanden. Das Komponenten-Box-Modell bietet eine organisatorische Modalität, mit der Bausteine ​​für eine Anwendung erstellt werden können. Es eignet sich besonders gut für die Entwicklung eines Designsystems für sich schnell entwickelnde Projekte.

Um das Design Thinking agil zu halten, kann eine Reihe von Designprinzipien befolgt werden, die sich besonders gut für einen schlanken Produktentwicklungslebenszyklus eignen.

• Erstes Prinzip: Ähnliche Kontexte und Aktionen gruppieren.
• Zweites Prinzip: Lassen Sie die Informationsarchitektur dabei helfen, den „Zustandsfluss“ zwischen den Komponenten zu vereinfachen .
• Drittes Prinzip: Entwerfen Sie skalierbare visuelle Systeme , um zu optimieren, wie Entwickler Designs verstehen und implementieren.

Ähnliche Kontexte gruppieren

Berücksichtigen Sie das mentale Modell Ihrer Benutzer – gruppieren Sie ähnliche Ergebnisse und Aktionen basierend auf ihrem „Nutzungskontext“. Überlegen Sie, ob Benutzer in jedem Kontext Elemente erstellen, lesen, aktualisieren und löschen müssen und ob Sie Feedback zu ihren Aktionen geben müssen. Berücksichtigen Sie beim Definieren eines A/B-Tests für ein bestimmtes Anwendungsszenario das Layout, den Zugriff auf Eingaben und Navigationsmethoden.

Vereinfachen Sie den Interaktionsfluss von „State“

In React bezieht sich der „Zustandsfluss“ darauf, wie sich Informationen durch eine Anwendung bewegen, wie Komponenten dabei helfen, Daten zu organisieren und wie sie angezeigt werden. Typischerweise fließt der Zustand aus funktionalen Komponenten, die als Container fungieren, in Anzeigekomponenten. Designer können sich auf A/B-Tests vorbereiten, indem sie präventiv skizzieren, wie funktionale Komponenten das Layout einer Anwendung verändern können, indem sie die Bewertung von Anzeigekomponenten ändern.

Entwickeln Sie robuste Designsysteme

Die Verwendung von Anzeigekomponenten zur Entwicklung von Standards für visuelle Elemente wie Typografie, Schaltflächen, Eingaben, Modale und Karten hilft, die Bausteine ​​für eine standardisierte Designsprache bereitzustellen. Robuste visuelle Systeme haben die Flexibilität, UX-Designer und -Entwickler über Komponenten, auf die in Wireframes verwiesen wird, auf dem gleichen Stand zu halten.

Zusammenfassung

Der Erfolg von A/B-testgetriebenem Design hängt mit der Synergie zwischen Produkt- und Technikteams zusammen. Designer, die diese Methode übernehmen möchten, sollten genau wissen, wo und wie sie testen. Verbringen Sie Zeit damit, eine Hypothese zu entwickeln und festzulegen, was Sie herausfinden möchten. Lassen Sie sich nicht ablenken. Bleiben Sie dabei – es ist sehr einfach, von Ihrer Methode abzuweichen.

Dieser Prozess ist nie wirklich abgeschlossen und entwickelt sich mit dem Wachstum der Produkte weiter. Designer, die eine testgetriebene Produktentwicklungsstrategie anwenden, sollten die Gelegenheiten zum Lernen nutzen, die sich während des gesamten Entwicklungslebenszyklus eines Produkts ergeben.

Bei Komponenten geht es, ähnlich wie bei Designsystemen, um Modularität und die Wiederverwendbarkeit von Mustern, nicht um Layout oder Stil. Aus der Perspektive eines Designers kann die Flexibilität, Produkte mit A/B-Tests zu testen, zu verfeinern und zu verbessern, dazu beitragen, Produkte zu entwickeln, die benutzerorientierter sind, was letztendlich zu ihrem größeren Erfolg führt.

•••

Weiterführende Literatur im Toptal Design Blog:

• Nutzung mentaler Modelle im UX-Design
• UX-Tests für die Massen: Halten Sie es einfach und kostengünstig
• Der grundlegende Leitfaden zur mobilen Usability
• Der Wert der Nutzerforschung
• Verständnis von Designsystemen und -mustern