** Cette évaluation porte sur l'ancien site de la SSQ qui a été remplacé par un nouveau site en juin 2018. **
Introduction
Ceci est une courte évaluation du site de la SSQ, sur ordinateur et sur mobile. Le but de cet exercice est de mettre en avant les difficultés, irritants et freins à la navigation des utilisateurs de la SSQ.
Cette évaluation est faite avec une grille d'analyse ergonomique reconnue : la grille de Bastien et Scapin.
Cette façon de travailler permet de remplacer les tests utilisateurs dans une première phase.
Sommaire
Nous avons pu isoler quelques pages et points qui demandaient de l'attention. Suite à l'exploration du site sur deux modes d'affichages, nous avons évalué certaines pages et avons identifié quelques premiers constats.
À noter que nous nous plaçons toujours d'un point de vue de vos utilisateurs dans leur contexte d'utilisation et leur connaissance de la SSQ.
Critères:
4.2. Prise en Compte de l'Expérience de l'Utilisateur
Description:
L'ensemble du site est très agréable visuellement et donne un bon vent de fraîcheur dans le monde des corporations financières.
Critères:
1. Guidage, 1.2. Groupement/Distinction entre Items
Description:
Les 2 menus sont très facilement identifiables. Le fait d'avoir une grande distinction de caractères et de tailles entre les menus est très aidant dans l'identification de la navigation pour l'utilisateur.
Critères:
2.1.1. Concision, 2.2. Densité Informationnelle
Description:
Le groupement des éléments est bien identifié. L'utilisateur se sent tout de suite interpellé et peut rapidement prendre le chemin qu'il désire.
Critères:
1.1. Incitation, 1.2.1. Groupement/Distinction par la Localisation
Description:
Les sections sont clairement identifiables pour l'utilisateur. Le graphisme reste en adéquation avec le reste du site.
Recommandation:
Mettre moins de distinction visuelle. Les blocs sont quand même très présents.
Critères:
1.2.2. Groupement/Distinction par le Format, 4.2. Prise en Compte de l'Expérience de l'Utilisateur
Description:
Les liens d'accès rapide sont toujours en bas des des blocs de contenu. Toutes les activités se retrouvent entre 2 blocs de texte et d'actions.
Recommandation:
Déplacer le lien sous le bloc des actualités pour plus de cohérence dans la page d'accueil.
Images cliquables : publicités
Critères:
1.1. Incitation, 2.1.2. Actions Minimales, 7. Signifiance des Codes et Dénominations
Description:
Les blocs d'images sont aux couleurs de la SSQ, mais leur forme connte une publicité. Les images sont collées les unes sur les autres, avec une identification comme quoi elles sont cliquables. Pour l'utilisateur, il faut se poser la question de la pertinence de ce type de pub sur la page d'accueil.
Recommandation:
Est-il important que les ces images soient sur la page d'accueil ?
Sinon, ces images ne semblent pas se distinguer par rapport au reste de la page d'accueil. Redéfinir l'objectif et la vocation de ces images cliquables pour une meilleure appréciation.
Critères:
1.1. Incitation, 1.2. Groupement/Distinction entre Items, 1.4. Lisibilité, 2.2. Densité Informationnelle, 3.2. Contrôle Utilisateur
Description:
Les pages secondaires des carrousels sont visitées par seulement 1% des utilisateurs (référence).
Le fait qu'il soit rapide et toujours en mouvement alourdit la charge cognitive.
Qu'un contrôle permette de l'arrêter est toutefois une bonne initiative.
Recommandation:
Nous sommes toutefois conscients que le carrousel répond souvent à un enjeu de communication et de stratégie pour l'entreprise.
Dans le meilleur des mondes, il serait préférable de concevoir une autre façon de présenter l'information sur la page d'accueil.
Design et présentation des éléments
Critères:
1.4. Lisibilité, 4.2. Prise en Compte de l'Expérience de l'Utilisateur, 6. Homogénéité/Cohérence
Description:
La boîte de connexion manque de cohérence par rapport aux éléments similaires aperçus sur les autres pages.
Le texte "ACCÈS | administrateurs" se retrouve notamment sur 2 lignes.
De plus, cette information se retrouve déjà en haut à côté de la navigation.
Recommandation:
Améliorer l'affichage des éléments textuels ou supprimer cet élément répétitif.
Critères:
1.4. Lisibilité, 4.2. Prise en Compte de l'Expérience de l'Utilisateur, 8. Compatibilité
Description:
Il est fort possible que l'utilisateur ne puisse pas bien voir les dégradés subtils des niveaux de verts sur son écran.
On peut aussi se poser la question si les couleurs soient conformes aux normes d'accessibilité.
Recommandation:
Valider que les couleurs rentrent bien dans les critères d'accessibilité Ontariens et SGQRI 008-01 (idéalement).
Critères:
6. Homogénéité/Cohérence
Description:
L'utilisateur vient clairement de sortir du site de la SSQ sans en avoir été averti. Le design change ainsi que l'adresse URL.
Recommandation:
Faire en sorte que l'utilisateur soit dans un environnement commun de là où il vient. Ajuster l'entête de la page et le pied de page pour créer une cohérence.
Critères:
1.4. Lisibilité, 3.2. Contrôle Utilisateur, 4.2. Prise en Compte de l'Expérience de l'Utilisateur
Description:
Ce lien ne devrait pas être une image, cela fait en sorte que la qualité n'est pas la même que les textes de type hyperlien.
Recommandation:
Pour des questions de cohérence, il serait intéressant de mettre un lien texte. De plus il sera plus facile de changer le contenu au besoin et plus compatible avec les systèmes pour l'accessibilité.
Critères:
1.4. Lisibilité, 2.1. Brièveté, 2.2. Densité Informationnelle, 4.2. Prise en Compte de l'Expérience de l'Utilisateur
Description:
Les caractères sont très petits pour les nouvelles tailles d'écran et leurs résolutions. La possibilité que l'utilisateur fasse des erreurs de saisie est beaucoup plus importante.
Recommandation:
Grossir les champs textes, les caractères typographiques, les boutons et tous les éléments textuels dans la page.
Critères:
6. Homogénéité/Cohérence, 7. Signifiance des Codes et Dénominations
Description:
L'utilisateur n'a pas connaissance de ce genre de code. Il ne le comprendra pas et s'il le voit, cela le freinera dans sa démarche.
Recommandation:
Cacher ce code si ce n'est que pour des besoins internes à l'entreprise
Critères:
1.3. Feedback immédiat, 2.1.2. Actions Minimales, 3.2. Contrôle Utilisateur, 6. Homogénéité/Cohérence
Description:
L'utilisateur sort complètement du site quand il clique sur cette information. La SSQ perd un utilisateur car il s'en va sur le site de la ville de Québec.
Recommandation:
Ouvrir le site de la ville de Québec dans un nouvel onglet pour ne pas perturber l'expérience utilisateur.
Critères:
1.3. Feedback immédiat, 2.1.1. Concision, 2.1.2. Actions Minimales, 2.2. Densité Informationnelle
Description:
L'utilisateur n'a pas d'information claire pour lui permettre de savoir que lorsqu'il va cliquer, il va arriver à une explication.
À ce stade de navigation, l'utilisateur voudrait très certainement être mieux informé sur les programmes, aides, services qui lui sont proposés dans la page.
Recommandation:
Il y a plusieurs solutions qui s'offrent pour clarifier l'information :
- Mettre les "blocs-boutons" les uns au dessous des autres et mettre un bref texte explicatif.
- Ou: mettre des mots clés pour aiguiller le choix de l'utilisateur.
- Ou: mettre en avant une grande zone cliquable avec une indication.
Critères:
1.4. Lisibilité, 2.2. Densité Informationnelle, 4.1. Flexibilité
Description:
Les images qui annoncent du contenu sur le mobile sont intéressantes, mais prennent trop de place dans l'écran (testé sur iPhone 5S).
Il faut cliquer sur les boutons en bas du carrousel pour accéder aux autres informations.
Les boutons du carrousel sont trop petits pour que les utilisateurs cliquent dessus et ne cliquent pas par mégarde.
Recommandation:
Mettre les images plus petites.
Si la SSQ veut garder les images sur mobile, faire en sorte que l'utilisateur puisse changer les images en les "scrollant" avec les doigts et non avec des boutons dans le carrousel.
Critères:
1.1. Incitation, 1.2.2. Groupement/Distinction par le Format, 3.1. Actions Explicites, 6. Homogénéité/Cohérence
Description:
L'utilisateur a des choix de navigation et de liens pour accéder à d'autres pages. Le graphisme n'est pas cohérent par rapport à l'ensemble des autres boutons ou liens qui sont proposés.
Recommandation:
Proposer des hyperliens textes dans le même style graphique que les autres liens.
Diminuer la charge visuelle sur mobile de ces gros blocs.
Prioriser le contenu le plus important pour le mobile.
Critères:
1.1. Incitation, 3.2. Contrôle Utilisateur
Description:
La barre de barre de recherche se situe en bas avant, juste avant des images promotionnelles. L'utilisateur devrait être en mesure de disposer de cette fonctionnalité plus tôt dans la page.
Recommandation:
Afficher plus tôt dans la page l'outil de recherche afin que l'utilisateur puisse effectuer et accélérer ses recherches.
Critères:
2. Charge de travail, 2.2. Densité Informationnelle, 4.2. Prise en Compte de l'Expérience de l'Utilisateur
Description:
Le pied de page est trop important.
Recommandation:
Prioriser le contenu du pied de page, par rapport à ce que l'utilisateur a besoin sur mobile. Juste le pied de page prend plus que la hauteur d'un écran de téléphone intelligent.
Critères:
1.3. Feedback immédiat, 5.1. Protection Contre les Erreurs
Description:
L'utilisateur se sent tout à fait bien accompagné dans ce contexte d'utilisation et de navigation.
Critères:
1.3. Feedback immédiat, 3.2. Contrôle Utilisateur
Description:
L'utilisateur sait exactement où il est et où il s'en va. Le graphisme est clair et les objectifs de navigation sont clairs.
Critères:
3.2. Contrôle Utilisateur, 4.2. Prise en Compte de l'Expérience de l'Utilisateur, 6. Homogénéité/Cohérence
Description:
Lorsque l'utilisateur clique sur le menu "assurance", il se retrouve à l'extérieur du site sur lequel il naviguait. Une nouvelle fenêtre lui est ouverte. Il n'a pas de contrôle sur cet aspect.
Recommandation:
Idéalement faire en sorte d'avoir un site cohérent en tout point et garder l'utilisateur sur le site et dans la même page.
Critères:
2.1.2. Actions Minimales, 2.2. Densité Informationnelle
Description:
L'utilisateur sur mobile cherchera sans doute à avoir de l'information mais pas à remplir un formulaire de réclamation sur mobile, surtout pas au format PDF. Sauf si cet utilisateur est vraiment très mal pris.
De plus, les pdf sont très lourds est la bande passante au canada est assez onéreuse sur mobile.
Recommandation:
Afficher à l'utilisateur des informations pour qu'il puisse se renseigner.
Ne pas afficher la liste des pdf. Sinon lui permettre d'envoyer un lien par courriel pour qu'il puissent tranquillement remplir sont formulaires devant un écran d'ordinateur.
Critères:
4.2. Prise en Compte de l'Expérience de l'Utilisateur, 8. Compatibilité
Description:
Le certificat ne contient pas de clé publique, ce qui fait que les informations sont cryptées seulement pour leur réception. De plus, l'utilisation de MD5 pour l'authentification est problématique puisque MD5 possède plusieurs vulnérabilités prouvées.
Recommandation:
Obtenir un certificat de sécurité pour l'ensemble du site.
S'assurer que les performances du site lors de la navigation sur les ordinateurs grand public ne soient pas affectée.
Conclusion
À la suite de cette rapide évaluation, nous constatons que le site de la SSQ est graphiquement très harmonieux et cohérent dans l'ensemble. La courbe d'apprentissage n'est pas très élevée pour les nouveaux utilisateurs ou utilisateurs occasionnels.
L'attention demandée par les utilisateurs n'est pas très grande, la capacité de concentration n'est pas trop importante, car le site reste statique et facile à consulter. L'irritant majeur sur la page d'accueil est le carrousel et le nombre d'images promotionnelles important. La structure reste dans l'ensemble simple et relativement fluide en comparaison avec les autres sites.
Les points dits critiques ne sont pas urgents à régler, mais ils mériteraient un attention particulière lors d'une prochaine phase d'amélioration ou d'évolution du site.