Refondre un site gouvernemental en tenant compte du UX

Le nouveau site du CSPQ arbore un tout nouveau visuel.

Aujourd’hui est lancé le tout nouveau site du Centre des services partagés du Québec(CSPQ), un organisme central dédié à rendre des services aux ministères, organismes et autres entités publiques du Québec. J’étais le stratège Web sur le dossier, et chargé de projet par interim pour un bon bout aussi. Bref, je suis pas mal impliqué dans le dossier. Bon, maintenant que les présentations sont faites, on va parler UX!

Je vous fais part ici de mon expérience personnelle comme stratège Web sur le dossier de refonte du site du CSPQ. C’est mon point de vue personnel et j’espère que les informations que vous retrouverez dans mon billet pourra vous aider dans votre propre organisation à faire avancer la cause du UX!

Pourquoi nous parler de ce site?

Bonne question. C’est un site gouvernemental, le genre de site, quand on le regarde, on se dit: «Booooooring!». Oui, j’en conviens, rien d’extravagant. Très corporatif, bleu (ben quoi?), identification obligatoire (le fameux PIV), deux colonnes navigation à gauche… euh… minute, là… Elle est où la navigation de gauche?

Voilà.

C’est un site corpo et tout, mais l’équipe de réalisation s’est permise d’aller un peu plus loin que d’habitude. Nous avons poussé la machine (et, croyez-moi, c’est pas toujours facile) pour oser des trucs qui, dans le monde du Web en général, sont assez bien acceptés. Alors, comment fait-on pour faire des choix et les appuyer? On utilise des processus de UX pour démontrer que ça fonctionne!

L’ancien site du CSPQ arborait une mise en page classique du Web pour un site corporatif d’il y a quelques années. Il avait été modifié au cours des ans pour répondre aux besoins, mais nécessitait une révision complète pour y intégrer de tout nouveaux contenus.

Mon présent billet va donc vous présenter les aspects du projet qui nous ont permis de réaliser le site que vous avez devant vous. J’en conviens, il n’est pas parfait (qui l’est?), il fera l’objet d’une amélioration continue, mais je dois dire que je suis assez content du résultat final… surtout qu’il a été réalisé avec un budget limité et un délai très court (4 mois – incluant les vacances des fêtes!).

Quelles sont donc les caractéristiques de ce projet? En voici une petite liste:

  • Approche de conception «Mobile first»;
  • Réalisation d’un tri de cartes
  • Réalisation de deux tests d’utilisabilité;
  • Évaluation heuristique;
  • Processus de développement SCRUM avec itérations de 3 semaines.

Bien qu’aucun de ces points ne soit une nouveauté ou révolutionnaire, le simple fait de les impliquer dans un tel projet, tous ensemble, est une révolution. Rares sont les fois où nous pouvons mettre à profit les méthodes agiles de développement, des approches UX et Mobile First ensemble. L’équipe du Centre de compétences Web (CCW) espère bien pouvoir faire profiter tous les prochains projets de cette expérience.

Le site utilise une navigation supérieure sous forme de menu expansible (est-ce la bonne traduction?). Bien que ce ne soit pas toujours l’idéal (j’en parle plus tard), nous avons fait ce choix pour la version mobile.

Mobile First

Dans le cadre du projet, nous avons eu la chance de travailler avec Stéphane L’Écuyer, un stratège Web UX qui avait une bonne expérience de design multiplateformes, mais surtout avec les approches de développement Mobile First, c’est à dire: développer pour le mobile, le reste suivra. Bon, c’est pas tout à fait ça, mais ça résume, ok?

Une particularité de notre clientèle, c’est l’environnement technologique qui est utilisé. Puisque nous nous adressons à des gens du secteur public, la majorité de nos utilisateurs sont sur des postes de travail fixes, avec Windows XP et Internet Explorer 8. Si. Malgré tout, nous devons nous ouvrir vers le futur, soit éventuellement Windows 8 et IE 11, mais aussi satisfaire notre clientèle qui peut utiliser tablettes et téléphones pour accéder au site. Tout un casse tête pour faire un site Mobile First qui passe bien en IE8…

