Adaptez l'ergonomie de votre site Internet en fonction de vos objectifs. Prenez en compte les nouvelles attentes de vos clients en terme d'ergonomie : soigner sa page d'accueil, rester fidèle à l'image de son entreprise tout en captivant le visiteur.

1. Jeudi 16 Juin 2011
Prenez en compte les nouvelles
attentes de vos clients en terme d’ergonomie

2. Teresa COLOMBI
LudoTIC
contact@ludo-tic.com
Marlène KORSIA
CCIMP
Service Innovation & TIC
marlene.korsia@ccimp.com

3. Définitions
L’ergonomie a pour vocation d’adapter les objets,
le matériel pour que leur utilisation soit facile dans
la vie de tous les jours
Un site internet ergonomique conduit le plus
simplement et le plus rapidement l’internaute vers
l’information qu’il cherche

4. Définitions
L’ergonomie est une discipline qui varie :
- Selon le contexte
- En fonction du site étudié
- Selon les objectifs stratégiques à atteindre
- Selon les internautes ciblés
Chaque projet est unique

5. Quelques règles de base
Source : minini.biz Amélie Boucher

6. Quelques règles de base
Accompagner l’internaute (guidage)
• Dans les différentes étapes
• Dans sa navigation (fil d’ariane,
changement de couleurs du texte, etc…)
• Mise en avant de messages impliquant une
action

7. Objectifs
• Retenir l’internaute, vendre, fidéliser
Critères à analyser
• Attentes de l’utilisateur, habitudes, âge,
équipements, niveau de connaissance
Quelques règles de base

8. Quelques règles de base
Organiser sa page web :
• Supprimer tout ce qui est inutile
• Limiter le poids des pages (sauf si justifié par une
attente de l’internaute)
• Avoir une hiérarchie de lecture claire
• Créer une harmonie entre les pages
• Proposer des pages aérées
• Adapter les scrolls de page

9. Quelques règles de base
Soigner le texte :
• Privilégier le XHTML aux images pour le
texte
• Eviter l’usage d’images sous le texte
• Utiliser une police de caractère suffisamment
élevée (jamais en dessous de Arial 10 ou de Verdana 9)
• Limiter le nombre de couleurs différentes
• Faire des phrases courtes en faisant ressortir
les mots clés

10. L’evolution des outils
Adapter son site aux nouveaux terminaux
• Optimiser son site pour une utilisation sur
smartphones et tablettes
• Améliorer les temps de téléchargement
• Faciliter la navigation

11. Un site Internet aux normes W3C
(World Wide Web Consortium)
Pour une interopérabilité
• Une norme créée pour une compatibilité des
technologies
• Comprend une charte de fonctionnement
pour superviser le développement d’un
ensemble de standard.
www.w3.org

12. Nouvelles Technologies de plus en plus puissantes et
“envahissantes”, alors que les utilisateurs sont de moins en
moins compétents
Logiciels avec de plus en plus de fonctions, mais moins de
40% sont réellement utilisées
L’introduction de nouveaux dispositifs informatiques en
entreprise correspond souvent à une baisse de la
productivité
Le paradoxe actuel

13. Pourquoi a-t-on besoin d’ergonomes ?
Interface
Développeur /
Utilisateur
Développeur /
Utilisateur
Hier
Interface
UtilisateurDéveloppeur
Aujourd’hui
?

14. Définition d’ergonomie
•Les ergonomes contribuent à la conception et à l’évaluation de toute
sorte d’artefact, ayant pour but de les rendre compatibles avec les
besoins, les compétences et les limites des êtres humains
Les mots clés de l’ergonomie sont:
 Efficacité
 Efficience
 Satisfaction

15. Le Retour sur Investissement
•Penser à améliorer l’ergonomie d’un produit seulement après avoir
constaté l’existence de problèmes ne permet pas de rattraper toutes
les erreurs!
•On n’a pas 2 fois l’occasion de faire une première bonne
impression…
If you can't afford the time to do it right, how are you
going to find the time to fix it up?

16. ROI pour un Intranet
➚ Amélioration de la productivité et de son suivi
➚ Meilleure allocation des Ressources Humaines
➚ Satisfaction des équipes
➘ Réduction des coûts liés aux erreurs humaines
➘ Réduction des coûts d’entraînement et formation

