Le projet
Dans le but de répondre à un appel d’offre, j’ai dû faire un audit de site à propos de :
Landing page
Clarté
La landing page ou la page d’accueil est claire dans l’objectif d’utilisation du site : c’est un annuaire en ligne destiné à trouver des coordonnées de particuliers ou de professionnels partout en France.
Les cookies présents permettent d’enregistrer automatiquement la saisie du lieu dans le champ “Où ?” pour faire gagner du temps au visiteur. Il suffit d’accepter les cookies pour bénéficier de la fonctionnalité.
Ce qui m’amène à un autre point positif : les cookies sont expliqués.
Les utilisateurs ne sont pas forcément toujours au fait de ce qui se cache derrière et je pense qu’il est important de renseigner la personne sur ces pratiques.
Il y a une séparation visuelle entre le haut de page servant principalement de moteur de recherches et la seconde partie qui explique la fonctionnalité du site.
Grâce à la carte de France dans la section suivante, l’utilisateur comprend qu’il s’agit d’un annuaire national.
Cela m’a personnellement induit en erreur car j’ai présupposé à tort qu’il s’agissait d’un annuaire Toulousain à cause de l’image de la place du Capitole en fond.
Axe d’amélioration proposé
Pour garder la cohérence entre le contraste contraire entre le bleu et l’orange, j’aurai changé la couleur des liens en orange (RGB(235, 176, 53), code hexadécimal #EBB035) au survol de la souris sur les départements.
Pourquoi ne pas également changer la couleur du département associé sur la carte ?
J’ai pensé que l’image de fond pouvait être aléatoire concernant les départements de France afin de ne pas perturber l’internaute sur la localisation géographique. Ce dernier ne vient pas forcément de Toulouse et pourrait penser qu’il ne s’agit que de cette ville.
Les cookies permettant de localiser l’internaute, l’image de fond pourrait changer selon la zone géographique ?
L’espacement entre le menu et le titre H1 est un petit peu rapproché selon moi :
J’ai ajouté un padding-top : 50px dans l’outil Devtool au niveau de .col.xs-12 pour aérer un peu la barre de navigation et le titre.
Bas de page
Il a été prouvé que l’utilisateur moyen a de plus en plus de mal à se concentrer et par conséquent le temps d’attention est inférieur à celui d’un poisson.
Source : ÉDITORIAL La concentration : du poisson rouge à Thomas Edison
Je trouve que cette partie contient beaucoup d’informations.
Il est beaucoup trop long à lire, condensé et le manque d’interactions “physique” ne donne pas envie de s’attarder dessus.
Le logo orange disparaît lors de la redimension de l’écran. Ce n’est pas gênant sur ce point concernant le mobile.
Cependant, dans les axes d’amélioration proposés suivant, j’ai créé une mise en page différente.
Axes d’amélioration proposés
Je pense que cette partie mériterait à elle seule une page dédiée plutôt qu’une section.
J’aurai plutôt cherché une solution qui mélange interactivité et ergonomie :
Ici j’ai utilisé Figma et le logiciel de photo Pexel (images libres de droits) pour redéfinir les catégories avec le code couleurs respectés.
Pour gagner en interactivité, j’ai créé des boutons cliquables toujours en respectant le code couleurs des pages qui donne directement sur les pages associées.
Pied de page
Sur ordinateur, le pied de page est assez moderne.Il manque également selon moi, le rappel du logo du site.
Néanmoins sur mobile, le contenu ne s’adapte pas comme il devrait :
L’arborescence ne s’aligne pas.
En proposition d’amélioration, j’ai créé un footer comme ceci :
Interactions
La barre de navigation est interactive (animation lors du passage de la souris) ce qui ajoute un côté satisfaisant à regarder.
De plus, elle permet à l’internaute de visuellement confirmer un accès à une page existante et qu’il peut intéragir.
Le menu est en position “fixed” et change d’aspect lorsque l’on dépasse le formulaire de recherche.
L’utilisateur peut donc effectuer sa recherche à tout moment.
Haut de page :
Au scroll de la souris :
Très user friendly 😉
Esthétisme
Le contraste visuel des deux parties de la page permet de mettre en valeur l’outil.
Le bleu et l’ orange sont deux couleurs opposées dans le cercle chromatique et fonctionnent car le contraste est si intense qu’elles se mettent en valeur l’une et l’autre.
Grâce à ces deux couleurs fortes, l’utilisateur identifie rapidement où sont placés les éléments et leurs utilités.
J’aime également que la barre de recherche se fondent avec le Capitole de manière délicate.
Axes d’amélioration proposés
Sur la page d’accueil (landing page), je trouve que les couleurs dominantes des pages suivantes ne transparaissent pas.
C’est pourquoi je pense que des petits éléments de couleurs peuvent indiquer la présence du code couleur à venir.
| #2FA1CA | #EBB035 | #03A56D |
En effet, lorsque j’ai visité le site la première fois, j’ai été un peu surprise qu’il n’y ait pas de continuité visuelle au niveau des pages. Exemple :
Page d’accueil :
L’annuaire pro (reste dans ce code couleur) :
La couleur or (#EBB035) a été introduite dans le bouton trouvé de la page de navigation dès la page d’accueil et donc cela ne m’a pas choqué visuellement de retrouver cette partie ici.
Annuaire particulier :
Ce vert m’a personnellement intriguée parce que je ne l’avais pas vu auparavant.
Par conséquent, j’ai cru un court instant que ce n’était pas le même site.
Peut-être aurait-il fallu trouver des indices (boutons, lien, section) faisant référence aux codes couleurs des pages ? Une box shadow sur les liens de navigation ?
Accessibilité
Les contrastes sont assez forts pour les personnes qui ont un handicap visuel (bleu =/= orange =/= vert).
Je remarque toutefois que l’image de fond n’a pas de texte alternatif. Un utilisateur qui a un handicap visuel se sert du navigateur pour savoir ce que représente l’image.
De plus, avec cette petite indication supplémentaire, l’algorithme de Google améliore le référencement du site.
Mobile First
Pensé pour le mobile avec la technique mobile first, le site vit en fonction de la taille de l’écran.
Responsive agréable à utiliser même sur téléphone.
On retrouvera également le contenu responsive sur les pages particuliers et pro.
Très compréhensible sur mobile.
Navigateurs
Je constate qu’il y a une bonne compatibilité entre les navigateurs web (navigateurs utilisés : Google Chrome, Firefox et Edge).
Je ne suis pas experte dans ce domaine, mais je sais que tester sur différents navigateurs permet de toucher plus d’internautes, améliore le référencement d’un site web et permet d’éviter certains bugs côté développement.
Fonctionnalités
Auto-complétions
L’outil propose de compléter le champ “Quoi, Qui ?” par un professionnel de santé aux alentours de la zone géographique indiqué dans le champ suivant “Où ?”.
Elle est rapide, la localisation fonctionne bien et petit + pour les blasons des départements.
La recherche fonctionne également avec les caractères spéciaux.
Une phrase apparaît en dessous et reprend les champs de recherche, explique clairement au visiteur qu’il n’y a aucun résultat quant aux valeurs rentrées.
Peut-être que l’idée d’entrer des caractères spéciaux dans les champs ne devrait pas être possible. En PHP, il existe la fonctionnalité : ctype_alnum. qui vérifie si la chaîne de caractères est alphanumérique.
Axes d’amélioration proposé
Ajouter un lien vers la page des articles pour éviter le vide : ( Lire plus … )
Section proposant les différentes catégories tel que c’est représenté pour la partie mobile ?
Ajouter des boutons vers les autres pages du site ?
Annuaire pro
Dans cette page, la barre de menu est changée par rapport à la page d’accueil.
On trouve un plugin Google Maps qui affiche selon la géolocalisation de l’internaute (par cookie accepté ou par le champ “Où ?” renseigné).
Au dessus se trouve le fil d’Ariane pour se localiser dans le site (Tel.fr > Annuaire Pro).
La liste des numéros utiles sur la droite permet de trouver rapidement la catégorie qui correspond à la recherche.
* Ici, j’ai cliqué sur l’icône ”Banque” dans la liste des numéros utiles.
La seconde partie de la page est dédiée à la lecture des articles proposés par Tel.fr.
Axes d’amélioration proposé
Pour que l’utilisateur puisse revenir à tout moment sur la page précédente, pourquoi ne pas ajouter un bouton “Retour” ?
L’utilisateur pourrait passer à côté du fil d’Ariane sans avoir le réflexe de cliquer dessus pour revenir à la page précédente.
Sur cette seconde partie de page faisant directement référence à la page des articles,
Pourquoi la section numéro utile et la section recherche par département sont-elles si éloignées ?
Je pense qu’il aurait été intéressant de créer une rubrique tel que : “A lire” ou “Nos articles”.
Voici ma proposition :
Proposition en version mobile :
Annuaire particulier
La structure du haut de page étant relativement identique à la page précédente, je me permets donc de passer à la partie du bas.
La deuxième partie de la page m’a perdue.
Je n’arrivais plus à identifier le type de contenu.
J’ai donc cherché dans le code source, je n’ai pas trouvé d’indice sur la nature de ce conteneur :
Axe d’amélioration proposé
J’aurai identifié par un titre ou comme la proposition précédente, donner un accès à la page soit des articles soit “Qui sommes nous ?”.
De plus, la perte d’espace entre les conteneurs “ Numéros utiles” et “Recherche par département” me semble trop importante.
En réglant le padding et en ajoutant la margin, j’obtiens ce résultat :
Mais l’écart entre les deux ne me convient toujours pas.
J’ai donc modifié le padding block pour rapprocher les deux sections.
Annuaire inversé
Cette partie est différente des deux dernières pages dans sa structure.
Plus ergonomique, elle comporte néanmoins des axes d’amélioration possibles.
J’ai saisi par curiosité mon numéro de téléphone. Il en ressort que le site nous propose un contenu publicitaire.
Je remarque également qu’ici, il existe la restriction automatique des caractères alphabétiques, ce qui n’a pas été le cas dans les champs de recherche précédent.
Le champ efface automatiquement les caractères qu’il n’accepte pas.
Axes d’amélioration proposés
L’affichage sur l’ordinateur se comportant plutôt bien, j’y apporterai plus une solution pour le mobile.
En effet l’affichage sur mobile pêche un peu selon moi.
Cela manque de cohérence avec le reste de l’application.
J’ai arrangé la page de manière à ce qu’elle soit aérée et claire avec les logos associés aux paragraphes dans le code couleur de la page.
J’ai laissé la barre de navigation pour accéder à n’importe quel moment à la recherche principale.
Articles
La page des articles me semblent encore une fois collés les uns aux autres, ce qui donne un aspect étouffant à la page.
Axes d’amélioration proposés
J’ai espacé le contenu des articles entre eux avec la commande “padding : 20px”;
Afin de donner envie de lire l’article à l’internaute, je propose également une description plus brève de ce que donne l’article.
Les descriptions des articles sont plus courtes, un bouton de la couleur de la section se trouve à côté de l’article pour inciter le visiteur à cliquer, un changement de page est possible avec les boutons créés en bas de page.
* La présentation ici est réutilisée du chapitre “Mobile First”
Page d’erreur
La page d’erreur est très moderne, elle utilise le code couleur de toutes les pages :
| #2FA1CA | #EBB035 | #03A56D |
Et fait directement référence à la pop culture.
Personnellement, j’adore et je ne trouve pas qu’il y ait une nécessité à la changer.
Sauf si bien évidemment, c’est la demande du client.
Connexion
En voyant l’icône ici, j’avais présumé qu’il s’agissait peut-être d’un moyen pour les visiteurs réguliers de s’informer sur les récents articles proposés par le site ou les mises à jour apportées par les différents nouveaux commerces qui pourraient s’implanter un peu partout en France.
J’ai très vite compris qu’il s’agissait d’un moyen d’identification pour les administrateurs de l’application.
Le menu connexion se trouve en bas de la barre d’outil dans le cadre d’un écran téléphone et ne disparaît pas dans le header quel que soit la dimension de l’écran.
Je pense que pour éviter que l’utilisateur ressente une incompréhension voire une frustration au vu de l’impossibilité de s’inscrire, je pense qu’il faudrait trouver un moyen d’isoler cette partie.
Comme proposé dans différentes pages précédentes, voici ce que j’imagine comme barre de navigation finale :
Le menu burger à côté du logo de la société, permettrait d’isoler la connexion.
En cas de redimension de l’écran, je propose que la connexion soit en bas de page comme sur l’ancien système :
Outils
J’ai utilisé pour cet audit différents outils :
Pexels – pexels.com
DevTools
Outil Pipette Couleur – Pipette Couleurs
Les navigateurs : Google Chrome, Firefox, Microsoft Edge
Conclusion
Je remercie de m’avoir donné l’opportunité de travailler sur un tel sujet et surtout de m’avoir permise de publier mon travail ici ❤️
Encore un peu de temps ? 😊
Visitez les autres pages :
Cindy Justes 