Un casse tête? oui et non. La philosophie du Mobile First est de concevoir de façon optimale pour le mobile, on augmente ou ajuste pour les autres supports. Ça nous a obligé à simplifier le contenu, la navigation, la structure de l’affichage. Un impact assez important a été l’abandon complet du menu de navigation latéral dans les pages de contenu.

Cet abandon a été, selon moi, un effet positif majeur. Nous avons dû créer une arborescence de contenu la plus claire possible, pour permettre à un utilisateur de naviguer facilement dans le site. Nous avions tout de même des apréhensions… vite dissipées!

Des tests d’utilisabilité et un tri de cartes

Puisque nous avions des éléments qui nous causaient un petit, disons, inconfort, nous devions tester nos hypothèses, histoire de s’assurer de, comme dirait l’autre, ne pas être dans le champ. C’est pourquoi nous avons réalisé deux séances de tests d’utilisabilité avec 11 utilisateurs potentiels du site, externes à l’organisation.

La première séance a été réalisée dans un prototype Axure de moyenne fidélité (un prototype fil de fer avec quelques éléments visuels du site). Ce premier test nous a permis de valider la navigation.

De façon surprenante, aucun utilisateur n’avait remarqué l’absence de menu latéral de gauche. Le fil d’ariane et le menu de navigation ont été tous deux très bien utilisés. Bref, le concept tenait la route.

Une seconde volée de tests a cette fois été effectuée sur le site en acceptation (le site avec contenu réel partiel). Cette fois, nous voulions tester encore la navigation, mais aussi l’utilisation du site sur appareil mobile. J’en ai d’ailleurs parlé un peu ici… Encore une fois, les utilisateurs n’ont même pas remarqué l’absence du menu latéral. Bref, aucune crainte de ce côté.

Nous avons aussi voulu nous assurer de répondre le mieux possible à notre clientèle. Pour ce faire, nous devions utiliser des termes qui sont compris dans un classement logique. Nous avons donc procédé à un tri de cartes pour classer des services offerts au CSPQ. Les résultats ont été parfois surprenants. Nous nous sommes basés sur cette structure pour créer l’arborescence des services. Malgré tout, certains impondérables organisationnels n’ont pas permis de respecter toutes les recommandations du tri par les utilisateurs.

Une dernière évaluation, heuristique cette fois

Vient la dernière étape, le dernier droit pour la livraison… Cette fois, au lieu de procéder à des tests d’utilisabilité, nous décidons de faire faire une évaluation par un expert en UX, une évaluation heuristique du site, par Daniel Lafrenière, de la firme Sigmund. Pourquoi une évaluation heuristique? Plusieurs raisons. Manque de temps pour organiser des tests, charge de travail élevée et plein de trucs de dernière minute à régler.

Ça nous prenait une évaluation indépendante. Certains éléments du site restaient à valider et, faute de tests d’utilisabilité, nous aurions pu oublier des choses. Daniel a donc procédé à son évaluation, dans le cadre de ce que nous lui avons demandé (pas une évaluation exhaustive). Plusieurs recommandations ont été appliquées dès la réception de son rapport, d’autres devront malheureusement attendre. Malgré tout, cet exercice de regard extérieur sur un projet est fort instructif. Nous avons pu profiter d’une expertise et d’un point de vue nouveau rafraîchissant!

Des choix qui peuvent déranger…

Outre la disparition du menu latéral, qui, en soit, n’est rien de bien nouveau sur le Web, nous avons dû faire des choix qui, parfois, peuvent paraître dérangeants ou non conventionnels. Ces choix ont parfois été dictés par la technologie, les fonctionnalités déjà disponibles dans notre catalogue d’extensions TYPO3, les limites de temps ou de capacités de l’équipe… bref, plein de choses…

Le menu sur mobile

Le choix d’un menu qui prend la portion supérieure de l’écran n’est peut-être pas optimal, un développement ultérieur pourrait permettre une bonification du menu…

