Figma sur Figma : notre approche de la conception d'UI3

Notre objectif avec UI3, notre dernière interface pour Figma

, est de maintenir les designers pleinement engagés et concentrés en minimisant les distractions et en mettant leur travail au premier plan. Dans cette optique, notre équipe a travaillé pendant plus de deux ans sur une myriade d’approches, revenant même sur certaines décisions de conception fondamentales, comme la navigation flottante et les panneaux de propriétés, après le lancement. Tout cela a été fait dans le but d’offrir une nouvelle génération d’interface utilisateur Figma aux millions de personnes qui l’utilisent tous les jours. « La qualité et la fluidité ne se mesurent pas facilement, c’est pourquoi il faut écouter attentivement les utilisateurs et prendre en compte leurs commentaires », explique Marcin Wichary, directeur de la conception chez Figma.

Pour les designers, repenser une conception consiste à choisir une destination, en veillant à ce que tout le monde soit du voyage. Alors que nous rendons UI3 disponible pour tous les utilisateurs le 10 octobre, nous expliquons comment la conception, les indicateurs, l’intuition et les avis constituent des points de repère essentiels tout au long du processus.

Panneaux ancrés : saisir l'opportunité d'explorer

Aussi complexe que cela puisse paraître pour des designers de repenser un produit, c’est une occasion rare de « modifier des éléments que l’on pensait immuables », explique M. Wichary. « Vous devez vous demander si un produit fonctionne vraiment, s’il n’était peut-être pas aussi formidable qu’on l’avait supposé au départ, ou si nous nous y sommes habitués pour des raisons obscures. Il n’y a jamais de réponses faciles, mais les questions sont passionnantes. »

Joel Miller, créateur de produits chez Figma, ajoute : « C’était une occasion rare de défier le statu quo, d’expérimenter des idées plus audacieuses et de potentiellement redéfinir la manière dont les gens interagissent avec Figma. » L’équipe a discuté de certains « concepts audacieux », notamment concernant les panneaux de navigation et de propriétés, qui constituent une partie essentielle de l’interface. Dans certaines explorations, les panneaux n’apparaissaient qu’au survol ; dans d’autres, ils étaient suspendus au-dessus du plan de travail. « Lorsque vous pariez sur la sécurité, vous ne savez peut-être pas où se situe la limite », déclare KC Oh, chef de produit chez Figma. Nous avons opté pour l’idée de panneaux flottants, qui créent une interface simplifiée et conviviale dans tout notre écosystème de produits, mais nous savions que le retour d’information nous indiquerait si cette approche était trop radicale.

Ce n’est qu’après le lancement d’UI3 en version bêta ouverte que nous avons pu mesurer pleinement le résultat grâce à l’adoption des fonctionnalités, aux indicateurs de performance et aux commentaires des utilisateurs. Il est apparu clairement que si les panneaux flottants étaient intéressants pour certains, ils gênaient les personnes qui passent de nombreuses heures par jour sur Figma. Nous avons compris qu’ils encombraient le plan de travail, surtout sur les petits écrans, et que les designs semblaient ressortir de l’arrière-plan d’une manière propre à gêner la concentration. Ils rendaient également les règles moins efficaces en les éloignant des designs. « Figma doit être rapide. La vitesse est un atout », explique Mme Oh. « Le coup de grâce a été de découvrir qu’ils ralentissaient le travail. » Dans le cadre du déploiement complet d’UI3, nous avons décidé d’annuler ce changement : les panneaux seront fixes, mais toujours redimensionnables pour une plus grande flexibilité.

Minimize UI : vers une vision unique

« Pour chaque projet créatif, il est essentiel d’avoir une vision du monde et de ses transformations, qui oriente votre démarche », déclare Ryhan Hassan, designer produit chez Figma. Bien que nous ayons eu carte blanche pour la nouvelle interface, nous devions analyser plusieurs années de retours d’expérience des utilisateurs. En réfléchissant aux solutions à apporter à ces problèmes, une idée maîtresse s’est imposée : bien que les modèles d’UI et les interactions puissent évoluer dans les années à venir, l’idée que le travail doit être au centre du plan de travail ne changera pas.

Cela nous a amenés à nous interroger sur la nécessité de l’UI dans certains cas. Bien que la fonctionnalité Masquer l’UI existante mette le travail au premier plan, certains utilisateurs la trouvaient abrupte et restrictive. La nouvelle fonctionnalité Minimize UI (Réduire l’interface utilisateur) ajoute de la flexibilité en rabattant les panneaux latéraux pour un travail sans distraction tout en permettant aux utilisateurs d’accéder facilement aux outils lorsqu’ils en ont besoin. La navigation est également plus fluide sur les petits écrans et les écrans partagés, qui sont de plus en plus courants avec le travail à distance et hybride.

