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
Prochain SlideShare
Chargement dans…5
×

Ergonomie des sites internet touristique

3 822 vues

Publié le

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

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 822
Sur SlideShare
0
Issues des intégrations
0
Intégrations
59
Actions
Partages
0
Téléchargements
135
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 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

    ×