10 erreurs de design web qui font fuir vos clients

Un site web mal conçu ne fait pas que déplaire — il fait fuir activement des clients qui avaient pourtant l’intention de vous contacter. En Suisse romande, on rencontre régulièrement des PME avec un produit ou un service excellent, mais un site qui saboté leur crédibilité à chaque visite.

Voici les dix erreurs de design les plus fréquentes, leurs conséquences concrètes, et ce qu’il faut faire pour les corriger.

Erreur 1 : navigation confuse

Le problème. Un menu avec dix entrées, des intitulés vagues comme “Nos solutions” ou “Espace”, des sous-menus en cascade impossibles à utiliser sur mobile. L’utilisateur ne sait pas où il est ni où aller.

L’impact. Un visiteur perdu quitte le site en moins de dix secondes. Selon Nielsen Norman Group, les utilisateurs passent 80 % de leur temps sur les deux tiers supérieurs d’une page — si la navigation ne les oriente pas immédiatement, ils abandonnent.

La solution. Limiter le menu principal à cinq ou six entrées maximum. Utiliser des intitulés explicites qui correspondent exactement à ce que l’utilisateur cherche : “Services”, “Réalisations”, “Contact”. Tester le site avec quelqu’un qui ne le connaît pas — si cette personne hésite, le menu doit être revu.

Erreur 2 : pas de CTA clair

Le problème. Des pages entières de texte sans aucun appel à l’action visible. Ou pire, un lien “Contactez-nous” discret en bas de page, noyé dans le footer.

L’impact. Le visiteur, même intéressé, ne sait pas quelle action effectuer. Il repart sans avoir pris contact. Chaque page sans CTA est une occasion manquée.

La solution. Chaque page doit contenir au moins un bouton d’action visible, au-dessus de la ligne de flottaison. Notre guide sur les CTA et la conversion détaille comment rédiger et placer ces appels à l’action efficacement. Le texte du bouton doit être précis : “Demander un devis gratuit”, “Nous appeler”, “Voir nos réalisations”. La couleur du bouton doit trancher avec le reste de la page.

Erreur 3 : texte trop petit

Le problème. Des corps de texte en 12 ou 13 pixels, des interlignes serrés, des paragraphes compacts sans espace de respiration. Un site qui ressemble à un document Word de 2008.

L’impact. La lisibilité chute, la fatigue oculaire augmente, le visiteur décroche. Sur mobile, c’est encore plus problématique : le texte devient illisible sans zoom, et Google le sanctionne dans son évaluation de l’ergonomie mobile.

La solution. Taille de corps minimum de 16 pixels pour le texte courant. Interligne entre 1,5 et 1,7. Largeur de colonne limitée à 65-75 caractères pour les blocs de texte. Ces trois paramètres suffisent à transformer radicalement la lisibilité d’un site.

Erreur 4 : images non optimisées

Le problème. Des photos de 4 Mo chargées telles quelles depuis l’appareil photo, des images sans dimensions définies qui provoquent des décalages de mise en page pendant le chargement.

L’impact. Le site devient lent. Un délai de chargement supérieur à 3 secondes fait fuir 53 % des visiteurs mobiles selon Google. Le score Lighthouse s’effondre, ce qui nuit directement au référencement.

La solution. Convertir toutes les images au format WebP. Notre guide sur l’optimisation des images pour un site web couvre toutes les étapes en détail. Définir les attributs width et height sur chaque balise <img> pour éviter le Cumulative Layout Shift. Utiliser le lazy loading pour les images hors écran. Une image de hero n’a pas besoin de dépasser 150-200 ko.

Erreur 5 : pas de hiérarchie visuelle

Le problème. Tous les titres ont la même taille. Tous les blocs ont la même importance visuelle. Rien ne guide l’oeil d’un point à l’autre de la page. Le visiteur ne sait pas par où commencer.

L’impact. L’information est présente, mais elle n’est pas communiquée. L’utilisateur doit faire l’effort de trier ce qui est important — et il ne le fera pas. Le taux de rebond grimpe.

La solution. Établir une hiérarchie typographique claire : H1 pour le titre principal, H2 pour les sections, H3 pour les sous-sections. Jouer sur les tailles, les graisses et les espacements pour créer un flux visuel naturel de haut en bas. L’objectif est qu’un visiteur comprenne l’essentiel de la page en cinq secondes, sans lire un seul mot en entier.

Erreur 6 : couleurs incohérentes

Le problème. Quatre teintes de bleu différentes selon les pages. Des boutons tantôt verts, tantôt orange. Des titres parfois noirs, parfois gris foncé. Une palette construite au fil du temps, sans règle.

L’impact. L’incohérence visuelle érode la confiance. Un site dont la charte n’est pas respectée donne l’impression d’un travail bâclé — et cette impression se transfère inconsciemment à l’entreprise elle-même.

La solution. Définir une palette de trois couleurs maximum : une couleur principale, une couleur d’accentuation pour les CTA, et une couleur de fond neutre. Documenter ces valeurs hexadécimales et les appliquer systématiquement sur toutes les pages. La cohérence prime sur la variété.

Erreur 7 : trop d’informations sur une seule page

Le problème. Une page d’accueil qui liste tous les services, toute l’histoire de l’entreprise, tous les témoignages, toutes les certifications, avec trois carrousels et deux vidéos. Le visiteur est submergé avant d’avoir eu le temps de comprendre ce que fait l’entreprise.

L’impact. La surcharge cognitive pousse à l’abandon. Paradoxalement, plus une page contient d’informations, moins le message passe. C’est le paradoxe du choix appliqué au web.

La solution. Appliquer le principe d’une page, une intention. La page d’accueil doit répondre à une seule question : “Pourquoi vous contacter plutôt qu’un concurrent ?” Tout le reste — détail des services, portfolio, équipe — appartient à des pages dédiées accessibles depuis la navigation.

