Refondre un site ministériel, partie 3: le design

Dans ce troisième volet, après avoir parlé techno et gens, voici que je vais parler de design. Le nouveau site du ministère de la Sécurité Publique est, à mon sens, l’un des sites ministériels les plus osés sur le plan visuel. Ok, on parle toujours d’un site corporatif, pas d’une firme de design avec plein de trucs expérimentaux, mais on a fait un bon bout de chemin, surtout si on compare avec l’ancienne version… Travailler sur un tel design a été tout un défi pour notre équipe interne. Je vous partage donc certains points de vue et des orientations qui ont guidé nos choix… ou nos limitations!

Trouver une orientation

Avant de me lancer dans les explications détaillées sur les choix visuels, je crois qu’il faut mettre la table sur la culture de l’organisation et l’historique, ainsi que sur les diverses orientations que devait prendre le design du site.

Faire un visuel pour un site ministériel n’est pas une mince tâche, contrairement à ce certains pourraient peut-être croire. C’est un site corporatif, donc administratif, vu par des milliers de personnes, payé par les fonds publics et qui transmet l’image du gouvernement. Bref, on marche sur des œufs. Le processus décisionnel est lourd et tous les niveaux de la hiérarchie ont leur mot à dire. De quoi donner des maux de tête à n’importe quel designer!

Visuel de l'ancien site ministériel
L’ancienne page d’accueil du site ministériel.

De plus, l’équipe de projet voulait trancher avec le visuel de l’ancien site. Il se faisait vieillot et avait besoin d’être rafraîchi considérablement. Il y avait déjà eu, par le passé (plusieurs années), un travail de recherche d’image pour le ministère et il a toujours été difficile de représenter les quatre grands secteurs, soit la police, la sécurité incendie, le correctionnel et la sécurité civile. Les susceptibilités de chacun et le désir d’être présenté prévalait sur la qualité graphique, ce qui pouvait facilement mener à une «pizza graphique».

Daniel lafrenière, dans le cadre de l’enquête utilisateurs, a remarqué que peu de gens connaissaient l’organisation. Il y avait de la confusion sur la mission et les rôles. Par exemple, peu de gens savaient que le ministère gère les centres de détention. C’est alors que nous devions nous poser la question qui tue: «Quelle orientation prendre?». Voici nos deux choix:

  • Présenter le résultat de l’action du ministère, soit un environnement sécuritaire ou;
  • Présenter ce que l’on fait, nos gens, notre réalité.

Pour prendre une telle décision, il fallait regarder plus large que juste notre organisation. Dans toute conception, on regarde les concurrents. Mais un ministère, ça n’a pas de concurrents, hein? En fait, pas au sens propre, mais on doit se démarquer; de quoi? l’erreur la plus commune dans ce cas ci est de vouloir se démarquer de nos semblables des autres «états»: sécurité publique fédérale, Ontarienne, des États-Unis… Dans les faits, les gens qui accèdent au site ministériel vont généralement avoir à accèder à d’autres sites du gouvernement du Québec. Il faut donc que le ministère se démarque des autres M/O, avoir un site avec une identité assez forte visuellement pour qu’on puisse aisément le reconnaître parmi d’autres.

La première piste, soit de montrer le résultat de l’action ministérielle par un environnement sécuritaire, est généralement illustrée par des gens heureux, qui n’ont pas de soucis ou de problèmes. Des citoyens qui vivent au Québec et sont biens. Or, cette approche est très commune. Présenter des gens heureux, dans un environnement sécuritaire, des petites familles aux enfants joufflus, c’est un peu déjà-vu. On a de la difficulté à faire la différence entre le ministère de la Sécurité publique et n’importe quel autre… Montrer des citoyens heureux, ça ne montre pas ce que fait l’organisation.

Or, le MSP a la chance d’être un ministère avec une image forte: des uniformes (pompiers, services correctionnels, policiers), de l’action, des images d’événements… C’est une piste nettement plus prometteuse et engagée que de faire appel à des banques d’images montrant des gens heureux. Il y a tant d’images qui viennent en tête lorsque l’on parle des secteurs que nous ne pouvions passer à côté d’une telle opportunité. C’est ainsi que le choix d’une approche photographique, où sont montrées les vraies choses, les événements, les uniformes, la réalité a pris le dessus. C’était un pari risqué, vu la difficulté de se procurer les photos et la sensibilité de certaines d’entre-elles. Malgré tout, c’était là le meilleur moyent pour démystifier l’action et le rôle du ministère de la Sécurité publique. Et je crois que c’est réussi!

Silos?


On voit le lien entre la structure administrative et la navigation dans le site, situation particulière au MSP due à la mission et aux secteurs d’activitées.

Ok, je sais, sur la page d’accueil du site, on voit d’emblée la structure administrative. C’est mal. On ne cesse de répéter que la structure administrative ne doit pas être visible sur le site, on s’adresse à des gens qui ne connaissent pas l’oranisation. Ben… comme le disait si bien Michaël Carpentier, le ministère est assez différencié pour que les entités administratives (disons silos, c’est plus court) soient assez différents pour la clientèle. Dans le fond, si quelqu’un veut de l’information sur les pompiers, ben, il va aller dans la section appropriée, peu de chances qu’il aille dans la section dédiée au correctionnel… (M’enfin, je sais qu’on pourrait être surpris parfois.)

C’est assez rare que la structure de l’organisation colle si bien à la structure de l’information. Bien entendu, il a fallu tout de même regrouper certaines choses et effacer la structure administrative dans chacun des silos, je dirais que c’est un «work in progress», mais ça avance…

Maquettes schématiques sur tableau blanc
L’atelier a permis de mettre en place les éléments de la page d’accueil su site.

