site web design cover

Je fais rarement preuve d’une grande imagination au moment de trouver des sujets d’articles sur lesquels écrire pour ce blog. Je dois vous avouer qu’ils me viennent tous de situation 100% vécues et 100% cocasses. Cet article qui parle de design et de site web par exemple me vient d’un projet récent pour lequel un client, très sympathique au demeurant, m’a expliqué qu’il avait besoin de refaire son site pour diverses raisons mais qu’il se chargerait lui-même du design.

J’eus donc le plaisir de recevoir un document Word de 5 pages (nombres de pages du site) qu’il fallait répliquer à l’identique version html. Je vous passerai les détails (une police d’écriture par page, aucun respect de la charte de l’entreprise, pas de page contact…) mais il se trouve que quelques ajustements s’avéraient nécessaires. Ce qui est bien compréhensible — et heureux — sans quoi un certain nombre d’amis et moi-même devrions trouver un autre job. Car en terme de site web, le design (et quand je parle de design de site, je parle autant de sa conception graphique que de son développement, celui faisant à mon sens intégralement partie du design) est réellement un métier à part.

I – Le design de votre site web doit lui permettre d’atteindre des objectifs

Vous investissez de l’argent dans un site web car vous attendez quelque chose de ce site. Il a des objectifs. Que ce soit de vendre des produits ou des services en ligne, de vous faire connaître et de générer des contacts ou même simplement de partager des photos de vacances avec Tatie pour qu’elle voie que la petite a bien grandi. En outre, vous pouvez vérifier dans chaque cas que ces objectifs sont atteints ou pas. Avez-vous eu des commandes en ligne ? Avez-vous plus de demandes de contact par mail ou de visites sur votre site ? Tatie la trouve-t-elle mignonne ? Si oui, alors c’est que (entre autres) votre site est bien conçu. Sinon…

 

Quels que soient les objectifs, un site bien conçu, et donc capable d’atteindre ces objectifs, doit répondre à certains critères:

A – Votre cible peut le trouver facilement

On parle ici de référencement ou de SEO (Search Engine Optimization – Optimisation pour les moteurs de recherche) qui doit permettre à un maximum d’utilisateurs intéressés par vos produits — ou susceptibles de l’être — de trouver votre site. Et accessoirement, le vôtre plutôt que celui de vos concurrents…

B – Votre site est accessible

Un fois que votre site a été trouvé, il doit pouvoir être consulté. Ce qu’on appelle « accessibilité » a en réalité deux aspects.
En premier lieu un aspect humain: un utilisateur daltonien peut-il utiliser votre site ? Le texte est-il lisible même pour des lecteurs à la vue un peu fatiguée ?
En second lieu, un aspect technique: déjà en 2015, la navigation Web a lieu à plus de 50% sur des terminaux mobiles. Autrement dit, votre site doit respecter un certain (grand) nombre de contraintes pour que votre site fonctionne aussi bien sur mobile que sur ordinateur.

C – Il rassure et inspire confiance

L’utilisateur a trouvé votre site, a réussi à l’afficher quel que soit son terminal et voit donc la première page s’afficher. Cette page doit inspirer confiance et donner envie à l’utilisateur de poursuivre sa navigation. En l’espace de quelques secondes, il compare inconsciemment le contenu de cette première page avec toutes les pages Internet qu’il a eu l’occasion de consulter… Il attend certains éléments à certains endroits et ne s’attend pas à en trouver d’autres ailleurs. De la même manière qu’un arnaqueur utilise certains codes graphiques pour se faire passer pour votre banque et vous réclamer votre numéro de carte bleu par mail, le design de site Web exige le respect de certaines conventions pour inspirer confiance et donc donner envie de continuer la navigation.

D – Il est cohérent avec ce qu’il cherchait

S’il cherchait le site de votre société, il doit immédiatement comprendre qu’il est au bon endroit. Il doit retrouver votre logo, votre couleurs, votre imagerie… Imaginez que vous cherchiez un renseignement sur l’ouverture d’un compte dans une banque qu’on appellera BMP Parihaut et que le site soit majoritairement rouge… Ne penseriez-vous pas vous être au mauvais endroit ?

 

site web design illu 5

Il y a quelque chose qui me gêne, mais quoi ?

E – Il est facile à prendre en main

L’utilisateur est maintenant décidé à continuer à naviguer sur votre site, mais il n’a pas prévu de devoir passer du temps à comprendre comment il fonctionne. Il s’attend au contraire à retrouver certains comportements habituels: un menu cliquable pour accéder à différentes rubriques, des boutons qu’on comprend visuellement être des boutons… S’il y a une vidéo, il connait certains symboles qui veulent dire « Play », « Stop », « Volume »…. Ne pas utiliser ces standards doit être un choix au risque mesuré. Et pour que ce soit un choix, il faut en être conscient.

 

