A/B Testing UX pour les frameworks basés sur des composants

Se familiariser avec le codage peut être très bénéfique pour les concepteurs. Par conséquent, beaucoup ont plongé et appris à travailler avec le code (ou du moins à parler son langage dans une certaine mesure) afin d'être plus efficaces lorsqu'ils collaborent avec des ingénieurs. JavaScript, sans doute le langage de script préféré du Web, possède une communauté robuste qui façonne l'avenir du Web avec les frameworks qu'il élabore.

En raison de leur structure et de leurs contraintes techniques, les frameworks tels que Vue.js, React.js et Material UI sont importants pour les concepteurs, car ils agissent comme des éléments de base pour des systèmes de conception robustes. De plus, savoir comment fonctionne le code est également utile pour faciliter les techniques de conception basées sur les données dans un environnement de développement tel que les tests A/B.

Dans le cadre d'un projet récent pour une startup créant une plateforme de gestion des patients pour connecter les individus aux professionnels de la santé mentale, nous avons constaté que la création et la gestion des comptes des patients avec le moins de friction possible étaient essentielles pour un certain nombre de nos conseillers cliniques. Se concentrer sur la création d'une expérience de navigation intuitive pour les profils des patients était crucial, tout comme la mise en place d'un flux d'utilisateurs optimal pour créer, modifier et attribuer des activités de bien-être aux patients.

En discutant du projet avec le responsable technique, il a été déterminé que fondamentalement, l'application était assez simple : les cliniciens avaient besoin de pouvoir créer et modifier des profils de patients, afficher une bibliothèque d'activités de bien-être et attribuer des leçons aux patients.

L'équipe a décidé d'aligner la conception du projet sur le framework Material UI, en utilisant des éléments de base tels que des fenêtres modales, des cartes d'affichage, des boutons actifs/inactifs, des listes d'accordéon et une série de notifications de réussite et d'avertissement. Une fois les composants qui constitueraient les éléments de base définis, l'équipe produit a proposé différentes opinions sur la mise en page de l'application.

Au cours des discussions sur la conception de l'interface utilisateur du projet, le développeur a expliqué la différence entre les composants fonctionnels et d'affichage et comment les composants fonctionnels contrôlent le flux des données d'une application, tandis que les composants d'affichage sont pertinents pour l'interface utilisateur et la mise en page.

En d'autres termes, les composants d'affichage définissent le langage visuel d'une application et les composants fonctionnels contribuent à leur donner vie .

Cette structure offre des possibilités uniques aux concepteurs car, généralement, le code concerné par la gestion de la logique d'une application est isolé dans un fichier distinct de celui contrôlant la disposition de l'interface utilisateur. Réalisée correctement, cette approche de la conception logicielle garantit une base de code modulaire et robuste qui permet un processus piloté par les tests.

Des fonctionnalités identiques dans des dispositions alternatives pourraient-elles être testées avec un effort d'ingénierie minimal ? La réponse est « Oui », et si vous utilisez une méthode A/B au début du processus, elle sera intégrée dans un cycle de vie de développement de produit allégé. (Le développement de produits Lean est une retombée du concept japonais de kaizen, la philosophie commerciale consistant à apporter des améliorations progressives aux flux de travail, aux pratiques, aux techniques et, dans ce cas, aux produits.)

Eric Ries, entrepreneur en série et auteur, présente un guide pratique du cycle de vie du développement de produits lean dans son livre The Lean Startup . La méthode suit un flux de travail consistant à créer des produits avec une hypothèse claire, à tester ce qui a été construit et à itérer en fonction de ce qui a été appris.

La méthode Lean Startup

Définir l'approche des tests A/B

Les tests A/B sont un élément essentiel de la boîte à outils de tout professionnel UX chevronné. Son rôle dans le cycle de vie du développement logiciel est d'aider à améliorer la convivialité des applications. Combinées aux données de cartographie thermique, les équipes peuvent obtenir des informations précieuses sur le comportement des utilisateurs, en particulier en ce qui concerne les points de friction au sein du flux d'une application.

Avant de commencer les tests A/B, voici quelques questions pour orienter le processus :

• Comment les tests A/B sont-ils utilisés dans l'UX ?
• Quelles sont les méthodes d'analyse A/B disponibles ?
• Pourquoi concevoir des tests A/B en wireframing ?
• Qu'est-ce qu'on teste ?

La méthode la plus courante de test A/B à grande échelle est un test fractionné qui propose des versions légèrement différentes d'une application ou d'un site Web aux utilisateurs en direct. Un test fractionné est souvent hors de portée et/ou de budget pour une startup ou une petite entreprise. Cependant, il existe des alternatives aux tests fractionnés à grande échelle qui sont plus accessibles et comprennent : des entretiens en personne, des groupes de discussion et des services en ligne qui vous connectent à un réseau d'utilisateurs de test.

Conception pilotée par les tests A/B

Pendant le processus de wireframing, il est important de considérer les possibilités de test A/B du point de vue de la mise en page et de la navigation. De simples variations des composants d'affichage peuvent facilement modifier la façon dont les informations sont présentées. Les frameworks basés sur des composants vous donnent la liberté d'expérimenter l'organisation du contenu sans avoir à repenser les fonctionnalités de base d'un produit.