17. ROI pour un site e-commerce
➚ Amélioration des ventes en ligne jusqu’à 80%
➚ Augmentation des parts de marché
➚ Augmentation du trafic
➚ Amélioration de l’image de marque
➚ Satisfaction des utilisateurs
➚ Fidélisation des clients

18. ROI et moments d’intervention
•Le ROI varie en fonction du moment d’intervention:
 ROI de l’ergonomie de conception 1:100 $
 ROI de l’ergonomie de correction 1:10 $
•L’investissement à prévoir n’est évidement pas du même montant,
mais son impact varie de façon considérable
•Idéalement, 10% du budget du projet devrait être consacré à
l’optimisation de l’interface

19. Quelques chiffres du ROI
conception réalisation déploiement
possibilités
IHM
coût
changements
Intervention sur logiciel de Traduction :
Coût de l’étude ergo = 3.500€ Coût des modifications = 2.500€
Opérateurs = 30 requêtes/j, 5min chacune
Gain temporel = 1min par requête
1min x 5 opérateurs x 30 requêtes x 220 jours ouvrés = 550 heures
Economie : 550h x 22€/h = 12.100€
Gain : 6.100€ sur année N, 12.100€ sur N+1 et suivantes

20. Les principes d’ergonomie Web: la grille LudoTIC
1. Feedback du système
2. Match avec les profils utilisateurs
3. Sensation de contrôle
4. Cohérence et standard
8. Flexibilité
9. Surcharge cognitive
10. User Experience
5. Gestion des erreurs 12. Aide et documentation
11. Dialogue Homme-Machine
6. Optimisation des performances
7. Organisation visuelle
13. Collaboration

21. Le Feedback du système
•L’utilisateur doit être informé de l’état du système à tout moment,
l’interface doit lui fournir un feedback suffisant pour réaliser sa tâche
dans les meilleures conditions, il doit être tenu informé des opérations
sous-jacentes à ses actions même si celles-ci ne modifient pas
immédiatement l’interface.
Comment sélectionner les produits?
Combien de temps il faudra pour télécharger un fichier?

23. Match avec les profils utilisateurs
•Le site tient compte des spécificités des utilisateurs auxquels il
s’adresse. Les spécificités en question peuvent concerner aussi bien
des caractéristiques liées au métier des utilisateurs, qu’à leurs
particularités linguistiques ou culturelles.
•Le langage des messages d'erreurs est à la portée de l'utilisateur et évite le
« jargon informatique » ?
•L'organisation de l'arborescence/des menus/des onglets reflète un ordre clair
et logique pour le public ?

24. Arborescence et tri de cartes

25. Sensation de contrôle
•L’utilisateur ne doit pas douter du résultat de ses actions. Il doit
toujours avoir l’impression de «maîtriser la situation» : savoir dans
quelle partie du site il se trouve, quelles fonctions il a à disposition et
où aller chercher les contenus qui l’intéressent.
Est-ce qu’on fournit suffisamment de repères visuels à l’internaute ?
Petite vidéo explicative…

26. Cohérence et respect des standards
•Le site doit être cohérent, autrement dit les noms des boutons, la
charte graphique et tout autre élément présent à plusieurs endroits
doit garder le même aspect, la même position et le même nom pour
ne pas dérouter l’utilisateur. Il doit également respecter les standards
Web connus et partagés par les utilisateurs afin de ne pas les
dérouter
•Le titre de chaque page est cohérent avec les liens qui y amènent ?
•Le logo (en haut à gauche) est-il un lien vers l’Accueil ?

27. Gestion des erreurs
•Le site évite de pousser l’utilisateur à commettre des erreurs en évitant par
exemple de laisser visibles des choix qui ne peuvent pas être sélectionnés
ou en oubliant de signaler clairement le fonctionnement d’une procédure
(inscription, check-out…). L’IHM doit également aider les usagers à
comprendre et corriger facilement les éventuelles erreurs commises (ex.
dans les formulaires).
Lorsque possible, les champs de saisie/menus déroulants sont pré-positionnés sur le
choix le plus probable ?
Les éléments des menus et des onglets sont entièrement cliquables (non seulement
le texte mais aussi le fond) ?

