Conception UX/UI : le véritable processus de la recherche à la remise

UX vs UI : la différence qui coûte de l'argent

L'UX est le fonctionnement d'un site. L'UI est son apparence. Un bon design commence par le problème d'un utilisateur, pas par une palette de couleurs.Si quelqu'un ne sait pas où cliquer, l'interface la plus jolie ne vous sauvera pas — ils ferment l'onglet et vont chez un concurrent dont le bouton était visible.

Formellement, l'expérience utilisateur est tout le parcours : comment une personne est arrivée, ce qu'elle cherchait, ce qu'elle a trouvé, combien d'étapes cela a pris, où elle a trébuché, comment elle s'est sentie à la fin. L'UI est la couche visuelle de ce parcours : typographie, couleur, grille, états des boutons, icônes, espacement. Les couches sont connectées, mais elles résolvent des problèmes différents.

Pourquoi la différence est commerciale, pas académique

Imaginez deux boutiques en ligne. La première a l'air simple, mais les filtres répondent instantanément, les prix sont visibles dès le départ, et le paiement ne nécessite que trois champs. La seconde a une belle animation, de grandes photographies, et un panier qui exige une inscription avant de montrer les frais de livraison. La première vend plus. Pas parce que l'apparence n'a pas d'importance, mais parce que les revenus proviennent d'une action complétée, pas d'une impression.

Voici donc la formule de travail : l'UX décide si quelqu'un atteint l'objectif, l'UI décide s'il vous fait confiance en chemin. Vous avez besoin des deux. Mais quand vous devez choisir quoi corriger en premier, corrigez la logique.

Ce que le design ne fait pas

• Il ne sauve pas un mauvais produit. Si votre prix est au-dessus du marché sans explication, la mise en page ne cachera pas cela.
• Il ne remplace pas le trafic. Un fort design UX/UI augmente la conversion de visiteur à demande, mais quelqu'un doit toujours amener les visiteurs.
• Il ne lit pas dans les pensées. Sans données sur les clients, un designer devine — et deviner coûte plus cher que la recherche.

C'est pourquoi dans notre services de studio le design n'apparaît jamais comme un élément distinct appelé "dessiner un maquette". Il fonctionne en parallèle avec l'analyse, le contenu et le développement — sinon vous obtenez une image coûteuse que personne ne peut réellement construire.

Étape 1. Recherche, objectifs et revue des concurrents

Le design commence par la question "que doit-il se passer sur ce site", pas "quelle couleur aimez-vous". Tant que cela n'est pas répondu, chaque révision est discutée sur le goût — et le goût est un argument que personne ne gagne.

Ce que nous établissons dès le départ

• L'objectif commercial.Demandes ? Commandes ? Réservations ? Candidatures ? Un objectif est principal ; les autres sont secondaires.
• L'action cible.Le bouton spécifique que quelqu'un doit presser. S'il y en a cinq et que tous sont "le principal", aucun n'est pressé.
• Le public.Qui ils sont, combien ils savent sur le sujet, quel appareil ils utilisent, ce qu'ils savent déjà sur vous.
• Les objections.Pourquoi ils hésitent : trop cher, trop lent, flou, "vont-ils même faire mon type de travail".
• Les contraintes.Délais, budget, CRM existant, identité de marque, exigences légales.

Les données ne doivent pas être chères. Les enregistrements d'appels de vente, les fils de discussion, les requêtes de recherche sur site, les cartes de chaleur, les questions que les clients posent le plus souvent — c'est déjà suffisant pour arrêter de deviner. Si l'analyse est en cours, regardez où les gens abandonnent et à quelle étape.

Revue des concurrents — pas pour copier

Vous regardez les concurrents pour apprendre les règles du marché et trouver les lacunes. Les règles sont ce qu'un utilisateur attend par défaut : prix, délais, ce qui est inclus, avis. Les lacunes sont ce que personne n'offre : un calculateur, des délais honnêtes, de vraies photos au lieu de photos de stock, une explication simple du processus. Copier la mise en page de quelqu'un est inutile — vous ne savez pas si cela fonctionne pour eux, et vous héritez de leurs erreurs ainsi que de leurs décisions.

Une revue heuristique

