UI Design — Fiche spécialité #5

Les spécialités centrées utilisateur à la loupe

Vous construisez un produit numérique centré utilisateur ? Vous voulez une équipe avec les bonnes compétences ? Ou vous aimeriez vous former mais ne savez pas par où commencer ? La série d’articles “Les spécialités centrées utilisateur à la loupe” est faite pour vous !

Chaque semaine, une fiche « spécialité » basée sur des interviews décortique l’une des grandes étapes de ce processus :

Les spécialités centrées utilisateurs pour un produit numérique

Ces fiches sont basées sur des interviews de professionnels, qui travaillent à des postes et dans des entreprises variés, mais qui sont surtout experts dans la spécialité en question. Je ne vous partage donc pas une vérité absolue, mais des expériences croisées.

Dans cet article :

Après avoir lu cet article, vous comprendrez ce qu’est l’UI design et comment cela intervient dans un projet digital centré utilisateur. Vous saurez également les compétences requises pour cette spécialité, et les outils et méthodes fréquemment utilisés.

Retrouvez les mots marqués d’une astérisque dans le lexique à la fin de l’article !

L’UI design, c’est quoi ?

Mission

Dernière étape avant le développement, l’UI (User Interface) Design (ou conception d’interface utilisateur) crée l’interface visuelle du produit numérique. Sur la base du squelette de l’interface créé par l’UX design*, il ajoute la couche graphique : hiérarchie, couleurs, typographies, micro-interactions, etc. tout en garantissant l’accessibilité visuelle.

Livrables

• Maquettes haute-fidélité*
• Design system* ou UI kit*

Ne pas confondre avec…

… La direction artistique (DA), qui est en charge de créer une identité de marque (logo, illustrations) en accord avec le positionnement marketing, et de définir les règles de cohérence des communications de l’entreprise ou du produit (charte graphique).

Cependant, l’UI design suit la direction artistique existante et peut être amené à la décliner pour l’adapter aux besoins de l’interface numérique.

Compétences clés

1. Maîtriser les outils de conception d’interface
2. Concevoir des maquettes haute-fidélité* en respectant la direction artistique, les bonnes pratiques, les wireframes de l’UX design et les contraintes projet
3. Créer un kit UI* ou un design system* qui assure la cohérence et l’évolutivité des écrans
4. Utiliser les principes de conception graphique (gestion des couleurs, des typographies, des espaces, hiérarchie visuelle…) pour pouvoir guider l’œil de l’utilisateur
5. Connaître et savoir utiliser les normes d’accessibilité visuelle
6. Connaître les tendances du design d’interface, et comprendre les technologies actuelles
7. Faire preuve de curiosité, de flexibilité, d’adaptabilité et d’humilité.
8. Bonus :
   Posséder des connaissances de base en codage (HTML et CSS) pour faciliter la collaboration avec les développeurs.

Journée type (en agence)

Matin

Je regarde mes mails, pour voir si j’ai des retours clients ou un nouveau projet. Si j’ai des retours, je vais sur Figma et je fais les modifications.

J’ai une réunion avec le client pour présenter mes maquettes et expliquer mes choix, on valide ou pas.

Après-midi

J’ai une réunion avec les développeurs pour expliquer les maquettes et interactions en détail. Je leur fait aussi des commentaires écrits directement sur les maquettes.

Ensuite, je vérifie les maquettes de la veille pour prendre du recul, je prépare des rendus et je travaille sur des maquettes.

Exemple d’intervention sur un projet

Projet : interface métier de conduite d’engins de chantier.

Après les wireframes et les tests utilisateur effectués par l’UX, j’interviens sur l’UI design. Avec plus de temps, j’aurais pu faire le design system en amont, mais là je le crée en même temps que les écrans.

Ensuite, je finis la maquette et je réponds aux questions des développeurs. Il faut bien rester en contact avec eux pendant tout le processus.

Parfois, je teste des maquettes haute-fidélité avec les utilisateurs pour m’assurer que le design n’affecte pas négativement l’expérience utilisateur. J’ai aussi des échanges fréquents avec le client qui apporte des ajustements mineurs aux maquettes finales.

On valide et je donne mes maquettes aux développeurs, qui les passent en production.

Outils

• Création d’écrans et de prototypes : Figma / Adobe XD / Sketch
• Librairies d’icônes : IBM, Google ; d’illustrations : Undraw ; de polices Fontbase, Adobe Fonts
• Veille : Dribble, Behance, Youtube (Basti UI, Satori Graphic), tutoriels Figma, LinkedIn
• Accessibilité des couleurs : Color.review
• Iconographie : Adobe Illustrator
• Collaboration avec les développeurs : Storybook
• Réunions : Microsoft Teams

Méthodes

• Itération : faire plusieurs versions d’un même écran pour utiliser le meilleur de chacune.
• Atomic design : méthode de création d’un design en commençant par les plus petits composants* et en les assemblant pour en faire des plus grands
• Utilisation de l’autolayout*, de grilles de design et de composants pour gagner en temps et en cohérence
• Moodboard fonctionnel : compilation des différents designs existants pour une fonctionnalité donnée
• Gestion du temps : anticipation des retours développeur et/ou client

Formation

L’UI design peut s’apprendre grâce à des formations en design graphique, en design d’interface, ou dans un domaine connexe.

Par où commencer ?

Si cette spécialité t’intéresse mais que tu ne sais pas par où commencer, voici les premiers petits pas à faire :

• Travaille ton œil : compare des sites, des applications. Essaie de comprendre ce qui fonctionne visuellement et ce qui ne fonctionne pas, et cherche à savoir pourquoi.
• Recrée des sites sur Figma (ou autre outil de design d’interface) pour comprendre comment ils sont construits et la façon dont la hiérarchie visuelle s’articule.

Défis

• Rendre l’état d’un composant (cliquable, actif, inactif…) compréhensible n’est pas toujours évident, ça se joue parfois au pixel près
• Il peut y avoir beaucoup de compromis à faire avec les développeurs et le client, il faut savoir argumenter ses choix tout en restant flexible

Lexique

UX Design : Conception d’expérience utilisateur (focus dans 2 semaines).

Composant : Elément présent sur plusieurs écrans, qui peut avoir différents états (ex : bouton, menu).

Design system : Ensemble de composants préfabriqués qui facilite la création d’interfaces.

UI kit : Mini design system.

Maquette : Dessin de l’écran plus ou moins détaillé.

• Maquette Lo-fi (basse fidélité, utilisée en UX design, aussi appelée wireframe en France)
• Maquette Hi-fi (haute-fidélité, utilisée en UI design)
• Maquette Mid-fi (moyenne fidélité, quelque part au milieu)

Autolayout : Outil qui permet d’organiser et à aligner automatiquement des éléments pour qu’ils restent toujours bien en place, peu importe la taille de l’écran ou la façon dont on les utilise.

La semaine prochaine, on verra la spécialité UX writing à la loupe ! Restez dans la boucle en me suivant sur LinkedIn.