31. Optimisation des performances
•Le site minimise le nombre de clics et les actions superflues. Les contenus
clés sont faciles à rejoindre, faciles à lire et à comprendre. L’utilisateur
dispose de plusieurs moyens pour atteindre au plus vite ses objectifs et avec
le minimum d’efforts possibles.
•Les chargements des pages sont rapides même en connexion à bas débit ?
•Toute information qui peut être calculée par le système est placée automatiquement
dans les champs des formulaires (ex. ville de l'utilisateur, calculée à partir du code
postal) ?

32. Organisation visuelle
La mise en page de l’IHM est claire et bien organisée. Les différentes parties
de chaque page-écran sont faciles à reconnaître et distinguer. Le texte est
lisible
•Les nombres supérieurs à 999 sont séparés par un point (ex. 1.234) pour les sites
francophones et par une virgule pour les sites anglophones (ou pas un espace vide,
pour toutes les langues) ?
•La page d'accueil ressemble à une page d'accueil (peu de contenu, beaucoup de
liens) ?
La structure visuelle de la page d’accueil aide l’internaute à trouver facilement les
contenus les plus importants?

34. Flexibilité
•Le site s’adapte aux différents besoins des utilisateurs, novices et experts. Il
est également capable de prendre en compte les préférences de chacun. Il
est enfin facilement accessible par clavier et par navigateur vocal, systèmes
utilisés par les déficients visuels et qui nécessitent le respect de lignes-guide
spécifiques (WAI…)
La réalisation de tâches « simples » comme ajouter un ami sur FaceBook ou acheter
un CD sur Fnac.com peuvent demander de 4 à 10 fois plus de temps à un non-voyant
qu’à une personne sans handicap visuels.
Des règles existent, il faut les appliquer…

35. Surcharge cognitive
•Trop d’information tue l’information, et trop de choix tue le choix. L’usager ne
doit pas être submergé par des contenus qui ne sont pas pertinents ou qui
sont trop nombreux pour qu’il puisse tous les traiter de façon convenable.
On évite le scrolling, au moins sur la HP et dans les menus déroulants ?
Chaque zone de chaque page a un sens clairement identifié ?
On limite au maximum le nombre de choix ?

37. User Experience
L’utilisation de l’IHM doit être plaisante et donner à l’utilisateur envie de
continuer. Le design doit être agréable et soigné. L’interaction doit être fluide
et permettre à l’utilisateur une « user experience » positive et agréable,
bénéfique en termes d’utilisabilité mais également pour favoriser la
fidélisation à la marque
Le tunnel de conversion est-il le plus court possible ?
On privilégie le signup avec son adresse mail ?
On évite de « piéger » l’utilisateur avec inscriptions obligatoires et abonnements à
newsletters ?