Erreur 8 : site non responsive

Le problème. Un site conçu uniquement pour ordinateur, avec des colonnes qui débordent sur mobile, des boutons trop petits pour être touchés avec un doigt, des textes qui sortent de l’écran.

L’impact. En Suisse, 65 % du trafic web provient du mobile (Statcounter 2025). Un site non responsive pénalise les deux tiers de vos visiteurs. Google utilise le Mobile-First Indexing depuis 2023 : c’est la version mobile qui détermine votre classement dans les résultats de recherche. Les chiffres sont encore plus marqués selon notre analyse mobile-first et les 83 % de trafic smartphone en 2026.

La solution. Concevoir le site en “mobile-first” : partir de la version mobile et étendre vers le bureau, et non l’inverse. Tester systématiquement sur iPhone et Android avant chaque mise en ligne. Les zones tactiles (boutons, liens) doivent faire au minimum 44 x 44 pixels.

Erreur 9 : temps de chargement lent

Le problème. Un score PageSpeed inférieur à 50. Des scripts tiers (widgets de réseaux sociaux, popups de chat, trackers marketing) qui bloquent le rendu de la page. Un hébergement mutualisé saturé.

L’impact. Chaque seconde de délai supplémentaire réduit le taux de conversion de 7 % selon Akamai. Un site qui met 5 secondes à charger ne génère pas seulement de la frustration — il génère activement moins de revenus, à volume de trafic égal.

La solution. Mesurer avec PageSpeed Insights et identifier les ressources bloquantes. Charger les scripts tiers de manière asynchrone ou différée. Préférer un hébergement dédié ou des générateurs de sites statiques (comme Astro) qui servent des fichiers HTML pré-construits, sans temps de traitement serveur.

Erreur 10 : formulaires trop longs

Le problème. Un formulaire de contact avec douze champs obligatoires : nom, prénom, entreprise, secteur, adresse, téléphone fixe, téléphone mobile, budget estimé, délai souhaité, message. Parfois accompagné d’un CAPTCHA difficile à résoudre.

L’impact. Chaque champ supplémentaire fait baisser le taux de complétion. Une étude Formstack montre qu’un formulaire de trois champs convertit deux fois mieux qu’un formulaire de cinq champs. Au-delà de sept champs, la majorité des utilisateurs abandonnent.

La solution. Réduire le formulaire de contact au strict minimum : nom, email ou téléphone, message. Trois champs suffisent dans la grande majorité des cas. Les informations complémentaires se collectent lors de l’échange qui suit. Un bouton WhatsApp en complément permet aux visiteurs qui préfèrent la messagerie instantanée de vous contacter en un clic.

Récapitulatif

Erreur	Impact principal	Priorité de correction
Navigation confuse	Taux de rebond élevé	Haute
Pas de CTA	Zéro conversion	Haute
Texte trop petit	Lisibilité dégradée	Haute
Images non optimisées	Site lent, SEO pénalisé	Haute
Pas de hiérarchie visuelle	Message non capté	Moyenne
Couleurs incohérentes	Perte de confiance	Moyenne
Trop d’informations	Abandon par surcharge	Moyenne
Non responsive	-65 % de trafic perdu	Haute
Chargement lent	-7 % de conversion/seconde	Haute
Formulaires trop longs	Abandon avant contact	Moyenne

Ce que Tacelo fait

Chez Tacelo, chaque site est conçu en partant de ces dix points comme liste de contrôle obligatoire. Concrètement :

• La navigation est limitée à cinq entrées maximum, testée sur mobile avant la mise en ligne.
• Chaque page contient au moins un CTA primaire visible sans défilement.
• La typographie est calibrée à 16-18 pixels pour le corps, avec une hiérarchie H1/H2/H3 stricte.
• Toutes les images sont converties en WebP et compressées automatiquement à la build.
• La palette de couleurs est définie en amont et appliquée via des variables CSS sur l’ensemble du site.
• Les sites sont construits avec Astro (génération statique), ce qui garantit un score Lighthouse supérieur à 95 sans effort supplémentaire.
• Les formulaires sont réduits à trois champs, avec une alternative WhatsApp sur chaque page de contact.

Le résultat est un site qui convertit — pas un site qui impressionne son propriétaire sans générer de demandes.

Questions fréquentes

Comment savoir si mon site commet ces erreurs ?

Le moyen le plus rapide est de tester votre site avec PageSpeed Insights (pour la performance et le mobile), puis de le parcourir vous-même sur votre smartphone en vous demandant ce que vous feriez si vous étiez un client qui ne vous connaît pas. Si vous peinez à trouver un numéro de téléphone ou un formulaire en moins de dix secondes, le problème est structurel. Tacelo propose également un audit gratuit pour les PME en Suisse romande.

Faut-il refaire entièrement son site pour corriger ces erreurs ?

Pas toujours. Certaines erreurs — un CTA manquant, un formulaire trop long, une typographie trop petite — se corrigent en quelques heures sur un site existant. D’autres, comme un site non responsive ou un temps de chargement structurellement lent dû à une technologie obsolète, nécessitent souvent une refonte complète. Un audit préalable permet de distinguer ce qui peut être patchié de ce qui doit être reconstruit.

Ces erreurs affectent-elles le référencement Google ?

Oui, directement. Google évalue la performance (Core Web Vitals), l’ergonomie mobile et la lisibilité du contenu dans son algorithme de classement. Un site lent, non responsive ou avec une hiérarchie de titres incohérente sera systématiquement déclassé par rapport à un concurrent dont le site est bien conçu. Corriger ces erreurs de design améliore donc à la fois l’expérience utilisateur et le positionnement dans les résultats de recherche.