Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
L’ergonomie du site Internet   Laurent-Pierre GILLIARD – AEC – 30/05/2007
« Ergonomie » <ul><li>Utilisation de connaissances scientifiques relatives    à  l'homme (psychologie, physiologie, médeci...
<ul><li>A ttentes de l'utilisateur :  tous les visiteurs du site ne recherchent pas la même information ou n'ont pas les m...
<ul><li>Equipements :  l'affichage du site pourra varier  d'un équipement à l'autre, en particulier selon  le navigateur e...
<ul><li>Sobriété  </li></ul><ul><li>Lisibilité  </li></ul><ul><li>Utilisabilité  </li></ul><ul><li>Rapidité  </li></ul><ul...
<ul><li>Simplicité :  </li></ul><ul><ul><li>design lié aux tendances graphiques, à la mode </li></ul></ul><ul><ul><li>un s...
<ul><li>Clarté :  </li></ul><ul><ul><li>il est plus dur de lire sur  écran  que sur papier (temps +25%)    le texte devra ...
<ul><li>Facilité de navigation :  </li></ul><ul><ul><li>règle des 3 clics : toute information accessible en -de 3 clics </...
<ul><li>Liberté de navigation </li></ul><ul><ul><li>possibilité de revenir à la page d'accueil et aux principales    rubri...
<ul><li>Liberté de navigation </li></ul><ul><ul><li>possibilité de revenir à la page d'accueil et aux principales    rubri...
<ul><li>Tangibilité de l'information </li></ul><ul><ul><li>informations qualifiées (date de mise à jour, auteur…) </li></u...
<ul><li>Temps de chargement </li></ul><ul><ul><li>temps d'affichage d'une page doit être inférieur à 15s </li></ul></ul><u...
<ul><li>Liens hypertextes </li></ul><ul><ul><li>interactivité web = liens hypertextes  </li></ul></ul><ul><ul><li>en mettr...
L'adaptabilité  caractérise la possibilité de personnaliser  le site sur intervention de l'utilisateur  (ex: redimensionne...
<ul><li>Universalité de l'accès </li></ul><ul><ul><li>l'accessibilité est la capacité du site à être consulté    universel...
<ul><li>Transparence des formats </li></ul><ul><ul><li>les formats utilisés doivent préférentiellement être en mode    tex...
<ul><li>Choix des couleurs </li></ul><ul><ul><li>les couleurs doivent laisser l'information lisible aux    personnes ne di...
Adresses web Support basé sur  «  Webmastering  - Ergonomie d'un site web  » issu de l' encyclopédie   informatique   Comm...
Laurent-Pierre GILLIARD [email_address] MERCI
http://www.champtoceaux.fr/index.php3?cat_id=52
 
 
 
http://travel.supertour.com
http://travel.supertour.com/miamibeach.aspx
Ergonomie, design & mode Influences Tendance PlaySkool Tendance Web2.0
Ergonomie, design & mode Déclinaison
 
 
 
 
 
Ergonomie, design & mode
Ergonomie, design & mode Evolution 1996 – 1998 – 2000 – 2002 – 2004 – 2006
1996 – Début du web
1998 – Début du web design
2000 – Stratégie  & design
2002 – Place à l’éditorial
2004 – Stratégie & design & marketing
2006 – Back to the future…
Ergonomie, design & mode Evolution
 
Crazy Egg Visualisation des visiteurs http://crazyegg.com
Upcoming SlideShare
Loading in …5
×

Ergonomie des sites internet touristique

4,633 views

Published on

Ergonomie des sites internet touristique. AEC / MOPA / Mai 2007

Published in: Technology
  • Be the first to comment

Ergonomie des sites internet touristique

  1. 1. L’ergonomie du site Internet Laurent-Pierre GILLIARD – AEC – 30/05/2007
  2. 2. « Ergonomie » <ul><li>Utilisation de connaissances scientifiques relatives à l'homme (psychologie, physiologie, médecine) pour améliorer son environnement de travail. </li></ul><ul><li>Sur le web : capacité à répondre efficacement aux attentes des utilisateurs et à leur fournir un confort de navigation. </li></ul>
  3. 3. <ul><li>A ttentes de l'utilisateur : tous les visiteurs du site ne recherchent pas la même information ou n'ont pas les mêmes exigences en terme de graphisme </li></ul><ul><li>Habitudes de l'utilisateur : elles correspondent à des comportements acquis </li></ul><ul><li>Age de l'utilisateur : il caractérise en général la capacité d'adaptation de l'utilisateur et sa rapidité de navigation </li></ul>Un problème : la diversité des profils des visiteurs
  4. 4. <ul><li>Equipements : l'affichage du site pourra varier d'un équipement à l'autre, en particulier selon le navigateur et la résolution d'affichage </li></ul><ul><li>Niveau de connaissances : tous les visiteurs du site ne sont pas nécessairement des as de l'informatique. L'ergonomie du site doit être pensée pour l'utilisateur le moins expérimenté </li></ul>Un problème : la diversité des profils des visiteurs Exemple : http://travel.supertour.com/miamibeach.aspx Avant Après 1680x1050 640x480 1024x768
  5. 5. <ul><li>Sobriété </li></ul><ul><li>Lisibilité </li></ul><ul><li>Utilisabilité </li></ul><ul><li>Rapidité </li></ul><ul><li>Interactivité </li></ul><ul><li>Adaptabilité </li></ul><ul><li>Adaptativité </li></ul><ul><li>Accessibilité </li></ul>8 c ritères d'ergonomie
  6. 6. <ul><li>Simplicité : </li></ul><ul><ul><li>design lié aux tendances graphiques, à la mode </li></ul></ul><ul><ul><li>un site web épuré renforcera la crédibilité de l'organisation </li></ul></ul><ul><li>Peu chargé : </li></ul><ul><ul><li>les images animées sont déconseillées. </li></ul></ul><ul><ul><li>les animation doivent être privilégiées pour afficher des messages forts car elles attirent le regard de l'internaute. </li></ul></ul>1 - Sobriété
  7. 7. <ul><li>Clarté : </li></ul><ul><ul><li>il est plus dur de lire sur écran que sur papier (temps +25%) le texte devra être suffisamment aéré </li></ul></ul><ul><li>Structuration : </li></ul><ul><ul><li>le texte devra être structuré à l'aide de paragraphes et de titres de différents niveaux, afin d'en faciliter la lecture </li></ul></ul><ul><li>Organisation : </li></ul><ul><ul><li>hiérarchiser l'information par niveau d'importance. les éléments les plus importants doivent être en haut </li></ul></ul>2 - Lisibilité
  8. 8. <ul><li>Facilité de navigation : </li></ul><ul><ul><li>règle des 3 clics : toute information accessible en -de 3 clics </li></ul></ul><ul><li>Repérage </li></ul><ul><ul><li>à tout moment le visiteur doit pouvoir de se repérer </li></ul></ul><ul><ul><li>logo présent sur toutes les pages, au même emplacement </li></ul></ul><ul><ul><li>charte graphique uniforme sur l'ensemble des pages </li></ul></ul><ul><ul><li>plan du site présent </li></ul></ul>3 - Utilisabilité (1/4)
  9. 9. <ul><li>Liberté de navigation </li></ul><ul><ul><li>possibilité de revenir à la page d'accueil et aux principales rubriques par un simple clic </li></ul></ul><ul><ul><li>navigation dans le contenu selon des chemins transversaux </li></ul></ul><ul><ul><li>pages d'introduction ou pages interstitielles à éviter car elles énerveront la plupart des visiteurs </li></ul></ul><ul><li>Visibilité de l'adresse </li></ul><ul><ul><li>URL de la page en cours (adresse) doit être visible </li></ul></ul>3 - Utilisabilité (2/4)
  10. 10. <ul><li>Liberté de navigation </li></ul><ul><ul><li>possibilité de revenir à la page d'accueil et aux principales rubriques par un simple clic </li></ul></ul><ul><ul><li>navigation dans le contenu selon des chemins transversaux </li></ul></ul><ul><ul><li>pages d'introduction ou pages interstitielles à éviter car elles énerveront la plupart des visiteurs </li></ul></ul><ul><li>Visibilité de l'adresse </li></ul><ul><ul><li>URL de la page en cours (adresse) doit être visible </li></ul></ul>3 - Utilisabilité (3/4)
  11. 11. <ul><li>Tangibilité de l'information </li></ul><ul><ul><li>informations qualifiées (date de mise à jour, auteur…) </li></ul></ul><ul><ul><li>éviter les pages accrocheuses vers des pages en travaux </li></ul></ul><ul><li>Homogénéité de la structure </li></ul><ul><ul><li>les éléments de navigation doivent être situés au même endroit sur toutes les pages </li></ul></ul>3 - Utilisabilité (4/4)
  12. 12. <ul><li>Temps de chargement </li></ul><ul><ul><li>temps d'affichage d'une page doit être inférieur à 15s </li></ul></ul><ul><ul><li>dépendant de la connexion du visiteur, de la taille de la page et de ses images, des capacités du serveur web </li></ul></ul><ul><li>Images optimisées </li></ul><ul><ul><li>optimiser la taille des images (<30 à 40 ko par image) </li></ul></ul><ul><ul><li>sinon, lien vers image haute définition + poids de l’image </li></ul></ul>4 - Rapidité
  13. 13. <ul><li>Liens hypertextes </li></ul><ul><ul><li>interactivité web = liens hypertextes </li></ul></ul><ul><ul><li>en mettre suffisamment entre les pages mais pas trop </li></ul></ul><ul><li>Découpage de l'information </li></ul><ul><ul><li>découper l'information pour mieux l’assimiler </li></ul></ul><ul><ul><li>un texte d'accroche et un lien vers la suite de l'article </li></ul></ul><ul><li>Facilitation des échanges </li></ul><ul><ul><li>a minima, contact via email ou formulaire de contact </li></ul></ul>5 - Interactivité
  14. 14. L'adaptabilité caractérise la possibilité de personnaliser le site sur intervention de l'utilisateur (ex: redimensionner les tailles des textes) L'adaptativité caractérise la possibilité de personnaliser le site web automatiquement sans intervention de l'utilisateur (ex: langage en fonction de la provenance) 6-7 - Adaptabilité et Adaptativité  
  15. 15. <ul><li>Universalité de l'accès </li></ul><ul><ul><li>l'accessibilité est la capacité du site à être consulté universellement, par tout type d'utilisateurs, y compris les malvoyants et non voyants, quelque soit la configuration logicielle et matérielle ou le handicap </li></ul></ul><ul><li>Interopérabilité </li></ul><ul><ul><li>le respect de standards ( W3C ) permet de garantir la la consultation du site par différents navigateurs </li></ul></ul>8 - Accessibilité (1/3) Charte régionale
  16. 16. <ul><li>Transparence des formats </li></ul><ul><ul><li>les formats utilisés doivent préférentiellement être en mode texte. Ainsi le HTML sera utilisé préférentiellement au Flash </li></ul></ul><ul><ul><li>les images ou animation ne doivent pas se soustraire aux informations textuelles (complément visuel) </li></ul></ul><ul><li>Légende </li></ul><ul><ul><li>une légende ou un texte de remplacement doivent être prévu en lieu et place des images (attribut alt ), pour permettre aux déficients visuels de comprendre le sens de l'image. </li></ul></ul>8 - Accessibilité (2/3)
  17. 17. <ul><li>Choix des couleurs </li></ul><ul><ul><li>les couleurs doivent laisser l'information lisible aux personnes ne distinguant pas les couleurs correctement </li></ul></ul><ul><li>Usage sain des feuilles de style </li></ul><ul><ul><li>l'information doit être accessible sans feuille de style </li></ul></ul><ul><li>Contraste adapté </li></ul><ul><ul><li>contraste entre couleur de fond et texte doit contrasté </li></ul></ul><ul><li>Taille des polices modifiable </li></ul><ul><ul><li>taille des polices adaptable par l’utilisateur </li></ul></ul>8 - Accessibilité (3/3)
  18. 18. Adresses web Support basé sur «  Webmastering - Ergonomie d'un site web  » issu de l' encyclopédie informatique Comment Ça Marche ( www.commentcamarche.net ) est mis à disposition sous les termes de la licence Creative Commons . SuperTour.com (balades virtuelles et plans) http://travel.supertour.com/miamibeach.aspx Les tendances graphiques Web2.0 http://www.macaroondesign.com/index.php?2007/02/21/86-webdesign-for-dummies-webdesign-pour-les-nuls Les tendances graphiques playskool http://www.macaroondesign.com/index.php?2006/10/19/62-playskool-style-pour-web20sign Archives du web http://www.archive.org/web/web.php http://web.archive.org/web/*/http://www.travelnevada.com/ Charte d’accessibilité du Conseil Régional Aquitaine http://charte-internet.aquitaine.fr/
  19. 19. Laurent-Pierre GILLIARD [email_address] MERCI
  20. 20. http://www.champtoceaux.fr/index.php3?cat_id=52
  21. 24. http://travel.supertour.com
  22. 25. http://travel.supertour.com/miamibeach.aspx
  23. 26. Ergonomie, design & mode Influences Tendance PlaySkool Tendance Web2.0
  24. 27. Ergonomie, design & mode Déclinaison
  25. 33. Ergonomie, design & mode
  26. 34. Ergonomie, design & mode Evolution 1996 – 1998 – 2000 – 2002 – 2004 – 2006
  27. 35. 1996 – Début du web
  28. 36. 1998 – Début du web design
  29. 37. 2000 – Stratégie & design
  30. 38. 2002 – Place à l’éditorial
  31. 39. 2004 – Stratégie & design & marketing
  32. 40. 2006 – Back to the future…
  33. 41. Ergonomie, design & mode Evolution
  34. 43. Crazy Egg Visualisation des visiteurs http://crazyegg.com

×