Cours d'ergonomie des interfaces web pour la filière IMR à l'Enssat (Lannion). Année 2012-2013.

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. Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information
Architecturer l’information

3. 3
@elodescharmes
Architecturer l’information
 Ranger pour aider à trouver
– Comme dans la vie réelle, lorsque c’est mal ordonné il est difficile de mettre la main sur ce que
l’on cherche
 Retour client : un site est jugé « mal conçu » en général pour des défaut d’organisation
 Si l’information est disponible, l’internaute doit pouvoir la trouver rapidement
 Si l’information n’est pas disponible, l’internaute doit également le savoir rapidement
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information

4. 4
@elodescharmes
Architecturer l’information
 Architecturer l’information = trouver la meilleure manière de structurer les contenus en
fonction des attentes qu’on vos internautes lorsqu’ils consultent le site
 Défaut courant dans les projets web : on veut avoir un aperçu graphique avant de savoir ce que
contiendra le site et de quelle manière on va l’organiser
– A peu près aussi logique que de vouloir peindre les murs du salon avant d’avoir construit la
maison…
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information

5. 5
@elodescharmes
Comment visite-t-on un site internet ?
 Par mot-clé  droit au but
– Utiliser un moteur de recherche pour passer outre l’arborescence d’un site
– Support : moteur de recherche
– Question à se poser
– Avez-vous besoin d’u moteur de recherche ?
– Si oui pourquoi ?
– Quel(s) contenu(s) indexe-t-il ?
– Quel type de présentation pour les résultats ?
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information

6. 6
@elodescharmes
Comment visite-t-on un site internet ?
 La navigation ciblée  étape par étape
– Parcourir l’arborescence d’un site à la recherche d’un contenu précis
– Facilitée par la structuration des contenus, et tout particulièrement des éléments de navigation
– Support : deux types d’éléments de navigation
– La navigation globale, un repère persistant
– Eléments de navigation qui se retrouvent à travers tout le site
– La navigation locale, fille de la navigation globale
– S’adapte en fonction de la rubrique de navigation globale consultée
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information

7. 7
@elodescharmes
Comment visite-t-on un site internet ?
 La navigation libre  se promener sur le web
– Visiter un site internet pour passer le temps
– Stratégie de navigation peu courante et pour laquelle les internautes sont moins exigeants, elle
doit pourtant être prise en compte
– Support : la navigation transversale (ou contextuelle, ad hoc), générée en fonction du besoin
– N’obéit à aucune règle particulière
– Le format doit respecter le niveau d’importance : lien hypertexte ou images
– Postulat : la probabilité que l’internaute s’intéresse à un contenu X augmente lorsqu’il
consulte un contenu entretenant un lien quelconque avec X.
– Autres supports possibles :
– Mise en avant de certains contenus
– Fonctions « aléatoires »
– etc.
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information

8. 8
@elodescharmes
Comment visite-t-on un site internet ?
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information
Bonne
application
Fonction de
navigation
transversale : les
internautes ayant
acheté X ont
également acheté…
www.fnac.com (13/03/2011)

9. 9
@elodescharmes
Prioriser une stratégie
 Rechercher ou naviguer, telle est la question…
 Problématique du concepteur : prioriser une stratégie
– Stratégie de recherche
– Par mot-clé
– Ciblée
– Stratégie de navigation
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information

10. 10
@elodescharmes
Prioriser une stratégie
 Les critères à prendre en compte
– La raison pour laquelle on vient sur le site
– Ex : Acheter un contenu particulier vs. Acheter un type de contenu
– Les préférences personnelles de l’utilisateur
– Les objectifs poursuivis
– Ex : Pour aller vite, on a tendance à chercher un moteur de recherche
– La confiance envers le moteur de recherche et la navigation
– En fonction du niveau de confiance dans le site consulté et de l’expérience sur ce site
– Le type de site
– Ex : Recherche par mot clé plus courantes sur les sites au contenu fourni
– La présentation des fonctions de recherche et de navigation
– Ex : moteur de recherche accessible via un lien vs. Champ de recherche traité comme
l’élément principal d’une page
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information

11. 11
@elodescharmes
Une organisation calquée sur les attentes de
l’internaute
 Source d’inspiration n°1 : les objectifs et comportements de l’utilisateur
– Création de persona
– Identification des objectifs et de tâches à réaliser correspondantes
 Source d’inspiration n°2 : les représentations mentales
– On parle des représentations mentales de vos internautes
– Deux méthodes :
– Tri des cartes
– Analyse des représentations mentales lors de tests utilisateurs (plutôt en évaluation de
solution existantes)
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information

12. 12
@elodescharmes
Une organisation calquée sur les attentes de
l’internaute
 Source d’inspiration n°3 : allez voir ailleurs !
– S’approprier l’environnement que connaissent votre internaute
– Lorsqu’il arrive sur votre site, l’internaute à un acquis qui peut être forgé par la consultation
préalable de sites (ou lieux réels) concurrents
 Source d’inspiration interdite : votre propre vision des choses
– Calquer la navigation sur la logique des utilisateurs
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information

13. 13
@elodescharmes
Concevez votre architecture de l’information
 L’architecture de l’information doit résulter d’une convergence d’objectifs :
– Faciliter la navigation pour vos visiteurs
– Exigences stratégiques et/ou marketing
 En cas de conflit, toujours privilégier la simplicité d’usage
 Deux étapes
– Catégoriser
– Structurer
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information
Catégoriser
Structurer
Plan de site

