Téléchargé 143 fois
![Laurent-Pierre GILLIARD [email_address] MERCI](https://image.slidesharecdn.com/ergonomie-des-sites-internet-touristique-17787/75/Ergonomie-des-sites-internet-touristique-19-2048.jpg)
Téléchargé parUNITEC
Ergonomie des sites internet touristique
Le document présente des principes d'ergonomie pour améliorer l'expérience utilisateur d'un site internet en utilisant des connaissances scientifiques sur le comportement humain. Il aborde différents critères essentiels tels que la simplicité, la lisibilité, la facilité de navigation, la rapidité et l'accessibilité, pour s'assurer que le site soit utilisable par une diversité de visiteurs. Enfin, des conseils sont donnés pour optimiser le design du site tout en tenant compte des divers équipements et des niveaux de compétence des utilisateurs.
Ergonomie des sites internet touristique
- 1. L’ergonomie du siteInternet Laurent-Pierre GILLIARD – AEC – 30/05/2007
- 2. « Ergonomie » Utilisation deconnaissances scientifiques relatives à l'homme (psychologie, physiologie, médecine) pour améliorer son environnement de travail. Sur le web : capacité à répondre efficacement aux attentes des utilisateurs et à leur fournir un confort de navigation.
- 3. A ttentes del'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 Habitudes de l'utilisateur : elles correspondent à des comportements acquis Age de l'utilisateur : il caractérise en général la capacité d'adaptation de l'utilisateur et sa rapidité de navigation Un problème : la diversité des profils des visiteurs
- 4. Equipements : l'affichage du site pourra varier d'un équipement à l'autre, en particulier selon le navigateur et la résolution d'affichage 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é Un problème : la diversité des profils des visiteurs Exemple : http://travel.supertour.com/miamibeach.aspx Avant Après 1680x1050 640x480 1024x768
- 5. Sobriété Lisibilité Utilisabilité Rapidité Interactivité Adaptabilité Adaptativité Accessibilité 8 c ritères d'ergonomie
- 6. Simplicité : design lié aux tendances graphiques, à la mode un site web épuré renforcera la crédibilité de l'organisation Peu chargé : les images animées sont déconseillées. les animation doivent être privilégiées pour afficher des messages forts car elles attirent le regard de l'internaute. 1 - Sobriété
- 7. Clarté : il est plus dur de lire sur écran que sur papier (temps +25%) le texte devra être suffisamment aéré Structuration : le texte devra être structuré à l'aide de paragraphes et de titres de différents niveaux, afin d'en faciliter la lecture Organisation : hiérarchiser l'information par niveau d'importance. les éléments les plus importants doivent être en haut 2 - Lisibilité
- 8. Facilité de navigation: règle des 3 clics : toute information accessible en -de 3 clics Repérage à tout moment le visiteur doit pouvoir de se repérer logo présent sur toutes les pages, au même emplacement charte graphique uniforme sur l'ensemble des pages plan du site présent 3 - Utilisabilité (1/4)
- 9. Liberté de navigationpossibilité de revenir à la page d'accueil et aux principales rubriques par un simple clic navigation dans le contenu selon des chemins transversaux pages d'introduction ou pages interstitielles à éviter car elles énerveront la plupart des visiteurs Visibilité de l'adresse URL de la page en cours (adresse) doit être visible 3 - Utilisabilité (2/4)
- 10. Liberté de navigationpossibilité de revenir à la page d'accueil et aux principales rubriques par un simple clic navigation dans le contenu selon des chemins transversaux pages d'introduction ou pages interstitielles à éviter car elles énerveront la plupart des visiteurs Visibilité de l'adresse URL de la page en cours (adresse) doit être visible 3 - Utilisabilité (3/4)
- 11. Tangibilité de l'informationinformations qualifiées (date de mise à jour, auteur…) éviter les pages accrocheuses vers des pages en travaux Homogénéité de la structure les éléments de navigation doivent être situés au même endroit sur toutes les pages 3 - Utilisabilité (4/4)
- 12. Temps de chargementtemps d'affichage d'une page doit être inférieur à 15s dépendant de la connexion du visiteur, de la taille de la page et de ses images, des capacités du serveur web Images optimisées optimiser la taille des images (<30 à 40 ko par image) sinon, lien vers image haute définition + poids de l’image 4 - Rapidité
- 13. Liens hypertextes interactivitéweb = liens hypertextes en mettre suffisamment entre les pages mais pas trop Découpage de l'information découper l'information pour mieux l’assimiler un texte d'accroche et un lien vers la suite de l'article Facilitation des échanges a minima, contact via email ou formulaire de contact 5 - Interactivité
- 14. L'adaptabilité caractérisela 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. Universalité de l'accèsl'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 Interopérabilité le respect de standards ( W3C ) permet de garantir la la consultation du site par différents navigateurs 8 - Accessibilité (1/3) Charte régionale
- 16. Transparence des formatsles formats utilisés doivent préférentiellement être en mode texte. Ainsi le HTML sera utilisé préférentiellement au Flash les images ou animation ne doivent pas se soustraire aux informations textuelles (complément visuel) Légende 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. 8 - Accessibilité (2/3)
- 17. Choix des couleursles couleurs doivent laisser l'information lisible aux personnes ne distinguant pas les couleurs correctement Usage sain des feuilles de style l'information doit être accessible sans feuille de style Contraste adapté contraste entre couleur de fond et texte doit contrasté Taille des polices modifiable taille des polices adaptable par l’utilisateur 8 - Accessibilité (3/3)
- 18. Adresses web Supportbasé 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.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26. Ergonomie, design &mode Influences Tendance PlaySkool Tendance Web2.0
- 27. Ergonomie, design &mode Déclinaison
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34. Ergonomie, design &mode Evolution 1996 – 1998 – 2000 – 2002 – 2004 – 2006
- 35. 1996 – Débutdu web
- 36. 1998 – Débutdu web design
- 37. 2000 – Stratégie & design
- 38. 2002 – Placeà l’éditorial
- 39. 2004 – Stratégie& design & marketing
- 40. 2006 – Backto the future…
- 41. Ergonomie, design &mode Evolution
- 42.
- 43. Crazy Egg Visualisationdes visiteurs http://crazyegg.com