Pour les moments où l’UI entre en jeu, nous avons réorganisé certaines fonctionnalités pour une hiérarchie plus épurée, qui laisse également des emplacements logiques pour l’intégration de futures fonctionnalités. « Avant la refonte, nous nous retrouvions à jouer à Tetris lorsqu’il fallait intégrer de nouvelles fonctionnalités », se souvient M. Hassan. Aujourd’hui, par exemple, le panneau de navigation mentionne de manière linéaire le nom du fichier, le nom de la branche et le nom du projet, suivis des pages et des calques. « Alors que nous ajoutons de nouvelles façons de naviguer dans les fichiers, nous disposons d’un espace d’extension logique sans compromis majeurs », explique M. Hassan. « Dans l’ensemble, nous progressons vers ce que nous ne pouvons pas encore réaliser. »

Modes de fusion : relier le passé et le présent

« D’une manière générale, nous avons supprimé certaines des roues d’entraînement des interfaces », explique M. Wichary. « Par exemple, les shortcuts de commande basés sur la touche Maj sont aujourd’hui monnaie courante, bien qu’ils soient apparemment incorrects si l’on considère le fonctionnement des claviers. Les barres de défilement semi-invisibles sont omniprésentes. » « Ce fut un défi amusant de prendre en compte ces tendances en pleine évolution pour UI3, et notamment leur impact sur les modes de fusion. Certaines conventions relatives aux modes de fusion datent des années 90, bien avant la création de Figma. »

Dans une première version, l’équipe avait placé cette commande derrière un bouton icône, qui révélait un menu. La modification du mode de fusion par rapport au mode par défaut modifiait également l’icône. Bien que cette approche ait simplifié le panneau d’apparence (l’un des objectifs de la refonte), elle ralentissait les workflows car elle obligeait les utilisateurs à attendre l’affichage d’une infobulle au-dessus de l’icône pour savoir quel mode de fusion était activé. Désormais, lorsque les utilisateurs sélectionnent un mode de fusion non standard, un menu déroulant intégré simplifie la modification ou la suppression du paramètre. Cette solution permet à l’UI de rester minimaliste tout en évoquant les débuts du mode de fusion.

Panneau de propriétés : construire avec vos utilisateurs

« Nous essayons constamment de trouver un équilibre et d’aller le plus loin possible tout en veillant à ce qu’UI3 évolue de manière logique pour les personnes qui utilisent l’ancienne interface », explique M. Hassan. Mais après des années de travail sur un projet, le risque est de s’enfermer dans sa propre vision. « C’est pourquoi il est essentiel de recueillir régulièrement les commentaires de la communauté et, tout aussi important, de montrer que nous en tenons compte », explique M. Miller. « Les meilleurs produits sont conçus non seulement par l’équipe de développement, mais aussi en étroite collaboration avec les personnes qui les utilisent. »

Pour faire évoluer le panneau de propriétés dans son ensemble, nous avons donné la priorité aux commandes des composants, unifié toutes les nouvelles options liées à la mise en page et revu l’en-tête. Pour tenir compte des commentaires reçus depuis le lancement, nous avons également modifié les contraintes pour qu’elles soient développées par défaut, ajouté des informations sur la bibliothèque pour les composants et mis à jour les commandes de disposition automatique pour qu’elles affichent toujours les valeurs en pixels et le mode de redimensionnement. « Nous veillons à faire des essais, à montrer que nous créons différentes versions et à écouter un large éventail de personnes », déclare M. Hassan.

L’équipe a exploré de nombreuses façons de mieux intégrer cette option au nouveau panneau des propriétés et de résoudre certains problèmes persistants. Dans l’une des versions, l’option Masquer le contenu extérieur est devenue un bouton bascule avec une icône ; dans d’autres, un bouton ou un menu. Dans la version bêta publique, elle prenait la forme d’un menu déroulant, mais nécessitait un clic supplémentaire, qui ralentissait les workflows. Nous lui avons redonné la forme d’une case à cocher, car ce moyen de contrôle est le plus clair et le plus efficace. Nous l’avons également rééquilibrée visuellement avec le reste de l’interface. « Nous aurions pu croire que nous avions échoué, car nous étions revenus presque là où nous avions commencé », explique M. Wichary. « Mais nous avons au moins le mérite d’avoir essayé, n’est-ce pas ? »

L’équilibre entre les commentaires des utilisateurs et l’intuition de l’équipe de conception soulève des questions essentielles. « Imaginons que nous recevions des commentaires critiques », poursuit M. Wichary. « S’agit-il d’une simple réaction naturelle au changement ou bien d’un phénomène persistant ? Cela alimente-t-il une partie de l’autocritique que nous avons déjà développée concernant cette idée ? Les retours négatifs sont-ils compensés par des retours positifs ? Ces questions semblent parfaitement familières, car le travail de chaque designer est de donner une évaluation sur le design

