Aider l'IA à y voir clair : une étude de cas sur la conception de tableaux de bord

L'intelligence artificielle (IA) est aujourd'hui à l'œuvre dans de nombreux secteurs. Il aide les détaillants à gérer les stocks et à prévoir la demande, permet aux médecins d'identifier plus facilement le cancer dans les scintigraphies pulmonaires et permet aux voitures de conduire elles-mêmes.

Mais l'automatisation alimentée par l'IA continue d'évoluer et nécessite toujours une intervention humaine. Dans cette étude de cas de conception de tableau de bord, je détaille comment j'ai développé des interfaces utilisateur qui aident les opérateurs humains à améliorer les processus de reconnaissance de l'IA.

Le client

Le client était une startup américaine qui aide ses clients à résoudre en temps réel les erreurs de reconnaissance d'image IA pour plusieurs industries. Les solutions qu'il fournit améliorent les systèmes automatisés qui permettent la cartographie du terrain, la classification des usines, l'identification des produits de vente au détail, la lecture des codes-barres, etc.

Les systèmes de reconnaissance d'images IA sont formés pour reconnaître et interpréter les entrées visuelles et prendre des décisions en fonction de ce qu'ils « voient ». Mais parfois, ces systèmes rencontrent des exceptions, des images qu'ils ne sont pas en mesure de traiter car l'objet a une apparence inattendue. Une exception peut empêcher un système d'IA d'identifier des informations cruciales ou de mal identifier ce qu'il voit. Par exemple, un scanner de produits d'épicerie peut ne pas reconnaître un carton de jus d'orange parce que le contenant a changé ou un robot agricole autonome peut être déconcerté par un obstacle. De tels problèmes peuvent entraîner des retards ou des perturbations dans les opérations d'une entreprise.

Pour résoudre ces problèmes, le logiciel du client s'intègre aux systèmes d'IA de ses clients, permettant aux opérateurs humains d'examiner et de résoudre les problèmes de reconnaissance en temps réel. Mais les opérateurs font plus que résoudre des exceptions : ils enseignent également aux systèmes d'IA ce qu'ils doivent faire la prochaine fois qu'ils rencontrent quelque chose de similaire. Il en résulte des systèmes d'IA mieux équipés pour identifier une plus large gamme d'images.

Le bref

Au cours de deux mois, j'ai travaillé avec le client pour fournir des conceptions pour un tableau de bord opérateur et un tableau de bord client. J'ai également préparé une bibliothèque de composants et un guide de style qui accompagnaient ces livrables.

Mon approche suit le processus de design thinking, qui implique la recherche, le brainstorming, le prototypage basse fidélité, le prototypage haute fidélité et les tests utilisateurs. J'adapte toujours ce processus en fonction de la disponibilité du temps, du capital et des personnes.

Pendant le projet, j'ai travaillé en étroite collaboration avec l'équipe fondatrice et le développeur front-end du client, partageant des mises à jour quotidiennes qui ont aidé tout le monde à rester informé de mes progrès. J'ai également collaboré avec deux opérateurs qui m'ont fourni des informations précieuses sur leur travail quotidien.

Amélioration du tableau de bord de l'opérateur

Au cœur du produit du client se trouve le tableau de bord de l'opérateur, l'interface que ses spécialistes en intelligence artificielle utilisent pour résoudre les problèmes de reconnaissance d'images. Lorsqu'un système d'IA a du mal à identifier une image, cette image est envoyée au tableau de bord d'un opérateur. L'opérateur étiquette manuellement l'image en marquant chaque objet et en le classant en fonction d'étiquettes prédéterminées, telles que « humain », « arbre » ou « grand obstacle ».

Lorsque j'ai interviewé les opérateurs du client, ils m'ont montré l'état actuel du logiciel qu'ils utilisaient et m'ont permis de les observer faire leur travail. À partir de cette recherche initiale, j'ai recueilli des idées, des points faibles et des opportunités d'amélioration qui éclaireraient mes conceptions.

J'ai découvert qu'il manquait des fonctionnalités importantes et que certaines tâches étaient inutilement compliquées, ce qui rendait l'interface difficile à utiliser. Par exemple, pour étiqueter une image, l'opérateur devait aller et venir entre la barre d'outils et l'image à chaque fois pour sélectionner, étiqueter, réviser et soumettre. De même, la possibilité d'annuler ou de rétablir une action manquait également, ce qui signifiait que les opérateurs devaient répéter des tâches ou prendre des mesures supplémentaires lorsqu'ils commettaient une erreur.

Une autre préoccupation était que l'interface n'avait pas une apparence unifiée car elle reposait principalement sur un mélange de composants prêts à l'emploi. Ces incohérences rendaient certains éléments et fonctions difficiles à trouver ou à utiliser.

Avec ces opportunités d'amélioration à l'esprit, j'ai réfléchi aux concepts initiaux et créé des wireframes, que j'ai partagés avec les deux opérateurs. Chaque jour, pendant une semaine, j'ai présenté des wireframes aux opérateurs et discuté de leurs premières impressions via des sessions de retour d'expérience virtuelles. Les sessions étaient très collaboratives et m'ont aidé à compiler des idées pour affiner le tableau de bord.

Un point intéressant qui a été soulevé lors de la session de retour d'information concerne la quantité d'informations affichées sur la barre d'outils de droite, où les opérateurs sélectionnent leurs actions. Ma conception originale suggérait une solution très minimaliste : une barre d'outils qui pourrait être réduite à un panneau étroit ne montrant que des icônes. Je croyais que cela permettrait de se concentrer sur l'image centrale.