Si un site existe déjà, évaluez-le par rapport aux principes de base utilisabilité du site web avant que quiconque ne dessine quoi que ce soit : est-il clair où vous êtes ; l'état du système est-il visible ; une action peut-elle être annulée ; les erreurs sont-elles compréhensibles ; l'interface parle-t-elle la langue du client ; devez-vous garder des choses en tête entre les écrans. Deux jours de cela produisent une liste de problèmes, dont la moitié peut être corrigée sans aucune refonte.

Étape 2. Scénarios utilisateurs au lieu de pages

Les gens ne viennent pas "sur un site web" — ils viennent pour accomplir quelque chose.Donc, vous concevez des scénarios, pas des pages : ce que fait une personne, étape par étape, de l'arrivée au résultat.

Un scénario tient en une phrase simple. "Un parent cherche un club après l'école près de chez lui, veut voir le calendrier et le prix, et réserver une séance d'essai depuis un téléphone en cinq minutes." C'est tout. Rien qu'à partir de cette phrase, vous pouvez voir les exigences : un filtre de localisation, un calendrier lisible, un prix sans "contactez-nous pour plus de détails", un formulaire court et un numéro de téléphone cliquable.

Combien de scénarios avez-vous besoin

Pour un site de services, généralement trois à cinq. Plus et vous vous étalez trop ; moins et il vous manque quelque chose. Un ensemble typique : "jamais entendu parler de cette entreprise, juste en train de rechercher", "comparant avec un concurrent, cherchant une raison de choisir l'un", "déjà décidé, veut entrer en contact rapidement", "client existant, besoin d'un contact ou d'un document".

Différents états, différents écrans

Les designers juniors dessinent seulement l'état parfait : catalogue complet, noms courts, chaque photo à sa place. La réalité est plus riche. Chaque écran clé a besoin d'états :

• Vide — le filtre n'a rien trouvé, le panier est vide, il n'y a pas encore de commandes. Que voit la personne, et où va-t-elle ensuite ?
• Chargement — ce qui s'affiche pendant que les données voyagent.
• Erreur — le serveur est hors service, le paiement a échoué, un champ est incorrect.
• Dépassement — un nom de produit de trois lignes, 40 articles, une critique de 2 000 caractères.
• Succès — le formulaire est envoyé. Et maintenant ? "Merci" n'est pas une réponse ; les gens veulent savoir quand quelqu'un va les appeler.

Les états sont la partie la plus ennuyeuse et la plus précieuse du travail. Ils sont exactement ce qui sépare un maquette que vous pouvez construire d'une maquette qui fait que votre développeur vous envoie un message toutes les demi-heures.

Étape 3. Architecture de l'information

L'architecture de l'information est l'endroit où les choses vivent et comment elles s'appellent.Cela résout la moitié de vos problèmes de navigation avant même que le premier pixel n'existe.

Le travail semble simple et est en pratique fastidieux : collecter tout le contenu, le regrouper par signification, nommer les groupes avec les mots du client, définir la priorité. La partie clé est les mots du client. "Solutions" a du sens pour vous ; la personne recherche "réparation de réfrigérateur". Votre organigramme interne ne doit jamais transparaître dans le menu.

Règles qui font gagner du temps

• Le menu n'est pas une décharge.Cinq à sept éléments de niveau supérieur. Si cela ne rentre pas, le regroupement est incorrect.
• Profondeur de trois clics maximum vers toute page importante. Au-delà, vous perdez des gens.
• Un sens, une page.Deux pages similaires se font concurrence dans la navigation et dans la recherche.
• L'étiquette est la requête.Un élément de menu doit correspondre à la façon dont une personne pense et parle réellement de cela.

Priorité dans la page

À l'intérieur d'une page, la même logique s'applique : répondre d'abord, puis détailler, puis prouver, puis agir. Un visiteur décide en quelques secondes s'il est au bon endroit, et il décide dès le premier écran. Si le haut de la page dit "Bienvenue sur notre site web", vous avez dépensé votre espace le plus précieux sur un espace réservé.

L'ordre des blocs est aussi un design — et c'est la partie qui génère le plus d'argent. Nous avons décomposé la logique de la séquence des blocs dans notre article sur structure de page de destination: mêmes mécaniques, compressées en une seule page.

Tester l'architecture sans maquette

