Il est possible de d\u00e9penser 30 000 dollars pour un site web et de se retrouver avec quelque chose qui, discr\u00e8tement, fait bon march\u00e9. Pas mauvais. Pas cass\u00e9. Juste l\u00e9g\u00e8rement d\u00e9cal\u00e9, de mani\u00e8res que les visiteurs enregistrent inconsciemment et auxquelles ils r\u00e9agissent sans savoir pourquoi. Le signal est faible mais constant : cette marque ne ma\u00eetrise pas tout \u00e0 fait son sujet.<\/p>\n\n\n\n
Apr\u00e8s avoir audit\u00e9 des centaines de sites d’entreprises australiennes chez Defyn, ce sont toujours les m\u00eames petits indices qui reviennent. Aucun n’est spectaculaire. Tous se corrigent. Voici les douze plus fr\u00e9quents, grossi\u00e8rement class\u00e9s selon leur nocivit\u00e9.<\/p>\n\n\n\n
La poign\u00e9e de main devant la ligne d’horizon de la ville. L’\u00e9quipe souriante et diverse autour d’un ordinateur portable. Le high-five devant le tableau blanc. Ces photos crient \u00ab nous n’avons pas investi dans une photographie originale \u00bb. Une seule sur une page d’accueil suffit \u00e0 tirer vers le bas la qualit\u00e9 per\u00e7ue de tout le reste du site.<\/p>\n\n\n\n
Trois polices sur la page d’accueil, quatre sur la page \u00ab \u00e0 propos \u00bb, six sur l’ensemble du site. Le syst\u00e8me n’a jamais \u00e9t\u00e9 verrouill\u00e9, alors chaque section construite par une personne diff\u00e9rente a utilis\u00e9 ce qui semblait juste cette semaine-l\u00e0. L’\u0153il enregistre l’incoh\u00e9rence avant le cerveau. Le site entier para\u00eet moins con\u00e7u.<\/p>\n\n\n\n
En forme de pilule sur une page, carr\u00e9s sur une autre, en d\u00e9grad\u00e9 sur une troisi\u00e8me. Des tailles diff\u00e9rentes, des marges internes diff\u00e9rentes, des \u00e9tats au survol diff\u00e9rents. Un syst\u00e8me de boutons est l’une des plus petites d\u00e9cisions visuelles d’une marque, mais des boutons incoh\u00e9rents disent tout bas au visiteur que personne ne pilote l’apparence de la marque.<\/p>\n\n\n\n
Deux colonnes o\u00f9 le texte commence un pixel plus loin. Trois cartes dont le bord inf\u00e9rieur ne s’aligne pas. Des ic\u00f4nes centr\u00e9es face \u00e0 un texte qui ne l’est pas tout \u00e0 fait. L’alignement \u00ab presque juste \u00bb est plus dommageable qu’un alignement manifestement cass\u00e9, car il se loge dans la vall\u00e9e d\u00e9rangeante de la qualit\u00e9 de conception, o\u00f9 tout est juste un peu de travers.<\/p>\n\n\n\n
Certaines sections ont 80 pixels d’espace vertical, d’autres 60, d’autres 100. Il n’y a aucun rythme. Les bons sites disposent d’une \u00e9chelle d’espacement (4, 8, 16, 24, 32, 48, 64, 96) que respectent toutes les marges. Les sites qui en manquent semblent serr\u00e9s ici et l\u00e2ches l\u00e0, sans que le visiteur puisse dire pourquoi.<\/p>\n\n\n\n
Le style de formulaire par d\u00e9faut de WordPress sur un site par ailleurs soign\u00e9 est un aveu. Des champs bord\u00e9s de la mauvaise couleur, un texte de bouton dans la mauvaise police, des \u00e9tats d’erreur styl\u00e9s par l’auteur de l’extension. Le style des formulaires compte, car c’est l\u00e0 que la marque demande de la confiance. Les formulaires g\u00e9n\u00e9riques ont un air de travail sur mod\u00e8le.<\/p>\n\n\n\n
Ic\u00f4nes au trait dans l’en-t\u00eate, ic\u00f4nes pleines sur la grille de fonctionnalit\u00e9s, ic\u00f4nes dessin\u00e9es \u00e0 la main dans le pied de page. Un jeu d’ic\u00f4nes coh\u00e9rent est l’un des gains de qualit\u00e9 visuelle les plus faciles du web, et son absence l’un des plus courants.<\/p>\n\n\n\n
Du texte de remplissage que personne n’a pris le temps de remplacer. Des titres de section comme \u00ab Titre de la section ici \u00bb. Des balises alt d’image qui affichent \u00ab image.jpg \u00bb. C’est l’\u00e9tape de finition saut\u00e9e quand un projet est livr\u00e9 en retard, et un seul espace r\u00e9serv\u00e9 oubli\u00e9 r\u00e9duit \u00e0 n\u00e9ant beaucoup de travail de conception soign\u00e9.<\/p>\n\n\n\n
Le microcontenu d’un appel \u00e0 l’action fait beaucoup pour la marque. \u00ab Obtenir mon devis \u00bb, \u00ab R\u00e9server un appel strat\u00e9gique \u00bb, \u00ab Voir comment \u00e7a marche \u00bb donnent l’impression que la marque s’adresse au visiteur. \u00ab Envoyer \u00bb et \u00ab Cliquez ici \u00bb sentent 2008.<\/p>\n\n\n\n
Si le pied de page indique \u00a9 2022, le visiteur en conclut que le site n’a pas \u00e9t\u00e9 touch\u00e9 depuis. Trois ans de confiance s’\u00e9vaporent avec une seule date de pied de page. Le correctif tient en une ligne de PHP qui se met \u00e0 jour toute seule, mais il passe entre les mailles de presque tous les audits.<\/p>\n\n\n\n
Les sites con\u00e7us d’abord pour le bureau et jamais vraiment repens\u00e9s pour le mobile ont g\u00e9n\u00e9ralement leurs indices : une image d’en-t\u00eate rogn\u00e9e jusqu’au n\u00e9ant, une navigation en menu hamburger de 30 entr\u00e9es, un corps de texte \u00e0 10 pixels parce que le bureau a fix\u00e9 la taille. Le mobile est l\u00e0 o\u00f9 atterrit r\u00e9ellement la plupart des visiteurs. Il m\u00e9rite sa propre passe de conception, pas une simple r\u00e9duction en CSS.<\/p>\n\n\n\n
Certains constructeurs de pages ont des empreintes visuelles que les designers rep\u00e8rent \u00e0 des kilom\u00e8tres. Des styles pr\u00e9cis de carrousel de t\u00e9moignages, des mises en page pr\u00e9cises de tableau de prix, des s\u00e9parateurs de section pr\u00e9cis. Aucun n’est objectivement mauvais. Mais ils sont reconnaissables, et reconnaissable signifie que l’inconscient du visiteur signale \u00ab c’est construit \u00e0 partir d’un mod\u00e8le \u00bb avant m\u00eame de lire un mot.<\/p>\n\n\n\n
La plupart de ces indices peuvent \u00eatre corrig\u00e9s en une passe de conception cibl\u00e9e de deux \u00e0 trois semaines sans reconstruire le site. L’audit est la partie facile. La discipline d’appliquer un syst\u00e8me de marque de fa\u00e7on coh\u00e9rente sur un site existant, voil\u00e0 le vrai travail. L’\u00e9quipe de design web de Defyn m\u00e8ne r\u00e9guli\u00e8rement ce type de passe de finition, et l’\u00e9cart entre \u00ab fait bon march\u00e9 \u00bb et \u00ab fait haut de gamme \u00bb se r\u00e9sume souvent \u00e0 quelques semaines de travail cibl\u00e9, pas \u00e0 une refonte compl\u00e8te.<\/p>\n\n\n\n