Les péchés capitaux du Webdesign : tout mettre sur la page d’accueil

Tout webdesigner expérimenté a déjà vécu cette transformation douloureuse : au premier jour il élabore une délicate maquette aérée, taillée comme une pièce d’orfèvrerie. Et puis au fil du temps, elle s’enrichit et s’empâte, jusqu’à devenir ce capharnaüm exubérant au lancement du site. A force d’empiler les couleurs, les effets, les typos et les logos, le client obtiendra cette apparence de richesse qui lui fait plaisir, mais aura perdu toute la pertinence d’un design équilibré et efficace.

On peut blâmer le client, mais à sa décharge, il n’est pas un professionnel. Le designer lui-même est souvent son propre ennemi. Il suffit d’un site un peu riche, aux objectifs un peu flous pour créer la tentation… Imaginez que votre maquette de site comporte un en-tête aux bords arrondis pour le logo et le slogan, un fond bleu dégradé à gauche pour la nav, un encart bleu foncé pour le texte d’accueil, un second encart pour la liste des produits de l’entreprise et qu’il reste à caser les actus, l’édito du président et les rapports financiers. Sans compter les logos des partenaires, le formulaire d’inscription à la newsletter, les infos de contact et la recherche. Nul doute que vous aurez besoin de simplifier tout ça.

Suite à un nouveau brief avec le client pour faire un peu de tri, il s’avère que tous ces éléments sont d’une importance cruciale pour capter le visiteur :

– le logo et le slogan pour asseoir la marque et son activité (en général un texte vraiment différenciant autour de « la qualité au service du client ») ;

– la nav’ pour visualiser en un clin d’oeil le contenu du site (bien vu monsieur le DAF) ;

– le texte d’accueil d’une vingtaine de lignes pour expliciter l’activité de l’entreprise en détails au cas où le visiteur n’aurait pas compris avec le slogan ;

la liste des produits, qui rentre dans le détail de ce qui n’a pas été abordé en détail dans le texte précédent ;

– les actualités, à illustrer d’une animation pour montrer au visiteur que le site a été modifié depuis moins d’un mois ;

– l’édito du Président, qui aide le visiteur à se sentir chez lui, parce que, s’il vous plaît, ce n’est pas la femme de ménage qui l’accueille mais le Président en personne ! ;

– les rapports financiers, pour que ces grands incompétents d’actionnaires visualisent l’importance qu’on leur donne sans avoir à cliquer deux fois ;

les logos des partenaires, parce que c’est quand même mieux que du texte, même s’ils ont que des logos moches en version pixellisée 4 couleurs ;

l’inscription à la newsletter, avec neuf champs de formulaire demandant des détails personnels sur le visiteur pour générer une base qualifiée à mort ;

les infos de contact(s), typiquement quatre lignes de coordonnées avec le standard et plein de numéros de téléphone alternatifs, fax, mobile, telex, adresses diverses et horaires d’ouverture ;

– le module de recherche, qui doit proposer plein d’options pour affiner les résultats (même s’il n’y a que 14 documents dans la base).

Le designer docile, ou bien payé, gobera cette liste de priorités sans broncher. Le client est roi, il connaît son affaire ; un bon webdesigner est avant tout un joueur de Tetris(tm) talentueux. Il saura faire rentrer tous ces éléments dans une page de 800×600 et donner à chacun l’importance qu’il mérite. Le problème serait d’ordre purement graphique. C’est seulement lorsque Photoshop arrivera à court de mémoire devant le 219e calque à positionner que le professionnel en question se maudira. Et sera contraint de construire ce que le client attend : une insulte au bon goût, à l’ergonomie et à l’efficacité. Il remettra alors en question ses qualités de graphiste, sans se douter que le problème est ailleurs…

Trancher dans le lard

Parfois aussi, on ne se rend pas compte de ce mouvement. Surtout en interne. Un site qui tourne s’enrichit d’une nouvelle rubrique, par-ci par-là. Puis on rajoute un encadré. Et un second slogan plus discret. Et des modules divers, chacun doté d’une couleur différente. Pour se retrouver au même degré d’incohérence au bout de quelques itérations.

Ce glissement, conscient ou non, est généralement le symptôme d’un manque de structuration de l’information. C’est en amont de la réalisation graphique que ce travail doit se faire : le webdesigner doit aussi être un architecte de l’information. « Ce qui se conçoit bien s’énonce clairement« , tel pourrait être l’adage d’un bon webdesign. En d’autres termes veillez à définir un petit nombre d’objectifs clairs pour une page d’accueil et à vous y référer avant tout ajout d’information… quitte à les réévaluer à un moment.

