1. Jeudi 21 juin 2012
Rendez votre site attractif
Intégrez les nouvelles règles d’ergonomie

2. L’ergonomie
Définition
« Un site ergonomique est un site où l’utilisateur comprend très
rapidement ce qu’il doit faire pour utiliser le site internet. L’internaute ne
doit pas avoir besoin de chercher pendant plusieurs longues minutes et
lire les textes d’aide pour arriver à ce qu’il cherche. »
Source : www.ergonome.com

3. L’ergonomie
 75% des internautes rencontrent encore «souvent» des difficultés
pour trouver ce qu’ils cherchent sur les sites qu’ils consultent, et 58%
sont «souvent» confrontés à des problèmes de navigation
 66% trouvent les contenus des sites «souvent mal présentés» et
47% «l’allure de la page d’accueil souvent peu engageante».
 7 internautes sur 10 ne reviennent pas sur un site où ils ont
rencontré des problèmes de navigation ou d’orientation. Des chiffres
non négligeables et prouvant une fois de plus que le temps passé sur
l’analyse et la conception web n’est pas négligeable.
Source : www.ergonome.com

4. Michèle Delacroix,
Ergonome cognitiviste

5. Plan
 Ergonomie d’un site web en 2012
 Ergonomie des IHM
 Utilisabilité
 Utilité
 Micro utilité
 Design émotionnel
 Persuasion
 Evolutions
 Des interaction IHM
 Des supports utilisés
 Des technologies
 Des utilisateurs
 Des sites

6. Plan
 Les principes d’ergonomie du Web
 Les règles d’ergonomie
 L’ergonomie de la page d’accueil
 Accessibilité
 Adaptation de la communication
 Communication et présence sur le web
 Responsive design
 Communication sur les réseaux sociaux pourquoi ?
 Conclusion
 Retour sur Investissement (ROI)
 Ergonomie du Web: mythes et vérités
 Pour finir…
 Pour en savoir plus…

7. Partie 1 -
Ergonomie d’un site web en 2012

8. L’ergonomie d’un site web en 2012
 Dépasse le domaine de l’accessibilité et de l’utilisabilité.
 Nécessité de rendre les sites attractifs.

9. L’ergonomie des IHM
IHM : Interface Homme-Machine
Objectif : rendre les interfaces
• plus efficaces : réussir à faire ce que l’on souhaite faire
• plus efficientes : rapidement et avec le moins d’erreur possible
(à l’exception des jeux vidéos)
• plus satisfaisantes : esthétisme, plaisir
Base de l’Ergonomie pour un site web :
 Répondre aux critères d’utilité & d’utilisabilité

10. Utilisabilité
« Un produit est dit utilisable lorsqu'il peut être utilisé avec
efficacité, efficience et satisfaction par des utilisateurs donnés,
cherchant à atteindre des objectifs donnés, dans un contexte
donné. »
Norme ISO 9241

11. Utilité
 Va répondre à un besoin
A quoi sert le site ? Quel est le service proposé ?
Ex : Rechercher un artisan, acheter un livre, m’informer sur des modèles de voiture…
Micro-utilités : fonctionnalités qui aident et guident l’utilisateur

12.  En tant que dirigeant, quel est l’objectif du site ?
 Améliorer l’image de marque
 En tant qu’internaute, pourquoi aurais-je besoin d’aller consulter le
site Barilla ?
 Acheter des pâtes ? Non
 Alors pourquoi ?
Utilité du site Barilla ?

13. Utilité du site Barilla
http://fr.barilla.com/

14. Micro utilités

15. Design émotionnel
 Structurer l’écran pour donner une impression d’harmonie.
 Utilisation, du chiffre d’or : 1,618 (donne rectangle ou spirale d’or)
qui serait le nombre du beau… Ex : 10 / 1,618 = 6,180
Animation sur la construction de la spirale d’or :

16. Design émotionnel
 Utilisation de grilles
http://960.gs/

17. Design émotionnel
 Transmettre de l’humanité afin de créer de la proximité et de l’empathie.
 Rendre agréable, original par des détail graphiques, fonctionnels :
 Ton particulier dans les textes, mascotte,
 Fonctionnalités amusantes, contrastes (univers)
 Mettre en avant les hommes
Peut se faire au fil de l’eau, par ajout de petites touches… http://kontestapp.com/fr/

18. Exemples de design