39. Dialogue Homme-Machine
Chaque contenu informatif est une forme de communication. Le site doit ainsi
respecter les règles de la communication homme-homme afin de ne pas
surprendre ou perturber l’utilisateur, en ce qui concerne les liens mais aussi
les boîtes de dialogue, etc.
Les actions qui ont des conséquences importantes et/ou non réversibles (ex.
destruction du profil de l'utilisateur) nécessitent une confirmation de l'utilisateur ?
Les messages d'erreur fournissent des explications quant à l'origine du problème et à
sa solution ?

41. Aide et documentation
Même si l’IHM est claire et bien organisée, des formes d’aide doivent être
tout de même fournies. Elles peuvent prendre plusieurs formes selon les
besoins (glossaire, plan du site, tooltips) mais elles doivent dans tous les cas
rester faciles à trouver et exploiter.
La rubrique "Aide" est positionnée de façon visible et conventionnelle ?
Si le site dépasse les 3 niveaux de profondeur, un plan est disponible ?

42. Collaboration
De plus en plus de sites proposent différentes formes de partage
d’information et de collaboration entre utilisateurs. Ceci est très positif et
pertinent, à condition que les outils fournis soient faciles à comprendre et
utiliser et qu’ils correspondent aux besoins des utilisateurs.
L'utilisateur a la possibilité de s'exprimer (commentaires, avis, notes…) ?
Des moyens de communication synchrones et/ou asynchrones sont fournis ?

43. L’ergonomie de la Page d’accueil
 La HP est à soigner particulièrement, c’est votre carte de visite
 Elle doit refléter votre image de marque
 Elle doit être accessible de toutes le pages du site, sauf d’elle-même
 Elle doit se montrer « vivante » (news, actualités…)
 Elle doit être « connectée » à d’autres supports (blog, Twitter, FB,
youtube…)
 Elle doit véhiculer clairement et rapidement le contenu du site
 Elle doit fournir un accès rapide aux contenus clé

44. Perception et navigation sur 3 sites
 Etude comparative sur sites d’électroménager: Electrolux, Miele, LG
 18 participants en France, 18 en Italie
 Objectifs : tester la perception de la page d’accueil, l’efficacité et
l’efficience dans la réalisation des tâches et la mémorisation des
contenus
 Tâches « classiques » de recherche d’informations, produits
d’entretien, numéro de téléphone du SAV
 Données enregistrées : mouvements oculaires, clics, commentaires,
dessins

45. Entretien des sols Cuisson Lavage Lave-vaisselle Froid Petit ménager Professionnel
Le Menu de Cannes
Suivez l'évènement, votez et vous pourriez nous rejoindre sur le tapis rouge au Festival de
Cannes.
Impliquez-vous
Magnifiquement Bijou
« L’espace limité est un défi pour
beaucoup d'entre nous... »
Compact sans se sentir à l'étroit,
le design à prédominance
blanche fait le meilleur usage de
la lumière disponible. Les
appareils noirs apportent une
touche de contraste et l'éclat de
la couleur du tapis assure
l'harmonie de toute la pièce.
En savoir plus
"The 2nd Space Age":Cette
année, les étudiants devront
imaginer des solutions
permettant de préparer et de
conserver les aliments, de laver
le linge et nettoyer la vaisselle
dans les habitations de 2050!
En savoir plus
La gamme Green
La gamme Green est une offre
complète d'appareils respectueux
de l'environnement.
Découvrez la gamme
Produits
professionnels
Vous aider à choisir
Découvrez les produits
Mon Electrolux
Tirez le meilleur parti de vos
Points de vente
Entrez votre code postal et
ACCUEIL PRODUITS INSPIRATION INNOVATION BOUTIQUE AIDE
Trouver un magasin Accéder à Mon Electrolux S'identifier Recherche!
Electrolux.fr

46. Exploration libre page d’accueil (10 sec)
• La zone la plus regardée est
l’inscription publicitaire « Le
Menu de Cannes » sur la gauche
de la page.
• Les autres fixations sont
reparties entre:
- le menu graphique des produits
- le logo.
• Dans le menu textuel, l’élément
le plus fixé est « Produits ».
• Seulement 2 utilisateurs ont
utilisé le scrolling de la page,
donc la partie inférieure n’est
pratiquement pas regardée.
Parcours visuel:

47. • 11 utilisateurs sur 17 ont fixé
d’abord l’inscription « Le Menu
de Cannes », 3 utilisateurs ont
fixé comme premier élément la
zone de menu graphique, 1
utilisateur a fixé d’abord la zone
« Inspiration » sur le menu
textuel et 2 ont fixé la barre de
l’adresse
• Personne n’a regardé le logo en
1er
(petit, au mauvais endroit)
• Le moteur de recherche est
également fixé très peu et très
tard
Exploration libre page d’accueil (10 sec.)
Première zone vue:

48. Miele.fr
Recherche sur www.miele.fr:
Offres et Nouveautés Les services ...Trouvez le vôtre ! Miele Projets Immobiliers
Aspirateurs Lave-vaisselle Machines à café Cuisson Froid Soin du linge Professionnel
L'entreprise Miele
Développement durable
Miele France
Electroménager
Professionnel
Les Services
Trucs et astuces
Cuisiner avec Miele
Presse
Galerie Miele
Recherche revendeur
La Boutique Accessoires
uniquement les produits
Envoyer
Page d'accueil Contact Références Infos légales International

49. • Les zones les plus regardées :
- le visage de la femme au
centre (figure humaine)
- le menu sur la gauche
- les images en bas
• Le parcours est dispersé car la
page est plutôt compacte et
plusieurs zones à la fois
attirent l’attention
• La plupart de sujets a rapporté
que la page contient trop
d’informations textuelles et
que les caractères du menu
sont trop petits
Parcours visuel :
Exploration libre page d’accueil (10 sec.)
« Il y a trop de texte. Moi je préfère
quand il y a plus d’images. Ici il y a
beaucoup d’élements »
• La majorité des participants ont
rapporté que la page ne véhicule
pas l’idée d’électroménager

50. La première zone vue :
• 9 utilisateurs sur 18 ont fixé d’abord l’image de la femme au centre, 6 utilisateurs ont
fixé comme premier élément le bandeau gris avec la marque en haut de la page, 2
utilisateurs ont fixé d’abord le « menu produits » en haut et 1 utilisateur la zone
graphique « Les Services » (en bas de la photo)
 La partie à gauche de la
page contient des éléments
importants (logo, menu
principal et moteur de
recherche), mais elle n’a pas
été fixée d’abord. Cela peut
résulter du fait que:
- les caractères du menu
sont très petits et peu
visibles
- les images et les
caractères plus grands et
colorés au centre de la page
attirent plus d’attention
Exploration libre page d’accueil (10 sec)

51. Lg.fr

52. La page d’accueil du site LG.fr contient beaucoup d’images dynamiques en flash qui
apparaissent séquentiellement. Cela semble fait exprès pour attirer l’attention des
utilisateurs sur les messages publicitaires.
.
Exploration libre page d’accueil (10 sec)
1
2
2
3 2
4
Les nombres identifient la séquence d’apparition des contenus.

53. • Les zones les plus regardées :
- menu sur la gauche
- titre du texte à coté de
l’image publicitaire du
téléphone
- image du téléphone
• Plusieurs zones à la fois
attirent l’attention
Parcours visuel :
Exploration libre page d’accueil (10 sec)

54. La première zone vue :
• 8 utilisateurs sur 18 ont fixé d’abord le logo LG en haut sur la gauche, 6 utilisateurs ont
fixé comme premier élément la zone d’images au centre de la page (en particulier les
images d’une lave-linge et d’une télé) et 4 ont fixé d’abord la barre de progression du
chargement de la page.
 Nous constatons une
majorité de parcours en
diagonal, entre 2 éléments
graphiques qui attirent
l’attention (logo et zone
d’images). Le fait de fixer en
premier le logo de LG
permets aux internautes de
reconnaître cette marque,
bien connue par la plupart
d’entre eux.
 Cette page est la plus
appréciée, parce que claire,
moderne et simple
Exploration libre page d’accueil (10 sec)

55. Pour terminer… mythes et vérités
« le seul principe qui compte est celui des 3 clics »
faux
Comme tous les principes, il est à utiliser avec précaution, car il se peut qu’il ne
soit pas pertinent pour tous les sites
« de toute façon l’ergonomie se réduit à du bon sens »
Vrai et faux
Les règles que nous avons décrites sont souvent basées sur du bon sens, mais
tout le monde n’en a pas… Des approches plus spécifiques nécessitent des
compétences ad hoc

56. Pour terminer… mythes et vérités
« faire un site ergonomique c’est cher »
Vrai et faux
Des techniques comme le tri de cartes ou les dessins sont à moindre coût, il
suffit d’intégrer la démarche « centrée utilisateur ». Certes, l’ergonomie
représente un budget, mais il faut voir le ROI, pas la dépense
« L’accessibilité ? De toute façon les handicapés visuels ne
viennent pas sur notre site »
faux
Le public des handicapés visuels est très vaste, et il passe énormément de
temps sur le Web… c’est un marché à prendre

57. Pour terminer… mythes et vérités
« On a de très bons designers, donc notre site est
ergonomique »
faux
Le design influence l’appréciation du site, mais il n’a pas forcément d’impact sur
l’efficacité et l’efficience dans la recherche d’informations… Ergonomie et
design sont 2 choses différentes!
« Bon, notre site n’est peut être pas au top de l’ergonomie,
mais personne ne se plaint »
faux
Dans l’ère du Web 2.0 les internautes s’expriment et rien n’est à craindre plus
que le mauvais Buzz…

58. Merci de votre attention
Teresa COLOMBI
LudoTIC
contact@ludo-tic.com
Marlène KORSIA
CCIMP
Service Innovation & TIC
marlene.korsia@ccimp.com

59. La prochaine action
« Identifiez les risques juridiques liés
au développement
et à l’administration d’un site Internet »