Éléments de discussion

Présentation au sujet: "Éléments de discussion"— Transcription de la présentation:

1 Éléments de discussion
Ergonomie sur le web Éléments de discussion

2 Nomenclature, concepts à définir
Navigateur web = browser = fureteur Barre d’adresse Barre de statut Marques-page = favoris Sites web et pages web URL domaine, sous-domaine, registraire hyperliens sémantique

3 Types de sites web Site web personnel
Site web de compagnie ou d’organisme Site web annuaire Site web portail Site web moteur de recherche Site web de commerce électronique etc. L’ergonomie, l’interface, dépendra beaucoup de l’envergure du site et aussi de son domaine d’application.

4 Particularités Le web est interdépendant avec plusieurs outils
Apport du navigateur aux fonctionnalités Boutons de navigation Marque-pages Contenu interprété incertitude de la plate-forme d’interprétation : il existe des différences entre les navigateurs des normes sont en négociation (W3C)

5 Particularités Le web n’était pas prévu pour devenir ce qu’il est devenu : une plateforme logicielle. Au début, il n’était qu’un format (HTML) et un protocole (HTTP) pour transmettre des informations contenant du texte et des images interreliées entre elles par des hyperliens. Il en découle que sa première utilisation en tant que plateforme riche en informations de différents type et aussi logicielle a été chaotique.

6 Ergonomie du web, points importants
Les visiteurs ne lisent pas, ils scannent Règle des trois clics Savoir qu’on reste dans le même site web Cohérence du tracé régulateur Menu dans toutes les pages au même endroit Savoir où on est Fil d’Ariane (breadcrumb) URL sémantique de la page Rétroaction visuelle Effet de survol (rollover, mouseover): changement de couleur Info-bulles (attribut title) Confirmation des actions

7 Règle des 3 clics Cette règle postule que pour retenir un utilisateur sur notre site, il faut lui permettre de trouver ce qu’il cherche (les usages courants) en 3 clics ou moins. Cette règle favorise les sites larges et peu profonds hiérarchiquement, ce qui peut être contraire à sa sémantique. On peut garder à l’esprit la philosophie de la règle (minimiser le parcours de l’utilisateur) sans se restreindre à exactement 3 clics. Enfin, la conversion moderne de cette règle est de se soucier du chemin de navigation de l’utilisateur, et ce à travers un diagramme de navigation

8 Des conseils pour la règle des 3 clics
Premièrement, il ne faut pas utiliser de page de sélection de langage avant d’arriver au site ce qui a pour conséquence de retarder l’expérience utilisateur. Il faut plutôt proposer immédiatement une version avec une voie de sortie pour sélectionner les autres versions. Il est à noter que le choix de langage par défaut aide le développeur à diriger automatiquement l’utilisateur vers la bonne version le plus souvent. Enfin, la structure de navigation principale doit être accessible dès le début, afin de permettre à l’utilisateur de naviguer rapidement.

9 Critique contre la règle des trois clics
Une étude de Larson et Czerwinski montrerait qu'une structure trop profonde (qui implique donc des clics plus nombreux) serait certes néfaste à l'efficacité des recherches, mais qu'une structure trop peu profonde est tout aussi néfaste. La bonne solution serait un compromis entre la profondeur de la structure et le nombre d'options de navigation proposées à chaque étape. Études: la-regle-des-3-clics/ La règle peut être reformulée ainsi: ne pas mettre d’information importante à plus de 3 clics de profondeur : web.co.uk/seo-blog/3-click-rule/

10 Menus d’un site web Savoir qu’on reste dans le même site web
Cohérence du tracé régulateur Menu dans toutes les pages au même endroit Impression de rester dans le même logiciel malgré la navigation qui amène de tout nouveaux documents dans l’ordinateur du visiteur Les menus sont généralement placés en haut ou à gauche. La tendance actuelle est de placer le menu principal en haut et de garder l’espace de gauche pour un menu secondaire contextuel à la section actuelle du site.

11 Fil d’Ariane L’histoire raconte que Thésée, lorsqu’il affronta le labyrinthe et le minotaure, avait gardé le fil de son chemin en déroulant une tresse de cheveux de sa bien-aimée Ariane. En français on appelle le chemin de progression du site web le Fil d’Ariane. Le terme anglophone ‘breadcrumb’ se traduit par miettes de pain, et se base sur les contes européens pour enfants (petit poucet et Hansel et Gretel) ou des miettes de pain lancées sur le chemin servent aux enfants à ne pas se perdre en forêt.

12 Fil d’Ariane Le fil d’Ariane est un chemin de progression normal dans le site web pour atteindre la page courante. On atteint par exemple la page courante en cliquant ainsi: On clique sur la catégorie de notre choix On clique sur la sous catégorie de notre choix Enfin on clique sur l’article qui nous intéresse Le résultat pourrait être le suivant pour cette adresse: Accueil >> Catégorie >> Sous-catégorie >> Article

13 Fil d’Ariane Le fil d’Ariane ne signifie pas que c’est le seul chemin pour atteindre la page courante. Les pages peuvent être trouvées directement par un moteur de recherche externe tel que Google ou par le moteur de recherche interne du site web. Les pages peuvent être trouvées en cliquant sur des hyperliens à partir d’autres sites pointant vers eux. Les pages peuvent être trouvées si on fait certains liens internes ou certaines promotions sur la page d’accueil ou encore en faisant des liens contextuels à partir d’autres pages.