19. Persuasion
Dimension sociale de l’expérience utilisateur. Eric Brangier, 2010
Objectif :
 Modifier le comportement et l’attitude des utilisateurs
 Les amener à accomplir des actes qu’ils n’auraient pas
spontanément réalisés.
 Nouvelle dimension à prendre en compte durant la phase de
conception et d’évaluation

20. Persuasion
 Crédibilité : avoir l’air fiable (ex : paiements sécurisé, références…)
 Privacité : sécuriser l’internaute (droits respectés, informations
gardées confidentielles)
 Personnalisation : internaute se sent ciblé, faire ressortir le
sentiment d’appartenance à un groupe (ex : livres achetés par
d’autres internautes, restaurants recommandés sur un secteur…)
 Attractivité : attirer émotionnellement (design), navigation balisée
et orientée.

21. Persuasion
 Sollicitation : inciter l’internaute à revenir régulièrement (ex : bons
plans).
 Accompagnement initial : inciter (ex : inscription), guider.
 Engagement : maintien des interactions, tâches plus complexes
(ex : renseigner son profil).
 Emprise : interactions irrépressibles et répétitives associées à une
satisfaction profonde (ex : Facebook)
Sources : http://www.slideshare.net/fullscreen/spromtep/infopresse-29fev2012-internet/3#btnNext
http://www.adviso.ca/blog/2011/05/04/8-criteres-ergonomiques-pour-evaluer-la-persuasion-d%E2%80%99un-site/#more-651

22. Accompagnement
initial : guider dans
les premiers pas,
encourager à
continuer.
Personnalisation :
faire ressortir le
sentiment
d’appartenance à
un groupe.
Crédibilité :
avoir l’air
fiable,
expertise
légitime.
Privacité
Sollicitation : moyens mis en place pour que l’internaute
revienne régulièrement sur le site (curiosité).
Persuasion

23. Utilité et crédibilité
http://www.slideshare.net/flupa/flupa-uxday-2012-lightning-talk-guilaine-robin
Si le site est perçu comme utile et crédible , alors l’internaute va :
 Rester plus longtemps sur le site,
 Avoir une satisfaction plus grande
 Ressentir du plaisir
Source : Guilaine Robin, FLUPA UX Day, Mai 2012

24. Utilité & utilisabilité, design émotionnel,
persuasion

25. Partie 2 -
Evolutions

26. Evolution : Type d’IHM / Manipulation
Manipulation
directe
Paradigme WIMP
(Windows, Icons, Menu,
Pointing device)

27. http://www.iphone-entreprise.com/2012/05/lergonomie-des-applications-mobiles/?utm_source=twitterfeed&utm_medium=twitter
Evolution : Supports utilisés
http://digitallife.neolabels.com/

28. Evolution : Aspect Technologique
http://blog.analystik.ca/2009/05/20-une-image-vaut-mille-mots/Source : Source : http://digitallife.neolabels.com/

29. Evolution : Utilisateurs

30. Evolution : Utilisateurs
http://www.slideshare.net/fullscreen/spromtep/infopresse-29fev2012-internet/3
http://www.leprinceduweb.com/generation-x-y-et-c-3-visions-du-monde-differentes-1-meme-combat/
http://www.lalsace.fr/actualite/2012/04/08/comment-differencier-les-generations-x-y-ou-z

31. Juillet 2011
Juillet 2010
Juillet 2005
Février 2003
Evolution des sites

32. 2011
2012
Evolution des sites
2007
2008

33. Partie 3 -
Règles d’ergonomie

34. Les règles d’ergonomie du Web
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
Retour Plan

35. Le Feedback du système
 Informer l’internaute de l’état du système à tout moment
 Fournir un feedback suffisant pour qu’il puisse réaliser sa tâche
dans les meilleures conditions,
 Le tenir informé des opérations sous-jacentes à ses actions même si
celles-ci ne modifient pas immédiatement l’interface.
Comment peut-on sélectionner les produits ?
Combien de temps faudra-t-il pour télécharger un fichier ?

36. Le Feedback du système

37. Match avec les profils utilisateurs
 Tenir compte des spécificités des utilisateurs auxquels on
s’adresse.
 Particularités linguistiques ou culturelles,
 Génération
Le langage des messages d’erreurs est-il à la portée de l’utilisateur et évite-t-il
le « jargon informatique » ?
L’organisation de l’arborescence/des menus/des onglets reflète-t-elle un ordre
clair et logique pour le public ?