Donnez la liste des noms de sections à cinq personnes extérieures au projet, demandez-leur de les trier en groupes et de dire ce qu'ils s'attendraient à trouver où. Les désaccords vous montreront les points problématiques en une heure. C'est peu coûteux et cela évite de discuter dans une salle de réunion.

Étape 4. Maquettes : le squelette sans maquillage

Une maquette est un schéma en noir et blanc d'un écran : ce qui vient après quoi, ce qui est plus important, où se trouve l'action.Pas de type fantaisiste, pas d'ombres, pas de photographie. Délibérément.

Le but du gris est de supprimer tout ce qui distrait de la structure. Montrez un maquette en couleur et le client dira inévitablement "rendez le bouton plus lumineux", et la conversation sur le fait que le bouton est au mauvais endroit n'aura jamais lieu. Un fil de fer ramène la discussion à la substance : est-il clair ce que cette entreprise est, ce qu'elle offre, pourquoi lui faire confiance, et que faire ensuite.

Ce qui appartient à un fil de fer

• Vrais titres et étiquettes, pas de Lorem ipsum. Le texte factice ment à la fois sur la longueur et le sens.
• Le vrai nombre d'éléments : si le catalogue a 12 articles, ne dessinez pas trois.
• Chaque état clé de l'étape précédente.
• Versions mobile et desktop des écrans clés tout de suite, pas "nous l'adapterons plus tard".

Combien d'écrans dessiner

Pas tous. Vous dessinez des types de pages : page d'accueil, page de service, catalogue, page d'article, formulaire, article, contact, pages utilitaires (404, merci). Tout le reste s'assemble à partir des mêmes blocs. Si chaque nouvelle page nécessite un nouveau mockup, vous n'avez pas de système — vous avez une pile d'images.

C'est l'endroit le moins cher pour argumenter

Déplacer un bloc dans un wireframe prend des minutes. Le déplacer dans un site construit, relié à un CMS prend des jours et de l'argent. Donc c'est exactement ici que vous devriez vous opposer, poser des questions gênantes et exiger des raisons. À partir de maintenant, le prix d'un changement augmente à chaque étape.

Étape 5. Le concept UI : à quoi ressemble la confiance

Une fois la structure convenue, la couche visuelle arrive. Son rôle n'est pas la décoration — c'est de rendre la structure évidente et de gagner la confiance.

La confiance dans une interface se construit à partir de choses ennuyeuses : une grille soignée, un espacement cohérent, un texte lisible, de vraies photos au lieu de photos de stock, des chiffres honnêtes, une absence de bruit visuel. Personne ne pense "j'adore cette grille modulaire" — ils ressentent simplement que les choses ici sont en ordre, donc le travail sera probablement en ordre aussi. L'inverse est vrai : des logos de clients mal alignés et trois bleus différents se lisent comme "jetés ensemble".

De quoi est fait un concept d'UI

• Typographie.Le type de combinaison, les tailles, la hauteur de ligne, la longueur de ligne. C'est 80 % de la sensation d'un site, car un site est principalement du texte.
• Couleur.Une base neutre, un accent réservé pour l'action cible, des couleurs fonctionnelles pour les erreurs et le succès. Dépensez l'accent uniquement sur ce qui compte, sinon cela cesse de fonctionner.
• Grille et rythme.Un pas d'espacement (un multiple de 4 ou 8, par exemple) au lieu d'estimer chaque écart.
• Images.Vos propres photos du travail et des personnes surpassent les images de stock parfaites, car personne ne croit aux images de stock.
• Ton.L'interface parle : formelle, amicale, technique. C'est une décision, pas un accident.

Un concept est un écran, pas l'ensemble du site

En général, vous présentez la page d'accueil ou une page de service clé dans deux ou trois directions. L'objectif est de s'accorder sur un langage, pas de valider une version finale. À quoi ressemble ce langage sur de vrais projets est plus facile à voir dans le portefeuille: différents secteurs ont besoin d'un ton visuel différent, même si le processus qui les sous-tend est identique.

Et l'essentiel : un concept est jugé sur "est-ce qu'il sert l'objectif", pas "est-ce que j'aime ça". Plus d'informations à ce sujet dans la section des retours.

Étape 6. Système de design et composants

