Contrôle des versions : trois façons dont Figma a envisagé le défilement horizontal

Avant que le défilement horizontal du panneau des calques ne soit intégré à UI3, les utilisateurs nous le réclamaient depuis un certain temps. Lorsque des frames imbriquées ne sont plus visibles dans le panneau, une barre de défilement est nécessaire pour passer de l'une à l'autre. Cela semble simple, n'est-ce pas ? En réalité, ça ne l'est pas tant que ça. « Un problème qui semblait facile à résoudre a fait émerger des défis vraiment intéressants en termes de design, de développement et de collaboration », explique Giorgio Caviglia, product designer chez Figma.

Pour commencer, le panneau des calques est « très utilitaire », dit Giorgio. « C'est un élément complexe, car il est utilisé en permanence et doit être très fiable. » En plus de cela, le panneau n'est pas qu'une liste statique d'éléments parents et enfants. « On pourrait dire que les calques sont vivants, en quelque sorte, dit-il. On peut les masquer, les verrouiller, les réduire et les développer. Que se passe-t-il lorsque vous les faites défiler ? » La virtualisation, qui implique de n'afficher que les calques visibles afin d'améliorer les performances, a ajouté à la difficulté. Lorsque vous faites défiler vers le haut ou le bas dans le panneau, d'autres calques entrent en jeu, et la longueur variable du texte de ces calques pose problème lors du défilement horizontal. Ces facteurs compliquent l'objectif ultime, qui est de rendre la hiérarchie visibles aux utilisateurs et de leur indiquer qu'il y a d'autres choses à voir.

Pour résoudre cette complexité, Giorgio et une équipe de développement dirigée par les ingénieurs logiciels Amy Shan et Grant Phelps ont effectué de nombreuses itérations afin de créer une expérience fluide et intuitive. Ici, ils nous présentent trois explorations qu'ils n'ont pas livrées, ainsi que les enseignements qu'ils ont tirés de ce processus.

Première version : comportement hors champ sur le côté gauche

Giorgio s'est directement lancé dans le prototypage avec du code, en utilisant JavaScript, HTML, CSS et React pour se faire une idée des différentes approches possibles. « J'adore prototyper avec du code : on a les avantages sans les inconvénients, dit-il. Je peux travailler dans les limites imposées par la base de code, tout en restant concentré sur la réalisation et l'aspect visuel. » Cette approche pragmatique s'est avérée particulièrement utile pour une fonctionnalité aussi dynamique que le défilement. « Lorsque vous gérez des milliers de calques, des directions de défilement multiples et des interactions complexes, vous avez vraiment besoin de ressentir comment cela fonctionne, explique Giorgio. Vous ne pouvez pas anticiper tous les états lorsque vous concevez de manière statique. »

Voici une question soulevée par le défilement horizontal : comment traiter l'espace blanc lorsque les utilisateurs font défiler plus profondément les nœuds imbriqués ? Dans une version, l'équipe a exploré un traitement symétrique des calques lorsqu'ils quittent le bord supérieur gauche du panneau et entrent dans le bord inférieur droit. Lorsque les calques glissaient hors du champ, ils étaient indiqués par des icônes alignées sur le bord correspondant. « L'idée était d'avoir un design symétrique avec des icônes de frame en haut et en bas, afin de savoir où on se situe dans la hiérarchie des calques », explique Giorgio.

Cette question s'est toutefois révélée épineuse d'un point de vue technique. Faire en sorte que les icônes restent collées aux bords du panneau a été un changement rapide, mais elles avaient besoin de fonds opaques pour couvrir le texte du nom des calques lors du défilement, ce qui n'était pas compatible avec la structure des lignes de calques. « Dans diverses situations lors du défilement horizontal, le fond doit sembler glisser sous certains éléments de calque tout en tronquant d'autres, explique Amy, ce qui est difficile à faire lorsque le composant que nous stylisons n'a pas une connaissance exacte de l'emplacement des éléments du dessus. »

Ce n'était pas non plus idéal côté design. Lorsque les utilisateurs font défiler vers la droite, les extrémités des noms des calques forment un bord de texte irrégulier en haut à gauche. « En design, on se concentre souvent sur la symétrie, ce qui peut être idéaliste dans la mesure où la réalité est souvent plus compliquée qu'on ne le prévoit, explique Giorgio. C'est l'exemple typique de la solution qui crée un nouveau problème. Avant tout, cette itération a permis d'envisager de placer l'espace blanc au-dessus des calques visibles. »

Deuxième version : défilement automatique jusqu'au calque sélectionné

