Design UX/UI pour product builders : les bases pour des applications qu'on a envie d'utiliser

L'UX (expérience utilisateur) décide si une application est simple à utiliser ; l'UI (interface) décide si elle est claire et agréable à regarder. Pour un product builder, ce n'est pas un détail : un outil interne mal pensé sera contourné par ses utilisateurs, aussi bien construit soit-il. Pas besoin d'être designer pour éviter les erreurs les plus courantes : quelques principes suffisent.

Quelle différence entre UX et UI ?

L'UX traite du parcours et de la logique, l'UI de l'apparence et de la lisibilité.

Quelles sont les règles d'or du design visuel ?

Cinq règles suffisent à rendre une interface claire et cohérente, sans être designer.

1. L'espacement : laisser respirer le contenu, avec des espacements réguliers. La convention la plus répandue est d'utiliser des multiples de 8 pixels (8, 16, 24, 32, 48). En cas de doute, ajoutez de l'espace plutôt que d'en retirer.
2. La typographie : deux ou trois polices au maximum, une hiérarchie nette entre titres et texte, un interligne d'environ 1,5 fois la taille du texte et des lignes de 50 à 75 caractères.
3. La couleur : une palette limitée, souvent répartie selon la règle 60-30-10 (couleur dominante, couleur secondaire, couleur d'accent réservée aux boutons d'action), avec un contraste suffisant.
4. La hiérarchie visuelle : la taille, la couleur, l'espacement et la position indiquent ce qui compte. Astuce : plissez les yeux devant l'écran ; si l'élément principal ne ressort pas, la hiérarchie est à revoir.
5. Le retour visuel : chaque action de l'utilisateur produit une réponse visible (bouton qui change d'état, message de confirmation, indicateur de chargement).

Quels principes d'ergonomie appliquer ?

Les dix heuristiques d'utilisabilité de Jakob Nielsen restent la référence la plus utilisée. Quatre d'entre elles couvrent l'essentiel pour un outil métier :

1. Montrer l'état du système : l'utilisateur sait toujours ce qui se passe (chargement, enregistrement réussi, erreur).
2. Parler la langue de l'utilisateur : ses mots à lui, pas ceux de la base de données.
3. Rester cohérent : un même bouton, au même endroit, fait la même chose partout.
4. Prévenir les erreurs : demander confirmation avant une suppression, guider la saisie plutôt que la corriger après.

Comment rendre une application accessible ?

L'accessibilité consiste à rendre une application utilisable par tous, y compris les personnes en situation de handicap. Les bases sont à la portée de tous : un contraste d'au moins 4,5 pour 1 entre le texte et le fond (niveau AA des règles WCAG), des boutons et des liens aux libellés explicites, des formulaires dont chaque champ a une étiquette, une navigation possible au clavier. En France, le référentiel général d'amélioration de l'accessibilité (RGAA) détaille ces exigences.

Quelle démarche suivre sur un projet ?

Le design commence avant les écrans, par la compréhension des utilisateurs.

1. Observer : comment l'utilisateur travaille aujourd'hui, ce qui le ralentit.
2. Dessiner les parcours : les quelques actions qu'il fera tous les jours, à rendre les plus courtes possible.
3. Maquetter : des wireframes d'abord, sans couleurs, pour valider la logique.
4. Habiller : couleurs, typographies, composants, en appliquant les cinq règles d'or.
5. Tester : faire utiliser le prototype par une vraie personne, et noter où elle hésite.

Cette démarche s'intègre aux étapes d'un projet client : voir gérer un projet client no-code de A à Z.

Quels outils utiliser pour le design ?

Figma reste l'outil de référence du design d'interface, et les outils d'IA accélèrent désormais le maquettage. Claude Design crée des maquettes et des prototypes à partir d'une description, et les outils de vibe coding comme Lovable produisent directement des interfaces. Dans tous les cas, l'outil exécute : c'est à vous de juger si l'écran est clair.

Se former au design UX/UI

L'École Cube a consacré une masterclass gratuite au design UX/UI, et sa communauté, ouverte à tous^partenaire, permet de continuer à apprendre avec des experts. Son catalogue comprend aussi une formation Figma : voir toutes les formations Cube^partenaire.