Un système de design est un ensemble de briques prêtes à l'emploi plus les règles pour les utiliser.Boutons, champs, cartes, titres, espacements, états — définis une fois et réutilisés partout.

Sans un système, chaque nouvel écran est dessiné à partir de zéro. Six mois plus tard, le site abrite sept nuances de gris, quatre tailles de boutons et trois types de cartes produits, et personne ne se souvient pourquoi. Avec un système, une nouvelle page s'assemble en quelques heures au lieu de plusieurs jours et ressemble à une partie de l'ensemble.

Qu'est-ce qu'il y a dans un système

• Tokens.Couleurs, tailles de police, rayons, ombres, l'étape d'espacement — en tant que variables nommées, pas de valeurs inventées sur le moment.
• Composants.Un bouton avec chaque état (par défaut, survol, focus, pressé, chargement, désactivé), un champ avec erreur et indice, une carte, un modal, un tableau, une pagination.
• Règles de composition.Quel en-tête quand, combien d'espace entre les blocs, comment les éléments se comportent en cas de débordement.
• Modèles.Formulaires, filtres, paiement — assemblages standard construits à partir de composants.

Pourquoi le client devrait s'en soucier, pas seulement le designer.

Un système est des économies pour votre avenir. Un nouveau service, une page de destination de campagne, une section supplémentaire — tout cela s'assemble à partir de ce qui existe et ne nécessite aucun nouveau projet de design. Cela empêche également le site de se désagréger au fil du temps alors que différentes personnes effectuent des modifications.

L'échelle dépend du projet : un petit site de brochure nécessite une seule page de règles, un grand catalogue ou produit nécessite une véritable bibliothèque. Sur le projet Astrina le système de composants est exactement ce qui a permis à chaque type de page de rester cohérent sans dessiner chaque écran séparément.

Étape 7. Prototype, transfert aux développeurs et contrôle qualité du design

Un prototype est une maquette cliquable dans laquelle vous pouvez parcourir tout un scénario avant qu'une seule ligne de code n'existe. Il répond à la question qu'une image statique ne peut pas : "que se passe-t-il quand j'appuie là-dessus ?"

Les prototypes détectent les erreurs coûteuses : une étape redondante dans un formulaire, une impasse après soumission, un chemin de retour confus, un filtre qui se réinitialise. Cinq personnes parcourant le scénario à voix haute vous enseignent plus qu'un mois de débat interne. Vous n'avez pas besoin d'un laboratoire — vous avez besoin de quelqu'un du public, d'une tâche et d'un observateur qui reste silencieux.

Ce qu'un transfert contient réellement

• Maquettes à deux ou trois largeurs clés : mobile, tablette/intermédiaire, bureau.
• Chaque composant et état d'écran.
• Tokens et règles : couleurs, type, pas d'espacement, comportement de débordement.
• Comportement : ce qui est cliquable, ce qui s'ouvre, ce qui s'anime et sur combien de millisecondes.
• Texte final, pas de texte de remplacement. Actifs : icônes, images, logos dans les bons formats.
• Cas extrêmes : un titre très long, une photo manquante, zéro résultat.

Un bon transfert n'est pas "voici un lien vers le fichier". C'est une réunion où le designer et le développeur parcourent les maquettes et disent à voix haute les parties non évidentes. Une demi-heure de conversation économise une semaine de messages.

Contrôle qualité du design : la vérification après la construction

Une fois le site assemblé, le designer le parcourt à nouveau — cette fois dans un navigateur. Espacement, retour à la ligne, états, comportement sur des données réelles, mise au point, vitesse d'animation, comportement des formulaires. C'est une étape courte, mais si vous la sautez, il y a toujours un écart entre la maquette et le site en direct. La règle est simple : tant que le contrôle qualité du design n'est pas passé, le projet n'est pas terminé.

Mobile-first et accessibilité en langage simple

Vous commencez à concevoir sur l'écran du téléphone — non pas parce que c'est à la mode, mais parce que les contraintes y sont plus strictes.Si le contenu s'adapte et fonctionne à 360 pixels de large, il se dépliera sur le bureau sans problème. L'autre direction ne fonctionne presque jamais.