Rappelons qu’un visiteur n’accorde que quelques secondes (moins de dix je crois) à déchiffrer une page d’accueil. Si le propos n’est pas clair et les informations éparpillées, il sera déjà parti ailleurs. En publicité, on parle de « Unique selling proposition » pour justifier que le public ne retiendra qu’une seule et unique idée, et qu’il faut donc ciseler le message transmis. Même si les objectifs du site Web sont nombreux (faire connaître, valoriser la marque, flatter l’égo du PDG, générer des ventes en ligne et hors ligne…), il faut trancher dans le vif et les condenser en quelques informations clés.

Il revient au webdesigner d’alerter le client lorsque son message est inadapté au support Web. Mais aussi de suggérer, en trois lignes, un condensé du texte d’accueil et de la liste de produits. Et surtout d’avoir la capacité de convaincre le client que l’édito du Président est inutile, pompeux voire rebutant pour le visiteur. Et supprimer ces logos de partenaires horribles pour des liens en texte simple. Et réduire le nombre de champs de formulaire sur l’accueil. Ces informations seront à leur place sur une seconde page, si tant est qu’elles soient réellement nécessaires.

Quand tout est en gras, rien ne ressort

Le design graphique prend alors toute sa dimension une fois éliminées toutes les redondances. Mais si rien n’a été hiérarchisé, la tentation reste entière. Ne créez pas un nouveau style pour chaque DIV ! N’utilisez pas toute la palette de couleurs pour créer un contraste entre chacun des blocs (« je vais mettre la nav en rose fluo pour qu’elle ressorte« ). Il n’y a rien de pire pour l’équilibre d’une page que de vouloir tout mettre au premier plan. De donner l’impression que chaque bloc crie plus fort que les autres « regardez-moi !« . D’ailleurs, quand tout un texte est en gras, plus rien ne ressort.

Le visiteur doit être guidé, pas submergé. Il faut veiller à organiser logiquement les éléments pour guider le visiteur d’un point à l’autre de la page. Et mettre en valeur une ou deux zones-clés sur lesquelles son regard va s’arrêter. Il aura tout le temps ensuite de papillonner ailleurs, mais l’essentiel est de capturer son attention sur l’objet du site, généralement via une bannière d’identité bien structurée qui laisse glisser le regard jusqu’à une zone centrale (moteur de recherche interne, actualité chaude…). Pourquoi faire ressortir la nav ? Un visiteur la cherchera logiquement sur un bord de l’écran, comme partout ailleurs. Pourquoi créer un style tape-à-l’oeil pour chaque actu ? Il suffit de les positionner logiquement et le visiteur les retrouvera. Pourquoi insister sur le moteur de recherche ? Un visiteur qui cherche de l’info trouvera bien cette zone de saisie plus claire sans qu’il soit utile de lui créer un style spécifique. De manière générale, n’oubliez pas que le visiteur est actif et qu’il s’attend à trouver des informations à certains endroits (le bouton contact(s) en fin de nav’ par exemple). Placez-les à l’endroit habituel, sans en rajouter. En résumé : avant de créer un style, demandez-vous toujours si un élément ne peut pas s’intégrer simplement dans un espace existant. La cohérence du site en ressortira grandie.

Simplifier, raccourcir, synthétiser : c’est un effort de tous les instants. Aussi bien dans la quantité d’information que dans son organisation au sein d’une page, il faut convaincre vos clients que « moins, c’est mieux« . Il faut se défaire de l’envie d’accumuler, qui est un réconfort trompeur. Au fil du temps, ma tendance naturelle à l’égard des nouvelles fonctionnalités s’est renversée. J’oppose une résistance de principe à tout enrichissement, à tout ajout qui risquerait de brouiller le message pour le visiteur. A l’inverse, toute suppression, tout allègement sont les bienvenus. . Jusqu’au retour à la page vierge?

Pour des exemples frappants, consultez notamment le Redesign du site Carmax.com ou de la Maison Blanche proposés par le gourou du Design Andy Rutledge.

Et tant que vous en êtes à convaincre le client, je vous suggère un autre des mes articles sur l’importance de consacrer un budget au référencement et pas seulement au design.

Outil de référencement professionnel - essai gratuit Ce contenu a été publié dans Webdesign, avec comme mot(s)-clé(s) , , , . Vous pouvez le mettre en favoris avec ce permalien.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *