Table des matières

1.     Rappel de la demande .............................................................................
27 conseils pratiques en ergonomie Web




Préambule
Adviso est fier de vous présenter son guide pratique en ergonomie Web...
27 conseils pratiques en ergonomie Web




Table des matières

1.     Introduction...........................................
27 conseils pratiques en ergonomie Web




1.       Introduction

Le but de ce guide est de présenter, d’une part, quelque...
25 conseils pratiques en ergonomie




2.2.         Évaluation de l’ergonomie Web

Il existe plusieurs méthodes pour évalu...
25 conseils pratiques en ergonomie




 iii. Liens
        Cet axe concerne les liens présentés de manière textuelle dans ...
25 conseils pratiques en ergonomie




2.3.     Bénéfices et liens avec les autres disciplines

La majorité des grandes en...
25 conseils pratiques en ergonomie




3.       27 conseils pratiques en ergonomie
Notons que les exemples choisis ici n’i...
25 conseils pratiques en ergonomie




2. Présenter des exemples de contenus récents
EXPLICATION
                         ...
25 conseils pratiques en ergonomie




3. Orienter la page d’accueil sur les options ou tâches principales
EXPLICATION
   ...
25 conseils pratiques en ergonomie




4. Ne pas surcharger la page d’accueil sans raison
EXPLICATION
                    ...
25 conseils pratiques en ergonomie




3.2.     Menus

5. Suivre les standards du Web pour les menus.
EXPLICATION
        ...
25 conseils pratiques en ergonomie




6. Le menu ne doit pas dépasser la première page de défilement
EXPLICATION
        ...
25 conseils pratiques en ergonomie




7. Créer un menu clair
EXPLICATION
                                                ...
25 conseils pratiques en ergonomie




8. Mettre en évidence les éléments cliquables dans le menu
EXPLICATION
            ...
25 conseils pratiques en ergonomie




3.3.     Liens

9. Suivre les standards du web pour les liens textuels.
EXPLICATION...
25 conseils pratiques en ergonomie




10. Les titres des pages et les liens doivent être logiques
EXPLICATION
           ...
25 conseils pratiques en ergonomie




11. La présentation des liens doit être en rapport avec ce qu’ils pointent
EXPLICAT...
25 conseils pratiques en ergonomie




12. Identifier les liens sortants
EXPLICATION
                                     ...
25 conseils pratiques en ergonomie




3.4.     Navigation & orientation

13. Présenter la position courante de l’utilisat...
25 conseils pratiques en ergonomie




14. Le retour à la page d’accueil doit être simple
EXPLICATION
                    ...
25 conseils pratiques en ergonomie




15. Avoir des sections d’aide à la navigation
EXPLICATION
                         ...
25 conseils pratiques en ergonomie




16. Éviter d’utiliser trop de « pop-ups »
EXPLICATION                              ...
25 conseils pratiques en ergonomie




17. Le design du site doit être constant tout au long de la visite
EXPLICATION     ...
Rapport d’analyse & recommandations – Étude de visibilité du contenu




3.5.     Aspect visuel et lisibilité

18. Permett...
Rapport d’analyse & recommandations – Étude de visibilité du contenu




19. Limiter la longueur des lignes de texte
EXPLI...
Rapport d’analyse & recommandations – Étude de visibilité du contenu




20. Un contraste fort maximise la lisibilité
EXPL...
Rapport d’analyse & recommandations – Étude de visibilité du contenu




21. Éviter les animations superflues
EXPLICATION ...
Rapport d’analyse & recommandations – Étude de visibilité du contenu




22. Éviter l’utilisation des cadres et offrir une...
Rapport d’analyse & recommandations – Étude de visibilité du contenu




23. Ajouter un favicone
EXPLICATION
             ...
Rapport d’analyse & recommandations – Étude de visibilité du contenu




3.6.     Gestion des erreurs

24. Attention à l’u...
Rapport d’analyse & recommandations – Étude de visibilité du contenu




25. Avoir une page d’erreur 404 personnalisée
EXP...
Rapport d’analyse & recommandations – Étude de visibilité du contenu




26. Gérer les erreurs possibles dans les formulai...
Rapport d’analyse & recommandations – Étude de visibilité du contenu




27. S’assurer que le site est multiplateforme
EXP...
Rapport d’analyse & recommandations – Étude de visibilité du contenu




3.7.     Conclusion & Remerciement

Nous espérons...
Prochain SlideShare
Chargement dans…5
×

27 conseils pratiques en ergonomie Web

19 087 vues

Publié le

Téléchargez la présentation: www.adviso.ca/27-conseils-pratiques-en-ergonomie.html

Un guide pratique à l’intention des gestionnaires.
Le but de ce guide est de présenter, d’une part, quelques notions de bases sur l’ergonomie et son impact dans un développement de site Internet, et d’autre part, de fournir un ensemble de règles à prendre en compte lors de la création ou la refonte d’un site Web. Notons que les règles présentées ici sont générales, elles ne peuvent servir que de base à une évaluation plus complète qui devra prendre en considération le contexte particulier ainsi que les utilisateurs cibles de chaque projet.

Les critères présentés servent à illustrer la mise en œuvre de l’ergonomie dans un développement de site Internet et ils pourront, de plus, permettre au lecteur d’analyser succinctement son site afin d’avoir une idée générale de sa convivialité.

La première partie de ce document présente donc un aperçu de ce qu’est l’ergonomie et ses applications. La seconde présente la liste de 27 critères illustrés par différents sites couvrant des besoins variés tels la vente en ligne, des sites corporatifs, des sites informationnels, etc.