14. 14
@elodescharmes
Catégoriser
Regrouper pour simplifier
 Principe : ranger les choses en groupes, catégories
– Réflexe cognitif
– On découpe le monde pour mieux le comprendre
 Les contenus peuvent être classés ensemble pour différentes raisons : il faut déterminer les
critères qui permettent de rapprocher un contenu d’un autre
 Exemples de critères :
– Alphabet
– Chronologie
– Localisation géographique
– Thème (le plus fréquent, mais plus ambigüe que les précédents)
– …
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information
Catégoriser
Structurer
Plan de site

15. 15
@elodescharmes
Catégoriser
Regrouper pour simplifier
www.laposte.net (13/03/2011)
Bonne
application
Regroupement par
action utilisateur
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information
Catégoriser
Structurer
Plan de site

16. 16
@elodescharmes
Catégoriser
Regrouper pour simplifier
www.pole-emploi.fr (13/03/2011)
Bonne
application
Regroupement par
profil utilisateur
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information
Catégoriser
Structurer
Plan de site

17. 17
@elodescharmes
Structuration de l’information
 Hiérarchiser
 Mettre en valeur certains contenus
 Il existe plusieurs structures peuvent coexister sur un même site
– Structure primaire : hiérarchie par les menus
– Structure secondaire : liens contextuels
– Structure floue : les liens semés au gré du site
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information
Catégoriser
Structurer
Plan de site

18. 18
@elodescharmes
Hiérarchie par les menus
 Support : barres de navigation
 Tout ce que vous avez à dire n’a pas forcément le même poids
 Vous pouvez vous permettre d’avoir des items de nature différente
 Penser aux effets de primautés et de récence (« nouveautés », « meilleures ventes », …)
www.lequipe.fr (13/03/2011)
Tous les sports n’ont pas la même importance
www.sephora.fr (13/03/2011)
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information
Catégoriser
Structurer
Plan de site

19. 19
@elodescharmes
Structure secondaire par les liens
contextuels
 Souvent basés sur l’utilisation de métadonnées
structure principale :
barre de navigation locale
structure secondaire :
liens basés sur des métadonnées
www.reservoir-jeux.com (13/03/2011)
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information
Catégoriser
Structurer
Plan de site

20. 20
@elodescharmes
Structure floue par les liens semés au gré du
site
 Basés sur des liens
hypertexte disséminés
dans le contenus
 Principalement pour des
sites éditoriaux
www.gizmodo.fr (27/03/2013)
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information
Catégoriser
Structurer
Plan de site

21. 21
@elodescharmes
Concevez votre architecture de l’information
 Ces trois types de structures sont plus ou moins pérennes mais doivent de toute façon être
remises en cause régulièrement au cours de la vie d’un site
 Cette phase de structuration doit également prendre en compte certaines contraintes
– Les caractéristiques cognitives des internautes
– Les limitations en termes d’écran
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information
Catégoriser
Structurer
Plan de site

22. 22
@elodescharmes
Réaliser un plan de site
 Doit représenter
– Les rubriques
– Les pages
– Les relations des unes par rapport aux autres
 Ne pas confondre :
– Plan de site : votre outil de travail
– Plan du site : représentation transmise à l’internaute
GénéralitésComment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information
Catégoriser
Structurer
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information
Catégoriser
Structurer
Plan de site

23. 23
@elodescharmes
Réaliser un plan de site
 Trouver le bon compromis
entre largeur et profondeur
Architecture plate
Moins de clics
Plus de difficultés à choisir
Architecture profonde
Plus de clics
Moins de difficultés à choisir
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information
Catégoriser
Structurer
Plan de site

24. 24
@elodescharmes
Bien choisir ses mots
 La quête du mot idéal
– Objectif principal : rendre l’internaute sûr de son choix lorsqu’il clique sur un élément de
navigation
– Objectif secondaire : l’internaute ne se trompe pas de rubrique
Question à se poser « êtes-vous sûr que pour accomplir une tâche donnée l’internaute n’a d’autre
choix que de cliquer sur cette rubrique ? »
– Ce que vous devez redouter : que l’internaute fasse un mauvais choix
– Méthode : tri des cartes
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information
Catégoriser
Structurer
Plan de site

25. 25
@elodescharmes
Bien choisir ses mots
 Intégrer les contraintes spécifiques du web
– Faites court !
– Prendre en compte les conventions de vocabulaire
– Les conventions web
– Les conventions du domaine
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information
Catégoriser
Structurer
Plan de site

26. 26
@elodescharmes
Traduire l’architecture par la navigation
 Les éléments de navigation doivent permettre à l’utilisateur de répondre à tout moment aux
questions suivantes :
– Où suis-je ?
– Où puis-je trouver ce qui m’intéresse ?
– Qu’est-ce que ce site propose d’autre ?
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information
Catégoriser
Structurer
Plan de site

27. 27
@elodescharmes
Confronter l’architecture du site aux
personas
 Tracer le parcours réel, pas à pas, de votre persona afin de réaliser une action (navigation ou
transaction)
 on ajoute la composante « temps »
 Deux niveaux de détails
– Parcours client
– Flux d’interaction site ↔ internaute
 Remarques
– Uniquement pour les missions des persona, c’est-à-dire pour les actions les plus fréquentes sur
votre site
– il est possible lors de cette étape d’avoir à revenir en arrière si certains choix d’architecture de
l’information sont remise en cause !
Généralités
Comment visite-t-on un site internet ?
Une organisation calquée sur les attentes de l’internaute
Concevez votre architecture de l’information
Catégoriser
Structurer
Plan de site