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:

Sites touristiques: tendance ou hasard?

Dernièrement, je publiais un billet où je présentais un genre de palmarès des plus beaux sites de l’administration publique québecoise. Parmi ces sites, la SÉPAQ qui marque par l’utilisation de grandes photographies pleine page.

Je ne peux m’empêcher de faire le rapprochement entre ce site et le nouveau site de l’Office de tourisme de la ville de Québec, lancé cette semaine:

Ce site a été conçu par l’agence Nofolo, un très beau site, qui fait partie d’une vaste campagne (si j’ai bien compris les commentaires d’un responsable de l’Office de tourisme en entrevue à Radio-Canada hier).

Alors, vous voyez bien que le visuel est très «semblable». Sans vouloir critiquer, je me demande surtout si c’est un hasard ou bien une tendance lourde dans le monde des sites de tourisme. Perso, j’adore l’approche, les deux organisations ont la chance de pouvoir mettre de l’avant de superbes photographies!

Une visite rapide sur le net ne me permet pas de trouver de sites de tourisme utilisant la même approche, sauf peut-être Tourism Australia dont le concept pourrait se rapprocher.

M’enfin. C’est pas une critique ou une accusation de plagiat, seulement une constatation. Je trouve que les deux sites sont vraiment très beaux, fort intéressants et l’utilisation de photographies est un gros plus! Peut-être un peu trop «stagées» dans le cas de l’Office de tourisme de Québec, par contre (la porsche dans le Petit-Champlain, entre autre…).

Vivement d’autres beaux sites du genre!

Les plus beaux sites de l’administration publique québecoise, selon Gou!

Suite à mon dernier billet, vu la mouvance du Web gouvernemental, je me permet de faire une liste des plus beaux sites, selon mon humble avis, de l’administration publique du Québec. Je vais le faire au sens large, incluant ceux qui ne sont pas soumis au PIV, car il y a des perles.

Je tiens à souligner que c’est entièrement subjectif, c’est mon avis personnel et que ça n’a aucune valeur scientifique, économique, politique ou autre «ique» que vous voudrez. Ça peut, par contre, servir d’inspiration pour mes collègues en cours de processus de refonte Web actuellement… pourquoi pas?

Quels sont mes critères? de sites différents, beaux, qui ont «de la gueule» (très subjectif, hein?), donc, des sites qui ont un impact graphique assez fort pour sortir de la masse. Allez, je me lance! Oh, il n’y a pas d’ordre… c’est pêle-mêle!

Régie des rentes du Québec

Je ne pourrais laisser passer sous silence le site de la RRQ, même s’il date un peu (quelques années). Pourquoi? parce que cette organisation a toujours été novatrice pour l’administration publique. Je sais qu’il y a une réflexion pour une révision du site actuellement, et j’ai confiance en la qualité du produit.

Société des établissements de plein air du Québec (SÉPAQ)

Ce site a la chance de ne pas être soumis au PIV et dispose d’une banque de photographies on ne peut plus hallucinante, et ils en profitent bien! Sérieusement, voilà un site qui, graphiquement, fait paraître les autres sites du gouvernement bien tristes, n’est-ce pas?

Revenu Québec

Lancé hier, le 16 novembre, le site du Revenu est sobre, très corporatif, mais léger et clair, contrairement à nos rapports d’impôts! eheh!

Sans blagues, c’est un bel exemple de site corporatif où la photographie vient égayer le texte, qui est malgré tout omniprésent, mais aéré, pas trop lourd (allez voir les pages internes). C’est un site qui s’inscrit bien dans son époque, au goût du jour, comme diraient les agents immobiliers!

Carrière

Le site Carrière est un portail pour le recrutement du personnel de la fonction publique. Il y a de gros problèmes de recrutement dans certains secteurs, et le site se devait d’être à la hauteur pour attirer les gens, ce qui est le cas ici!

Le site est coloré, dynamique et focus sur les postes à combler. Encore beaucoup de photographies, moins de texte… une tendance? prenez des notes!!

