ergonomie des sites internet touristique
Post on 25-Jun-2015
3.255 Views
Preview:
DESCRIPTION
TRANSCRIPT
L’ergonomie du site Internet
Laurent-Pierre GILLIARD – AEC – 30/05/2007
« Ergonomie »
• Utilisation de connaissances 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.
1. Attentes de l'utilisateur : tous les visiteurs du site ne recherchent pas la même information ou n'ont pasles mêmes exigences en terme de graphisme
2. Habitudes de l'utilisateur : elles correspondent à des comportements acquis
3. 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
5. 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
1. Sobriété
2. Lisibilité
3. Utilisabilité
4. Rapidité
5. Interactivité
6. Adaptabilité
7. Adaptativité
8. Accessibilité
8 critères d'ergonomie
• 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é
• 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é
• 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)
• Liberté de navigation
possibilité 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)
• Liberté de navigation
possibilité 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)
• Tangibilité de l'information
informations 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)
• Temps de chargement
temps 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é
• 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é
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é
• Universalité de l'accès
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
• 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égionaleCharte régionale
• Transparence des formats
les 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)
• Choix des couleurs
les 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)
Adresses webSupport 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/
Ergonomie, design & modeInfluences
Tendance PlaySkool
Tendance Web2.0
Ergonomie, design & modeDéclinaison
Ergonomie, design & mode
Ergonomie, design & modeEvolution
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 & modeEvolution
top related