Design UI/UX : Interfaces et Expérience Utilisateur

Chaque interface excellente commence par la compréhension des personnes qui vont l'utiliser. Nous menons des entretiens avec les parties prenantes, des enquêtes utilisateurs, des analyses de la concurrence et une revue des analytics pour construire des personas détaillés et des cartes de parcours. Nous identifions les points de friction, les motivations et les schémas comportementaux.

Nous structurons le contenu et les fonctionnalités en hiérarchies logiques et intuitives. Les wireframes basse fidélité cartographient les flux, les mises en page et les modèles d'interaction avant toute conception visuelle. Cela permet d'économiser des semaines de développement en détectant les problèmes d'utilisabilité en amont.

Les designs haute fidélité donnent vie à la marque avec une précision pixel-perfect. Nous créons un design system complet, une échelle typographique, des tokens de couleur, des unités d'espacement, une bibliothèque de composants. Les prototypes interactifs dans Figma permettent de parcourir l'ensemble de l'expérience avant le développement.

De vrais utilisateurs testent de vrais prototypes lors de sessions modérées et non modérées. Nous mesurons les taux de complétion, le temps par tâche, les taux d'erreur et les scores de satisfaction. Les heatmaps et les enregistrements de sessions révèlent exactement où les utilisateurs bloquent. Nous itérons sur la base de preuves, pas d'opinions.

L'UI, c'est ce que vous voyez : couleurs, typographie, boutons, espacement. L'UX, c'est si vous parvenez à faire ce pour quoi vous êtes venu. La distinction n'est pas sémantique, elle se voit dans le budget : un beau site où personne ne trouve le prix ou le formulaire a une bonne UI et une mauvaise UX, et l'argent est parti dans la partie visible. Nous travaillons d'abord le flux, c'est-à-dire l'ordre des étapes et ce que voit la personne à chacune, et seulement ensuite l'apparence.

Chaque champ supplémentaire réduit le nombre de personnes qui terminent. Nous ne demandons que ce que nous utilisons réellement, nous plaçons les étiquettes au-dessus du champ et non à l'intérieur, car le texte intérieur disparaît dès que l'on commence à écrire et l'on ne sait plus ce que l'on remplit, et nous plaçons les messages d'erreur à côté du champ concerné, pas dans un bloc rouge en haut de page. La validation se fait après que la personne a fini d'écrire, pas à chaque lettre.

Un texte gris clair sur fond blanc paraît élégant sur le moniteur du studio et devient illisible sur un téléphone en plein soleil ou pour quelqu'un de quarante-cinq ans. Il existe un ratio de contraste minimal mesurable et nous le respectons, de même que la taille minimale du texte, en dessous de laquelle le navigateur d'iOS agrandit automatiquement la page lors de la mise au point sur un champ. Nous vérifions avec un outil, pas à l'œil.

Une partie des gens n'utilisent pas la souris. Cela signifie que toute la page doit pouvoir être parcourue avec la touche de tabulation, dans un ordre logique, et que l'élément actif doit être clairement visible. Le contour de focus est souvent supprimé pour des raisons esthétiques, ce qui laisse l'utilisateur complètement aveugle quant à l'endroit où il se trouve. Nous le conservons et le stylisons. Les éléments construits à partir de div qui se comportent comme des boutons doivent être marqués comme tels, sinon ils n'existent pas pour le lecteur d'écran.

Avant de lire quoi que ce soit, le cerveau établit une hiérarchie à partir des tailles, des contrastes et de l'espace. Si trois boutons d'égale importance figurent à l'écran, aucun n'est important et la décision est reportée. Nous construisons chaque écran avec un seul élément principal, le reste étant visuellement subordonné, et nous vérifions la hiérarchie en regardant la maquette floue, les yeux plissés : si l'on distingue encore ce qu'il faut cliquer, elle est correcte.

Un ensemble unifié de couleurs, d'espacements et de composants réutilisables fait que chaque nouvelle page coûte moins cher et garde la même apparence. Mais cela a un coût initial, et pour un site de cinq pages qui ne va pas grandir, ce n'est pas justifié, et nous vous le disons franchement. Cela devient rentable quand vous avez un panneau d'administration, plusieurs types de pages ou plusieurs personnes travaillant sur le même projet.

Vous n'avez pas besoin d'un grand panel pour savoir où les gens bloquent. Cinq personnes de votre audience, chacune chargée de mener à bien une tâche réelle, révèlent la plupart des problèmes sérieux. L'important, c'est ce que vous ne demandez pas : on ne demande pas d'avis sur le design, on donne une tâche et on observe en silence. Ce que les gens disent aimer et ce qu'ils parviennent réellement à faire sont deux choses différentes.

Un design remis sous forme de belles images laisse le développeur inventer la moitié des décisions. Nous remettons chaque écran avec tous ses états : vide, en chargement, en erreur, avec un texte bien plus long que dans la maquette, avec une liste de mille lignes. C'est là que l'implémentation se casse, pas dans l'écran idéal. Nous ajoutons les valeurs exactes de couleur, d'espacement et de typographie, pour que le résultat construit soit celui qui a été approuvé.