, mais elles sont aujourd’hui multipliées par mille. »

Curseurs : mobiliser toute l'équipe

En parlant des évaluations du design, même celles-ci ont dû évoluer pour répondre aux besoins spécifiques d’UI3. Au lieu des sessions d’évaluation individualisées habituelles de 30 minutes, l’équipe a mis en place des sessions de 60 minutes pour traiter la quantité considérable d’éléments repensés pour UI3 et permettre à chacun de commenter le travail des autres. « Ces deux mois ont été une période d’exploration intense », se souvient Mme Oh. « Toute l’équipe s’était mobilisée. »

Les speed rounds ont permis aux designers de répartir la charge de travail et de s’autoattribuer des tâches : certains se concentraient sur les détails visuels, tandis que d’autres se focalisaient sur les flux et la vision d’ensemble. Pour Wayne Sun, designer de produits chez Figma, ces évaluations ont permis de repenser les éléments fondamentaux tels que le composant curseur. Le processus a révélé tous les contextes auxquels il devait s’adapter : affichage de valeurs numériques lors du balayage dans une vidéo, encoches lors du réglage des polices variables ou aperçus de la teinte et de l’opacité lors de la manipulation des couleurs. En sus, il devait également s’intégrer dans un tout nouveau produit, Figma Slides

.

Étiquettes : ancrer les décisions dans un raisonnement solide

« Pour les designers qui utilisent ces outils au quotidien, même un petit changement peut être perçu comme un bouleversement majeur », explique M. Miller. « C’est stressant. On se demande : et si le résultat était horrible ? Et si j’avais complètement raté mon objectif ? C’est pourquoi tout changement doit être fondé sur une motivation raisonnable et pratique, qui améliore réellement l’efficacité ou la cohérence. »

Hoi Fung Ho, rédactrice UX chez Figma, en a fait l’expérience en proposant un nouveau système d’étiquetage pour aider les utilisateurs à s’orienter, visant la simplicité sans compromettre la clarté. « Je n’avais jamais vu un système avec des étiquettes facultatives, alors cette proposition m’a fait douter », dit-elle.

L’intersection entre les nouvelles étiquettes et les infobulles existantes a été particulièrement difficile à démêler. Une première approche minimaliste s’est avérée prometteuse, mais l’équipe a découvert par la suite qu’elle nuirait à l’accessibilité. « Cela a été un point de rupture », explique Mme Ho. « J’ai rapidement revu l’approche, et cela s’est avéré positif, car le fait de pouvoir dire « Voilà ce que nous faisons, et voilà pourquoi » a dissipé les doutes. » Désormais, toutes les étiquettes fournissent le contexte complet, ce qui a pour avantage de faciliter leur mise en œuvre.

Les étiquettes ont joué un rôle essentiel pour passer de l’état d’ébauche à l’état final, ainsi que pour la qualité globale de la nouvelle interface. Elles ont complété le travail de M. Sun sur les commandes, la refonte de l’iconographie par M. Van Damme, les efforts de M. Miller pour améliorer le panneau des propriétés, l’attention portée par M. Hassan à la vision d’ensemble, ainsi que les contributions de nombreux autres designers de Figma.

Gestion du changement : donner aux utilisateurs le temps de s'adapter

En fin de compte, nous ne sommes pas les plus impactés par cette nouvelle interface. « Les refontes sont amusantes pour les designers, mais elles peuvent créer une certaine angoisse chez les utilisateurs », explique M. Wichary. « On a l’impression que ce n’est jamais le bon moment. »

C’est pourquoi nous avons donné aux utilisateurs un moyen de désactiver UI3 pendant sa version bêta pour qu’ils puissent se familiariser avec la nouvelle interface à leur propre rythme. « Si vous recevez UI3 un mercredi et que vous avez une échéance importante le vendredi, vous pouvez toujours revenir à l’ancienne version et avancer dans votre travail », explique M. Hassan. Le déploiement progressif nous permet également de tirer des enseignements de l’expérience des utilisateurs, d’avoir le temps de traiter les commentaires et de créer un ensemble de didacticiels, afin de garantir que les réponses seront facilement disponibles lorsqu’UI3 sera proposée par défaut et que l’ancienne interface deviendra obsolète.

« Mais nous espérons que vous reviendrez », poursuit M. Wichary. « Nous pensons qu’UI3 a beaucoup à offrir, et nous ne l’avons même pas encore terminée. »

« Sauf pour masquer le contenu extérieur », ajoute Joel. « Nous en avons définitivement terminé avec cela. »

Alors que vous découvrez UI3, disponible pour tous les utilisateurs à partir du 10 octobre, n’hésitez pas à nous faire part de vos commentaires. Vos idées façonnent l’avenir de nos outils de design, un pixel à la fois.