Cependant, les opérateurs n'aimaient pas l'idée car il était difficile de comprendre d'un coup d'œil ce que signifiaient les icônes et quelles étaient les principales actions. Avec cette idée importante, j'ai réalisé que plus simple n'est pas toujours mieux. Dans ce cas, laisser plus d'informations visibles a aidé les opérateurs à travailler plus efficacement.

Après avoir amélioré et affiné les wireframes initiaux, j'ai créé un prototype interactif et basse fidélité dans Figma et l'ai envoyé aux opérateurs et aux parties prenantes afin qu'ils puissent le tester. Une fois que j'ai reçu leurs commentaires, j'ai itéré la conception jusqu'à ce que tout le monde soit satisfait.

Comme je l'ai mentionné, le tableau de bord d'origine a été créé à l'aide d'un mélange de composants d'interface utilisateur prêts à l'emploi, et l'expérience dans le produit n'était pas cohérente d'un bout à l'autre.

Cependant, pour des raisons de temps et de budget, les parties prenantes souhaitaient conserver les composants prêts à l'emploi dans la mesure du possible. Ainsi, en collaboration avec le développeur front-end, j'ai personnalisé les composants existants, qui comprenaient des boutons, des formulaires et des champs, ainsi que d'autres éléments de l'interface utilisateur, pour correspondre à l'apparence des nouveaux tableaux de bord. Ces ajustements ont eu un impact sur les couleurs, les polices de caractères, l'espacement et d'autres détails. Dans les cas où il était impossible de mettre à jour les composants existants, tels que les animations de progression en direct, nous en avons créé de nouveaux. La plupart du tableau de bord de l'opérateur a été construit à partir de zéro de cette façon.

J'ai ensuite produit un prototype navigable haute fidélité qui incorporait la couleur et les types de photos que les opérateurs verraient généralement dans le logiciel. J'ai également inclus des outils de sélection tels que des rectangles, des crayons et des polygones, et ajouté un panneau en bas de l'écran où les opérateurs pouvaient apporter des améliorations à l'image. Enfin, j'ai envoyé le prototype, ainsi que les spécifications des micro-interactions animées dans After Effects, au développeur front-end afin qu'il puisse construire le tableau de bord.

Concevoir un tableau de bord client à partir de zéro

La deuxième phase du projet était un tableau de bord client qui permet aux propriétaires des systèmes d'IA d'observer la progression de la résolution de leurs problèmes. Le client souhaitait améliorer cette expérience avant de lancer le produit auprès d'un plus grand nombre de clients.

À l'origine, les clients du client devaient demander des rapports d'avancement par e-mail. Chaque rapport était un fichier PDF ou CSV qui indiquait quelles exceptions étaient résolues ou toujours en cours. Le client avait besoin d'un moyen pour les clients de vérifier l'état de chaque exception en un coup d'œil.

Avec le tableau de bord que j'ai conçu, les clients peuvent se connecter et suivre la progression de chaque exception en temps réel. Ils peuvent voir les images qui sont arrivées, celles qui sont en cours de révision et les exceptions qui ont déjà été résolues. Ils peuvent également afficher les détails de chaque solution pour mieux comprendre comment le problème a été résolu.

Le tableau de bord comporte des graphiques et des visualisations pour aider les clients à mieux comprendre les données récapitulatives telles que les engagements totaux et les résolutions totales. Les clients peuvent également accéder et gérer facilement les aspects commerciaux de leurs comptes, y compris les méthodes de paiement et les informations de connexion.

Pour le prototype du tableau de bord client, j'ai créé des animations dans After Effects pour montrer comment certains éléments de l'interface utilisateur se comporteraient. Par exemple, j'ai créé une animation de progression pour montrer une exception en cours de révision, qui devient une coche lorsque l'exception a été résolue. J'ai également conçu un point clignotant pour indiquer quand un projet est en ligne.

Construire une bibliothèque de composants dans Figma

Un aspect important de la conception de produits évolutifs et faciles à entretenir consiste à créer une bibliothèque de composants et un guide de style. Le fait de disposer de composants de conception standardisés et réutilisables garantit à la fois la cohérence et la rapidité lors de la mise à l'échelle et de l'ajout de fonctionnalités à un produit numérique.

J'ai choisi d'héberger la bibliothèque du client dans Figma car cela facilite la modification des composants et leur mise à jour partout où ils apparaissent dans une conception. Tous les composants et styles ont été documentés à l'aide d'une grille à huit points. La bibliothèque comprenait des composants de base tels que des menus, des barres latérales, des onglets, des icônes de saisie et des boutons, tandis que le guide de style couvrait des éléments tels que la typographie, les couleurs, les icônes, l'espacement et les grilles.

À l'avenir, la bibliothèque de composants peut évoluer vers un système de conception à part entière. Mais pour l'instant, il sert de base à la croissance du produit et de référence pour les futurs designers, qu'ils soient en interne, en freelance ou en agence.

Questions de recherche sur les utilisateurs

Ce projet a été enrichissant car il m'a donné l'opportunité d'affiner un produit numérique qui améliore les systèmes automatisés dans de multiples industries et façonne la façon dont l'IA interprète le monde. Cela a également renforcé l'importance de la recherche des utilisateurs et de l'observation directe. Pouvoir observer les opérateurs faire leur travail et poser des questions était essentiel pour fournir des tableaux de bord qui leur permettaient de travailler plus efficacement. Un designer ne peut pas améliorer la façon dont quelqu'un travaille tant qu'il n'a pas compris son expérience en premier lieu.

Lectures complémentaires sur le blog Toptal :

• Conception de tableau de bord - Considérations et meilleures pratiques
• La cohérence est la clé - Comment construire un système de conception Figma
• Techniques de recherche UX et leurs applications
• La valeur de la recherche utilisateur
• Le véritable retour sur investissement de l'expérience utilisateur : convaincre la suite exécutive