Le mobile d'abord est une discipline de priorités. Sur un petit écran, vous ne pouvez pas tout montrer en même temps, donc vous êtes obligé de répondre honnêtement à ce qui compte le plus. Cette réponse améliore également la version de bureau.

Que vérifier sur mobile

• Les cibles tactiles ne doivent pas être plus petites qu'un doigt. De petits liens entassés produisent des erreurs de tapotement et de l'irritation.
• Rien ne déborde ; il n'y a pas de défilement horizontal.
• Le numéro de téléphone compose, l'adresse ouvre une carte, les champs de formulaire appellent le bon clavier.
• L'action importante est accessible sans défilement infini.
• Des images lourdes ne ralentissent pas le chargement sur une connexion mobile.

Accessibilité : quatre choses qui vous donnent 80 % du résultat

• Contraste.Du texte gris clair sur blanc a l'air élégant dans une maquette et est illisible à l'extérieur au soleil. Le contraste aide les personnes ayant une vision réduite — et il vous aide, sur un écran bon marché, en déplacement.
• Concentrez-vous.Lorsque vous naviguez avec un clavier, vous pouvez voir sur quel élément vous vous trouvez. Enlever le contour de focus "parce que c'est moche" est une erreur courante et sérieuse.
• Clavier.Le formulaire entier peut être rempli et soumis sans toucher à une souris. Un modal peut être fermé ; un menu peut être échappé.
• Texte alternatif.Une courte description de ce que signifie une image. Cela aide les utilisateurs aveugles et les moteurs de recherche.

L'accessibilité n'est pas une phase séparée et coûteuse. C'est un ensemble d'habitudes : ne jamais se fier uniquement à la couleur pour transmettre un sens, étiqueter les champs au lieu de se fier aux espaces réservés, rédiger des messages d'erreur sur lesquels un humain peut agir. Intégré dès la conception, cela coûte des centimes. Ajouté après le lancement, cela coûte de l'argent réel.

Le texte fait partie du design

Une interface est faite de mots plus que de graphiques.Le titre, l'étiquette du champ, le texte du bouton, le message d'erreur — toutes ces décisions de conception sont exprimées par des mots.

Ce qui nous donne une règle : concevoir sans contenu fini, c'est de la divination. Le designer invente un titre de trois mots ; celui du client en fait douze. Il invente trois avantages ; les réels en sont deux, et ils sont différents. Le maquette s'effondre à l'étape du contenu, et tout le monde est surpris.

Des mots qui fixent les interfaces

• Les boutons décrivent le résultat."Obtenir un devis" est meilleur que "Soumettre". Une personne doit savoir ce qui se passe après le clic.
• Les titres répondent, ils ne taquinent pas."Sites web pour cliniques médicales" fonctionne ; "Nous créons l'avenir" ne fonctionne pas.
• Les erreurs disent quoi faire."Format invalide" est mauvais. "Entrez le numéro de téléphone sous la forme +44…" est bon.
• Les étiquettes battent les suppositions.Si un champ a besoin de quelque chose de spécifique, dites-le avant l'erreur, pas après.
• Moins de mots, même signification.Chaque phrase supplémentaire réduit les chances que celle nécessaire soit lue.

Une pratique fait gagner des semaines : rédigez le texte pour les écrans clés avant que quoi que ce soit ne soit dessiné — même de manière approximative, dans un tableur. Ensuite, le designer travaille avec de vraies longueurs et de vraies significations au lieu de plier la réalité pour s'adapter à une mise en page.

Comment donner des retours utiles, et combien de tours de révisions sont normaux

La cause la plus courante des projets traînants n'est pas "un mauvais designer" — c'est un retour exprimé comme un goût."Ça ne me captive pas", "rendez-le plus moderne", "ma femme ne l'a pas aimé" — vous ne pouvez pas répondre à cela par du travail, seulement par une autre tentative de deviner.

La formule pour un commentaire utile

Parlez du problème, pas de la solution. La structure est : ce que je vois → ce qui m'inquiète → ce que cela risque. Par exemple : "Le premier écran ne dit pas que nous travaillons à l'échelle nationale. Les clients posent des questions à ce sujet dès le premier appel — j'ai peur que certains d'entre eux n'atteignent même pas le formulaire." C'est quelque chose avec lequel un designer peut travailler. "Faites le bouton rouge" est une solution terminée, et ce n'est probablement pas à propos du bouton.