Pour la navigation, nous avons donc, lors d’ateliers avec l’équipe de Zengo, décidé de mettre les deux approches de l’avant, soit une navigation par profils («Vous êtes») et par secteurs. Nous voulions aussi donner une présence forte à l’image, la photographie dans les gabarits de page. Rares sont celles qui proviennent de banques d’images, la plupart étant produites à l’interne.

Le design…


Les images des secteurs présentent en filigrane du texte provenant de la déclaration de services aux citoyens.

Les photographies sont traitées, je l’avoue (voyez ici le manque de surprise de l’auditoire). Nous nous permettons certains ajustements de contrastes et de teintes pour augmenter certains effets. Les textes en filigranes sont apparus en cours de travail de conception, en équipe. Les phrases ou expressions sont issues de la déclaration de services aux citoyens… c’est une idée intéressante sortie par un stagiaire au cours de l’été! Simple, mais brillant!

Mettre des couleurs dans un site ministériel n’est pas une mince chose. Pourquoi? très simplement la bande bleue du PIV qui est très forte et qui impose une palette malgré elle. La majorité des sites des M/O sont bleus, ou dans des variantes de bleu ou de gris. Bien entendu, certains se démarquent, mais ils sont rares. Nous voulions avoir une coloration plus contrastée et devions faire attention aux associations de couleur (rouge pour incendie, bleu pour police, vert/brun pour SQ…). Notre choix s’est donc tourné vers le orange, reprenant ainsi la couleur de l’ancien site, mais avec un peu plus de punch (ouais, ok, il y a du orange et du bleu dans le sigle de la sécurité civile, je sais).

Là où le bat blesse, c’est le format. Ouin, bon, ok… on a conçu le site pour les écrans de 1024 pixels de large et plus. Le site est vraiment conçu pour une consultation sur un poste de travail et ne vise pas les appareils mobiles (du moins, pas pour l’instant). Je sais, c’est un peu limitatif, considérant qu’il y a maintenant des appareils mobiles qui permettent un affichage décent des sites Web. Or, si on regarde bien nos statistiques, nous avons un mirobolant… 200 visites par mois par mobiles, sur un total de 46 000. Bref, c’est encore assez marginal. Va tout de même falloir penser à ça éventuellement… Parlant de mobiles, près de 70% sont des iPhones/iPods… alors notre animation Flash en page d’accueil fait patate… à corriger aussi éventuellement (HTML5?).


Le PIV sans image (blanc) devient une pratique répandue dans le design de sites ministériels.

Pour ce qui est du PIV, je dois avouer que nous avons eu un certain débat interne, à savoir, le mettons-nous «blanc» (pas d’image au dessus de la bande bleue) ou non. Personnellement, je préfère, et de loin, le PIV blanc. C’est en fait une tendance lourde, la majorité des sites gouvernementaux prennent cette «nouvelle» approche épurée. J’en ai déjà parlé dans un autre billet. C’est tout à fait légal et accepté, selon les règles du PIV. Je dirais que ça permet de se réconcilier avec le PIV…

Utilisabilité

Le site a fait l’objet d’un test d’utilisabilité avant sa livraison, mené par l’équipe de projet interne. Ces tests nous ont permis de réaliser que plusieurs petits problèmes s’accumulaient et nuisaient à la navigation. Nous avons corrigé plusieurs de ces erreurs. Le site fait l’objet d’une amélioration continue de façon à améliorer son utilisation et il va certainement évoluer avec le temps.

La bande Vous-êtes... dans le site
La bande «Vous-êtes…» n’est pas encore tout à fait au point, quoi que très utile selon les tests et nos statistiques.

La bande «Vous êtes» est un exemple de composant qui devra probablement être amélioré car elle est souvent sujette à débats. Sa forme actuelle est déjà nettement améliorée par rapport à celle de départ, suite aux tests d’utilisabilité. Je ne pourrais pas dire que c’est sa forme finale non plus, nous prévoyons y apporter des améliorations notoires éventuellement. Elle n’est pas nécessairement intuitive, mais je crois qu’elle a une grande utilité, soit le repérage rapide d’information destinée à un public cible précis. Par exemple, les pages les plus visitées du site sont des bottins et nous devions trouver des liens sur la page d’accueil, sans surcharger celle-ci.

Un problème plusieurs fois rencontré dans le site est le phénomène du «banner blindness». Les éléments à avoir souffert de ce phénomène pendant les tests est sont le lien «Carrière» en page d’accueil et la bannière de navigation orangée sous le PIV dans les pages de contenu. Ce constat nous a plutôt surpris et nous avons dû apporter de grandes modifications pour améliorer la visibilité et l’utilisabilité des deux éléments. Encore une fois, il y a place à amélioration, mais je crois que c’est déjà mieux.

Alors, qu’en est-il du design?

Réaliser le design graphique du site du ministère de la Sécurité publique a été tout un défi pour l’équipe interne. Nous étions 5 designers (dont deux stagiaires) à avoir «brainstormé» et soumis des propositions au cours de l’été 2009 et c’est la maquette présentée par Évelyne Lafontaine-Morin qui a été retenue. Le concept a évolué au cours de l’intégration du contenu mais l’essence est restée la même. Je lui prédis une belle carrière!!

L’équipe de direction du projet a aussi joué un rôle important dans le processus d’approbation du visuel. Accepter de passer d’un site essentiellement textuel à une version plus photographique a été un bond énorme pour l’organisation. Mais il ne faudra pas en rester là…

Le prochain (et dernier billet) sur la refonte du site du MSP traitera justement de ce qui est prévu comme amélioration pour le site ainsi que l’intégration du Web 2.0 et quelques autres nouveautés. Entretemps, je vous invite à me laisser des commentaires si le cœur vous en dit!

Faire une refonte de site ministériel: