Le design du site du CRIJ 

By 2 July 2013

4.1.2. Le design

Comme le soulignait Franck Cochoy (2004) : « L’emballage participe à la construction des préférences du consommateur et à l’activation de ses registres d’action ». En effet, comme le précisait également le CRP consulting l’an passé, on ne peut négliger l’apparence du site Internet, car c’est dans son attractivité que va résider tout le déclenchement de l’intérêt du public.

a) L’attraction de l’œil

Certaines remarques de nos enquêtés laissent à penser qu’ils ont du mal à se repérer sur le site du CRIJ. En effet, lorsque l’on se rend sur un site web ce qui doit nous accrocher en premier c’est le nom de l’organisme, et ses fonctions ; c’est une image qui donne à lire l’organisme. Pourtant lorsque l’on interroge les internautes sur une image de la page d’accueil du CRIJ prise à un instant T, on se rend compte que l’œil ne se dirige pas vers les informations escomptées. Voici l’image test :
Le design du site du CRIJ

Comme le souligne Raphaël :

« cette page d’accueil (…) comporte de nombreuses qualités, mais aussi des imperfections, en tout cas au niveau webdesign, mais aussi au niveau du message. » Raphaël, 23 ans, Étudiant

Sur cette image, voilà ce que les jeunes internautes voient : les partenaires, le guide des festivals, et le cadre vert « trouver un job », le nom de l’organisme n’est pas identifiable au premier abord, et les services proposés ainsi que l’actualité passent inaperçus car leurs couleurs sont noyées.

« Ce qui attire en premier est le cadre vert en bas de la page, et le cadre rose fluo en rapport avec les festivals. Leurs couleurs sont beaucoup plus vives, beaucoup plus puissantes. » Raphaël, 23 ans, Étudiant

« Ce qui m’attire en premier ce sont les dessins bizarrement, mais aussi et surtout la grosse bande verte avec une grosse et « funky » inscription » Jessica, 20 ans, Étudiante

« on ne sait pas trop sur quoi cliquer, là admettons je recherche un logement, je sais pas du tout ou aller sur cette page d’accueil… » Julie, 23 ans, Étudiante

Il apparaît également qu’il y ait un déséquilibre au niveau de la « place » accordée à chaque thématique sur la page d’accueil : on y retrouve un espace actualité plus important que les services proposés par le CRIJ. Élément repris par certains jeunes interrogés :

« Si je devais changer quelque chose, je développerais moins l’espace de droite » Laeticia, 24 ans, Salariée

« Je mettrais moins de textes dans les actus… » Fabien, 18 ans, Étudiant

« Les thématiques ne sont pas assez délimitées » Alexandra, 23 ans, Étudiante

« J’enlèverais des caractères. Je mettrais moins de mots et je ferais 3 colonnes avec les thématiques, un bandeau en bas avec les informations culturelles et une recherche par ville.» Alexandra, 23 ans, Étudiante

Il y a clairement une incompréhension pour les jeunes, des problèmes d’identification des services proposés par le CRIJ, de la qualité de ses services, et de l’image de l’organisme en général, comme l’illustre très bien cette déclaration de Rémi à propos de la page d’accueil :

« Les cadres en pointillé (sûrement une référence à des coupons papiers) font croire que la page n’est pas finie (…) Les illustrations pochoirs font vraiment « je suis un politicien et je parle aux jeunes dans les années 90 » (…) Pourquoi un logo

« journal » de style wordart sur un site internet d’un organisme assez important. Il n’y a pas de rapport entre le bandeau de tête et le reste de la page, idem pour l’onglet de recherche. Pourquoi un couteau et une fourchette dans JOB (il n’y a que de la restauration ?) et pourquoi les 3 points de suspension à la fin de la phrase. Dommage pour le carré blanc du logo signalétique de la rubrique « annonce » et je ne comprends pas le rapport entre la croix templier et la rubrique « service » » Rémi, 19 ans, Étudiant

b) Les couleurs : une dominante est nécessaire

