Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (13)
Similaire à Cours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie web
Similaire à Cours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie web (20)
Plus de ElodieDescharmes
Plus de ElodieDescharmes (16)
Dernier
Dernier (13)
Cours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie web
- 1. Elodie Descharmes (ingénieur Orange Labs) Filière IMR, deuxième année 2012-2013 Ergonomie Parce qu’il ne sert à rien de réinventer ce qui est déjà très bien fait, ce cours est très largement basé que le livre suivant : Ergonomie web, pour des sites web efficaces Amélie Boucher, Éditions Eyrolles
- 2. Les règles de l’ergonomie web Architecture Information Rapidité Organisation visuelle Compréhension Liberté Cohérence Assistance Accessibilité Conventions Gestion des erreurs Satisfaction
- 3. 3 @elodescharmes Introduction Ces règles sont simples, mais elles ne s’inventent pas, et c’est justement leur simplicité qui fait qu’on les oublie fréquemment ! Ces règles permettent d’améliorer la qualité perçue d’un site de deux manières – Lors de la conception d’un nouveau site – Lors de l’évaluation d’un site existant La prise en compte de ces règles demande – Des connaissances en ergonomie théorique – De la rigueur de la minutie… Presque de l’acharnement pour les appliquer à toutes les pages ! Ces règles s’imbriquent les unes les autres, et il faut parfois trouver le juste compromis entre deux principes qui peuvent se mettre réciproquement en défaut
- 4. 4 @elodescharmes Règle n°1 : Architecture Le site est bien rangé L’internaute doit pouvoir y trouver ce qu’il cherche Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 5. 5 @elodescharmes Règle n°1 : Architecture Le site est bien rangé Les regroupements sont logiques – Une rubrique est constituée d’éléments partageants suffisamment de caractéristiques pour être classés dans la même catégorie Les menus aident l’internaute à naviguer dans les contenus – Les intitulés doivent être signifiants, complémentaires, exclusifs Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 6. 6 @elodescharmes Architecturer un site L’architecture d’un site se construit en deux étapes – Catégorisation : créer des groupes de contenus – Structuration : hiérarchiser les contenus Ces deux étapes doivent tenir compte de l’internaute et de ses réflexes d’utilisation Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 7. 7 @elodescharmes Les regroupements sont logiques Le regroupement doit avoir un sens Pourquoi ? – Les internautes s’arrêtent très tôt dans le processus de lecture des titres de rubriques. Ils pensent avoir compris et extrapolent pour la suite du menu. Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 8. 8 @elodescharmes Les regroupements sont logiques www.sfr.fr (ancienne version du site ) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Mauvaise application Des tests ont montré que 75% des internautes ne voyaient pas le mot « classique » avant la troisième passe sur la même page
- 9. 9 @elodescharmes La structuration met en avant les contenus clés Identifier les pages les plus recherchées par les internautes et les mettre en avant dans l’architecture du site Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Mauvaise application La fonctionnalité d’achat de capsules était « cachée » dans une sous-rubrique www.nespresso.com (04/03/2012) www.nespresso.com (ancienne version du site) Nouvelle version : la fonctionnalité est mise en évidence dès la homepage Bonne application
- 10. 10 @elodescharmes Les menus aident l’internaute à naviguer dans les contenus Les menus sont des éléments de navigation Les intitulés des rubriques doivent être : – Signifiants : doit permettre à l’internaute de deviner le contenu de la rubrique – Complémentaires : il n’existe pas de contenu qui n’appartient à aucune rubrique – Exclusifs : un intitulé doit être le seul envisageable pour un internaute qui cherche un contenu précis, il doit pouvoir choisir sans hésiter Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 11. 11 @elodescharmes Contourner un site mal rangé Dans le cas de la refonte d’un site existant, s’il n’est pas possible de remettre en cause l’architecture globale La solution : utiliser les liens transversaux au cœur des pages Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction « Lien transversal » Lien qui passe outre l’arborescence du site. Il permet de proposer, à des endroits appropriés, des liaisons directe vers des contenus en rapport avec les informations consultées.
- 12. 12 @elodescharmes Règle n°2 : Organisation visuelle La page est bien rangée La grande majorité des individus se sentent mieux dans des environnements simples, organisés, aérés Objectif cognitif : limiter la charge mentale liée au traitement de ce qu’il voit à l’écran Notion de « bruit visuel » – tout élément graphique qui ne transmet pas d'information, surcharge la présentation, ou entre en compétition avec l'information – très utilisé aussi en environnement urbain, afin d’optimiser la visibilité des signaux routiers par exemple Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 13. 13 @elodescharmes Règle n°2 : Organisation visuelle La page est bien rangée Eviter le trop-plein d’information – Réduite la quantité de mots sur les pages navigantes – N’afficher que les principaux éléments de navigation et d’interaction – Différencier les quantités d’informations réelles et perçues – Démultiplier la valeur du pixel carré Optimiser l’organisation et la hiérarchie visuelle Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 14. 14 @elodescharmes Eviter le trop-plein d’information Supprimer tout ce qui ne sert à rien, privilégier l’essentiel Diviser la quantité de mots par deux – Pourquoi ? – Constat empirique : on arrive en général relativement facilement à réduire la quantité de mots d’un texte de 50% – S’adapter au réflexe de « scan visuel » (lecture en diagonale) – Où ? – Valable uniquement pour les pages navigantes (vs. Pages de contenu final) – Comment ? – Remettre en cause systématiquement l’utilité de chaque élément de l’interface – Piste d’amélioration : on peut souvent faire l’économie d’une légende explicative avec une interface mieux conçue Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction « Every sentence, every phrase, every word has to fight for its life » Crawford Kilian, Writing for the web, 4th édition, Self-Consel Press, 2009
- 15. 15 @elodescharmes Réduire la quantité de mots sur les pages navigantes Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Mauvaise application Bonne application www.smartphoto.fr (04/03/2012) extrafilm.com (ancienne version) La répétition du verbe « commander « à chaque item du menu n’apporte rien Nouvelle version du site
- 16. 16 @elodescharmes Eviter le trop-plein d’information Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Mauvaise application « entrez votre identifiant et votre mot de passe » est une phrase inutile car redondante avec les libellés des champs
- 17. 17 @elodescharmes N’afficher que les principaux éléments de navigation et d’interaction Les options liées au véhicules n’apparaissent pas si l’on sélectionne un autre moyen de transport Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Bonne application
- 18. 18 @elodescharmes L’hétérogénéité visuelle augmente la charge informationnelle Limiter les typographies et les couleurs différentes www.mairie-chatillon-sur-seine.fr (04/03/2012) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Mauvaise application
- 19. 19 @elodescharmes Les images de fond augmentent la charge informationnelle Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Mauvaise application www.allocine.fr (01/03/2011)
- 20. 20 @elodescharmes Les animations augmentent la charge informationnelle Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Mauvaise application L’animation publicitaire détourne le regard du contenu effectif de la page www.seloger.com (04/03/2012)
- 21. 21 @elodescharmes Petit point sur les animations Attention ! Le traitement de l’animation demande beaucoup de ressources mentales car nous sommes intuitivement dirigés vers son exploration L’animation ne doit pas tourner en boucle en permanence Ne proposez pas d’animations simultanées Attention à bien différencier les animations des affichages successifs (sur action utilisateur) de contenus statiques. Dans ce cas tout dépend de la vitesse d’affichage Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 22. 22 @elodescharmes Différencier les quantité d’informations réelles et perçues Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Affichages successifs (vs animations) avec vitesse de défilement relativement rapide Plusieurs affichages dynamiques en boucle et en parallèle ! + l’image de fond… Mauvaise application www.virginmega.fr (04/03/2012)
- 23. 23 @elodescharmes Démultiplier la valeur du pixel carré Remplacement de l’information au survol (rollover) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction www.jules.com (04/03/2012) Affichage des photos des produits au survol des vignettes Bonne application
- 24. 24 @elodescharmes Petit point sur le rollover Attention ! – L’internaute doit accomplir une action supplémentaire pour accéder à ces informations – La possibilité de faire apparaître des informations au rollover n’est pas toujours évidente – Les informations affichées ne doivent pas se situer trop loin du déclencheur – Déterminer une zone suffisante pour l’interaction avec la souris Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 25. 25 @elodescharmes La question de la publicité On s’en passerait bien… Mais on ne peut pas toujours remettre en cause un des principaux modèles économiques du web ! Cependant on peut la cantonner au pourtour du site (on la clusterise) Dans tous les cas, elle ne doit pas se mélanger au contenu ! Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 26. 26 @elodescharmes Optimiser l’organisation et la hiérarchie visuelle Nous avons vu comment éviter le trop-plein d’informations Encore faut-il que les informations restantes pertinentes soient bien organisées à l’écran ! Utiliser les lois de la Gestalt : similarité, proximité – Dégager des blocs d’informations, des zones différenciées – Distinguer – Les espaces de navigation – Les blocs de contenu – Les informations complémentaires – Les éléments d’interaction (boutons d’action, formulaires…) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 27. 27 @elodescharmes Optimiser l’organisation et la hiérarchie visuelle Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://eu.farrow-ball.com/ (04/03/2012) L’organisation visuelle de la page d’accueil permet de bien différencier les différentes zones d’interaction et de contenu Bonne application
- 28. 28 @elodescharmes Essayer d’emboiter les zones plutôt que de simplement les juxtaposer Attention à trouver un bon compromis entre hétérogénéité (complexité au niveau de la sélection mentale entre éléments différents) et homogénéité (informations difficiles à distinguer car tout est au même niveau) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction fr.yahoo.com (04/03/2012) L’utilisation de sous-parties avec titres et séparateurs permet une prise en main simplifiée du formulaire Bonne application
- 29. 29 @elodescharmes Règle n°3 : Cohérence Le site capitalise sur l’apprentissage interne Lorsqu’un internaute utilise avec succès une première page, il essayera de répéter le même processus sur les autres pages Le site doit être cohérent avec lui-même d’une page à l’autre ! Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 30. 30 @elodescharmes Règle n°3 : Cohérence Le site capitalise sur l’apprentissage interne Les localisations sont cohérentes – Ne pas changer les éléments d’emplacement d’une page à l’autre ! – Critique pour les éléments de navigation Les appellations sont cohérentes – Toujours faire appel au même mot pour désigner le même élément ! – Exemple : « panier », « liste d’articles », « liste d’achats »… Les formats de présentation sont cohérents – Définir des groupes d’objets et une présentation cohérente pour chaque groupe. – Peut s’appliquer aux textes, au liens, aux images, aux menus de navigation etc. Les interactions sont cohérentes – Le site doit toujours se comporter de la même manière dans une situation donnée. – Exemple : si un menu déroulant s’active par un clic, éviter dans d’autres pages de l’activer par rollover… Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 31. 31 @elodescharmes Les localisations sont cohérentes Clic Clic Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 32. 32 @elodescharmes Charte ergonomique La cohérence des localisations, appellations, formats de présentation et des interactions peut être soutenue par la formalisation et l’utilisation d’une charte ergonomique Ce type d’outil permet à toutes les personnes travaillant sur le projet de partager la même référence ≠charte graphique ! Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 33. 33 @elodescharmes Règle n°4 : Conventions Le site capitalise sur l’apprentissage externe Capitaliser sur l’expérience de l’internaute (il a très certainement visité d’autres sites), sur leurs habitudes Tenir compte des conventions web – Pour la plupart de internautes et en particulier les moins expérimentés, Internet est un concept général. « Je vais sur l’Internet » Il ont du mal à faire la distinction entre les sites et s’attendent à ce que ceux-ci fonctionnent tous de la même manière. Si ce n’est pas le cas, la conclusion est rapide : c’est forcément que le site ne marche pas. Anecdote Devant la multitude de sites ne prenant pas en compte les normes d’interactions et de présentation, Jakob Nielsen (en 2004) a comparé le Web à une fourmilière bâtie par des insectes sous LSD… Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 34. 34 @elodescharmes Règle n°4 : Conventions Le site capitalise sur l’apprentissage externe Respecter les conventions de localisation – Emplacement des éléments sur la page Respecter les conventions de vocabulaire – Employer des mots que les internautes peuvent comprendre facilement dans leur contexte Respecter les conventions d’interaction et de présentation – Les internautes s’attendent à ce que le site se comporte d’une certaine manière Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 35. 35 @elodescharmes Qu’est-ce qu’une convention ? C’est le plus difficile : déterminer ce qui relève d’une convention Définition de Jakob Nielsen : – Si 80% des sites utilisent le même principe, c’est un standard – Si 50 à 79% des sites utilisent le même principe, c’est une convention Connaître l’internaute pour savoir à quel(s) site(s) il est préalablement habitué Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Faire différent pour se démarquer Oui… Sur tout sauf sur l’ergonomie ! L’ergonomie doit être transparente pour l’utilisateur, elle ne peut pas être positionnée comme un élément de différenciation
- 36. 36 @elodescharmes Respecter les conventions de localisation Position des éléments d’interaction – Logo – Moteur de rechercher – Accès au panier – Barres de navigation – Accès aux mentions légales – Etc. Règle à pondérer en fonction du type de site et de la charge informationnelle à l’écran Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 37. 37 @elodescharmes Respecter les conventions de localisation Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://www.1855.com (05/03/2012) Pas d’accès au panier, à part au moment précis où on y ajoute quelque-chose Mauvaise application
- 38. 38 @elodescharmes Respecter les conventions de localisation Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://www.rowenta.fr (05/03/2012) Localisation non conventionnelle du chemin de navigation en bas de page Mauvaise application
- 39. 39 @elodescharmes Respecter les conventions de localisation Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://www.chanel.com/ (05/03/2012) La localisation non conventionnelle de la barre de navigation ne met pas en péril son utilisation du fait de sa force visuelle au regard du reste de la page Pas de problème
- 40. 40 @elodescharmes Respecter les conventions de vocabulaire Ne pas introduire de mots totalement nouveau pour les internautes afin de désigner un concept conventionnel du Web – Accueil – Panier – Plan du site – Contact – Etc. Exemples : – ne pas remplacer « page suivante » par « prochaine page » – ne pas remplacer « panier » par « sac » Pour un site spécialisé, se renseigner sur les conventions du domaine concerné ! 40 Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 41. 41 @elodescharmes Respecter les conventions de vocabulaire Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://store.nike.com (05/03/2012) Qu’est-ce que monCasier ? Mauvaise application
- 42. 42 @elodescharmes Respecter les conventions d’interaction et de présentation Formulaires, alertes, étapes classiques d’un processus de commande etc. Exemple de convention d’interaction : les internautes ont appris qu’une liste d’objets défilant de manière animée est souvent un menu dont chacun des items est cliquables Attention aux popups de confirmation / indication qui peuvent faire penser à des messages d’erreur ! Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 43. 43 @elodescharmes Respecter les conventions d’interaction et de présentation Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://www.ca-cotesdarmor.fr/ (05/03/2012) La présence d’un champ de saisie laisse penser qu’il faut faire une saisie clavier alors que le code doit être entré à l’aide de la grille graphique Mauvaise application
- 44. 44 @elodescharmes Règle n°5 : Information Le site informe l’internaute et lui répond L’ordinateur informe et prévient l’internaute – Ne soyez pas avare d’informations ! – information générale – information pour facilité la navigation – information ponctuelle – Informez, mais au bon moment – Informez pour augmenter votre force persuasive L’ordinateur répond aux actions de l’internaute – Donner du feedback ! – Visibilité du feedback Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 45. 45 @elodescharmes Donnez de l’information générale Qui vous êtes, ce que vous faites etc. – Logo – Tagline – ou baseline, endline, strapline : phrase accompagnant le logo – Peut être différente du « slogan offline » – Intitulés de la barre de navigation Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 46. 46 @elodescharmes Donnez de l’information pour faciliter la navigation Aider l’internaute à se situer dans le site, ce qu’il a déjà consulté, etc. http://www.natureetdecouvertes.com (05/03/2012) L’internaute est informé sur sa situation dans les différents niveaux de profondeur du site Bonne pratique Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 47. 47 @elodescharmes Donnez de l’information pour faciliter la navigation http://www.bazar-bio.fr (05/03/2012) La rubrique active n’est pas indiquée (en peut facilement se trouver sous la ligne de flottaison du site) Mauvaise pratique Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 48. 48 @elodescharmes Donnez de l’information pour faciliter la navigation http://www.google.fr (05/03/2012) L’internaute est informé sur les liens qu’il a déjà visités grâce à leur couleur Bonne pratique Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 49. 49 @elodescharmes Donnez de l’information ponctuelle Renseigner l’internaute sur son avancement dans un processus, sur les étapes qui vont suivre… http://www.amazon.fr/ (05/03/2012) On indique à l’internaute que ce n’est pas la dernière étape Bonne pratique Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 50. 50 @elodescharmes Informez, mais au bon moment Exemple : ne pas attendre que l’internaute soit sur une page produit pour l’informer que l’article n’est plus disponible ! Exemple : indiquer les documents nécessaire à avoir en main avant de commencer à remplir un formulaire complexe Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 51. 51 @elodescharmes Informez, mais au bon moment L’ensemble des coloris disponibles pour un produit est visualisable dès la page de liste Bonne pratique http://www.patagonia.com (04/03/2012) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 52. 52 @elodescharmes Informez pour augmenter votre force persuasive L’internaute est informé du montant restant pour obtenir la gratuité des frais de port Bonne pratiquehttp://www.archiduchesse.com/ (04/03/2012) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 53. 53 @elodescharmes Informez pour augmenter votre force persuasive Affichage dès la page produit du nombre de point de fidélités associés à l’achat de l’article Bonne pratique http://www.saveur-biere.com/ (04/03/2012) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 54. 54 @elodescharmes Donner du feedback aux internautes Navigation changement de page L’utilisateur doit percevoir qu’il s’est passé quelque-chose ! – Attention en cas de rechargement partiel de page – Attention si la page de départ et la page d’arrivée sont très proches visuellement – Attention si la page d’arrivée est susceptible de mettre du temps à se charger Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 55. 55 @elodescharmes Visibilité du feedback C’est le défaut le plus fréquent – Élément visuel de feedback trop éloigné du centre d’attention de l’utilisateur (en bas à gauche dans la page par exemple) – Élément visuel de feedback en haut de page, disparaissant au scrolling Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 56. 56 @elodescharmes Visibilité du feedback Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://www.cuisines-aviva.com (05/03/2012) En résolution 1024*768, l’utilisateur ne verra pas que son clic a eu une conséquence Mauvaise pratique
- 57. 57 @elodescharmes Règle n°6 : Compréhension Les mots et symboles sont choisis minutieusement Utilisez le vocabulaire ! – Le vocabulaire doit être compréhensible – orienté utilisateur – exact et précis – conventionnel – Attention aux métaphores – Le vocabulaire doit être concis Les symboles et codes doivent être compréhensibles Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 58. 58 @elodescharmes Utilisez le vocabulaire ! Attention aux menus présentés uniquement sous forme d’icônes Mauvaise pratique Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://www.rowenta.fr (05/03/2012)
- 59. 59 @elodescharmes Le vocabulaire doit être compréhensible Utiliser des mots de la langue courante, ne pas essayer d’inventer de nouveaux codes MAIS il ne suffit pas d’utiliser les mots du langage courant pour être compris par les internautes. Les termes doivent être – Bien choisis – Faire partie des conventions web Attention, ce qui pour un spécialiste peut paraître de l’ordre de la convention ne l’est pas forcément pour votre internaute Exemple : « Si vous avez déjà un compte chez nous, veuillez vous connecter à la page d’ouverture de session. » Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Attention, un texte ne doit pas servir à compenser d’autres libellés mal choisis !
- 60. 60 @elodescharmes Bien choisir ses mots Le vocabulaire doit être orienté utilisateur – Choisir un langage adapté à votre internaute et au service que vous proposez – Utiliser un vocabulaire exclusif (chaque mot correspond à un concept et un seul) Le vocabulaire doit être concis – Attention aux phrases inutilement trop longues Le vocabulaire doit être exact et précis – Représenter le plus justement l’idée sous-jacente Exemple : « Recherche express » ≠ « Recherche avancée » ≠ « Affiner la recherche » ≠ « Recherche personnalisée »… Le vocabulaire doit être conventionnel – Exemple : « Télécharger » plutôt que « Récupérer le document » Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 61. 61 @elodescharmes Le vocabulaire doit être compréhensible Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Les items de la navigation peuvent être compris si on y réfléchis bien… Mais ils sont loin d’être explicites ! Mauvaise pratique http://bio-duo.fr/ (07/03/2012)
- 62. 62 @elodescharmes Les symboles et codes doivent être compréhensibles Les internautes arrivent sur votre site avec leurs habitudes et leurs apprentissages (vis-à-vis du monde réel ou vis-à-vis des IHM) Attention aux codes et symboles – Choix des couleurs, respecter les symboliques associées à la culture occidentale Rappel de la règle 2 : afin de limiter la charge informationnelle à l’écran, n’utiliser les couleurs (hors charte graphique simple) que lorsque cela présente un intérêt Pour aller plus loin… www.informationisbeautiful.net/visualiza tions/colours-in-cultures/ Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 63. 63 @elodescharmes Les symboles et codes doivent être compréhensibles Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité SatisfactionAdresse email Mot de passe Confirmer le mot de passe Nom Prénom Date de naissance * * facultatif La légende ne suffit pas à contrecarrer le fait qu’en voyant un astérisque rouge, on a l’impression que le champ est obligatoire Mauvaise pratique
- 64. 64 @elodescharmes Règle n°7 : Assistance Le site aide et dirige l’internaute Dirigez grâce à l’organisation et à la visibilité Dirigez grâce à des clics logiques – Dirigez grâce aux affordances – Attention à ne pas diriger de façon erronée Evitez d’avoir à diriger grâce à un modèle d’interaction adapté Assistez votre internaute en tenant compte de ses besoins en terme de tâches Assistez votre internaute en le suivant de très près – Fournissez de l’aide explicite en cas de besoin Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 65. 65 @elodescharmes Dirigez grâce à l’organisation et à la visibilité Tout ce dont les utilisateurs peuvent avoir besoin doit être visible (ex : barre de navigation, liens « page suivante » et « page précédente »…) Toujours revenir à la question fondamentale : que proposez-vous à l’internaute ? Points de vigilance – Scrolling (rappel : indiquer que la page se poursuit) – Résultats de recherche à pages multiples – Pages élastiques ou très larges Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 66. 66 @elodescharmes Dirigez grâce à l’organisation et à la visibilité Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction L’organisation visuelle de cette page n’accompagne pas l’internaute dans la découverte des contenus Mauvaise pratique http://www.nivea.fr/ (07/03/2012)
- 67. 67 @elodescharmes Dirigez grâce à l’organisation et à la visibilité Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://www.unebeauty.com (07/03/2012) Les flèches permettent de passer d’une rubrique à l’autre mais sont très peu visibles Mauvaise pratique
- 68. 68 @elodescharmes Dirigez grâce à des clics logiques Elément cliquable = élément ayant permis la prise de décision Exemple : « Ecouter un extrait » suivi d’une icône en forme de haut-parleur. Dans ce cas il y a de grandes chances que l’internaute clique d’abord sur « Ecouter un extrait »… A éviter : « Cliquez sur le bouton Machin pour faire Machin » Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 69. 69 @elodescharmes Dirigez grâce aux affordances Les affordances permettent de repérer ce qui est cliquable – Les éléments cliquables doivent être perçus comme tels – Profiter des affordances naturelles : les phrases formulées à l’infinitif ou à l’impératif sont les plus affordantes à la cliquabilité – Attention aux fausses affordances : grandes images non cliquables par exemple Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 70. 70 @elodescharmes Dirigez grâce aux affordances Les affordances permettent de repérer ce qui est utilisable – Mettre en évidence les champs de saisie – Ne pas les remplir – Attention au contraste – Utiliser les affordances temporaires Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 71. 71 @elodescharmes Dirigez grâce aux affordances Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Le champ actif prend un affordance temporaire qui guide la saisie Mauvaise pratique http://www.tumblr.com/ (07/03/2012) Bonne pratique
- 72. 72 @elodescharmes Attention à ne pas diriger de façon erronée Le manque de justesse et de précision induit en erreur (attention notamment aux icônes non accompagnées d’un libellé) Les contre-affordances induisent en erreur Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Sur ce site, les concepteurs ont prévu le choix du conditionnement alors que la quasi-totalité des produits n’existent que dans un seul format… Mauvaise pratique http://www.clarins.fr (07/03/2012)
- 73. 73 @elodescharmes Evitez d’avoir à diriger grâce à un modèle d’interaction adapté Limiter le nombre d’actions Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://www.ikea.com/ (07/03/2012) L’internaute doit cliquer sur le bouton « actualiser » après avoir modifié une quantité Mauvaise pratique
- 74. 74 @elodescharmes Assistez votre internaute en tenant compte de ses besoins en terme de tâches S’adapter au comportement des utilisateurs www.ugc.fr (06/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Le champ d’email est trop petit et force à une vérification qui ne se limite pas à un contrôle visuel, mais nécessitent l’utilisation de la souris et du clavier Mauvaise pratique
- 75. 75 @elodescharmes Assistez votre internaute en tenant compte de ses besoins en terme de tâches S’adapter au comportement des utilisateurs www.ugc.fr (06/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Le fait de remplacer au fur et à mesure les chiffres saisis par l’utilisateur part d’une bonne intention en terme de sécurité perçue, mais ne tient pas compte du comportement majoritaire des internautes lorsqu’ils renseignent leurs coordonnées bancaires : ils vérifient les chiffres à la fin de la saisie Mauvaise pratique
- 76. 76 @elodescharmes Assistez votre internaute en le suivant de très près Aider l’internaute en lui expliquant très clairement les choix qui s’offrent à lui à un instant t Exemples – propositions d’orthographes approchantes dans les moteurs de recherche – Fournir un message explicatif quand une recherche ne propose aucun résultat Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 77. 77 @elodescharmes Assistez votre internaute en le suivant de très près Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://www.yves-rocher.fr (07/03/2012) L’internaute est assisté grâce aux choix qui lui sont proposés explicitement lorsqu’il vient d’ajouter un article au panier Bonne pratique
- 78. 78 @elodescharmes Fournissez de l’aide explicite en cas de besoin Soit en fournissant un lien vers l’aide en ligne Soit en direct (contenus d’aide contextuels) en général c’est le plus efficace 78 Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction On ne doit recourir à l’aide que lorsque l’on a tout essayé avant !!! Bonne pratique
- 79. 79 @elodescharmes Règle n°8 : Gestion des erreurs Le site prévoit que l’internaute se trompe Erreur fréquente de conception : on ne prévoit que le parcours idéal ! Malgré toutes les précautions prises, l’erreur n’est pas un cas isolé et arrivera forcément, il faut donc la prévoir et aide l’internaute à la surmonter Critique pour les interfaces transactionnelles (formulaires) Faire une erreur conduira l’internaute à chercher un coupable : suivant son niveau d’expertise, ce sera lui ou le site… C’est un point de rupture qui risque de faire perdre votre visiteur. Il est donc capital – De les éviter – De les gérer correctement si elles arrivent Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 80. 80 @elodescharmes Règle n°8 : Gestion des erreurs Le site prévoit que l’internaute se trompe L’internaute ne doit pas faire d’erreur – La présentation peut protéger contre l’erreur – Indiquer les champs obligatoires (pour un formulaire) – Utiliser des libellés et des légendes explicites – Bien dimensionner les champs – Utiliser les affordances – Le fonctionnement peut protéger contre l’erreur – Demander des confirmations pour les actions « risquées » – Empêcher la saisie de données erronées – Corriger à la volée L’internaute doit facilement repérer et comprendre ses erreurs – Faciliter le repérage – Expliquer – Faire preuve de courtoisie dans les messages d’erreur… L’internaute doit facilement pouvoir corriger ses erreurs Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 81. 81 @elodescharmes Eviter les erreurs grâce aux libellés et légendes des champs Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction www.etsy.com (07/03/2012) Les légendes accompagnent l’internaute pour expliquer à quoi servent les informations saisies. Bonne pratique
- 82. 82 @elodescharmes La présentation du formulaire peut protéger contre l’erreur Attention à la taille des champs Utiliser les éléments de formulaire à bon escient – Boutons radio au lieu de cases à cocher par exemple lorsqu’un seul choix est possible Attention à l’affordance générale de l’interface – Ne pas proposer un bouton « annuler » ou « effacer » Votre département Votre département Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 83. 83 @elodescharmes La présentation du formulaire peut protéger contre l’erreur Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Les légendes sont explicites et affichées contextuellement en fonction du champ dans lequel l’internaute place son curseur Bonne pratique http://twitter.com/ (07/03/2012)
- 84. 84 @elodescharmes La présentation du formulaire peut protéger contre l’erreur Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Le message n’apporte rien et risque au contraire d’embrouiller l’internaute avec un vocabulaire peu adapté Mauvaise pratique http://balloonup.com (07/03/2012)
- 85. 85 @elodescharmes Utiliser les affordances Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Si l’utilisateur clique sur « annuler » (pourtant en vert et plus proche), les données saisies seront supprimées… Mauvaise pratique www.cnc-arcene.fr (07/03/2012)
- 86. 86 @elodescharmes Le fonctionnement du formulaire peut protéger contre l’erreur Demander une confirmation pour les actions risquées (suppression, modification de données bancaires…) Empêcher la saisie de données erronées : n’accepter que les données cohérentes Corriger à la volée Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 87. 87 @elodescharmes Valider ou corriger à la volée Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://www.airfrance.fr (11/03/2012) Exemple de correction à la volée lorsque l’on saisi une date de retour antérieure à la date de départ. Bonne pratique Attention à ne pas abuser de ce procédé en l’utilisant sur des champs que l’utilisateur n’a pas fini de saisir !
- 88. 88 @elodescharmes Fournir une explication précise de l’erreur Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Sur le même formulaire : Exemple d’un message d’erreur explicite Exemple d’un message d’erreur avec 2 pistes d’explication « le bon format » ne renseigne pas précisément sur ce qui est attendu… Bonne pratique Mauvaise pratique www.americanexpress.fr (06/03/2011)
- 89. 89 @elodescharmes Conseils pour les messages d’erreur Faire preuve de courtoisie dans les messages d’erreur – « Merci d’indiquer… » « Merci de préciser… » – Y compris dans le format de présentation : éviter les popup d’alerte javascript ! Présenter toutes les erreurs en une fois (processus moins coûteux en terme d’implication utilisateur) Préférer l’affichage des messages d’erreur directement dans la page (éviter les popup qui peuvent cacher le contexte) Laisser les champs remplis afin que l’internaute puisse comprendre son erreur et la corriger plus facilement Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 90. 90 @elodescharmes Règle n°9 : Rapidité L’internaute ne perd pas son temps Optimiser la navigation – Faciliter l’action de visée des éléments cliquables – Prendre en compte les besoins de votre internaute sur le plan fonctionnel Multiplier les clés d’entrée vers une même page Faciliter les interactions Eviter les interactions inutiles – Ne pas demander à l’internaute une action qui peut être prise en charge par la machine – Ne pas demander aux internautes deux fois la même chose Des modes d’interaction orientés efficience – Les utilisateurs les plus « experts » doivent pouvoir bénéficier de raccourcis Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 91. 91 @elodescharmes Prendre en compte les besoins de votre internaute sur le plan fonctionnel www.deezer.com (06/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Lors du parcours des éléments de la ligne, un pictogramme à gauche à proximité du titre aide à se repérer Bonne pratique
- 92. 92 @elodescharmes Multiplier les clés d’entrée vers une même page L’internaute ne doit pas fonctionner par « essai-erreur » mais uniquement par « essai-réussite » Que l’internaute clique sur un titre, une image, un lien texte, un pictogramme… Il sera dirigé vers la page correspondante Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 93. 93 @elodescharmes Faciliter les interactions Exemple 1 : proposer des raccourcis pour revenir en arrière de manière sécurisée lors d’actions transactionnelles (lors d’une commande, possibilité de revenir modifier le panier après avoir renseigné l’adresse de livraison par exemple) Exemple 2 : dans un formulaire, prévoir des champs assez longs pour prendre en charge la plupart des cas (si le texte est tronqué à l’affichage et que l’utilisateur veut le vérifier, il devra faire des actions inutiles) Exemple 3 : lors de la saisie d’un numéro de carte bancaire en plusieurs champs, passer automatiquement au champ suivant au cinquième chiffre Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 94. 94 @elodescharmes Eviter les interactions inutiles Ne pas demander à l’internaute une action qui peut être prise en charge par la machine (moyennant souvent des contrôles supplémentaires) Exemple : ne pas proposer de liste déroulante avec une seule option possible 2 clics inutiles ! Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 95. 95 @elodescharmes Eviter les interactions inutiles www.ugc.fr (06/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Le fait de proposer d’acheter 0 ou 1 place de cinéma est inutile. D’autant plus que l’option sélectionnée par défaut est 0 ! Mauvaise pratique
- 96. 96 @elodescharmes Ne pas demander aux internautes deux fois la même chose Exemple 1 : conserver les données d’une page à l’autre dans le cas d’une interface transactionnelle, y compris en cas de rechargement de page, retour à une page/étape précédente etc. Exemple 2 : conserver les mots-clés saisis lorsque l’on passe d’une « recherche simple » à une « recherche avancée » Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 97. 97 @elodescharmes Des modes d’interaction orientés efficience Les utilisateurs les plus « experts » doivent pouvoir bénéficier de raccourcis Qu’appelle-t-on utilisateurs « experts » ? – Utilisateurs qui savent précisément ce qu’ils veulent – Utilisateurs récurrents Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 98. 98 @elodescharmes Des raccourcis pour les utilisateurs qui savent ce qu’ils veulent www.telemarket.fr (06/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Propose une fonctionnalité « LISTExpress » pour les utilisateurs déjà fixés sur leurs choix de type de produit Bonne pratique
- 99. 99 @elodescharmes Des raccourcis pour les utilisateurs récurrents www.coursesu.com (06/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Propose liste de fonctionnalités permettant à un utilisateur récurrent de récupérer des données utiles d’une visite sur l’autre Bonne pratique
- 100. 100 @elodescharmes Règle n°10 : Liberté C’est l’internaute qui commande Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Respectez les contrôles utilisateur conventionnels – Ne pas empêcher – Ne pas imposer Fuyez les actions au rollover Flexibilité des actions utilisateur – Il faut TOUJOURS laisser la possibilité à l’utilisateur de revenir en arrière. Donnez la possibilité à l’internaute de contourner le système et d’agir dessus N’induisez pas de comportement passif – L’internaute n’est pas devant une télévision ! N’enfermez pas votre internaute – Proposez plusieurs systèmes de navigation Le système n’est pas intrusif – Le système n’est pas lourd ou insistant dans ses propositions – Le système ne force pas l’utilisateur a voir quelque-chose – Au recours, le site prend le contrôle de l’ordinateur !
- 101. 101 @elodescharmes Respectez les contrôles utilisateur conventionnels L’internaute doit toujours garder le contrôle sur le site (ou du moins en avoir l’impression). Il ordonne et la machine répond, et rien ne se passera sans qu’il l’ait demandé. Ne pas empêcher – l’utilisation du bouton « back » – La copie d’un contenu textuel – … Ne pas imposer – L’ouverture en plein écran – … Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 102. 102 @elodescharmes Fuyez les actions au rollover Ok pour afficher des informations dans une zone dédiée (cf. règle 2 sur l’organisation visuelle des pages) mais pas pour déclencher des actions ! L’utilisateur a alors tout de suite l’impression de perdre le contrôlé Expérience Passez un peu de temps sur le site http://www.dontclick.it/ Qu’en pensez-vous ? Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 103. 103 @elodescharmes Fuyez les actions au rollover www.labanquepostale.fr (09/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Le système de renseignement du mot de passe est basé sur le survol à la souris des chiffres. D’autant plus impossible à utiliser que le code saisi est masqué ! Mauvaise pratique
- 104. 104 @elodescharmes Flexibilité des actions utilisateur Il faut TOUJOURS laisser la possibilité à l’utilisateur de revenir en arrière Proposer des fonctions – D’annulation – De undo/redo – De retour en arrière Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 105. 105 @elodescharmes Flexibilité des actions utilisateur www.amazon.fr (09/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Tant que la commande n’est pas expédiée, le client a la possibilité de l’annuler très simplement Bonne pratique
- 106. 106 @elodescharmes Flexibilité des actions utilisateur www.google.com/calendar/ (09/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Un exemple de bon compromis : Google agenda ne demande pas de confirmation à l’utilisation lorsqu’il supprime un évènement plus de fluidité Cependant l’interface propose la possibilité d’annuler la dernière action effectuée plus de sécurité Bonne pratique
- 107. 107 @elodescharmes Donnez la possibilité à l’internaute de contourner le système et d’agir dessus Par exemple : autoriser à stopper une animation, une vidéo, du son, contrôler le volume du son… Primordial dans le cas d’affichage successifs de contenus dans le même espace écran (cf. règle 2, procédé utilisé pour démultiplier la valeur du pixel carré) – Remarque : l’attente ou l’actualisation de la page ne sont pas des moyens de contournement Ce type de contenu est souvent publicitaire : donner le contrôle à l’utilisateur permet de prendre un compte un comportement majoritaire – Je viens sur un site avec un objectif précis – A cette occasion je vois quelque-chose d’annexe – Je ne vais consulter ce contenu que lorsque j’ai fini mon premier objectif Il est donc capital de permettre à l’utilisateur d’y accéder à nouveau quelques minutes plus tard Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 108. 108 @elodescharmes Donnez la possibilité à l’internaute de contourner le système et d’agir dessus www.fluctuat.net/ (09/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Navigation facilitée parmi les mises en avant en images des contenus Bonne pratique
- 109. 109 @elodescharmes Donnez la possibilité à l’internaute de contourner le système et d’agir dessus www.virginmega.fr (09/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Propose deux traitements différents pour la gestion des contrôles sur les bandeaux avec affichages successifs Bonne pratique
- 110. 110 @elodescharmes Donnez la possibilité à l’internaute de contourner le système et d’agir dessus www.toyota.fr (09/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction La présentation de la gamme donne des informations dans une vidéo sur laquelle le seul contrôle possible est de l’arrêter ou de la rejouer une fois terminée Mauvaise pratique
- 111. 111 @elodescharmes N’induisez pas de comportement passif Sauf demande explicite (VOD, démo…), l’internaute n’est pas devant une télévision ! Problème très fréquent chez les marques qui veulent présenter leur produits : une présentation web n’est pas la même chose qu’un spot TV Les études montrent que les internautes se plaignent de la longueur d’une animation dès les 30 premières secondes Attention aussi à la mise en place animée des pages qui peut prendre du temps (ok si c’est un temps de chargement, pas si il s’agit uniquement d’un effet visuel voulu !) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 112. 112 @elodescharmes N’induisez pas de comportement passif Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction www.eau-thermale-avene.com (09/03/2011) Impose un effet de fondu à chaque changement de page Mauvaise pratique
- 113. 113 @elodescharmes N’enfermez pas votre internaute Proposez plusieurs systèmes de navigation – A travers des rubriques – Recherche par mots-clés – Recherche par critères Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 114. 114 @elodescharmes Le système n’est pas intrusif Le système n’est pas lourd ou insistant dans ses propositions Le système ne force pas l’utilisateur a voir quelque-chose – Eviter les introductions et fournir des entrées directes (splash pages par exemple) – Si vous ne pouvez pas faire autrement, essayez quand même de fourni un moyen de contournement – Eviter les pop-up spontanées – Parfois adaptée : contenus complémentaires, aide… – Uniquement si l’internaute l’a demandé – Format technique popup pur (javascript:alert(‘texte');) à prospcrire ! – Le site n’agit pas à la place de l’internaute – Exemple pour un site d’e-commerce : n’ajouter un article au panier que suite à la clic sur un élément explicite Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 115. 115 @elodescharmes Le système n’est pas lourd ou insistant dans ses propositions Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Copie d’écran de l’article www.theinquirer.fr/2008/12/18/ch ez-pixmania-il-faut-payer-plus- cher-pour-se-faire-rembourser-la- difference.html (09/03/2011) Pixmania impose dans chacune de ses commande un « contrat achat tranquille ». Sa suppression est possible mais loin d’être évidente ! Mauvaise pratique
- 116. 116 @elodescharmes Le système n’est pas lourd ou insistant dans ses propositions www.darty.com (09/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Bonne pratique
- 117. 117 @elodescharmes Le système n’est pas intrusif www.allocine.fr 12/03/2011 Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Le splash screen peut être contourné par un bouton d’accès direct Bonne pratique
- 118. 118 @elodescharmes Le site n’agit pas à la place de l’internaute www.nicolas.com (09/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Modifie automatiquement la quantité commandée en fonction du conditionnement des produits Mauvaise pratique
- 119. 119 @elodescharmes Au secours, le site prend le contrôle de l’ordinateur ! Respecter la stricte correspondance entre ce que l’internaute a demande et ce qu’il obtient. Eviter d’ouvrir une application logicielle (messagerie, lecteur media…), surtout avec des contenus pré-remplis Eviter de jouer un bande son non demandée Eviter le très pénible « assistant trombone »… Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 120. 120 @elodescharmes Règle n°11 : Accessibilité Un site facile d’accès pour tous Règle 11.1 : Accessibilité physique – Cf. cours précédent – Cf. suite du cours : audit ergonomique Règle 11.2 : Accessibilité technologique – Le site doit s’adapter à la plateforme utilisée par l’utilisation pour y accéder – Plateforme = OS + Browser + Fixe ou portable + taille et résolution de l’écran + fonctions actives (javascript, cookies…) + plug-in installés (flash, java…) + logiciels installés (Adobe, RealPlayer, WMP…) – Le site ne doit pas se présenter toujours forcément de la même manière, mais il doit être consultable quelle que soit la configuration Evitez les messages du type « Ce site est optimisé pour une consultation sous le navigateur XXX, en résolution YYY, veuillez vous y conformer » Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 121. 121 @elodescharmes Accessibilité technologique Deux possibilités : 1. La plateforme de consultation est de l’ordre du bonus : adaptez le contenu – Détection du navigateur utilisé – Définir une configuration idéale et une configuration dégradée (par exemple si Flash n’est pas installé) 2. La plateforme de consultation est stratégique : informez et guidez – Proposer un lien à l’utilisateur lui permettant de mettre à jour sa plateforme – Indiquer comment activer une option (accepter les cookies par exemple) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Proposer une version HTML alternative au Flash permet aussi d’optimiser le référencement du site
- 122. 122 @elodescharmes Règle n°12 : Satisfaction de votre internaute Cette règle passe avant toutes les autres Mais c’est la plus difficile à appliquer – Il faut connaître votre internaute (en temps qu’être humain et en temps que persona spécifique) – La satisfaction ne se mesure pas facilement et recouvre beaucoup de problématiques – Qualité de service, esthétique, expérience utilisateur… Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 123. 123 @elodescharmes Règle n°12 : Satisfaction de votre internaute Satisfaire grâce au critère d’utilité – Le site permet aux internaute de remplir leurs objectifs – Le site fourni des fonctionnalités de second niveau optimisant la satisfaction Satisfaire grâce à l’esthétique et à l’expérience utilisateur globale – C’est plutôt l’affaire des graphistes et designers (qui doivent travailler de concert avec l’ergonome) Satisfaire grâce à la qualité du service – Fournir un site respectueux en terme de transaction et de SAV – Ne s’applique pas uniquement au sites de e-commerce (ex : possibilité de se désinscrire d’une newsletter) Satisfaire grâce à la puissance et la fiabilité technique – Au final, votre site doit fonctionner ! – Attention à la fiabilité : erreurs techniques, liens cassés, pages en construction, lenteurs de chargement etc. (non, ça n’arrive pas qu’aux autres…) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
- 124. 124 @elodescharmes 12 règles à utiliser à bon escient Ces règles peuvent se compenser les unes par rapport aux autres 12 points à garder en mémoire lors de la phase de conception Ils devraient vous permettre d’éviter les principaux écueils d’un point de vue ergonomique Ces 12 règles peuvent également servir de grille pour la réalisation d’un audit ergonomique (cf. suite du cours)