L’UI design relie hiérarchie visuelle, composants et comportements. Sa qualité se vérifie dans les usages, y compris au clavier et sur mobile.
Distinguer UI et UX sans les séparer dans le projet
UI signifie User Interface, ou interface utilisateur. Le travail porte notamment sur la hiérarchie visuelle, les composants, les couleurs, la typographie et les états interactifs. L’UX s’intéresse plus largement à l’expérience, aux besoins et au parcours dans lequel cette interface s’inscrit.
Un bouton peut être élégant sans aider le visiteur à comprendre ce qui se passe ensuite. Inversement, un parcours bien pensé peut devenir difficile à utiliser si les informations sont mal présentées. Les décisions visuelles doivent donc rester liées aux tâches des utilisateurs.
Construire une hiérarchie qui aide à agir
Choisissez ce que la personne doit comprendre en premier, puis les informations nécessaires à sa décision. Les tailles, les espacements et les contrastes doivent soutenir cet ordre. Si tous les blocs cherchent à attirer l’attention avec la même intensité, la page devient difficile à parcourir.
Exemple fictif : sur une page de service, la présentation de l’offre, les conditions et la prise de contact doivent être repérables. Une animation décorative ne devrait pas prendre la place de l’information qui permet de décider. La création de site web relie ces choix au contenu.
Prévoir les états réels des composants
Un champ peut être vide, rempli, invalide ou temporairement indisponible. Une recherche peut charger, afficher des résultats ou ne rien trouver. Une maquette qui ne montre que le cas idéal laisse de nombreuses décisions au moment du développement.
Décrivez aussi les actions au clavier, le focus visible et les messages de confirmation. Les libellés doivent expliquer l’action : « Télécharger le guide » est plus précis qu’un bouton isolé « Valider ». Le lecteur doit pouvoir anticiper la conséquence de son choix.
Intégrer l’accessibilité dans les choix visuels
Le W3C recommande notamment des contrastes suffisants, des repères qui ne reposent pas uniquement sur la couleur et des contrôles identifiables. Les contenus doivent rester utilisables avec différentes tailles d’écran et des besoins de lecture variés. L’accessibilité n’est pas un contrôle uniquement décoratif.
Testez le zoom, la navigation au clavier et les messages d’erreur. Une maquette accessible ne suffit pas si le développement ne conserve pas les rôles et comportements nécessaires. La vérification doit porter sur le site réellement utilisé, avec des tests adaptés.
Organiser des composants cohérents et documentés
Définissez des règles pour les boutons, champs, cartes, titres et espacements qui se répètent. Précisez quand utiliser chaque variante. Un petit système cohérent peut suffire à un site de présentation, sans créer une bibliothèque très lourde à entretenir.
Conservez les textes réels dans les maquettes pour repérer les mots trop longs, les titres sur plusieurs lignes et les traductions éventuelles. Le guide fichier HTML aide à comprendre comment cette présentation s’appuie ensuite sur une structure de page.
Vérifier l’interface avec de vrais parcours
Demandez à des personnes concernées de trouver une information ou d’accomplir une action, sans leur expliquer chaque écran. Observez les hésitations et les erreurs. Les résultats doivent conduire à des corrections précises, pas seulement à une préférence pour une couleur.
Les personas peuvent aider à choisir les situations à tester, mais ne remplacent pas ces observations. Après publication, prévoyez l’entretien des composants et des parcours dans la maintenance du site. Une interface cohérente se construit aussi dans la durée.