Les couleurs du site sont un des éléments qui va apparaître en premier aux yeux du visiteur, mais pour le retenir et ne pas dissiper son attention il faut limiter le nombre de couleurs utilisées et les adapter au logo et à l’image de l’organisme : un site web au design épuré facilite sa crédibilité.

Au cours de notre enquête les sites qui sont revenus le plus dans les discours, qu’il s’agisse de sites d’information ou bien de loisirs, ont un fond blanc sur lequel s’appose une couleur dominante, généralement le bleu ou le rouge (youtube, facebook, Lemonde etc.). Probablement dû à la bannière du haut de la page d’accueil, la couleur qui est associée au site du CRIJ est principalement le jaune, une couleur vive et attractive qui apparaît comme ludique, et qui semble donc en désaccord avec les fonctions du CRIJ comme le soulignent Hervé et Adrien :

« Le logo du CRIJ ça fait vraiment maternel pas fini ! » Hervé, 23 ans, Étudiant

« Des couleurs moins flash plus sérieuses, (…) peut être faire un site plus vendeur, plus simpliste comme par exemple le bon coin » Adrien, 21 ans, Étudiant

Nous sommes donc allé faire un tour d’horizon des différentes pages sur la création de site Web ainsi que sur les forums de discussion s’y rapportant, afin d’avoir une vision globale de ce qu’il se disait sur le sujet. Ainsi, nous nous sommes aperçus que beaucoup d’études, notamment anglaises, ont été faites sur la symbolique des couleurs, et le fait est que la couleur n’a pas seulement une influence sur l’esthétique d’un site mais peut influencer la lisibilité des pages. On note également que les entreprises de création de sites web insistent sur cet aspect de symbolique des couleurs, ainsi que de leur bon assemblage. Ainsi, de nombreuses pages et forums sur la création de sites web désignent certaines couleurs et certains assemblages comme préférables et d’autres comme potentiellement déroutants. Nous nous sommes alors attardés sur la symbolique du jaune, qui est souvent décrit comme une couleur dynamique, propice à la publicité ou aux sites de loisirs, et plus récemment couleur largement associée au discount. Éléments présents dans les discours de nos enquêtés, comme par exemple pour Caroline, qui déclare :

« Ce qui m’attire en premier c’est la bannière toute en haut qui est très coloré, on dirait une bande flash de publicité(…) Le jaune-orange fait un peu mal aux yeux. » Caroline, 23 ans, Salariée

Ainsi, nous avons poursuivi notre investigation et découvert un étonnant site anglais qui fait état d’une étude réalisée en 2003 sur 232 personnes dans 22 pays différents, et qui propose de nous livrer le secret des goûts… et des couleurs68. On découvrait alors que le bleu faisait l’una- nimité chez les hommes et les femmes, et l’on retrouve parmi les couleurs les moins appré- ciées : le marron, l’orange, et le jaune ; mais avec des écarts beaucoup plus significatifs comme le montrent ces schémas :

Graphique 16 : Les couleurs les moins appréciées par les femmes et par les hommes
Les couleurs les moins appréciées par les femmes et par les hommes

Un des éléments qui ressort des entretiens à propos des couleurs du site Internet du CRIJ… c’est qu’il y en a beaucoup. Évidemment, beaucoup de couleurs, ça attire l’œil, mais encore faut-il qu’il soit attiré au bon endroit, trop de contrastes perturbe l’internaute, comme le soulignent certains de nos enquêtés :

« Du rose, du jaune, de l’orange, du vert, du bleu, du rouge, un grand nombre de couleurs différentes n’aide pas à la lisibilité, cet arc-en-ciel dessert complètement le site. On gagnerais encore une fois à simplifier, à utiliser des camaïeux de couleurs, du bleu clair au bleu foncé, et peut être seulement une seule autre couleur, ce qui aiderait à contraster le site, et pourrait aussi hiérarchiser mieux l’information. » Raphaël, 23 ans, Étudiant