site web design illu 2

Laquelle de ces vidéos allez vous arriver à lancer sans réfléchir ?

F – Et enfin et surtout: il permet de réaliser l’action qu’on cherche à accomplir

Si l’utilisateur a voulu trouver cette page, c’est qu’il avait une intention derrière la tête: obtenir une information, demander un renseignement, visionner un contenu, commander un produit, voir les photos de votre fille en train de s’étaler du chocolat sur le nez… Quel qu’il soit, votre site doit être organisé de manière à ce qu’il parvienne à faire ce qu’il est venu chercher, sans avoir justement à chercher trop longtemps…
Alors bien sûr, tout cela semble tomber sous le sens… Sauf qu’il est difficile de s’imaginer le nombre de compétences requises pour y parvenir. Je vais essayer de vous en dresser la liste non-exhaustive (n’hésitez pas à la compéter en commentaires, plus on est de fous, plus on rit et quand il y en a pour un, il y en a pour deux).

 

II – Rapporté au site Web, le design est l’art de combiner geek attitude, psychologie et gribouillis

Je vois déjà les designers graphiques et autres artistes digitaux me lancer leurs stylets dans les yeux et leurs tablettes tactiles dans les genoux à la lecture de « gribouillis ». C’est bien sûr pour l’humour. Pour être donc bien plus précis et rigoureux, on peut simplifier en disant que la conception d’un site Web, de l’idée (ou plutôt du besoin) de sa création jusqu’à sa mise en ligne va faire intervenir des UX designers (designers d’expérience), UI designers (designers d’interfaces, même si c’est un peu réducteur) et des développeurs en tout genre. Mais la tendance est à la multi-compétences, et il est de moins en moins rare de trouver des designers / développeurs, ou des développeurs excellant en design d’expérience. Je préfère donc lister les compétences, ce sera plus simple.

 

1. Des compétences techniques indispensables…

Bien sûr, un site Web est composé de lignes de code. Comme nous sommes nous même faits de molécules d’oxygène, de carbone et d’hydrogène (pour l’azote, le calcium etc, je vous laisse voir avec des chimistes), un site Web est fait de lignes de codes. Je mets « code » au pluriel car plusieurs langages (html, css, php, ajax…) coexistent souvent, chacun apportant certaines fonctionnalités. Et maîtriser ces languages, c’est être capable de déchiffrer la matrice, apercevoir la jolie fille sur la terrasse d’un café au lieu de lire <img src=“joliefillealaterrasse.jpg“> et surtout être capable de donner certains atouts à votre site.

 

site web design illu 4

Vous l’aviez vue en lisant <img src=”joliefilleetsoncafe.jpg> ?

a – Le rendre SEO friendly = aider son référencement naturel

Google ne consulte votre site qu’en analysant ses lignes de code, c’est donc avec un code propre, optimisé, que votre site sera bien référencé par celui-ci.
Par exemple, spécifier certaines balises aide Google à comprendre le contenu du site et donc l’aider à mieux le référencer. En effet, le but de Google (c’est aussi un site, il a donc un objectif) est de **fournir des réponses aux requêtes qu’on lui fournit**: mieux il comprend les sites, mieux il peut les présenter à ses utilisateurs.

b – Le rendre accessible techniquement

Vous pensiez peut-être que l’adaptation de votre image pleine page sur tous les terminaux se faisait grâce à Dieu ? Il semble qu’il ait autre chose à faire, puisque pas du tout… C’est bien un développeur talentueux qui code que l’image doit faire 100% de la largeur de la zone attribuée (par exemple). Et c’est grâce à lui (on le remerciera jamais assez), que votre site est joli, pardon, accessible, via Android, iOS, Internet Explorer, Nokia 3310 (faut pas pousser mémé dans un vieux singe)…

c – Le rendre accessible à tous

Imaginez deux secondes que vous vendiez des pianos 100% fait main, d’une qualité rarissime (si c’est le cas, indiquez le en commentaire, je vous fais un lien vers votre site, ça aidera à votre référencement). Il est fort à parier que Gilbert Montagné ou Ray Charles puissent être intéressés par l’un de vos instruments… Vous voyez immédiatement le problème: comment vont-ils faire s’ils n’ont pas de réseau ? Et bien attendre d’être à l’hôtel qui, vu leur notoriété, aura forcément le Wifi. Ils pourront alors tranquillement consulter votre site car le développeur talentueux (encore lui) en charge de votre site aura indiqué les bonnes balises dans le code, permettant à un utilisateur non-voyant de naviguer sur votre site grâce à un guidage audio. C’est tout de même bien fait.

2. Ce serait pas mal de connaître deux-trois trucs en design graphique

