User interfaces : bien plus que des boutons, des repères pour agir

User interfaces : bien plus que des boutons, des repères pour agir

Les user interfaces, ou interfaces utilisateur, désignent les moyens par lesquels une personne échange avec un système : consulter une information, lancer une commande ou recevoir une confirmation. Elles comprennent les écrans d’une application, mais aussi les commandes vocales ou les contrôles physiques d’un appareil. Leur rôle est simple : rendre les possibilités du système compréhensibles et utilisables, sans obliger chacun à en connaître le fonctionnement technique.

Une interface relie une intention à une action

Réserver un billet, régler un thermostat ou envoyer un message repose sur le même mécanisme. L’utilisateur exprime une intention grâce à une commande ; le système la traite, puis lui indique le résultat. L’interface utilisateur, souvent abrégée UI, organise cet échange dans les deux sens. Elle ne se limite donc ni à une décoration ni à une collection de boutons.

Infographie sur les user interfaces, l’UX et l’IHM dans un parcours de réservation
Infographie sur les user interfaces, l’UX et l’IHM dans un parcours de réservation

Sur une application bancaire, le champ du montant permet de saisir une instruction. Le bouton de validation déclenche le virement. L’écran de confirmation indique ensuite si l’opération a abouti. Ces éléments forment une interaction complète : entrée, action et retour d’information.

Graphique, vocale ou physique : plusieurs formes d’interaction

Une interface graphique utilise des fenêtres, des textes, des icônes et des éléments sélectionnables. Une interface vocale repose sur des demandes parlées et des réponses sonores. Une interface en ligne de commande attend des instructions textuelles. Les boutons d’un distributeur ou la molette d’un appareil constituent également des moyens d’interagir.

Ces modalités peuvent se combiner. Un téléphone associe écran tactile, commandes vocales et retour haptique, c’est-à-dire une vibration perceptible au toucher. Le choix dépend de la tâche et des conditions d’usage : une interaction adaptée à un bureau calme ne convient pas nécessairement à une personne en mouvement.

UI, UX et IHM : trois regards sur le même produit

Ces termes se croisent, mais ne répondent pas exactement à la même question. L’UI concerne les moyens d’interaction ; l’UX concerne l’expérience vécue dans son ensemble. L’IHM, ou interface homme-machine, désigne l’interface et, par extension dans les usages professionnels, le domaine qui étudie et conçoit les interactions entre humains et machines.

NotionQuestion centraleExemple pour une réservation
UI : interface utilisateurAvec quels éléments la personne agit-elle ?Calendrier, choix des places, bouton de paiement et confirmation.
UX : expérience utilisateurLe parcours répond-il au besoin de façon satisfaisante ?Trouver une place adaptée, comprendre le prix et recevoir son billet sans difficulté.
IHM : interface homme-machineComment organiser l’échange entre la personne et le système ?Choisir les commandes, leurs comportements et les modalités de retour d’information.

Une réservation peut présenter une UI soignée tout en offrant une mauvaise expérience : frais révélés tardivement, compte obligatoire inutile ou billet difficile à retrouver. À l’inverse, un service utile peut rester pénible si ses contrôles sont illisibles. Le design d’interface contribue à l’UX, sans pouvoir résoudre seul tous les problèmes du service.

Les composants prennent leur sens dans un parcours

Pour comprendre une UI, mieux vaut observer ce que ses éléments permettent d’accomplir plutôt que les inventorier uniquement par leur apparence. Une icône peut informer, déclencher une action ou ouvrir un menu : sa fonction doit être compréhensible à l’endroit où elle apparaît.

Comprendre les WCAG, référence internationale de l’accessibilité web — Découvrez les recommandations du W3C pour rendre les contenus et interfaces web accessibles à tous.

  • Se repérer : menus, barre de navigation, onglets, titres et fil d’Ariane indiquent où l’on se trouve.
  • Saisir et choisir : formulaires, cases à cocher, listes et sélecteurs recueillent une information.
  • Agir : boutons et liens permettent respectivement de déclencher des actions ou de rejoindre une destination, selon leur fonction.
  • Comprendre le résultat : messages de confirmation, indicateurs de progression et alertes rendent l’état du système perceptible.