« La page d’accueil est colorée et dynamique, mais je ne la trouve pas très claire. Il y a trop d’informations sur une seule première page. » Jessica, 20 ans, Étudiante

« Une couleur centrale doublée, blanc et bleu sur lequel le texte central se perd un peu par rapport aux autres couleurs plus « flashis », sur la page d’accueil. » Hervé, 23 ans, Étudiant

Des couleurs comme le gris, le blanc et le noir, sont des couleurs souvent employées sur les sites Internet. Le gris étant souvent identifié sur les blogs de web designers comme correspondant à des sites dits « sérieux » ou formels, le blanc quant à lui aère la page et le noir est là pour mettre en valeur le reste des couleurs sélectionnées ou pour faire ressortir le texte. Les autres couleurs à mettre en avant sont peut-être alors le bleu ou le vert (le rouge a également été évoqué) ; mais il ne faut pas les multiplier et préférer n’en choisir qu’une « majeure » en la dégradant en camaïeux.

« C’est vrai quand tu regardes un site comme facebook, ce n’est que blanc et bleu, c’est très sobre, enfin c’est clair, c’est simple, il faut éviter les fioritures… pour le CRIJ, vert peut être, oui vert c’est bien … » Julie, 23 ans, Étudiante

« Le vert et le bleu sont d’après moi les couleurs les plus appropriées aux associations et aux entreprises de service. Des bleus et des verts plutôt pâles, peu agressifs, sont une invitation à la détente et à la sérénité. » Ra- phaël, 23 ans, Étudiant

Quelle couleur associerais-tu au site du CRIJ ?

« Vert » Fabien, 18 ans, Étudiant
« Le vert » Daisy, 19 ans, Étudiante
« Rouge et vert, au pif ! » Hervé, 23 ans, Étudiant

« (…) jaune, verte ou bleu ! peut-être selon que l’on soit sur l’emploi, la formation ou le logement par exemple(…) Ça serait mieux d’utiliser les couleurs pour faire la distinction entre nouvelles offres d’emploi et an- ciennes offres» Caroline, 23 ans, Salariée.

Pour une meilleure hiérarchisation de l’image il faut également penser à accorder les couleurs pour que le texte soit lisible, en privilégiant les contrastes relativement marqués entre le fond et le texte.

c) Les illustrations

Les animations et les visuels attirent le regard de l’internaute, il faut donc les privilégier pour faire passer des messages forts, pour « aérer » la visite d’un site, ou encore dans un but pédagogique.

Les animations du site du CRIJ sont présentes sur la page d’accueil pour désigner les différents départements de la région, les partenaires du CRIJ, et défilent également sur un large bandeau indiquant tout ce qu’il est possible de trouver au CRIJ.

Ces animations sont ensuite absentes lorsque l’on dépasse la page d’accueil, il n’est pas forcement bénéfique d’en mettre beaucoup, pour ne pas perturber l’œil de l’internaute, en revanche les illustrations peuvent être présentes pour alléger des zones de texte trop lourd dans la rubrique d’informations par exemple, ou bien des images peuvent accompagner les différentes rubriques. Une idée que reprennent Raphaël et Julie:

« Trop d’informations sur une seule page, on aurait gagné à avoir plus de visuels, plus de symboles qui parleraient plus que des tonnes de texte. » Raphaël, 23 ans, Étudiant

« ça devrait apparaître clairement avec des icônes ou quelque chose comme ça : genre t’as la page d’accueil avec je sais pas une entête études, formation, stage avec des bouquins des trucs comme ça… une entête services, avec une image d’un cv, d’une LM, afficher que le site offre des ateliers d’aide pour ça … une entête job… et quand tu poses ton curseur dessus, l’image s’agrandit, ou s’anime, et si tu cliques ça t’envoie au truc spécialisé. » Julie, 23 ans, Étudiante

Prenons un exemple afin d’illustrer nos propos :
Le design du site du CRIJ

