Analyse de l ergonomie du site «adsl.free.fr» Selon les critères AFNOR (Scapin et Bastien) Introduction Free est un des fournisseurs d'accès Internet leader dans son domaine. À travers son site Web, la société présente ses différentes offres, ses produits, ses services, une assistance, etc. C'est un site assez conséquent et qui se doit d être accessible pour ses visiteurs et peut être futurs clients. À travers cette analyse, nous allons vérifier si son ergonomie est satisfaisante, si le site est à améliorer ou totalement à revoir. Cette analyse de l ergonomie se fera d après les critères proposés par Scapin et Bastien, disponibles sur le site www.ergoweb.ca On utilisera également des comparaisons avec d autres sites Web qui nous permettront de situer le niveau d efficacité du site Internet. 2007/2008 1/16
SOMMAIRE 1. Guidage... 3 1.1. Incitation... 3 1.2. Groupement/Distinctions entre items... 3 1.2.1. Groupement/Distinctions par la localisation... 3 1.2.2. Groupement/Distinctions par le format... 4 1.3. Feed back immédiat... 5 1.4. Lisibilité... 6 2. Charge de travail... 7 2.1. Brièveté... 7 2.1.1. Concision... 7 2.1.2. Actions minimales... 8 2.2. Densité informationnelle... 8 3. Contrôle explicite... 9 3.1. Actions explicites... 9 3.2. Contrôle utilisateur... 10 4. Adaptabilité... 10 4.1. Flexibilité... 10 4.2. Prise en compte de l'expérience de l'utilisateur... 11 5. Gestion des erreurs... 13 5.1. Protection contre les erreurs... 13 5.2. Qualité des messages... 13 5.3. Correction des erreurs... 13 6. Homogénéité/ Cohérence... 14 7. Signifiance des codes et dénominations... 14 8. Compatibilité... 15 9. Conclusion... 16 2007/2008 2/16
1. Guidage 1.1. Incitation Le site de Free guide bien l utilisateur lors de la saisie d informations. Par exemple, la page d inscription avec les champs de saisie limités pour les entrées de coordonnées bancaires est intéressante, les blocs séparés diminuent les actions de l utilisateur et lui permet de se repérer facilement. De plus, c est une façon de diminuer la programmation des contrôles d erreurs. Les champs obligatoires sont signalés par un astérisque rouge visible. Point négatif : le passage d un bloc à l autre ne se fait pas automatiquement. 1.2. Groupement/Distinctions entre items 1.2.1. Groupement/Distinctions par la localisation Les items sont correctement classés et facilement identifiables pour l utilisateur. Par exemple, dans le bandeau en haut de page, on distingue 3 parties : le menu avec la barre de menu utile aux abonnés (Compte, Assistance, etc.), en dessous, le menu est plus orienté sur le site (Recherche, Shopping, etc.), en bas, un moteur de recherche. 2007/2008 3/16
Cependant, le visiteur peut parfois être perturbé. Par exemple, la sous partie «l espace abonné» se mêle avec les blocs d'articles et l'utilisateur ne perçoit plus les différentes catégories d'informations. 1.2.2. Groupement/Distinctions par le format La page est composée de couleurs assez pâles (gris, bleu pâle, etc.) ce qui permet facilement, la mise en valeur des objets souhaités. Ici, les boutons de requête sont en rouge, ce qui permet de les distinguer d un coup d œil. 2007/2008 4/16
Le problème, est que l on retrouve les mêmes formes et les mêmes couleurs pour les puces de titres et cela peut prêter à confusion. Un exemple de plus mauvaise distinction par format : en bas de page du site www.linternaute.com se trouvent des liens vers des sites Web partenaire mal présentés. En effet, les liens sont présent 2 fois, mais de façon différente (une fois par logo et une fois textuelle). Il n y a pas vraiment d utilité, on utilise de l espace pour rien et l utilisateur est perturbé puisque les 2 liens sont présentés différemment les un à côté des autres. Mieux vaut choisir une seule présentation. 1.3. Feed back immédiat Lorsqu une page est longue à charger, l'utilisateur est informé du niveau de chargement de la page. Par exemple, l accès au Chat de Free est assez long et lors du chargement, on a une petite animation pour le chargement d un plug in Java. Mais, on peut encore améliorer la visualisation avec l affichage du pourcentage de chargement, ce qui donnerait une indication visuelle plus détaillée pour le visiteur. Amélioration possible => 2007/2008 5/16
Par contre pour les images, on a pas de retour par rapport au chargement, ce qui ne pose pas de problèmes pour une connexion ADSL, mais peut être désagréable pour les connections bas débit, on pourrait mettre du texte alternatif lors du chargement. Exemple d image sans texte alternatif : Exemple d amélioration trouvé sur www.musiquedepub.tv 1.4. Lisibilité Globalement, la charte graphique du site a bien été étudiée, puisqu elle permet une très bonne lisibilité des pages et offre un bon contraste pour l œil. Le fond des pages est sobre et pâle, ce qui permet de mettre en évidence tout le reste : texte, images, boutons, etc. On trouve aussi de bonnes astuces pour améliorer le confort de lecture. Ici, la différence de couleur de fond dans les lignes du tableau permet une lecture plus rapide et moins fatigante pour le visiteur. Ex. : Grille tarifaire pour les appels internationaux : 2007/2008 6/16
Ci dessous, sur la page d accueil du site lebonheurdanslepre.free.fr, la lisibilité est très mauvaise (pas de paragraphes, pas de ponctuation, coquilles, etc.) et donne une idée de l'importance du critère de lisibilité pour un site Web. Ici, on a une très mauvaise impression dès les premières secondes de visite... 2. Charge de travail 2.1. Brièveté 2.1.1. Concision Pas d exemple sur le site de Free, mais sur le site du fournisseur d accès Internet Alice, lors de l identification et lors de la saisie du login, un menu déroulant nous permet de terminer la saisie avec les différentes propositions possibles, ce qui permet à l'utilisateur de gagner du temp. 2007/2008 7/16
2.1.2. Actions minimales Le moteur de recherche de Free est un méta moteur qui rassemble les grands moteurs de recherche du Web tels que celui de Google, de Yahoo!, etc. Les boutons radio permettent de limiter les termes de saisie en cochant une préférence de résultats (pages Web, images, audio, vidéo). Un autre exemple d'actions minimales est que si l'utilisateur est un abonné et qu'il rentre ses identifiants, il restera connecté au système jusqu'à ce qu il se déconnecte de l'interface et aura accès à toutes les informations dont il a besoin sans s identifier à chaque fois. 2.2. Densité informationnelle Le travail sur la présentation de l information est bon, la densité informationnelle est correcte et ne noie pas le lecteur dans une flopée de texte. Les textes sont courts, mais clairs. 2007/2008 8/16
Exemple de mauvaise présentation des informations : sur le site de tutoriaux vidéo www.creativecow.net l'information est fatigante à lire, du fait que le visiteur se retrouve devant un gros bloc d'informations et où il doit utiliser le scroll sur une page qui pourrait en contenir une vingtaine. 3. Contrôle explicite 3.1. Actions explicites Les actions sont pour la plupart, claires et sans ambiguïtés. D'une part, on trouve des liens et des boutons explicites du genre «rechercher» ou «envoyer» et l'utilisateur sait exactement où il sera amené ou quelle action il va effectuer. D'autre part, on trouve des liens moins précis, mais qui ne gênent pas vraiment dans la navigation. Ici, la phrase «Découvrir les offres Freebox» pourrait directement servir de lien. 2007/2008 9/16
3.2. Contrôle utilisateur Sur le site de Free, lors de l'inscription, si l'utilisateur arrive à une certaine étape et change d avis, la seule façon de stopper le traitement est de changer de page, les informations ne seront pas gardées en mémoire. Cette pratique n est pas très propre On trouve un meilleur exemple sur le site de la SNCF. Ici, l utilisateur peut stopper le traitement et modifier ses souhaits. 4. Adaptabilité 4.1. Flexibilité Dans la messagerie de Free, on a un exemple de flexibilité de la boîte mail, mais l application que la société utilise n est pas la sienne, de plus elle n est pas très conviviale L utilisateur a des options d affichage, de tri du courrier, etc., et peut donc personnaliser sa messagerie. 2007/2008 10/16
En revanche, la flexibilité présente sur la messagerie Gmail de Google est une démonstration d'adaptabilité intéressante et plus chaleureuse que la précédente. 4.2. Prise en compte de l'expérience de l'utilisateur En général, tout est assez clair et il n y a pas de différence à faire pour les débutants ou les confirmés. Mais un exemple de mauvaise adaptabilité serait le site www.developpez.com, où il devrait y avoir des indices pour les différents niveaux d'expérience des visiteurs. En effet, rien n est classé et on s y perd vite, d autant plus que le nombre de documents est important. 2007/2008 11/16
Un bon exemple de prise en compte de l'expérience utilisateur se trouve sur le site www.lewebsimple.com Les tutoriaux sont classés par niveaux de difficultés avec des puces de différentes couleurs, ce qui permet au visiteur de se repérer d un simple coup d œil et d'avoir l'impression d'être pris en charge. Bien qu'intuitif, le site propose tout de même une page pour expliquer son fonctionnement. 2007/2008 12/16
5. Gestion des erreurs 5.1. Protection contre les erreurs La protection contre les erreurs est présente pour les formulaires et pour les champs de saisie d informations. Si l utilisateur tape des lettres dans le champ d entrée du numéro de téléphone, la saisie ne sera pas validée, idem si les champs obligatoires sont envoyés vides au système, etc. 5.2. Qualité des messages Les messages d erreurs s affichent lors d une mauvaise saisie, ils sont précis et la nature de l erreur est indiquée ainsi que l endroit où l erreur a été repérée. 5.3. Correction des erreurs En cas d erreur, si les entrées de l'utilisateur ne correspondent pas aux attentes ou si elles sont fausses, le site prévoit un système de correction d'erreurs. Les champs remplis correctement sont gardés en mémoire et on évite à l'utilisateur de tout retaper. 2007/2008 13/16
6. Homogénéité/ Cohérence L organisation de la page reste identique quelque soit la partie du site dans lequel le visiteur se trouve. On retrouve toujours la bannière en haut de page avec les menus et le moteur de recherche (vert), le menu sur la gauche (rouge), la bannière publicitaire sur la droite (jaune) et le contenu au centre (bleu). 7. Signifiance des codes et dénominations Free étant un fournisseur d'accès Internet, on trouve naturellement des termes assez compliqués et techniques sur son site Web. C'est pourquoi, une page est dédiée aux différentes dénominations. Le problème, est que cette page peut être difficile à trouver pour une personne qui ne connait pas le site. Hors ce genre de page devrait être accessible n importe où sur le site et à n importe quel moment pour le visiteur. 2007/2008 14/16
Certains sites utilisent des codes et dénominations qui ne sont pas forcément compréhensibles et où l on n a pas accès aux définitions. On retrouve souvent cela sur les sites spécialisés comme sur le site dédiés aux réseaux et aux télécommunications : www.reseaux telecoms.net. Si le visiteur n a pas un certain niveau dans le domaine, il est comme exclu. Exemple d articles : 8. Compatibilité En terme de compatibilité, Free répond bien aux attentes de l utilisateur. En effet, si le visiteur vient chercher des informations concernant les produits ou les différents services de la société, il les trouvera aisément sur le site. Pour les utilisateurs avertis, les documentations techniques sont bien détaillées et faciles d accès. En surfant sur le Web, on peut se retrouver devant une page en construction, ce qui est mauvais du point de vu de la compatibilité. En effet, si l'utilisateur arrive sur le site via les résultats d'un moteur de recherche, cela n'est pas signalé. L'utilisateur n'est donc pas face à ce qu'il a pu lire dans la description du site faite par le moteur de recherche. 2007/2008 15/16
9. Conclusion Dans l ensemble et en comparaison à d autres sites Web, celui de Free est bon du point de vue ergonomique, puisqu il respecte la plupart des critères préconisés par Scapin et Bastien. La société donne une image sobre et professionnelle d elle même, à travers sa stratégie de communication sur support Web, ce qui est primordial pour un fournisseur d accès Internet. L utilisateur s y retrouve plutôt facilement, la navigation est assez aisée et l'organisation des informations est correcte. On ne reproche que quelques défauts mineurs et faciles à corriger, ce qui fait du site de Free, un site plus que satisfaisant. Note globale : 18 / 20 2007/2008 16/16