Un formulaire montre pourquoi le comportement compte autant que l’apparence

Sur un formulaire de rendez-vous, afficher « Date souhaitée » est plus explicite qu’un champ sans libellé. Si le créneau devient indisponible, l’interface doit expliquer le problème et proposer de choisir une autre heure, sans effacer les informations déjà saisies. La qualité se joue autant dans ces états intermédiaires que dans l’écran initial.

Une interface gagne aussi à conserver une ancre pendant les transitions : un récapitulatif du rendez-vous, par exemple, reste visible lorsque l’utilisateur modifie l’horaire. Ce repère évite de devoir mémoriser la date, le lieu et le praticien en naviguant entre plusieurs écrans. Avant de simplifier une page en masquant des informations, demandez-vous lesquelles permettent à la personne de garder le cap.

Une bonne UI rend les décisions évidentes et les erreurs réparables

Le mot « intuitif » décrit souvent une interface dont les codes sont familiers et les conséquences prévisibles. Cette facilité se construit. La hiérarchie visuelle fait ressortir l’action principale ; les libellés expliquent les choix ; la sobriété limite la concurrence entre informations. L’objectif est de réduire la charge cognitive, autrement dit l’effort mental nécessaire pour comprendre et agir.

Les grilles d’évaluation ne sont pas uniques : Wikipédia présente huit qualités ou caractéristiques des grandes interfaces, tandis que Yumens évoque six qualités d’une interface utilisateur graphique. Ces nombres décrivent des découpages différents, pas une note universelle. Pour évaluer un écran, l’essentiel reste de vérifier des comportements observables.

Cohérence et feedback : rendre le système prévisible

Un même bouton doit conserver une signification stable d’un écran à l’autre. Après une action, un retour d’information, ou feedback, indique ce qui se passe : chargement en cours, enregistrement terminé ou saisie à corriger. Sans réponse perceptible, la personne peut répéter sa commande ou quitter le parcours. Pour une action destructive, une confirmation adaptée ou une possibilité d’annulation aide à prévenir les erreurs coûteuses.

Accessibilité et adaptation : préserver l’usage dans plusieurs situations

Une UI accessible prévoit notamment des libellés explicites, une navigation au clavier, un focus visible et des contrastes lisibles. La couleur ne doit pas être le seul moyen de signaler une erreur. L’adaptation multi-écrans doit préserver l’ordre de lecture et l’accès aux commandes, pas seulement réduire les dimensions. L’internationalisation suppose aussi d’anticiper des traductions plus longues, différents formats de date et, selon les langues, un autre sens de lecture.

Concevoir une interface : du scénario au test réel

La conception commence par une activité concrète : qui cherche à faire quoi, avec quelles contraintes ? Un agent qui traite des dossiers toute la journée n’a pas les mêmes besoins qu’un visiteur occasionnel. Les scénarios d’usage permettent de prioriser les informations et les actions avant de choisir les couleurs ou les effets visuels.

Wikipédia distingue trois étapes de conception d’une IHM typique : la spécification d’interaction, la spécification de logiciel d’interface et le prototypage. En pratique, ces travaux s’alimentent mutuellement et peuvent être repris après les tests.

  1. Décrire l’interaction : préciser les tâches, les enchaînements, les commandes et les réponses attendues, y compris en cas d’erreur.
  2. Spécifier le fonctionnement : définir les composants, leurs états, les règles de validation et leur comportement sur les différents supports.
  3. Prototyper et simuler : représenter les écrans puis rendre les parcours testables avant de développer l’ensemble du produit.

Lors d’un test utilisateur, proposez une tâche sans expliquer où cliquer. Observez les hésitations, les retours en arrière, les erreurs et l’atteinte du résultat. Testez aussi les situations moins favorables : absence de résultats, connexion interrompue ou saisie incorrecte. Une interface efficace ne se reconnaît pas seulement à son écran idéal : elle aide encore lorsque le parcours dévie.

À découvrir ensuite