Alors ce que je vais dire là est un peu simplifié puisque ce que je vais appeler design graphique est en réalité le fruit d’une réflexion bien plus poussée en amont, qui fait intervenir les fameux UX et UI designers mais la concrétisation de tout ce travail se verra littéralement sur vos pages sous forme de design graphique. Vous me pardonnerez donc cette simplification.

 

a – Hiérarchiser l’information

L’organisation visuelle de vos pages va en effet permettre de classer l’information en fonction de son utilité et son importance. Répartie ensuite dans certaines zones, l’utilisateur saura alors où aller pour naviguer, en utilisant le menu, par exemple.
Comme vous utilisez un titre en gras, un sous-titre en italique et un texte en corps 12 dans un document pour donner des points de repères à vos lecteurs, le design graphique permettra d’**optimiser l’information donnée par votre site** et expliquer visuellement que « Payer » est un bouton qui permettra d’acheter votre produit quand on cliquera dessus.

b – Respecter la charte graphique de votre société

En théorie, votre société a une charte graphique qui permet d’identifier vos produits, vos outils de communication, votre stand à la Foire aux Vins de Nuits-Saint-Georges. Outre le fait de mettre votre logo en haut à gauche comme recommandé par votre agence préférée, le designer va aussi utiliser le style graphique général de votre charte pour que l’utilisateur ne soit pas perdu et sache qu’il est bien chez vous. C’est mieux.

c – Utiliser les couleurs à bon escient

En effet, même si votre couleur favorite est le rose, c’est peut-être assez inadéquat si cherchez à véhiculer une valeur de virilité. Sans vouloir tomber dans le débat de genres, certains clichés ont encore la vie dure dans l’inconscient collectif, et utiliser le rose pour parler de virilité n’est peut-être pas idéal. De la même manière, un message « votre paiement a été accepté, merci pour votre commande » en rouge risque d’envoyer des informations contradictoires

 

3. Plus que ca, il existe une culture Web design

Pas que je sous-entende qu’il existe une forme de dîners mondains où l’on parle d’un Balzac du Web, mais plutôt qu’il faut avoir une connaissance générale du Web et de ses utilisateurs pour designer un site Web qui atteint ses objectifs.

 

a – Connaître le marché et son utilisation du Web

Si vous voulez vendre des vêtements en ligne, alors il va falloir peut-être envisager de présenter les vêtements de manière interactive… Oui mais alors quelle solution: diaporama ? Image « zoomable » ? Vidéo ? Rien du tout mais on offre le retour gratuit ? Un designer d’expérience (au sens de « expérience utilisateur » pas « il a de l’expérience dans le domaine ». On peut donc être un designer d’expérience d’expérience, mais bref), un designer d’expérience donc, va pouvoir vous aider à avancer sur la question en vous donnant les clés pour comprendre l’expérience de votre client d’un point de vue Web

b – Connaître les utilisateurs et leurs (mauvais) réflexes

Parce qu’en plus, il faut faire preuve de psychologie. A force, l’utilisateur est habitué, le bougre, à pouvoir cliquer sur le logo pour revenir sur la première page; on lui a mâché le boulot en changeant le bouton de couleur pour lui montrer qu’il est actif et on lui écrit même un petit « merci » pour lui dire que son mail est bien envoyé…
Et si vous ne faites pas ça, même si en réalité on peut cliquer sur accueil pour revenir sur la première page, le bouton fonctionne même si rien ne se passe et le mail est bien parti, dans la tête de l’utilisateur en fait: ça ne marche pas, votre site est simplement nul (et autant vous dire que ça va se savoir sur Twitter). Je n’invente rien.

 

site web design illu 1

Où cliquez vous si je vous demande de cliquer sur le bouton ?

site web design illu 3

Dans le même genre, lequel de ces boutons “Envoyer” a fonctionné ? Les deux en fait. 

c – Respecter le contrat de confiance (même quand on ne vend pas d’électroménager)

S’il y a des interactions classiques qui favorisent la navigation et la confiance, il y en a d’autres qui sont indispensables: imaginez demander le numéro de carte bleue d’un client sur une page non sécurisée.Ma propre mère qui ne sait pas allumer l’ordinateur cherche toujours un petit cadenas sur la page avant de commander sur Ventes Privées. Imaginez qu’elle ne le trouve pas ? Vous voyez sa tête ? Non ? Vous voyez sa commande ? Non plus.
Au final, la plupart de ces informations et de ces remarques tombent en réalité sous le sens, et semblent issues d’une logique implacable. Seulement, comme le disait un certain Steve J.  « La simplicité peut être plus difficile à atteindre que la complexité : il faut travailler dur pour bien penser et faire simple. ».C’est à force d’échecs, d’expérience, de tests que l’on arrive à quelque chose qui répondent aux objectifs fixés. En fait, c’est un métier. Bien à part.