Bureau du coroner

Oui, je triche. Je mets un site fait par mon équipe. Pourquoi? parce que je juge que ce site a un certain intérêt visuel. Il n’était pas possible de mettre des photographies, ça aurait été lugubre ou déstabilisant, alors la grille graphique a dû être un peu plus poussée. Personnellement, je l’aime bien, bon!

Commission des normes du travail

La CNT a été l’un des premiers sites de la nouvelle génération, si je ne m’abuse. La plus grande force de ce site réside principalement dans son organisation de l’information, en accueil, avec un classement clair. L’utilisation de vidéo en accueil et une grille graphique légère sont aussi des éléments qui, lors du lancement, faisait sortir le site du lot.

Commission de la capitale nationale (CCNQ)

La CCNQ dispose d’un site bien particulier. Visuellement, il est intéressant, mais c’est sous le capot que c’est encore plus intéressant. Flickr, YouTube, Google Maps, Facebook, Twitter… Plein d’innovations pour un organisme publique. Beaucoup de photographies aussi. Ce site est très souvent cité pour faire avancer la cause du Web…

Office de la protection du consommateur

Le site de l’OPC est intéressant par sa légèreté. Il est sobre, mais tout de même relativement simple et clair. Je dois avouer que c’est une nette amélioration par rapport à l’ancienne version!

Agence de l’efficacité énergétique

Un oubli (merci Denis), car je voulais mettre ce site dans ma liste originale, donc je l’ajoute. L’AEE est un site sommes toutes assez simple, mais recèle des petits trucs graphiques intéressants, en page interne notamment. Il y a aussi l’utilisation des rayons en arrière plan qui est très tendance! eheh!


Voilà, c’est une courte liste, peu exhaustive. Peut-être ais-je oublié certains sites, c’est fort possible. Je dois avouer que je me suis principalement contenté des plus connus (il y a tant de petites boîtes au Québec qu’on peut s’y perdre).

Bien que certains de ces sites vous paraissent parfois banals, n’oubliez pas que ce sont de grosses machines, des politiques, des normes et beaucoup de gens qui travaillent derrière. Gérer un projet de design Web au gouvernement est un travail de compromis…

Finalement, avez-vous remarqué que tous les sites avec PIV, sauf un, n’ont pas d’image dans le bandeau? Je parlais de tendance lourde hier… Et vous, avez-vous des coups de coeur du gouvernement du Québec à partager?

Conférences sur conférences…

Eh ben… fallait un été plus relaxe pour avoir un automne de fous, hein? je fais quatre présentations cet automne, et le tout en deux semaines. Et non, ce n’est même pas sur le même sujet!

La première, c’était au WebÉducation sur les tests d’utilisabilité la semaine dernière. La seconde, au CÉGEP de Sainte-Foy, lundi dernier, où je m’adressais aux finissants du programme de graphisme (d’où je suis moi-même issu) au sujet des CMS. Finalement, je présentais à mon service le déroulement du projet de refonte du site ministériel mardi dernier. Ma dernière présentation sera sur le processus de sélection d’un logiciel libre (le cas de la sélection de TYPO3 au minsitère), le tout à la Vitrine Technologique, à Québec.

Bon… après ça, bien, je prends quelques mois de congé sans faire de présentations… je crois que j’en ai besoin!

Web 2.0 design guide

Lors du dernier Webcom Montréal, j’ai assisté à une présentation où il était question des principes de design pour le Web 2.0.

Eh bien, voici un Guide de design pour le Web 2.0! C’est fort intéressant, car il y est repris l’ensemble des propositions qui étaient présentées lors de la conférence.

Outre le volet Web 2.0, qui fait un peu buzzword, je trouve que c’est un bon résumé des tendances actuelles en design Web. On y retrouve, sous forme de design patterns, des pratiques actuelles et modernes de conception graphique de sites, avec un argumentaire et des exemples!

Pour se mettre à jour, c’est un excellent outil!