Sur une page comme celle-ci par exemple, on choisira de :
– Sélectionner l’information (un renvoi vers un lien pour obtenir un complément d’information est envisageable)
– Ne mettre des puces et ne changer la typographie que sur des titres et des liens (généralement identifiables par un soulignage)
– Mettre les informations importantes en haut de page
– Éviter les couleurs jaunes sur un fond blanc et accorder les autres couleurs choisies à celle du logo du CRIJ
– Privilégier les images en rapport avec le texte et focalisées sur le message à transmettre.

Le logo « trouver un job » sur cette capture d’écran a souvent retenu l’attention des jeunes enquêtés, sa couleur en adéquation avec le logo du CRIJ, la mise en avant de la gratuité des services, et la place qu’il prend sur la page sont des atouts incontournables ; il est alors peut être possible d’envisager les animations qui le suivent en modèle fixe, avec des couleurs qui leur sont associées pour chacun des services proposés, comme le soulignent Caroline et Valérie:

« Des couleurs jeunes : gris métal – blanc – noir avec une touche de couleur jaune, verte ou bleu, selon que l’on soit sur l’emploi, la formation ou le logement par exemple ! » Caroline, 23 ans, Salariée

« Je pense que les images comme celle du bas : trouver un job, guide des festivals sont plus parlantes et plus visibles que les infos en caractère bleu noyé dans la masse des autres infos en bleu également, il serait intéressant de mettre une couleur par rubrique (annonces : bleu, info : jaune, guide des festivals : vert…) » Valérie, 23 ans, Étudiante

Cependant il faut songer à sélectionner l’information proposée pour ne retenir que peu d’encarts parmi les suivants qui défilent sur la page d’accueil :
l'image du CRIJ

Il faut encore une fois coller à l’image du CRIJ, et afficher ses atouts tant que possible. Exemples:

– Les services tels que l’accès web et les photocopies peuvent être mentionnés mais il faut préciser qu’elles sont payantes et non gratuites
– L’aide au voyage peut être regroupée en un seul cadre
– Le choix d’un sport fait partie des loisirs…
– Le CRIJ est un organisme d’aide aux jeunes dans leur prise d’autonomie progressive, c’est donc un organisme sérieux, qui se doit de bien coller aux « critères d’attraction » des jeunes mais sans aller dans l’extrême. Afficher que le CRIJ peut aider à trouver des loisirs, oui, mais qu’il va indiquer aux jeunes les endroits où sortir entre amis, non. Il faut garder un fil conducteur au risque de perdre l’internaute, et plus largement, le public.

L’ergonomie d’un site Internet est donc une combinaison de plusieurs techniques qui sont complémentaires. Le but est d’obtenir un accord entre les différents points évoqués, pour que votre site soit homogène tant dans son ergonomie que dans son graphisme. On ne le répétera jamais assez : so-bri-été ! Et après tout le déroulement de ces divers points on peut dire que cette sobriété s’appuie sur deux éléments principaux :

➔L’internaute a des références et donc compare, en conséquence, il ne faut pas trop s’éloigner des modèles de base : couleurs, typographie, plan général du site, autant d’éléments dont il ne faut pas négliger la portée, et le besoin de conformité à une certaine norme.

➔Plus votre site sera sobre, et plus il sera crédible ! Il vaut mieux préférer une charte graphique sobre et lisible car l’atmosphère du site doit représenter le message que l’organisme souhaite communiquer. L’image de l’organisme dépend donc de ce qu’il reflète à travers son interface web. Parfois une ergonomie « flash » peut attirer l’usager mais peut également entraver sa concentration ; de plus, une atmosphère qui se veut « jeune » et un peu trop « fun » pour se démarquer, peut rapidement dérouter l’internaute qui vient y chercher des informations fiables et donc s’attend à trouver un site sobre, synonyme de sérieux.

Lire le mémoire complet ==> (Usage des technologies de l’information et de la communication dans la recherche d’emploi et de logement chez les jeunes)
Master 2 GLECOP – Mémoire Recherche – Action
Université de Toulouse Le Mirail