38. Arborescence et tri de cartes

39. Sensation de contrôle
 L’internaute ne doit pas douter du résultat de ses actions.
 Avoir l’impression de «maîtriser la situation».
 Savoir dans quelle partie du site on se trouve.
 Quelles fonctions sont à disposition et où aller chercher les
contenus qui m’intéressent.
Est-ce qu’on fournit suffisamment de repères visuels à l’internaute ?

40. Cohérence et respect des standards
 Définir une charte graphique
 Noms des boutons, et tout autre élément présent à plusieurs
endroits doivent garder le même aspect, la même position et le
même nom pour ne pas dérouter l’utilisateur (ex : panier vs caddie).
 Respecter les standards Web connus et partagés par les
utilisateurs afin de ne pas les dérouter (ex : texte souligné =
hyperlien)
Le titre de chaque page est-il cohérent avec les liens qui y amènent ?
Le logo (en haut à gauche) est-il un lien vers l’Accueil ?

41. Comment perturber son internaute ?
http://www.matmut.fr/assurance/assurance-auto.asp
Design des boutons différent…
i
http://www.matmut.fr/
Le bouton jaune n’est pas toujours un bouton !i

42. Gestion des erreurs
 Eviter les erreurs
 Ne pas laisser visibles des choix qui ne peuvent pas être
sélectionnés.
 Signaler clairement le fonctionnement d’une procédure (inscription,
check-out…).
 Aider à comprendre et corriger facilement les éventuelles erreurs
commises (ex. dans les formulaires).
Lorsque possible, les champs de saisie/menus déroulants sont-ils pré-positionnés sur
le choix le plus probable ?
Les éléments des menus et des onglets sont-ils entièrement cliquables (non
seulement le texte mais aussi le fond) ?

43. Ne pas induire en erreur…

44. Trop facile …

45. Ah non !

46. Mais, quoi alors ?!

47. Optimisation des performances
 Minimiser le nombre de clics et les actions superflues.
 Contenus clés faciles à rejoindre, faciles à lire et à comprendre.
 Plusieurs moyens disponibles pour atteindre au plus vite ses objectifs
et avec le minimum d’efforts possibles.
Toute information qui peut être calculée par le système est-elle placée
automatiquement dans les champs des formulaires (ex. ville de l'utilisateur, calculée à
partir du code postal) ?
Lorsque possible, des cases à cocher sont-elles préférées aux champs de saisie ?
Le site propose-t-il l’autocomplétion dans les champs de saisie ?
Si possible ou pertinent un historique des dernières pages visitées est-il présent ?

48. Pour aider son internaute

49. Organisation visuelle
 Distinguer facilement les différentes parties de chaque page-écran.
Mise en page claire et bien organisée.
Texte lisible
Les nombres de plus de trois chiffres sont-ils séparés par un point (ex. 1.234)
pour les sites francophones ,et par une virgule pour les sites anglophones (ou
par un espace vide, pour toutes les langues) ?
La page d'accueil ressemble-t-elle à une page d'accueil (peu de contenu,
beaucoup de liens) ?
La structure visuelle de la page d’accueil aide-t-elle l’internaute à trouver
facilement les contenus les plus importants ?

50. Pourquoi tant de vide !!

51. Flexibilité
 S’adapter aux différents besoins des utilisateurs, novices et experts.
 Prendre en compte les préférences de chacun.
 Etre facilement accessible par clavier et par navigateur vocal, utilisé
par les déficients visuels, et qui nécessitent le respect de lignes-guide
spécifiques (WAI, …)
La couleur est-elle associée à un autre moyen pour véhiculer
l’information ?
Dans les boîtes de dialogue est-il possible de se déplacer entre les
boutons avec Tab ou les flèches du clavier, et valider par <Enter> ?
Si du flash est employé pour une intro, le site permet-il de le sauter ?

52. Laisser la main à son internaute…

53. Surcharge cognitive
 Ne pas submerger l’internaute par des contenus non pertinents ou
trop nombreux pour qu’il puisse tous les traiter de façon
convenable.
 Trop d’information tue l’information, et trop de choix tue le choix.
Le scrolling est-il évité au moins sur la page d’accueil et dans les
menus déroulants ?
Chaque zone de chaque page a-t-elle un sens clairement identifié ?
Le nombre de choix est-il limité ?

54. Ne pas noyer son internaute…