Dans une autre piste, l'équipe a prototypé un comportement de défilement automatique. Lorsque les utilisateurs sélectionnaient sur le plan de travail un calque qui n'était pas visible dans le panneau des calques, la barre de défilement se déplaçait automatiquement pour le centrer dans le panneau. Bien que ce comportement soit logique en théorie, il était déroutant en pratique. Un testeur interne a expliqué : « Cliquer sur un objet profondément imbriqué est perturbant, car l'arbre des calques y défile horizontalement et verticalement. Cela m'a fait perdre tout le contexte des éléments parents ».

Giorgio fait une analogie avec l'utilisation de Google Maps en voiture : si la carte montrait soudainement un autre endroit, l'utilisateur ne saurait plus où aller. « En tant que designer, il est très important de savoir exactement sur quel calque vous travaillez, où il se trouve dans la hiérarchie, quel est son nom, et s'il fait partie d'un composant parent », explique-t-il. « Vous créez un modèle mental qui se reflète dans le panneau des calques. » Si vous êtes désorienté, vous commencez à douter de vous-même. Vous voulez que l'outil vous aide, pas qu'il travaille contre vous. »

Troisième version : renommage des calques

Ajouter le défilement horizontal a également soulevé de nouvelles questions concernant le renommage des calques. Que se passerait-il si un utilisateur cliquait sur un calque pour modifier la zone de texte, puis faisait défiler jusqu'à un autre calque ? Nous avons envisagé de définir la saisie comme nouveau nom de calque, mais cela rendait possible les renommages involontaires. « Nous n'avons pas eu l'impression que le défilement était un signal assez fort pour confirmer un changement », explique Giorgio.

À la place, l'équipe a envisagé une zone de texte qui s'étendait vers la droite au fur et à mesure que l'utilisateur faisait défiler, bien que cela ait entraîné des problèmes d'interface utilisateur avec la zone qui clignotait sur le bord le plus éloigné. « En gros, comme l'équipe utilisait JavaScript pour le redimensionnement des éléments, il était impossible d'éviter le décalage causé par le redimensionnement horizontal du panneau, explique Grant. Si on choisissait de redimensionner depuis la gauche, cela créait un effet de saccades à droite, et vice versa. » Non seulement l'expérience était médiocre, mais si l'utilisateur continuait à taper, la barre de défilement risquait de revenir en arrière pour afficher le texte, ce qui n'était pas souhaitable d'après ce que l'équipe avait appris lors de l'exploration du défilement automatique.

Version finale : le bon équilibre

Dans l'ensemble, les itérations ont aidé l'équipe à prendre des décisions importantes. L'idée serait de laisser l'espace blanc au-dessus des calques visibles complètement vide pour correspondre à l'espace blanc en bas du panneau des calques, et de réinitialiser simplement le nom du calque, même s'il avait été modifié avant que l'utilisateur ne fasse défiler l'écran.

Pour répondre à la question du défilement automatique, l'équipe a développé des heuristiques pour savoir quand et jusqu'où ajuster la barre de défilement lorsqu'un utilisateur sélectionne un calque qui n'est pas visible. Si l'icône du calque et la longueur du texte dépassent le bord gauche du panneau des calques de 50 pixels ou plus, par exemple, la barre de défilement se déplace vers la gauche (juste assez pour afficher le contexte supplémentaire situé au-dessus, mais pas assez pour déconcentrer les designers). Cela posait un défi technique inédit en raison de la virtualisation. Si un utilisateur clique sur un calque qui n'est pas affiché, et qu'il n'y a pas d'informations sur la longueur du texte, il n'est pas évident de savoir de combien il faut faire défiler automatiquement pour un alignement correct. « Grant et moi avons trouvé un moyen de faire un affichage invisible de la rangée avant de la déplacer, explique Amy. Nous mesurons ensuite cette rangée et l'utilisons pour le défilement automatique afin qu'elle soit parfaitement alignée. »

Chaque version que l'équipe a prototypée et testée les a aidés à comprendre ce qu'il fallait automatiser, ce qu'il fallait laisser sous le contrôle des utilisateurs et où il fallait privilégier la simplicité. « L'idée était de ne pas trop compliquer les choses et de prendre en compte les contraintes techniques pour éviter de ralentir le processus, explique Giorgio. Nous devions proposer une évolution, pas une régression. » Aujourd'hui, la barre de défilement fonctionne de manière logique, mais comme c'est souvent le cas, cette fluidité est le résultat d'un grand nombre d'itérations et de prototypes. Comme le dit Giorgio : « On ne trouve pas les solutions les mieux adaptées du premier coup. Elles surgissent souvent au terme d'un parcours sinueux. »

Le 30 avril marque la fin d'UI2 et le passage à UI3. Découvrez les raisons de ce changement et comment faire la transition avec autant de fluidité que possible.