Nous aurions préféré pouvoir exploiter les volets latéraux dans la navigation mobile, ou nous reposer sur le fameux hamburger déjà présent dans le PIV mobile, pour afficher le menu de contenu du site, mais le manque de temps et nos contraintes budgétaires faisaient en sorte que nous devions optimiser la réalisation et utilisant des modules existants. Nous avons donc minimisé au maximum le développement en réutilisant des éléments déjà disponibles dans notre bibliothèque de composants…

Il n’est pas exclus qu’une version ultérieure pourrait disposer d’un menu mobile plus performant.

Le carrousel est imposant en page d’accueil, mais il sert une fonction de communication importante pour mettre en valeur des gens du CSPQ et les services offerts.

Il est gros, votre carrousel!

Oui. Et c’est voulu.

Nous avions des objectifs précis au niveau du positionnement du CSPQ. Des messages clairs à passer… Bref, outre les besoins utilisateurs, nous avions aussi des demandes et besoins organisationnels à prendre en considération. Ainsi, nous avons consciemment fait le choix d’avoir un carrousel imposant qui permette d’afficher un message clair.

Ok, ok… je vous vois venir avec vos critiques sur les carrousels. Il y a une multitude de billets sur le sujet. C’est mal, c’est méchant et ça pue. Ok, on le sait. Celui du site devrait bien remplir sa fonction, car il en a une – pas de UX, mais plutôt de communication.

De plus, outre le UX, il faut aussi prendre en considération le contexte opérationnel… Il existe fort probablement de meilleures solutions, mais elle ne sont pas nécessairement applicables dans le «day to day»…

Conrairement à ce que l’on voit de façon traditionnelle, l’ouverture du menu de navigation supérieur repousse le contenu vers le bas, tout comme le menu le fait sur la version mobile, un pattern de conception fréquent que nous avons transposé sur le site «régulier».

Le menu supérieur qui repousse le contenu

Avec ça, on a suscité des conversations!

Dans la version mobile du site, lorsque l’on ouvre un élément du menu supérieur, le contenu est repoussé vers le bas plutôt que de demeurer en dessous du menu. C’est un comportement habituel en mobile. Ce dernier a été reproduit pour la version desktop. Ce que certains peuvent ne pas aimer!

Je crois que c’est une fonctionnalité qui se verra de façon plus fréquente sur toutes les plateformes. Pour les plus anciens du Web, vous souvenez-vous de ces menus qui ouvraient et qui ne pouvaient passer devant des boîtes déroulantes dans IE? Si on avait pu repousser le contenu comme nous le faisons ici, le problème aurait été vite réglé! Mais ce n’est pas la raison de ce choix. Nous voulions une expérience cohérente en mobile et desktop. Le menu étant pleine grandeur, cachant une bonne partie du contenu de la page, le fait de le repousser n’avait pas d’incidence négative, au contraire, car au défilement, on peut avoir accès à ce contenu.

Sans vouloir dire que nous sommes avant-gardistes ou que nous voulons partir une mode, je crois que ce petit effet, quoi que négligeable, présente un certain intérêt. Daniel a mentionné son inconfort, nous le recevons, mais avons décidé de conserver cette petite fonction sans trop de malices. Est-ce une bonne idée? Personnellement, je pense que le pattern que l’on voit souvent sur mobile va se transférer éventuellement sur toutes les plateformes.

L’avenir me dira si je me suis trompé.

Le site est en ligne, vive le site!

Maintenant que c’est en ligne, on pourrait se frotter les mains et passer à autre chose, non? Eh bien, c’est tout le contraire. Le tout nouveau site doit maintenant faire l’objet d’évaluations au niveau statistique pour s’assurer que nos choix soient cohérents et aident les utilisateurs. De plus, des recommandations de l’évaluation heuristique nécessitent que nous prenions des mesures pour évaluer les changements à apporter.

J’espère que nous pourrons commencer à faire de l’optimisation du taux de conversion, ou CRO avec le site. Faire des tests A/B ou utiliser d’autres techniques de mesure pour en améliorer l’utilisabilité.

Les conditions sont là, la volonté aussi. Ne reste plus qu’à le faire.