Comme toute entreprise de conception, un test A/B efficace doit suivre une méthodologie clairement définie. Tout d'abord, décidez de la variable que vous testez. Ensuite, définissez ce qui constitue le succès. Terminez en évaluant les données et déterminez quelle devrait être la prochaine étape.

Par exemple, dans un cas, la hiérarchie de mise en page a été testée. La mise en page A était composée d'une grille à deux colonnes qui avait le composant de la liste des patients sur la gauche de l'écran et le composant du profil du patient sur la droite. La mise en page B comportait une liste de patients à une seule colonne permettant de cliquer sur le composant de profil du patient.

Notre premier test était pour la clarté. Lors des entretiens, nous avons demandé aux conseillers cliniques lequel des deux modèles se sentait le plus organisé. Contrairement aux hypothèses internes, la grille à colonne unique a été fortement indiquée comme étant la solution de conception la plus intuitive. Nos conseillers ont estimé que la combinaison d'une liste de patients et d'un profil dans le même affichage était « occupée » et « encombrée ». En revanche, les mots utilisés pour décrire la disposition de la grille à une seule colonne étaient clairs et «propres».

Le « modèle de boîte de composants »

Pour cette application web, nous avons utilisé React, un framework basé sur des concepts de gestion d'état et de composants modulaires. React est une bibliothèque JavaScript déclarative, efficace et flexible pour la création d'interfaces utilisateur. Il vous permet de composer des interfaces utilisateur complexes à partir de petits morceaux de code isolés appelés « composants ». Cette modularité se traduit par une flexibilité lorsque l'on travaille sur un produit impliquant à la fois des développeurs et des designers.

J'ai compris ce cadre en m'inspirant du modèle de boîte HTML + CSS. Le modèle de boîte de composants offre une modalité organisationnelle avec laquelle créer des blocs de construction pour une application. Il est particulièrement bien adapté au développement d'un système de conception pour des projets en évolution rapide.

Pour maintenir l'agilité du design thinking, un ensemble de principes de conception particulièrement bien adaptés à un cycle de vie de développement de produit lean peut être suivi.

• Premier principe : Regrouper les contextes et les actions similaires .
• Deuxième principe : laissez l'architecture de l'information aider à simplifier le flux d'"état" entre les composants.
• Troisième principe : concevoir des systèmes visuels évolutifs pour rationaliser la façon dont les développeurs comprennent et implémentent les conceptions.

Regroupement de contextes similaires

Tenez compte du modèle mental de vos utilisateurs : regroupez les résultats et les actions similaires en fonction de leur « contexte d'utilisation ». Déterminez si les utilisateurs doivent créer, lire, mettre à jour et supprimer des éléments dans chaque contexte, et si vous devez fournir des commentaires sur leurs actions. Lors de la définition d'un test A/B pour un scénario d'utilisation spécifique, tenez compte de la mise en page, de la manière d'accéder aux entrées et des méthodes de navigation.

Simplifiez le flux d'interaction de "l'état"

Dans React, le flux "d'état" fait référence à la manière dont les informations se déplacent dans une application, à la manière dont les composants aident à organiser les données et à la manière dont elles sont affichées. En règle générale, l'état circule dans les composants d'affichage à partir de composants fonctionnels agissant comme des conteneurs. Les concepteurs peuvent se préparer aux tests A/B en décrivant de manière préventive comment les composants fonctionnels peuvent modifier la disposition d'une application en modifiant la façon dont les composants d'affichage sont évalués.

Développer des systèmes de conception robustes

L'utilisation de composants d'affichage pour développer des normes pour les éléments visuels tels que la typographie, les boutons, les entrées, les modaux et les cartes aide à fournir les éléments de base d'un langage de conception standardisé. Les systèmes visuels robustes ont la flexibilité de garder les concepteurs et les développeurs UX sur la même longueur d'onde sur les composants référencés dans les wireframes.

Sommaire

Le succès de la conception pilotée par les tests A/B est lié à la synergie entre les équipes produit et technique. Les concepteurs qui cherchent à adopter cette méthode doivent être précis sur où et comment tester. Passez du temps à développer une hypothèse et à déterminer ce que vous espérez découvrir. Ne vous laissez pas distraire. Tenez-vous-y, il est très facile de s'éloigner de votre méthode.

Ce processus n'est jamais vraiment terminé et évolue au fur et à mesure que les produits grandissent. Les concepteurs qui emploient une stratégie de développement de produits basée sur les tests doivent tirer parti des opportunités d'apprentissage qui se présentent tout au long du cycle de développement d'un produit.

Les composants, tout comme les systèmes de conception, concernent la modularité et la réutilisation des modèles, et non la disposition ou le style. Du point de vue d'un concepteur, la flexibilité de tester, d'affiner et d'améliorer les produits avec les tests A/B peut aider à développer des produits plus centrés sur l'utilisateur, ce qui conduit finalement à leur plus grand succès.

•••

Pour en savoir plus sur le blog Toptal Design :

• Tirer parti des modèles mentaux dans la conception UX
• Tests UX pour les masses : restez simples et rentables
• Le guide fondamental de l'utilisabilité mobile
• La valeur de la recherche utilisateur
• Comprendre les systèmes de conception et les modèles