Design d’interface UX et UI : sites web et applications mobiles

Qu’est-ce que la conception d’interface UX, et en quoi diffère-t-elle de l’UI ?

La conception d’interface UX (expérience utilisateur) s’intéresse à ce que la personne cherche à faire et au chemin pour y arriver, c’est-à-dire à l’ergonomie : parcours, ordre des étapes, clarté des messages, gestion des erreurs. L’UI (interface utilisateur) en est la partie visible : mise en page, couleurs, typographie, boutons et composants. Les deux se conçoivent ensemble, car un bel écran ne sauve pas un parcours confus. Avant de dessiner, nous posons trois questions :

• Qui utilise l’écran, et dans quelle situation : téléphone en déplacement, poste de travail au bureau, tablette en atelier ?
• Quelle est la tâche principale : réserver, demander un devis, saisir un dossier, consulter une facture ?
• Qu’est-ce qui l’empêche aujourd’hui : un formulaire trop long, des libellés ambigus, un bouton introuvable ?

L’accessibilité se pense dès les maquettes : contrastes, taille des zones tactiles, navigation au clavier. Le W3C rappelle que l’accessibilité consiste à concevoir sites et outils pour que les personnes handicapées puissent les utiliser (W3C WAI, introduction à l’accessibilité du web). En France, notre article accessibilité d’un site web : RGAA et obligations précise le cadre applicable.

Audit UX, maquettes, prototype ou design system : que commander ?

Le devis dépend du nombre d’écrans et de parcours, de la présence d’une recherche utilisateur et de tests, et de l’existant à reprendre. Le design d’interface s’associe à une refonte de site internet, à une application mobile ou à la création de logo et d’identité visuelle, dont il reprend les couleurs et les polices.

Ce que nous demandons de votre côté

• L’accès aux statistiques existantes (Google Analytics, Search Console) si l’interface est déjà en ligne.
• Des contenus réels, ou au moins leur ordre de grandeur : un écran dessiné avec du faux texte ment souvent sur sa taille.
• Vos contraintes de marque : logo, couleurs, polices, ou la demande de les définir.
• Une personne qui décide, pour que les retours ne se contredisent pas.
• Des utilisateurs à interroger ou à observer, clients ou salariés : sans eux, les tests restent théoriques.

Ce qu’une conception d’interface ne garantit pas

• Un taux de conversion : un bon parcours enlève des obstacles, mais il ne crée pas la demande.
• La découverte de tous les problèmes : un test avec quelques utilisateurs révèle les blocages les plus fréquents, pas tous.
• Une interface accessible sans contrôle : les outils automatiques ne détectent qu’une partie des obstacles, un essai manuel au clavier et sur mobile reste nécessaire.
• Un résultat identique à la maquette : elle doit être développée fidèlement, d’où l’intérêt de relier la conception au développement.

Quatre écrans typiques à reprendre, pour fixer les idées

Ces cas sont fictifs ; ils situent les écrans sur lesquels porte le travail.

• Un formulaire de demande de devis que les visiteurs abandonnent : champs regroupés, messages d’erreur clairs, bouton d’envoi visible sur téléphone.
• Un espace client dont la connexion, la consultation des factures et la réclamation sont à reprendre.
• Une application mobile pour techniciens de terrain : grands boutons, peu de texte, saisie qui supporte un réseau instable.
• Un panier de boutique en ligne à simplifier, du produit au paiement.

Une fois l’interface développée, des tests automatisés de site web vérifient que les parcours dessinés fonctionnent à chaque mise en ligne. Pour préparer le brief, notre modèle de cahier des charges de site web liste les points à décrire, et la page application web sur mesure présente le développement qui suit la conception.

Comment concevoir l’interface d’un assistant IA ou d’un chatbot ?

Une conversation avec une IA est une interface comme une autre : elle se dessine, se teste et se corrige. La règle de départ est de ne jamais laisser croire à l’utilisateur qu’il parle à une personne. Voici ce que nous prévoyons dans les maquettes d’un assistant IA, qu’il vive sur un site, dans WhatsApp ou dans une application.

• Une mention claire : le bouton d’ouverture et le premier message disent qu’il s’agit d’un assistant IA.
• Un passage à une personne visible à chaque étape, par un bouton ou une phrase simple, jamais caché dans un menu.
• Ce que l’assistant sait faire, énoncé par quelques exemples de questions, pour éviter les demandes hors sujet.
• Une confirmation avant toute action sensible (envoi, modification, paiement), avec un résumé lisible de ce qui va se passer.
• Une réponse honnête quand l’assistant ne sait pas : il le dit et propose une personne, au lieu de deviner.
• Une conversation accessible : navigation au clavier, nouveaux messages annoncés aux lecteurs d’écran, texte lisible sur mobile.

Ces choix valent pour un chatbot entreprise comme pour un agent IA pour entreprise, qui agit en plus dans vos outils avec une validation humaine. Les précautions sur les données, présentées sur la page IA conforme RGPD, se décident dans les mêmes maquettes.