14 Composition d’un fil d’Ariane
Accueil >> Catégorie >> Sous-catégorie >> Article Le fil d’Ariane contient normalement des liens vers toutes les étapes intermédiaires de la navigation vers l’article courant Ces liens sont cliquables et peuvent amener le visiteur à retourner en amont pour choisir une autre sous-catégorie ou un autre article. Cependant, l’énoncé de la page courante, que ce soit l’article ou la catégorie, n’est pas cliquable car c’est la page courante. Accueil >> Catégorie >> Sous-catégorie

15 L’importance du fil d’Ariane
Le fil d’Ariane devient suffisamment important pour que Google propose un format sémantique pour celui-ci: py?hl=en&answer=185417 Déjà Google essaie de repérer et reproduire les fils d’Ariane sur les pages de résultats:

16 Reconnaissance des liens
Auparavant, les hyperliens étaient soulignés par convention ce qui facilitait la tâche pour savoir ce qui pouvait être cliqué. De nos jours, tellement de choses différentes sont cliquables dans une page que cette convention n’est plus utilisé. C’est aussi l’effet de l’influence des graphistes et concepteurs visuels. 0

17 Reconnaissance des liens
Pour aider à reconnaitre les hyperliens voici quelques manières. Rétroaction visuelle: le lien ou l’image change de couleur lorsqu’on passe la souris dessus. L’infobulle (title) peut indiquer ce qui est cliquable. Intitulé : le texte comporte un verbe qui invite à l’action, ceci indique que le lien ou bouton est cliquable Forme standard. Certains éléments sont cliquables de manière standard et on reconnait ces éléments visuellement sitôt qu’on est un utilisateur averti. Par exemple un bouton de formulaire. Le souligné (anciennement). La mise en évidence par la couleur

18 Les adresses web Les URL sont un outil de communication
Les URL peuvent être imprimées sur des pamphlets, sur des cartes d’affaire Elles peuvent être énoncées à la radio (voir les émissions de Radio-Canada) Les URL sont un outil de navigation Les hyperliens pointent sur une URL Elles peuvent, si elles sont bien constituées, renseigner comme le fil d’Ariane sur la position de la page dans le site. Par les utilisateurs avancés, elles peuvent être utilisées directement et modifiées pour la navigation

19 Les URL : outils de communication
C’est la convergence des médias internet, écrit et vocaux. Il faut viser une optimisation du transfert entre monde physique et informatique Noter des URL sur un bout de papier Écouter une émission de radio et tenter d’ouvrir la page

20 Pour simplifier les URL
Aspects sémantiques optimiser le nom de domaine termes compréhensibles représenter l’hiérarchie de fichiers comme le fil d’Ariane Aspects de communication (enlever les éléments techniques) minuscules pas trop longues pas de soulignement underscores _ ne pas écrire le http

21 Optimiser la sémantique
Les URL idéales L’optimisation des URL suppose un compromis entre la taille de l’URL et sa sémantique complète Une URL très courte serait moins détaillée pour le chemin de progression et le titre de l’article et inversement Optimiser la taille Optimiser la sémantique

22 Les adresses web Pour en savoir plus :
Une URL est l'adresse par laquelle un utilisateur accède à un site. Dans le domaine informatique, elle susceptible d'être vue par l'utilisateur à de nombreux endroits: Barre d'adresse du navigateur - Barre de chargement du navigateur Sites web: résultats d'un moteur de recherche, lien sur un site - Document électronique (fichiers pdf, Word, Powerpoint, etc.) - Etc.

23 Les adresses web Pour bien parler des URL il faut être familier avec la terminologie: aire-url Déjà en 1999, certains avaient des conseils pertinents:

24 Les adresses et le référencement
On a rapidement constaté que la présence de mots-clés dans les url favorisait le référencement: cles-url.htm Voici donc quelques conseils pour le référencement: referencement Google eux-mêmes ont leur propres conseils, des règles importantes à suivre: py?hl=en&answer=76329

25 Notions d’ergonomie en vogue
Loi de similarité Loi de proximité Fittsizing (Loi de Fitt) Affordance (langage visuel) Pour en savoir plus :

26 Loi de similarité Notre cerveau regroupe les éléments qui se ressemblent (forme, taille, couleur...) . La mise en application de cette loi permet une navigation plus intuitive.

27 Loi de proximité Notre cerveau regroupe les éléments qui sont proches.
Il considère que les éléments proches dans l’espace ont des points communs. Par analogie, l’éloignement des éléments évoque la différence.

28 Fittsizing Le fittsizing est le principe de compensation de la distance pour aller à un point par l’augmentation de sa taille. Il permet un gain de temps non négligeable pour l’internaute.

29 Affordance L'affordance est la capacité d’un objet à suggérer sa propre utilisation sans qu'il ne soit nécessaire de lire un mode d'emploi. William Gaver propose de classer les affordances en trois catégories : perceptible, dissimulée et trompeuse. L'affordance trompeuse est une affordance qui n'a en réalité aucune fonction réelle, par exemple un bouton placebo. Voici l’exemple des boutons d’ascenseur:

30 Des normes dans les organisations
en-bref/identification-visuelle-logo-et-normes/les-sites- web.html#c8662 Schéma de navigation officiel Conseils en ergonomie S’adresse aux départements et associations.

31 Des normes dans les organisations
aa-accessibilite Des conseils sur les url Des conseils sur les contenus alternatifs Des conseils sur les encodages techniques

32 Des normes dans les organisations
Business Link, une division gouvernementale d’Angleterre : d= &site=181&type=RESOURCES &r.l1= &r.l2= &r.l3= &r.t=RESOURCES&site=181&topicId=