Par Thomas Tixier, Jean-François Vigeant et Jean-François Renaud.

Publié dans : Design
0 commentaire
49 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
19 087
Sur SlideShare
0
Issues des intégrations
0
Intégrations
847
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
49
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

27 conseils pratiques en ergonomie Web

  1. 1. Table des matières 1. Rappel de la demande .................................................................................................... Error! Bookmark not defined. 2. Méthodologie .................................................................................................................. Error! Bookmark not defined. 2.1. Phase 1 – Échantillonnage et Grille d’analyse .......................................................... Error! Bookmark not defined. 2.2. Phase 2 – Évaluation ................................................................................................ Error! Bookmark not defined. 2.3. Phase 3 – Analyse et Recommandations ................................................................. Error! Bookmark not defined. 3. Constats suite à la visibilité du contenu.......................................................................... Error! Bookmark not defined. 3.1. Moteur de recherche interne .................................................................................... Error! Bookmark not defined. 3.2. Navigation et accomplissement des tâches ............................................................. Error! Bookmark not defined. 4. Analyse des forces et faiblesses de la conception des sites .......................................... Error! Bookmark not defined. 27 conseils 4.1. Présentation de l’analyse ......................................................................................... Error! Bookmark not defined. 4.2. Engins de recherche................................................................................................. Error! Bookmark not defined. 5. pratiques en 4.3. Navigation ................................................................................................................ Error! Bookmark not defined. Sommaire des meilleures pratiques de l’industrie .......................................................... Error! Bookmark not defined. ergonomie Web 5.1. Généralités sur les méthodes de développement .................................................... Error! Bookmark not defined. 5.2. Engins de recherche.................................................................................................des gestionnaires defined. Un guide pratique à l’intention Error! Bookmark not 5.3. Navigation ................................................................................................................ Error! Bookmark not defined. 6. Recommandations quant aux critères de financement20 mars 2008 Le .................................................. Error! Bookmark not defined. Version 1.0 ANNEXE 1 – Étude des moteurs de recherché internes Par ANNEXE 2 – Étude de la navigation et accomplissement des tâches - Jean-François Vigeant - Jean-François Renaud Thomas Tixier Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 1
  2. 2. 27 conseils pratiques en ergonomie Web Préambule Adviso est fier de vous présenter son guide pratique en ergonomie Web réunissant 27 conseils pratiques qui contribueront à augmenter le succès de vos initiatives Web. Investir en ergonomie Web, c’est investir directement dans la performance de votre site, c’est-à-dire sa capacité à atteindre les objectifs pour lesquels il a été conçu. Agissant en complément avec les stratégies d’acquisition de trafic et de fidélisation client, l’ergonomie Web s’affaire à augmenter le nombre de visiteurs qui passent à l’action sur votre site. Ce guide est directement en ligne avec la mission d’Adviso : maximiser le retour sur investissement Internet de nos clients en: • développant et déployant des stratégies Internet créatives, • les soutenants dans l’appropriation de l’innovation et de nouvelles façons de faire. À propos d’Adviso Adviso est une firme d’experts en stratégie et marketing Internet. Depuis plus de 5 ans, nous aidons nos clients à optimiser leur(s) site(s) Internet et leurs opérations de marketing Internet par des idées innovatrices et créatives. Celles-ci se fondent entre autres sur un travail continu de veille et de recherche des meilleures pratiques sur Internet. Ainsi, Adviso compte parmi ses clients de nombreuses organisations prestigieuses telles Quebecor, Rogers/Fido, Téléglobe, Hydro-Québec, Patrimoine Canadien, Québec Loisirs, Cascades Groupe Tissu et Bell Canada. Nous avons réalisé pour ces clients de nombreuses interventions afin d’améliorer leur stratégie sur Internet. Adviso accompagne plus d’une centaine de clients actifs et a réalisé à ce jour plus de 300 projets Internet. Vous pouvez rejoindre les conseillers d’Adviso : www.adviso.ca 514-598-1881 x330 conseil@adviso.ca Les auteurs Jean-François Vigeant et Thomas Tixier sont des ergonomes Web d’expérience chez Adviso et c’est leur expertise qui a permis la création de ce document. Jean-François Renaud est un associé d’Adviso qui a fourni son expérience et son support au projet. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 2
  3. 3. 27 conseils pratiques en ergonomie Web Table des matières 1. Introduction..................................................................................................................................................................... 4 2. Un mot sur l’ergonomie .................................................................................................................................................. 4 2.1. Définition et usage .................................................................................................................................................... 4 2.2. Évaluation de l’ergonomie Web ................................................................................................................................ 5 2.3. Bénéfices et liens avec les autres disciplines........................................................................................................... 7 3. 27 conseils pratiques en ergonomie ............................................................................................................................... 8 3.1. Page d’accueil .......................................................................................................................................................... 8 3.2. Menus..................................................................................................................................................................... 12 3.3. Liens ....................................................................................................................................................................... 16 3.4. Navigation & orientation ......................................................................................................................................... 20 3.5. Aspect visuel et lisibilité ......................................................................................................................................... 25 3.6. Gestion des erreurs ................................................................................................................................................ 31 Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 3
  4. 4. 27 conseils pratiques en ergonomie Web 1. Introduction Le but de ce guide est de présenter, d’une part, quelques notions de bases sur l’ergonomie et son impact dans un développement de site Internet, et d’autre part, de fournir un ensemble de règles à prendre en compte lors de la création d’un site Web. Notons que les règles présentées ici sont générales, elles ne peuvent servir que de base à une évaluation plus complète qui devra prendre en considération le contexte particulier ainsi que les utilisateurs cibles de chaque projet. Les critères présentés servent à illustrer la mise en œuvre de l’ergonomie dans un développement de site Internet et ils pourront, de plus, permettre au lecteur d’analyser succinctement son site afin d’avoir une idée générale de sa convivialité. La première partie de ce document présente donc un aperçu de ce qu’est l’ergonomie et ses applications. La seconde présente la liste de 27 critères illustrés par différents sites couvrant des besoins variés tels la vente en ligne, des sites corporatifs, des sites informationnels, etc. 2. Un mot sur l’ergonomie 2.1. Définition et usage L’ergonomie et, plus récemment, l’ergonomie Web, ne sont pas des domaines nouveaux et pourtant, à la vue de certains sites Internet c’est un sujet qui mérite grandement d’être abordé. Le concept d’ergonomie appliqué au monde du travail est en fait apparu à la fin des années 1940. Son application à des industries traditionnelles s’est généralisée très rapidement grâce à son impact immédiat sur l’augmentation de la productivité des employés. Il fut ensuite adapté à l’informatique avec la démocratisation, tout d’abord des ordinateurs de bureau et, plus tard, de l’Internet. Malgré cela, l’ergonomie Web, bien que capable d’apporter des bénéfices comparables à l’ergonomie de postes de travail, reste encore un domaine méconnu et on trouve encore, à l’heure actuelle, bon nombres de sites dans lesquels il est tout simplement impossible d’accomplir de simples tâches. De tels problèmes peuvent avoir des conséquences drastiques lorsque, par exemple, des utilisateurs n’arrivent pas à atteindre les informations dont ils ont besoin pour compléter des achats en ligne ou contacter votre compagnie. Ceci est d’autant plus incompréhensible qu’à l’heure actuelle, la mise en place d’études ergonomiques lors de la création ou de la refonte de sites Internet est de plus en plus simple. Lorsqu’on parle d’ergonomie on parle aussi, souvent, d’utilisabilité. L’utilisabilité est la notion qui permet de définir la facilité d’utilisation d’une interface pour un groupe d’utilisateurs particuliers, dans un contexte d’utilisation particulier. Son évaluation se base sur trois aspects ; l’efficacité, c'est-à-dire la possibilité par l’utilisateur d’atteindre ses buts, l’efficience, qui prend en compte les efforts nécessaires à l’atteinte de ces buts et la satisfaction. Notons que l’ensemble de ces critères ont un impact important sur la fidélisation des visiteurs. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 4
  5. 5. 25 conseils pratiques en ergonomie 2.2. Évaluation de l’ergonomie Web Il existe plusieurs méthodes pour évaluer l’utilisabilité d’un site. La première consiste à effectuer des tests avec des utilisateurs type et d’observer leurs réactions par rapport au système. Ceci peut se faire au cours des différentes étapes d’un développement, que ce soit par l’évaluation de maquettes papiers ou de prototypes plus ou moins avancés. Il existe également une approche d’évaluation en fonction de listes de critères ergonomiques, ce sont des évaluations heuristiques. Plusieurs chercheurs tels Nielsen1, Bastien et Scapin2 ont proposé des listes de critères basées sur des études cognitives. De manière générale, ces critères concernent les différents aspects nécessaires aux utilisateurs pour réussir leurs tâches. C'est-à-dire, par exemple, la nécessité de disposer d’un guidage suffisant, d’avoir une charge de travail minimale, de pouvoir comprendre et lire les termes utilisés, etc. En se basant sur ces concepts de haut niveau il est ensuite possible d’extraire des recommandations concrètes directement applicables au design de sites Internet. Les 27 conseils que nous présentons dans ce document en sont un exemple. Nous les avons regroupés selon six axes dans lesquels on trouve régulièrement des problèmes d’utilisabilité. Comme vous le verrez par la suite, l’évaluation de ces critères est relativement simple car ils sont tous très explicites. Voici les six axes que nous allons aborder : i. Page d’accueil Malgré l’avènement des moteurs de recherches, c’est encore à l’heure actuelle la porte d’entrée principale des sites Internet. C’est donc une des pages les plus importantes qui va souvent déterminer le succès ou l’échec d’une visite. C’est pour cela qu’il est recommandé de mettre suffisamment d’efforts pour lui garantir une bonne utilisabilité. ii. Menus Cet axe permet d’évaluer l’ergonomie des menus de navigation. Ces derniers ont également un impact important sur la facilité d’accès au contenu. Si les utilisateurs ne comprennent pas ou ne voient pas clairement les sections auxquelles ils ont accès, il est évident que la navigation sera pénalisée. 1 Nielsen, J. (1994). Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.), Usability Inspection Methods, John Wiley & Sons, New York, NY 2 Bastien, J.M.C., Scapin, D. (1993) Ergonomic Criteria for the Evaluation of Human-Computer interfaces. Institut National de recherche en informatique et en automatique, France Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 5
  6. 6. 25 conseils pratiques en ergonomie iii. Liens Cet axe concerne les liens présentés de manière textuelle dans les pages Internet. Il peut s’agir de liens contextuels ou même de menus secondaires. Ces liens permettent aux utilisateurs de se faire une idée sur la valeur des informations d’une page courante ainsi que sur l’ensemble des destinations possibles depuis cette page. Ils influencent beaucoup la navigation interne à une section. iv. Orientation dans le site Cet axe concerne des aspects plus généraux de la navigation et a pour but d’évaluer la qualité des guides d’orientations fournis aux utilisateurs. En plus des menus et des liens, il y a d’autres paramètres à prendre en compte pour évaluer la facilité de navigation. Dans cet axe, nous aborderons les critères de constance d’interface, d’identification de la position courante, d’abus de pop-up, et de rubriques d’aide. v. Aspects visuels et lisibilité Cet axe concerne la lisibilité des informations présentes sur le site. Les axes précédents concernaient l’accès à l’information, mais il est évident que la présentation de ces informations a également un rôle important dans l’utilisabilité d’un site. Les utilisateurs doivent être capables de lire facilement et d’identifier visuellement les différents composants d’une page web. vi. Gestion des erreurs Le dernier aspect abordé dans ce guide concerne la gestion des erreurs. Un site qui présente des erreurs perdra énormément en termes de fréquentation et de crédibilité. De plus, un des points très important de cet axe concerne la récupération et la prévention d’erreurs lors du remplissage de formulaire. Ceci est en effet un point clé de tout site voulant interagir avec des utilisateurs que se soit pour des inscriptions à des listes d’envois ou pour le remplissage d’une commande en ligne. Ces critères peuvent donc nous permettre d’intervenir pour l’évaluation d’un site existant mais peuvent également servir de guide de conception pour la création de nouveaux sites. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 6
  7. 7. 25 conseils pratiques en ergonomie 2.3. Bénéfices et liens avec les autres disciplines La majorité des grandes entreprises investissent en ergonomie car ils y connaissent habituellement un retour très concret. Investir en ergonomie, c’est investir en satisfaction, en facilité d’accès à des produits et à des contenus qui faciliteront la prise de décision. Améliorer l’ergonomie, c’est faciliter une tâche pour des centaines ou des milliers de personnes qui doivent l’accomplir. Une entreprise a beau avoir d’excellents produits ou services, si ceux-ci ne sont pas identifiables facilement sur leur site, celui-ci ne les supportera d’aucune façon. Investir en ergonomie c’est également éviter des erreurs en amont, et ainsi minimiser les frais liés à leur correction sur le produit fini. De plus, il existe un réel coût à enligner les utilisateurs vers une fausse piste : les visiteurs et ventes perdues, l’insatisfaction éprouvée par les utilisateurs, les coûts de re-conception, pour ne nommer que ceux-là. Par contre, les améliorations sont nombreuses lorsqu’on investit en ergonomie Web : o Meilleur productivité dans les services en ligne et intranets ou extranets ; o Diminution du nombre d’erreurs et donc des coûts de gestion ; o Augmentation de la conversion (ventes, abonnements, opportunités) ; o Diminution des besoins en formation ; o Diminution des besoins en support au site (téléphonique et par courriel) ; o Moins de réajustements nécessaires à la fin du développement. Il est important de comprendre que l’ergonomie fonctionne de pair avec les autres disciplines Web. Par exemple, en amont dans un projet de planification stratégique, des approches telles l’étude des personas et l’analyse comparative ou le benchmark viennent compléter la planification en permettant d’identifier des axes stratégiques qui offrent une réelle utilité aux utilisateurs tout en supportant les objectifs d’affaires d’une organisation. Les maquettes et l’arborescence complètent ensuite la phase de conception. L’ergonomie Web travaille également de pair avec les tactiques permettant l’acquisition de clients potentiel tels le référencement dans les moteurs de recherche ou les campagnes de coûts par clic. Une fois sur le site, c’est le rôle de l’ergonomie de faciliter l’action de l’utilisateur vers la tâche qu’il doit accomplir. Les pages de destination ou landing pages sont un exemple éloquent du travail complémentaire du référencement et de l’ergonomie Web. Actuellement, c’est ici que les efforts ergonomiques ont le plus d’impact sur le taux de conversion d’un site. L’ergonomie complémente également la mesure de performance pour les évaluations de sites web. La mesure sert à identifier les endroits qui ne performent pas et l’ergonomie permet d’apporter des correctifs aux pages responsables. Une fois les modifications ergonomiques misent en place, la mesure de performance permet de suivre leur impact sur le site et de procéder à d’éventuelles optimisations. Place aux 27 conseils pratiques. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 7
  8. 8. 25 conseils pratiques en ergonomie 3. 27 conseils pratiques en ergonomie Notons que les exemples choisis ici n’illustrent que le critère pour lequel ils sont présentés. Cela ne représente donc pas la totalité d’un site dans son ensemble. Ainsi, un site illustrant une mauvaise pratique peut être également utilisé plus tard pour illustrer une bonne pratique sur un autre critère. 3.1. Page d’accueil 1. Choisir et afficher un tagline explicite EXPLICATION BONNE S PRATIQUES Le tagline doit présenter : • La mission de la compagnie si son nom et son logo ne sont pas assez explicites, ou, si l’image de marque de la compagnie est méconnue du public. • La mission du site ou la valeur ajoutée du site, si le nom de la Le tagline de cadosphère.ca présente le but du site qui est de vendre compagnie est assez clair. des cadeaux en ligne. Toutefois, il pourrait être amélioré en précisant que les cadeaux vendus sont des cadeaux écologiques et Le tagline doit être une courte phrase située sous le logo ou responsables. suffisamment visible dans la page. Cette phrase peut être complétée par un texte de deux ou trois lignes présenté de façon suffisamment visible sur la page d’accueil. Le tagline et le nom de domaine représentent bien la mission du site. MAUVAISE PRATIQUE Le site Forca.ca ne dispose pas de tagline ce qui lui serait utile pour inciter les utilisateurs cibles à explorer le site plus en profondeur. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 8
  9. 9. 25 conseils pratiques en ergonomie 2. Présenter des exemples de contenus récents EXPLICATION BONNE PRATIQUE Il est très important de présenter des contenus récents sur la page d’accueil. Cela peut être fait par la présentation de nouvelles, de nouveaux produits et/ou services, de promotions récentes, etc. Ceci a pour but d’une part, de présenter le contenu disponible sur le site de manière concrète. D’autre part, cela démontre aux utilisateurs que la compagnie est active. Pour le référencement, cela a l’avantage d’offrir du contenu frais aux moteurs de recherche. Parmi les informations que l’on trouve sur la page d’accueil de Futureshop.ca il y a, entre autres, les soldes de la semaine. Ceci permet de présenter des produits récents, disponibles chez Futureshop. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 9
  10. 10. 25 conseils pratiques en ergonomie 3. Orienter la page d’accueil sur les options ou tâches principales EXPLICATION BONNE S PRATIQUES La page d’accueil étant la vitrine d’un site il est important que les utilisateurs puissent accéder facilement à toutes les sections principales ou à toutes les principales tâches qu’ils pourront réaliser. Pour cela il est donc important de présenter les principales sections, ce qui peut être fait également par l’intermédiaire du point précédent, et de fournir des liens explicites vers les tâches. Sur la page d’accueil de la bibliothèque et des archives nationales du Québec, les tâches de recherche sont présentées en premier. Sur le site d’aircanada.ca, le moteur de recherche, qui correspond à la tâche principale des utilisateurs, est également mis en avant sur la page d’accueil. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 10
  11. 11. 25 conseils pratiques en ergonomie 4. Ne pas surcharger la page d’accueil sans raison EXPLICATION BONNE PRATIQUE Tout en respectant les deux règles précédentes, il faut également minimiser les informations fournies. La page d’accueil est une vitrine et doit pouvoir être parcourue rapidement pour pouvoir diriger l’utilisateur vers la tâche qu’il désire accomplir. Il faut donc : • Éviter le défilement vertical superflu. La quantité de défilement acceptable peut varier d’un site à l’autre. Par exemple, des sites informationnels pourront se permettre plus de liberté à ce sujet. • Minimiser le contenu textuel. Comme les utilisateurs veulent généralement accéder rapidement aux informations, ce n’est pas l’endroit idéal pour présenter de longs blocs de texte. La page d’accueil de Telus mobilité est courte et sans texte superflu. MAUVAISE PRATIQUE La page d’accueil du site ecolo-econo.org contient trop de texte et nécessite trop de défilement vertical. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 11
  12. 12. 25 conseils pratiques en ergonomie 3.2. Menus 5. Suivre les standards du Web pour les menus. EXPLICATION BONNE PRATIQUE Pour faciliter l’utilisation d’un site, il est important de respecter les conventions visant à réduire la charge de travail du visiteur. L’application des points suivants peut varier en fonction du site. • Pour optimiser la navigation, le menu principal d’un site devrait contenir entre 4 et 7 éléments. • Le positionnement standard du menu principal est, soit en haut de page, soit en colonne à gauche. • Les menus secondaires doivent être présentés soit dans la colonne de gauche, soit en dessous du menu primaire si celui-ci est placé en haut de l’écran. Les menus principaux et secondaires d’Archambault.ca respectent les • Les menus secondaires doivent être facilement identifiables standards du web. MAUVAISE PRATIQUE Les menus du site Alphacasting.ca sont situés en bas de page ce qui est très nuisible à la navigation. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 12
  13. 13. 25 conseils pratiques en ergonomie 6. Le menu ne doit pas dépasser la première page de défilement EXPLICATION BONNE PRATIQUE Les éléments des menus qui dépassent de la première page sont très rarement accédés par les utilisateurs. Ceux-ci ont tendance à cliquer sur ce qu’ils voient sur la première page. Les menus secondaires de la rubrique « Télévision » de radiocanada.ca ne dépassent pas de la première page. MAUVAISE PRATIQUE Les menus du site divertissementscorporatifs.ca sont tous présentés en une seule fois et nécessitent énormément de défilement pour être lus. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 13
  14. 14. 25 conseils pratiques en ergonomie 7. Créer un menu clair EXPLICATION BONNE PRATIQUE Il est important que chaque section du menu principal ait une signification bien distincte des autres. Il faut donc créer un menu avec une taxonomie simple. Pour obtenir une taxonomie simple, la technique du tri de cartes peut être utilisée. Cette technique permet d’impliquer les utilisateurs dans la définition des sections du site et dans la répartition des contenus dans chaque section. Sur le site d’adviso.ca la taxonomie ne prête pas à confusion. Chaque Rubrique possède un titre explicite. MAUVAISE PRATIQUE Sur le site Tremblant.ca, certaines rubriques sont peu claires. Par exemple, la différence entre « Offres et forfaits » et « Billets et Passes » n’est pas évidente. De plus, les libellés des sections « Quoi faire » et « Village » ne sont pas suffisamment explicites. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 14
  15. 15. 25 conseils pratiques en ergonomie 8. Mettre en évidence les éléments cliquables dans le menu EXPLICATION BONNE PRATIQUE Afin de faciliter la navigation, il faut que les utilisateurs puissent reconnaître facilement ce qui est cliquable ou non. Une façon d’atteindre cet objectif est de surligner ou souligner les objets lorsque le pointeur de la souris passe au-dessus. Les éléments cliquables du menu de la Baie sont facilement identifiables. MAUVAISE PRATIQUE Les éléments du menu d’amazon.fr ne sont pas surlignés si la souris passe au-dessus. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 15
  16. 16. 25 conseils pratiques en ergonomie 3.3. Liens 9. Suivre les standards du web pour les liens textuels. EXPLICATION BONNE PRATIQUE Les points présentés ici peuvent être sujets à des adaptations en fonction du type de sites évalués. Toutefois, de manière générale, respecter ces critères tend à améliorer la clarté des pages web. • Un lien textuel devrait être souligné. • Il faut utiliser une seule couleur pour tous les liens textuels du site (dans le corps du texte). Pour maximiser la reconnaissance des liens par les utilisateurs il est même préférable d’utiliser des teintes de bleus qui rappellent la couleur par défaut utilisée par les navigateurs. • Il faut également identifier les liens déjà visités en changeant leur Sur amazon.fr, les liens textuels sont facilement identifiables et les couleur. liens visités changent de couleurs (encerclés sur l’image). • Les libellés des liens doivent inciter à l’action et avoir une signification pertinente pour les utilisateurs. Il faut donc éviter les MAUVAISE PRATIQUE liens « cliquez ici ». • Afin de ne pas perturber les utilisateurs, il faut éviter d’utiliser des caractères gras ou du texte souligné pour des éléments qui ne sont pas des liens. À la fin des articles de Madame.ca se trouve un ensemble de liens. Aucun n’est souligné et ils ont tous des mises en forme différentes. En dessous de « Pour en savoir plus » les liens sont noirs et le premier est en caractère gras. Dans la boîte « Autre liens », les textes en caractères gras ne sont pas des liens. De plus les caractères gras sont également utilisés dans le corps des articles pour du texte neutre. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 16
  17. 17. 25 conseils pratiques en ergonomie 10. Les titres des pages et les liens doivent être logiques EXPLICATION BONNE PRATIQUE Les libellés des liens doivent, dans la mesure du possible, correspondre aux titres des pages vers lesquels ils pointent. Ceci permet aux utilisateurs de se repérer plus facilement lors de leur navigation. De plus, il ne faut pas que plusieurs pages ou plusieurs objets soient identifiés par de multiples libellés. Les liens portants les mêmes libellés ne doivent pas pointer vers des pages différentes. Sur le site d’Hydro Québec, lorsqu’on clique sur un lien, on arrive sur une page qui correspond à nos attentes. MAUVAISE PRATIQUE Sur le site msn.ca, le lien « Téléphone à 0$ » nous envoie sur une page où il n’y a qu’un téléphone à 179,95$. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 17
  18. 18. 25 conseils pratiques en ergonomie 11. La présentation des liens doit être en rapport avec ce qu’ils pointent EXPLICATION BONNE PRATIQUE Le libellé et/ou l’icône de chaque lien doit être choisi judicieusement en fonction des objets ou pages vers lesquels ils pointent. Il faut éviter d’utiliser des concepts qui sortent trop de l’ordinaire pour ne pas perturber les utilisateurs. Il faut également éviter d’utiliser des images sans texte associé (que ce soit une légende juxtaposée à l’image ou au minimum une description textuelle dans les balises ALT.) Sur yahoo.ca, les icônes choisies sont assez pertinents. MAUVAISE PRATIQUE Sur le site d’electricpulp.com les images choisies pour le menu de droite ne représente pas vraiment le contenu vers lequel ils pointent. L’icône RSS en bas à gauche n’est pas un lien vers le fil RSS de la compagnie. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 18
  19. 19. 25 conseils pratiques en ergonomie 12. Identifier les liens sortants EXPLICATION BONNE PRATIQUE Dans la mesure du possible il faut permettre à l’utilisateur de distinguer les liens internes au site et les liens qui pointent vers des pages externes. Ceci peut être fait par l’utilisation d’icônes de plus en plus répandus (voir bonne pratique ci contre) ou le choix de couleurs différentes. Il peut s’avérer utile d’expliquer la signification de l’icône ou des couleurs choisies dans les pages où cela est nécessaire. Il faut également informer l’utilisateur lorsqu’un lien pointe vers un document non HTML Sur Wikipédia, d’une part les liens sortants sont placés dans une (word, pdf, etc.). De plus, dans ce cas, si un plug-in est nécessaire pour rubrique spéciale (Liens externes) et d’autre part, ils utilisent une visualiser l’objet pointé par un lien il faut informer l’utilisateur avant qu’il icône explicite. ne clique sur le lien. MAUVAISE PRATIQUE Sur le site d’ibm.ca, en cliquant sur le lien entouré, on arrive sur un autre site, lenovo.com. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 19
  20. 20. 25 conseils pratiques en ergonomie 3.4. Navigation & orientation 13. Présenter la position courante de l’utilisateur EXPLICATION BONNE PRATIQUE L’utilisateur doit toujours pouvoir identifier sa position courante. Ceci l’aide à mieux comprendre le contenu de la page dans laquelle il est et facilite son exploration du site. Pour l’aider il faut : • Utiliser un fil d’Ariane • Avoir un titre de section visible sur chaque page • Mettre en évidence la position courante dans le menu de navigation Le site Fanatique de « Branchez-vous » indice clairement la position • Avoir des URL simples. courante dans le menu. MAUVAISE PRATIQUE Le site chapters.indigo.ca présente plusieurs problèmes. Il n’y a pas de fil d’Ariane, le titre de la page « Littérature » ne correspond à aucune sous-section du site, et la section « Livres » dans laquelle nous nous trouvons n’est pas surlignée dans le menu. Notons également que, dans le menu du haut, la section « Coin jouets » est toujours surlignée ce qui peut porter à confusion. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 20
  21. 21. 25 conseils pratiques en ergonomie 14. Le retour à la page d’accueil doit être simple EXPLICATION BONNE PRATIQUE L’utilisateur doit pouvoir retourner facilement à la page d’accueil. Comme c’est le point d’entrée sur le site, c’est également un point de repère que les utilisateurs peuvent utiliser pour retrouver facilement du contenu récent ou des liens vers des sections importantes. Pour faciliter l’accès à cette page on peut : • Utiliser un lien « accueil » dans le menu principal, • Faire en sorte que le logo du site soit un lien vers cette page. Le site de Québec Loisirs utilise bien ces deux recommandations. MAUVAISE PRATIQUE Le menu du site Alphacasting.ca n’a pas de rubrique « accueil » et son logo n’est pas cliquable. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 21
  22. 22. 25 conseils pratiques en ergonomie 15. Avoir des sections d’aide à la navigation EXPLICATION BONNE PRATIQUE En cas de besoins les utilisateurs doivent pouvoir se tourner vers les sections suivantes : • Une section d’aide, • Un plan du site, • Un moteur de recherche. L’entête du site eBay offre un accès facile à la recherche, à l’aide et au plan de site. L’application des points de ce critère dépend bien sûr de la taille du site. De plus la réalisation de chaque point joue également un rôle sur MAUVAISE PRATIQUE l’utilisabilité du site. Il est souvent mieux de ne pas avoir de moteur de recherche interne que d’en avoir un mauvais. Sur le site d’Averna Vision&Robotics, il n’y a aucune des trois sections recommandées. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 22
  23. 23. 25 conseils pratiques en ergonomie 16. Éviter d’utiliser trop de « pop-ups » EXPLICATION MAUVAISE PRATIQUE Pour ne pas surcharger l’écran des utilisateurs, il faut éviter d’ouvrir des fenêtres de navigateur supplémentaires pour présenter des informations. Cela rend la navigation laborieuse car il est très difficile de retrouver son chemin dans un site qui nous emmène de fenêtre en fenêtre. De plus, la prolifération des outils intégrés aux navigateurs empêchant l’apparition de ce type de fenêtre pose de sérieux problèmes. Pour présenter des informations de manière contextuelle, préférez l’utilisation de pop-up Ajax/Dhtml qui permettent de rester dans la même fenêtre de navigateur. Sur le site desjardins.com, plusieurs sections présentent leur contenu dans des nouvelles fenêtres. De plus, une fois que le pop- up est ouvert, tous les autres liens pointant vers un pop-up s’ouvrent dans cette nouvelle fenêtre. Cela peut prêter à confusion. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 23
  24. 24. 25 conseils pratiques en ergonomie 17. Le design du site doit être constant tout au long de la visite EXPLICATION MAUVAISE PRATIQUE Il est important d’offrir à l’utilisateur une interface constante dans toutes les sections du site. Cela permet de : • Développer des repères dans le site • Avoir une navigation plus facile entre les sections • Favoriser l’apprentissage du fonctionnement du site • Rappeler à l’utilisateur qu’il est toujours dans le même site. La page d’accueil du site et la page d’accueil de la boutique sont différentes, ce qui rend la navigation entre les deux sites difficile. Il n’y a pas de navigation commune qui fait le lien entre les deux sites. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 24
  25. 25. Rapport d’analyse & recommandations – Étude de visibilité du contenu 3.5. Aspect visuel et lisibilité 18. Permettre l’impression facile du contenu dans les pages EXPLICATION BONNE PRATIQUE Beaucoup d’utilisateurs aiment avoir les contenus sous format papier pour archives ou pour faciliter la lecture. Il est important de fournir un moyen facile d’imprimer le contenu de la page sans inclure tout le visuel qui rend l’impression lente et encore moins écologique. Le seul contenu que l’utilisateur désire imprimer est le corps du texte sans la navigation. On peut placer cet outil d’impression dans le haut ou le bas de la page. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 25
  26. 26. Rapport d’analyse & recommandations – Étude de visibilité du contenu 19. Limiter la longueur des lignes de texte EXPLICATION STATISTIQUE Pour faciliter la lecture à l’écran, il est recommandé de limiter le nombre de caractères par ligne de texte. Une ligne de texte devrait être constituée d’environ 65 à 95 caractères (95 caractères équivalent à 25cm). Après cette limite, la vitesse de lecture diminue. Des lignes trop courtes réduiront également la vitesse de lecture. L’âge des visiteurs, le type de police, l’espacement et la taille du texte peuvent également influencer la vitesse de lecture. Étude de la vitesse de lecture (mot par minute wpm) menée par Shaikh et Chaparro en 2004 (http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.htm) Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 26
  27. 27. Rapport d’analyse & recommandations – Étude de visibilité du contenu 20. Un contraste fort maximise la lisibilité EXPLICATION BONNE PRATIQUE Pour faciliter la lisibilité, il faut utiliser des couleurs de police et d’arrière-plan qui maximisent le contraste. Ce constat s’applique également pour les images. Il existe des logiciels qui peuvent calculer la différence de contraste entre les deux couleurs. La clientèle plus âgée peut avoir de la difficulté avec les contrastes. L’utilisation du noir sur blanc favorise le meilleur contraste. MAUVAISE PRATIQUE Éviter l’utilisation des tons de gris sur gris. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 27
  28. 28. Rapport d’analyse & recommandations – Étude de visibilité du contenu 21. Éviter les animations superflues EXPLICATION MAUVAISE PRATIQUE Éviter d’insérer des animations superflues qui nuisent à l’accomplissement des tâches des visiteurs. Par exemple : • Les pages d’introduction (splash page) • Les .gif animés sans valeur • Les animations de transition de page De plus, lorsque l’animation est cliquable, il peut être difficile de trouver à quel endroit cliquer. Il faut aussi offrir un lien pour outrepasser l’animation. Cette page d’introduction n’indique pas où cliquer pour poursuivre la visite. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 28
  29. 29. Rapport d’analyse & recommandations – Étude de visibilité du contenu 22. Éviter l’utilisation des cadres et offrir une version HTML pour un site en flash EXPLICATION MAUVAISE PRATIQUE Il y a plusieurs raisons qui motivent l’élimination des cadres. Parmi celles-ci, on retrouve : • Rend le défilement plus ardu • Peut causer des problèmes d’impression • Peut causer des problèmes avec les marque-pages • Nuit au référencement • Les visiteurs des moteurs de recherche peuvent être dirigés sur une page incomplète • Donne une impression désuète Pour les sites en flash, il est recommandé de fournir une version en HTML qui offrira une autre option aux utilisateurs en basse vitesse. Le référencement du site en HTML sera également plus facile. Il est difficile de naviguer dans ce site Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 29
  30. 30. Rapport d’analyse & recommandations – Étude de visibilité du contenu 23. Ajouter un favicone EXPLICATION BONNE PRATIQUE L’ajout d’un favicone est une tactique simple qui permet d’identifier plus facilement le site lorsque plusieurs fenêtres ou onglets sont ouverts. On peut voir la présence d’un favicone dans trois endroits : • La barre d’adresse Dans la barre d’adresse • L’onglet du navigateur • Les marque-pages Cela permet au site d’être bien visible et d’attirer l’attention de Dans les onglets l’utilisateur. Dans les marque-pages Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 30
  31. 31. Rapport d’analyse & recommandations – Étude de visibilité du contenu 3.6. Gestion des erreurs 24. Attention à l’utilisation des « plug-ins » EXPLICATION BONNE PRATIQUE Lorsque le site utilise un « plug-in » pour afficher du contenu, il faut détecter si l’utilisateur possède l’outil et lui donner un message d’aide en conséquence. Le message doit inclure un lien qui dirige vers l’endroit où le « plug-in » est disponible. Si la détection est impossible, un lien vers le téléchargement de l’outil doit être fourni. Le site offre un lien de téléchargement pour l’outil de visionnement. MAUVAISE PRATIQUE Il est impossible de voir la vidéo sans le plug-in. On mentionne que le site requiert flash, mais aucune aide n’est fournie pour le télécharger. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 31
  32. 32. Rapport d’analyse & recommandations – Étude de visibilité du contenu 25. Avoir une page d’erreur 404 personnalisée EXPLICATION BONNE PRATIQUE La page d’erreur personnalisée 404 a pour objectif d’aider l’utilisateur qui arrive sur une page qui n’existe pas. Cela a pour effet de récupérer du trafic qui autrement aurait été perdu. Une bonne page 404 peut aussi : • Offrir un message d’aide • Offrir un lien vers la page d’accueil • Donner accès à un moteur de recherche • Rediriger vers la page d’accueil • Mener vers le plan de site • Suggérer des contenus populaires MAUVAISE PRATIQUE Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 32
  33. 33. Rapport d’analyse & recommandations – Étude de visibilité du contenu 26. Gérer les erreurs possibles dans les formulaires EXPLICATION BONNE PRATIQUE Les utilisateurs n’aiment pas remplir des formulaires, mais il n’est pas possible de les éviter. Il faut donc les aider dans cette tâche. Pour ce faire : • Indiquer les champs obligatoires • Mettre des messages d’erreurs clairs • Donner des exemples de format pour remplir un champ • Bien identifier à quel endroit il y a une erreur • Valider les champs en temps réel • Conserver l’information de l’utilisateur lors de la durée de la session s’il change de page et revient MAUVAISE PRATIQUE Aucune indication des champs obligatoires n’est précisée. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 33
  34. 34. Rapport d’analyse & recommandations – Étude de visibilité du contenu 27. S’assurer que le site est multiplateforme EXPLICATION MAUVAISE PRATIQUE Afin d’éviter de rendre votre site difficilement accessible pour une partie de vos visiteurs potentiels, il est important de tester votre site sous différentes versions de navigateur Web. Les problèmes peuvent être d’ordre esthétique, voire même fonctionnel. Ces tests s’appliquent également à toutes les nouvelles technologies introduites dans le site. Problème d’affichage sous Firefox 2 qui peut rendre la navigation difficile et qui n’est pas présent sous IE 7. Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 34
  35. 35. Rapport d’analyse & recommandations – Étude de visibilité du contenu 3.7. Conclusion & Remerciement Nous espérons que vous avez apprécié la lecture de ce guide. POUR EN SAVOIR PLUS DES QUESTIONS ? Nous effectuons un travail continu de veille et de recherche des Si vous avez des commentaires (bons ou mauvais) ou des meilleures pratiques sur Internet. Nous partageons le fruit de ce questions, vous pouvez communiquer avec nous à : travail aux endroits suivant : conseil@adviso.ca Nos publications : www.adviso.ca/-publications-d-adviso-.html Notre blogue interne : www.adviso.ca/blog/ Sur Branchez-Vous : http://blogue.benefice-net.branchez-vous.com/ Le 20 mars 2008 www.adviso.ca – 514.598.1881 © 2008. Tous droits réservés à Adviso Conseil inc. 35

×