55. User Experience
 Donner à l’utilisateur envie de continuer
 Design agréable et soigné = utilisation de l’IHM plaisante
 Interaction fluide = utilisabilité
Le tunnel de conversion (processus sous forme d’étape) est-il le plus
court possible ?
On privilégie l’inscription avec son adresse mail.
On évite de « piéger » l’utilisateur avec une inscription obligatoire et
abonnement à newsletters.

56. Faciliter la navigation de l’internaute

57. Dialogue Homme-Machine
 Respecter les règles de la communication homme-homme (Maxime
de Grice, 1975) afin de ne pas surprendre ou perturber l’utilisateur : les
liens ,les boîtes de dialogue, etc.
 Chaque contenu informatif est une forme de communication.
Les actions qui ont des conséquences importantes et/ou non
réversibles (ex. destruction du profil de l'utilisateur) nécessitent–elles
une confirmation de l'utilisateur ?
Les messages d'erreur fournissent–ils des explications quant à l'origine
du problème et à sa solution ?

58. Dialogue Homme-Machine
Maxime de Grice de qualité : « Ne dites pas ce que vous croyez être faux ».

59. L’évolution du message d’erreur

60. Aide et documentation
 Proposer des formes d’aide.
 Peuvent prendre plusieurs formes selon les besoins : glossaire, plan
du site, tooltips.
 Rester faciles à trouver et exploiter.
La rubrique "Aide" est-elle positionnée de façon visible et
conventionnelle ?
Des bulles d’aide expliquent-elles tous les éléments / widgets
difficiles à comprendre ?
Le plan du site est-il joignable de n’importe quelle page du site ?

61. Un peu d’aide ne nuit pas !

62. Collaboration
 Partager de l’information et collaborer entre utilisateurs.
L'utilisateur a-t-il la possibilité de s'exprimer (commentaires, avis,
notes…) ?
Des moyens de communication synchrones et/ou asynchrones sont-ils
fournis ?

63. Comment partager facilement une
information ?

64. Comment donner son avis ?

65. L’ergonomie de la Page d’accueil
A soigner particulièrement, c’est votre carte de visite. Elle doit :
 Refléter votre image de marque.
 Etre accessible de toutes le pages du site, sauf d’elle-même.
 Se montrer « vivante » (news, actualités…).
 Etre « connectée » à d’autres supports (blog, Twitter, FB,
Youtube…).
 Véhiculer clairement et rapidement le contenu du site.
 Fournir un accès rapide aux contenus clés.

66. Accessibilité
 Code : Points de contrôles
Pour en savoir plus :
Outils :
Mais pas suffisants :
Intitulés (notamment des liens) ne sont pas contrôlés
S’assurer que les documents sont claires et simples (renvoi à l’utilisabilité)
(nombreuses ressources sur ce site « access-key »)
 Visuelle : Vérifier la lisibilité, utiliser des couleurs adaptées pour ne pas fatiguer
l’œil.
Contraste et brillance des couleurs entre le fond et la typographie
Outils :

67. Partie 4 -
Communication et présence sur le
web

68. Renault – Juin 2012
Site web
Version mobile
Réseau social

69. Le Tanneur – Juin 2012
Site web
Version mobile
Réseau social
= Inviter quelqu’un chez soi.
= Etre sur une place et
essayer d’attirer l’attention
des passants,

70. Responsive design
http://mediaqueri.es/Source :
Boîte à outil du responsive design :
• Site conçu pour s'adapter aux différentes tailles d'écran
• Obtenir une information actualisée à partir de n’importe quel support

71. Partie 5 -
Conclusion

72. Retour sur Investissement - ROI
 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
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?

73. 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.
 « Faire un site ergonomique c’est cher »
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.

74. Pour finir …
Un site en 2012 :
 N’est plus seulement une réponse à un besoin d’utilisation.
Il doit :
 Susciter le besoin,
 Surprendre, séduire.

75. Continuons à échanger …
: twitter.com/competitic
: communauté competitic
: lenumeriquepourmonentreprise.com

76. Découvrez les usages des
TIC, les actualités, l’agenda
des évènements et les
entreprises de la filière TIC
régionale sur le « portail
des usages »
Consultez le support de
cette présentation :
www.lenumeriquepourmonentreprise.com

77. La prochaine action
Accédez à tout moment à votre environnement
professionnel en situation de mobilité
28 juin 2012
Espace InnovaTIC Marseille