Cinq secondes. C’est le temps qu’un visiteur accorde à votre site avant de décider s’il reste ou s’il ferme l’onglet. Un bouton d’inscription planqué dans un sous-menu, une page d’accueil surchargée, un formulaire qui demande votre groupe sanguin - et c’est fini. Derrière ces irritations se cache un défaut de design d’expérience utilisateur. La bonne nouvelle : les principes qui transforment un site pénible en site fluide sont peu nombreux, et ce guide les passe en revue.
UX et UI : deux disciplines, un même objectif#
On mélange souvent UX et UI, alors posons les bases.
L’UX (User Experience) s’intéresse au parcours global de l’utilisateur. Est-ce que la personne trouve ce qu’elle cherche ? Le processus d’achat est-il fluide ? L’inscription prend-elle deux minutes ou vingt ? L’UX, c’est l’architecture invisible qui guide le visiteur du point A au point B sans friction.
L’UI (User Interface) traite de tout ce qui se voit et se touche : palette de couleurs, choix des polices, taille des boutons, marges entre les blocs. Quand vous dites “ce site est beau” ou “ce site fait amateur”, vous parlez d’UI.
Pour bien comprendre la différence, imaginez un restaurant. L’UX, c’est le service : la rapidité de l’accueil, la lisibilité du menu, le temps entre la commande et l’assiette. L’UI, c’est le cadre : la déco, l’éclairage, la présentation des plats. Un restaurant superbe avec un service calamiteux ne fidélise personne. Et inversement.
Les deux doivent travailler ensemble. Un bouton parfaitement designé mais placé au mauvais endroit reste inutile.
Les cinq lois UX que tout concepteur devrait connaître#
Pas besoin de lire 40 livres pour comprendre les mécanismes fondamentaux. Ces cinq principes couvrent 80% des situations.
1. La loi de Hick : plus vous proposez de choix, plus la décision prend du temps. Un menu de navigation avec 15 entrées paralyse l’utilisateur. Limitez les options principales à 5 ou 7. Les restaurants qui proposent 200 plats vous stressent - ceux avec une carte courte vous mettent en confiance.
2. La loi de Fitts : plus une cible est grande et proche, plus elle est facile à atteindre. Vos boutons d’action principaux (acheter, s’inscrire, contacter) doivent être grands, visibles et placés dans des zones accessibles. Sur mobile, la zone du pouce en bas de l’écran est la plus confortable.
3. La loi de proximité (Gestalt) : les éléments proches sont perçus comme liés. Si votre légende est plus proche de l’image du dessous que de celle du dessus, le cerveau fait la mauvaise association. L’espacement n’est pas décoratif - c’est de la communication.
4. La loi de Jakob : les utilisateurs passent la majorité de leur temps sur d’autres sites que le vôtre. Ils s’attendent à retrouver les mêmes conventions. Le logo en haut à gauche renvoie vers l’accueil. Le panier est en haut à droite. Le pied de page contient les mentions légales. Soyez créatif sur le contenu, pas sur la structure.
5. Le principe de moindre surprise : chaque élément doit se comporter comme l’utilisateur s’y attend. Un lien souligné doit être cliquable. Un bouton qui ressemble à un bouton doit déclencher une action. Si votre formulaire affiche un message de succès alors que l’envoi a échoué, vous trahissez la confiance de l’utilisateur.
Typographie et couleurs : les fondations visuelles#
On dit souvent que la typographie représente 90% du design web. C’est un peu exagéré, mais pas tant que ça - le web reste du texte, avant tout.
Quelques repères concrets sur les polices : deux maximum, une pour les titres, une pour le corps. Au-delà, votre page donne l’impression d’une lettre de rançon découpée dans un journal. Pour la taille, ne descendez jamais sous 16px en corps de texte - oui, même si ça vous paraît gros. Vos lecteurs sur mobile vous remercieront. Côté interligne, visez entre 1.4 et 1.6. Un texte tassé fatigue les yeux au bout de trois paragraphes. Et gardez vos lignes entre 50 et 75 caractères de large : au-delà, l’œil se perd en revenant à la ligne suivante.
Les couleurs :
| Élément | Recommandation |
|---|---|
| Palette principale | 2-3 couleurs maximum |
| Couleur d’action (CTA) | Une seule, contrastée, utilisée uniquement pour les actions |
| Texte | Noir ou gris très foncé sur fond clair (ratio de contraste minimum 4.5:1) |
| Fond | Blanc ou très clair pour le contenu principal |
| Couleur secondaire | Pour les accents, les liens, les éléments de navigation |
Un outil gratuit et redoutablement utile : Coolors.co génère des palettes harmonieuses en un clic. Et pour vérifier vos contrastes, WebAIM Contrast Checker vous dit si votre combinaison texte/fond est accessible.
L’accessibilité n’est pas un bonus, c’est une obligation - morale et bientôt légale avec le renforcement des directives européennes. Un site inaccessible aux daltoniens ou aux malvoyants exclut 8% de la population masculine et une part significative de vos visiteurs potentiels.
Les erreurs de design les plus fréquentes#
Vous les voyez partout, y compris sur des sites de grandes marques.
Le carrousel en page d’accueil. Les études montrent que moins de 1% des utilisateurs cliquent au-delà de la première slide. Un carrousel, c’est souvent la preuve que personne n’a réussi à se mettre d’accord sur le message principal. Choisissez un message clair et affichez-le en grand.
Les pop-ups agressives. Une pop-up qui surgit trois secondes après l’arrivée sur le site, avant même que le visiteur ait lu une ligne, c’est l’équivalent numérique d’un vendeur qui vous saute dessus à l’entrée du magasin. Attendez au minimum 30 secondes ou un scroll de 50% avant de proposer votre newsletter.
La surcharge visuelle. Chaque élément de votre page se bat pour l’attention. Si tout est mis en avant, rien ne l’est. Le blanc (l’espace vide) n’est pas du gaspillage - c’est ce qui permet au regard de respirer et à l’information de se hiérarchiser.
Le texte centré en blocs. Quelques lignes centrées pour un titre ou un accroche, très bien. Un paragraphe entier centré, c’est une torture visuelle. Le texte courant se lit aligné à gauche, point.
Les outils pour démarrer en webdesign#
Vous n’avez pas besoin de maîtriser Photoshop pour créer des maquettes web fonctionnelles.
Figma (gratuit pour usage individuel) : l’outil standard du secteur. Conception d’interfaces, prototypage interactif, collaboration en temps réel. Si vous ne devez apprendre qu’un seul outil, c’est celui-là. La communauté partage des milliers de templates et de systèmes de design réutilisables.
Canva : moins puissant que Figma pour les maquettes web, mais parfait pour créer rapidement des visuels, des présentations ou des maquettes simples. L’interface est très intuitive.
Penpot : l’alternative open source à Figma, hébergeable sur vos propres serveurs. Moins mature, mais en progression rapide et totalement gratuit.
Pour aller plus loin, combinez ces compétences visuelles avec des bases de développement web - savoir coder ce que vous dessinez change radicalement votre valeur sur le marché. Et si vous construisez un site sans connaître le code, le comparatif des plateformes de formation peut vous orienter vers les bonnes ressources.
Par où commencer concrètement#
Le webdesign s’apprend en faisant, pas en lisant. Voici un exercice concret : choisissez un site que vous trouvez mal conçu et refaites la page d’accueil dans Figma. Identifiez les problèmes (navigation confuse, hiérarchie absente, contrastes faibles), puis proposez votre version améliorée en appliquant les principes de cet article.
Refaites cet exercice trois fois avec des sites différents, et vous aurez déjà une meilleure compréhension de l’UX/UI que la majorité des personnes qui se disent “webdesigner” après avoir regardé deux tutoriels YouTube. Le design n’est pas une question de talent inné - c’est une compétence qui se construit par l’observation, la pratique et le souci permanent de la personne qui va utiliser ce que vous créez.