Règles qui accélèrent l'approbation

• Rassemblez les révisions en une seule liste de tout le monde impliqué, au lieu de les faire tomber dans le chat toute la journée.
• Désignez un seul décideur. Si cinq personnes approuvent, le modèle devient une moyenne — et les moyennes ne se vendent pas.
• Regardez-le sur votre propre téléphone, pas seulement sur un grand moniteur. C'est ainsi que vos clients le regardent.
• Ne rouvrez pas les décisions établies. Une structure convenue se rouvre pour de nouveaux faits, pas pour un nouvel état d'esprit.

Combien de rounds est normal

Pratique courante : deux rounds de révisions par étape (structure, concept, maquettes) plus un dernier polissage. Ce n'est pas de l'avarice de studio — cela protège le projet. Des rounds sans fin signifient presque toujours que l'objectif n'est pas convenu, pas les pixels. Si le troisième round consiste à discuter de la même chose, le problème se situe au niveau de l'étape de recherche, et c'est là que vous devriez revenir.

Erreurs coûteuses et courantes

• Concevoir sans contenu.Une maquette construite sur du texte fictif s'effondre lorsque le vrai texte arrive. Toujours.
• Copier un concurrent.Vous copiez une image sans savoir si cela fonctionne pour eux.
• Décoration plutôt que clarté.Animation, parallaxe et curseurs au lieu de répondre à "que vendez-vous".
• De nombreux objectifs sur un seul écran.Cinq boutons également pondérés équivalent à zéro clic.
• Concevoir pour le jury.Un mockup de prix et un mockup de vente sont des genres différents.
• Personne ne possède l'acceptation.Un projet sans propriétaire de décision traîne pendant des mois.

Liste de contrôle : évaluer un design avant qu'il ne passe en développement

Avant que les maquettes ne passent à la construction, exécutez cette liste. Chaque élément est un changement qui coûte des minutes maintenant et des jours plus tard.

Signification

• En 5 secondes, le premier écran vous dit : quelle entreprise c'est, ce qu'elle offre, à qui, et quoi faire ensuite.
• Chaque écran a une action principale, et c'est visuellement la principale.
• Les objections clés sont répondues : prix ou une fourchette de prix, délais, garanties, qui vous êtes.
• Chaque revendication est étayée : études de cas, avis avec des noms, des chiffres que vous pouvez réellement prouver.

Structure

• Les blocs suivent "réponse → détail → preuve → action".
• Navigation : 5 à 7 éléments, étiquettes dans les mots du client, tout ce qui est important en 3 clics.
• Aucune page ne traite de la même chose.

Complétude

• Il existe une version mobile de chaque type de page, pas seulement de bureau.
• Les états sont dessinés : vide, chargement, erreur, succès, long texte, plusieurs éléments.
• Le texte est final, les images sont réelles, pas de Lorem ipsum nulle part.
• Les pages utilitaires existent : 404, merci, échec de paiement si vous en avez besoin.

Système et accessibilité

• Les boutons, champs et cartes proviennent d'un seul ensemble au lieu d'être redessinés par écran.
• L'espacement suit un seul pas ; il y a exactement autant de couleurs que nécessaire.
• Le contraste du texte est suffisant, le focus est visible, le formulaire peut être complété au clavier.
• Les images ont des descriptions alt, les champs ont des étiquettes, les erreurs ont un texte compréhensible.

Préparation à la construction

• Un développeur a examiné les maquettes avant l'approbation et a confirmé qu'elles sont réalisables dans les délais.
• Le comportement est documenté : clics, ouvertures, animations, comportement du formulaire.
• Il est clair ce qui est modifiable dans l'administration et ce qui est codé en dur.
• Quelqu'un est désigné pour accepter le QA de design après la construction.

Si chaque élément est un oui, remettez-le avec confiance. Si plus de trois sont un non, vous n'êtes pas prêt — et la construction ne réparera pas ces trous, elle les cimentera. Vous voulez un avis extérieur sur votre site actuel ou sur les maquettes que quelqu'un a dessinées pour vous ? Contactez-nous — nous le comparerons à cette même liste et vous dirons honnêtement quoi corriger en premier.

FAQ