Ergonomie des sites Web
Attention ! <ul><li>Si vous ne devez retenir qu’une chose de cette présentation … </li></ul><ul><li>Halte à l’amateurisme ...
L’importance de l’ergonomie <ul><ul><li>Site = utile et utilisable </li></ul></ul><ul><ul><li>Centrer le site sur l’utilis...
La homepage <ul><li>Homepage: on n’a qu’une occasion de séduire.  C’est la page la plus importante du site, l’image de l’e...
Rendre une homepage utile et utilisable - 1 <ul><ul><li>Prévoir une phrase de sous-titre  présentant ce que fait l’entrepr...
Rendre une homepage utile et utilisable - 2 <ul><ul><li>Placer des mots clés dans les liens , si possible comme premiers m...
Bien réussir sa page d’accueil (ou au moins essayer) <ul><ul><li>Professionnel, gai, attractif </li></ul></ul><ul><ul><li>...
Bien rater sa page d’accueil <ul><ul><li>Absence du nom  de l’entreprise </li></ul></ul><ul><ul><li>Trop lourde à charger ...
La meilleure place est réservée à une information sans véritable intérêt Ce qui est important est presque caché! Ont-ils v...
Frames en 800/600
En 1280/1024, le contenu occupe 30 % de l’espace !
Trouvé sur la homepage du site de la DGATLP … ???
Pages intérieures : règles de base - 1 <ul><li>Quelques règles à suivre: </li></ul><ul><ul><li>Créer un standard et s’y te...
Pages intérieures : règles de base - 2 <ul><ul><li>Pas de frame  (cadres) </li></ul></ul><ul><ul><li>Affichage correct pou...
Tout est en bleu… où sont les liens
Navigation <ul><li>L’utilisateur doit toujours savoir : </li></ul><ul><ul><li>où il est </li></ul></ul><ul><ul><li>d’où il...
Faire vivre le contenu <ul><li>La création du site est la phase la plus simple… </li></ul><ul><li>…  ensuite il faut le fa...
Prévoir un outil de recherche performant <ul><ul><li>Moteur de recherche  : indispensable </li></ul></ul><ul><ul><li>…  ma...
Moteur de recherche : page de recherche <ul><li>Page d’accueil et pages intérieures : </li></ul><ul><ul><li>Facilement acc...
Moteur de recherche : résultats <ul><ul><li>Nombre de résultats  trouvés et de pages </li></ul></ul><ul><ul><li>Rappel des...
Les liens hypertextes - 1 <ul><ul><li>Le lien hypertexte est l’essence du Web </li></ul></ul><ul><ul><li>3 types principau...
Les liens hypertextes - 2 <ul><ul><li>Respecter les règles standards des liens: </li></ul></ul><ul><ul><ul><li>en bleu </l...
Ecrire pour le Web - 1 <ul><ul><li>On ne lit pas un site comme un livre : l’internaute perd 25% de ses capacités de lectur...
Ecrire pour le Web - 2 <ul><ul><li>La page:  structure de base du Web </li></ul></ul><ul><ul><li>Titre de la page:  élémen...
Penser à demain : mobile
Questions et réponses <ul><li>[email_address] </li></ul><ul><li>mastertic.blogspot.com </li></ul><ul><li>www.delicious.com...
Prochain SlideShare
Chargement dans…5
×

Hec Ergonomie

1 378 vues

Publié le

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

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 378
Sur SlideShare
0
Issues des intégrations
0
Intégrations
112
Actions
Partages
0
Téléchargements
23
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Hec Ergonomie

  1. 1. Ergonomie des sites Web
  2. 2. Attention ! <ul><li>Si vous ne devez retenir qu’une chose de cette présentation … </li></ul><ul><li>Halte à l’amateurisme ! </li></ul>
  3. 3. L’importance de l’ergonomie <ul><ul><li>Site = utile et utilisable </li></ul></ul><ul><ul><li>Centrer le site sur l’utilisateur </li></ul></ul><ul><ul><ul><li>Public cible et attentes de ce public? </li></ul></ul></ul><ul><ul><ul><li>Services offerts par l’entreprise? </li></ul></ul></ul><ul><ul><ul><li>-> faire correspondre les 2 ! </li></ul></ul></ul><ul><ul><li>Sur Internet, c’est l’utilisateur qui est aux commandes </li></ul></ul><ul><ul><li>Plusieurs millions de sites disponibles : l’utilisateur ne perdra pas son temps sur un site dont l’ergonomie est défaillante </li></ul></ul><ul><ul><li>Sauf cas exceptionnel : ne jamais faire de pari sur la configuration de l’ordinateur du client , ni sur la connaissance technique du client </li></ul></ul><ul><ul><li>Penser au commerce classique et à la vie de tous les jours! </li></ul></ul>
  4. 4. La homepage <ul><li>Homepage: on n’a qu’une occasion de séduire. C’est la page la plus importante du site, l’image de l’entreprise devant le monde ! </li></ul><ul><li>Objectifs: </li></ul><ul><ul><li>identifier clairement l’entreprise </li></ul></ul><ul><ul><li>identifier clairement les services proposés </li></ul></ul><ul><ul><li>montrer la valeur ajoutée pour l’utilisateur </li></ul></ul><ul><ul><li>fournir des liens pour encourager la visite </li></ul></ul><ul><li>Métaphore: couverture de magazine ou dos de couverture d’un livre </li></ul><ul><li>Privilégier les structures « portail » ... Sauf par exemple pour des sites spécifiques (événements, etc.) </li></ul>
  5. 5. Rendre une homepage utile et utilisable - 1 <ul><ul><li>Prévoir une phrase de sous-titre présentant ce que fait l’entreprise et le site </li></ul></ul><ul><ul><li>Mettre le nom de l’entreprise dans la balise méta « title » </li></ul></ul><ul><ul><li>Grouper les informations sur l’entreprise à un endroit </li></ul></ul><ul><ul><li>Mettre en évidence les priorités et plus-values du site (ce que les vis i teurs y font !) </li></ul></ul><ul><ul><li>Prévoir une zone de recherche (en haut) </li></ul></ul><ul><ul><li>Donner des exemples de ce qu’il y a à l’intérieur du site, en valorisant le meilleur et le plus récent </li></ul></ul>
  6. 6. Rendre une homepage utile et utilisable - 2 <ul><ul><li>Placer des mots clés dans les liens , si possible comme premiers mots </li></ul></ul><ul><ul><li>Faciliter l’accès aux éléments les plus récents de la page d’accueil </li></ul></ul><ul><ul><li>Ne pas sur-formater et sur-illustrer les zones importantes (les utilisateurs se concentrent sur ce qui a l’air utile) </li></ul></ul><ul><ul><li>Utiliser des illustrations et graphiques utiles (il vaut mieux montrer la photo d’une vraie personne que celle d’un modèle) </li></ul></ul>
  7. 7. Bien réussir sa page d’accueil (ou au moins essayer) <ul><ul><li>Professionnel, gai, attractif </li></ul></ul><ul><ul><li>Adapté au profil de l’entreprise </li></ul></ul><ul><ul><li>Design spécifique , juste milieu entre classicisme et originalité (unité dans la variété) </li></ul></ul><ul><ul><li>Centrée sur le point de vue de l’utilisateur </li></ul></ul><ul><ul><li>Hiérarchisée </li></ul></ul><ul><ul><li>Utilisation optimale de l’espace (adaptation à l’écran) </li></ul></ul><ul><ul><li>Penser aux méta-tags </li></ul></ul><ul><ul><li>-> Standards Web: XHTML/CSS </li></ul></ul>
  8. 8. Bien rater sa page d’accueil <ul><ul><li>Absence du nom de l’entreprise </li></ul></ul><ul><ul><li>Trop lourde à charger ou trop longue (scrolling) </li></ul></ul><ul><ul><li>Frames (cadres) </li></ul></ul><ul><ul><li>Trop de publicités (confusion avec le contenu) </li></ul></ul><ul><ul><li>Page tunnel (sauf obligation légale) : flash sans valeur, mot de bienvenue, etc. </li></ul></ul><ul><ul><li>Pages graphiques « sapin de Noël » </li></ul></ul><ul><ul><li>Informations parasites (browser, stats, etc.) </li></ul></ul><ul><ul><li>Textes trop longs, liens ambigus ou mal rédigés, etc. </li></ul></ul>
  9. 9. La meilleure place est réservée à une information sans véritable intérêt Ce qui est important est presque caché! Ont-ils vraiment envie que l’on cherche !
  10. 10. Frames en 800/600
  11. 11. En 1280/1024, le contenu occupe 30 % de l’espace !
  12. 12. Trouvé sur la homepage du site de la DGATLP … ???
  13. 13. Pages intérieures : règles de base - 1 <ul><li>Quelques règles à suivre: </li></ul><ul><ul><li>Créer un standard et s’y tenir: c harte graphique cohérente et systématique -> fidélisation et facilité d’usage </li></ul></ul><ul><ul><li>Longueur: ni trop long (trop d’infos), ni trop court (pas assez d’infos). Paginer si nécessaire </li></ul></ul><ul><ul><li>Réserver l’espace au contenu! </li></ul></ul><ul><ul><li>Séparer le contenu de la forme </li></ul></ul><ul><ul><li>-> Standards Web: XHTML/CSS </li></ul></ul>
  14. 14. Pages intérieures : règles de base - 2 <ul><ul><li>Pas de frame (cadres) </li></ul></ul><ul><ul><li>Affichage correct pour tous les browsers standards (Explorer, Netscape, Mozilla, Opera, etc . ) -> Attention aux versions !!! </li></ul></ul><ul><ul><li>Pages légères (30k), même si l’ADSL progresse (pas trop d’images) </li></ul></ul><ul><ul><li>Images et animations : réfléchir en terme de convivialité et de plus-value!! </li></ul></ul><ul><ul><li>Couleur de fond : le mieux reste le blanc (couleur du texte = noir) </li></ul></ul><ul><ul><li>Blocs cohérents </li></ul></ul><ul><ul><li>« ho rt t ogra ff e  » !!! </li></ul></ul>
  15. 15. Tout est en bleu… où sont les liens
  16. 16. Navigation <ul><li>L’utilisateur doit toujours savoir : </li></ul><ul><ul><li>où il est </li></ul></ul><ul><ul><li>d’où il vient </li></ul></ul><ul><ul><li>où il peut aller </li></ul></ul><ul><ul><li>Afficher un chemin de navigation </li></ul></ul><ul><ul><li>Textes non-ambigus et utilisant toujours le même vocabulaire </li></ul></ul><ul><ul><li>Ne pas « débrayer » les fonctionnalités du browser </li></ul></ul>
  17. 17. Faire vivre le contenu <ul><li>La création du site est la phase la plus simple… </li></ul><ul><li>… ensuite il faut le faire vivre: </li></ul><ul><ul><li>Contenu mis à jour </li></ul></ul><ul><ul><li>Animations, interactivité, </li></ul></ul><ul><ul><li>Impliquer le personnel et désigner des responsables </li></ul></ul><ul><ul><li>Service 24 heures sur 24 </li></ul></ul><ul><ul><li>Intégration avec le back-office (exemple : une promotion, mais plus de stock !) </li></ul></ul><ul><ul><li>Le site n’est pas « un truc » à côté de l’entreprise </li></ul></ul><ul><ul><li>Gestion des liens </li></ul></ul><ul><ul><li>Etc. </li></ul></ul>
  18. 18. Prévoir un outil de recherche performant <ul><ul><li>Moteur de recherche : indispensable </li></ul></ul><ul><ul><li>… mais à la limite , mieux vaut rien qu’un mauvais moteur de recherche </li></ul></ul><ul><ul><li>Faciliter la vie de l’internaute : il entre instinctivement des mots clés en rapport avec son sujet d’intérêt et attend que le système lui donne les résultats adéquats </li></ul></ul><ul><ul><li>Complément logique d’un catalogue </li></ul></ul><ul><ul><li>Regarder Google </li></ul></ul><ul><ul><li>Tester, tester ... et tester </li></ul></ul><ul><ul><li>Modèle ASP (Application Service Provider) </li></ul></ul>
  19. 19. Moteur de recherche : page de recherche <ul><li>Page d’accueil et pages intérieures : </li></ul><ul><ul><li>Facilement accessible (coin supérieur droit) </li></ul></ul><ul><ul><li>Simple, large, bien indiquée, bouton clair </li></ul></ul><ul><ul><li>Lien vers une page de recherche plus avancée </li></ul></ul><ul><ul><li>Éviter la confusion avec d’autres zones </li></ul></ul><ul><li>Page de recherche spécifique : </li></ul><ul><ul><li>Liaison entre les mots clés </li></ul></ul><ul><ul><li>Sélection de certaines rubriques spécifiques </li></ul></ul><ul><ul><li>Critères (date de mise en ligne, etc.) </li></ul></ul>
  20. 20. Moteur de recherche : résultats <ul><ul><li>Nombre de résultats trouvés et de pages </li></ul></ul><ul><ul><li>Rappel des mots recherchés </li></ul></ul><ul><ul><li>Liste de suggestions vers des raccourcis </li></ul></ul><ul><ul><li>Accès direct à chaque page de résultats (liste numérotée, page actuelle mise en évidence) </li></ul></ul><ul><ul><li>Titre de la page trouvée + lien </li></ul></ul><ul><ul><li>Description de la page trouvée </li></ul></ul><ul><ul><li>Adresse directe de la page </li></ul></ul><ul><ul><li>Date de dernière mise à jour </li></ul></ul><ul><ul><li>Nom de la rubrique globale (et lien) </li></ul></ul><ul><ul><li>Etc. </li></ul></ul>
  21. 21. Les liens hypertextes - 1 <ul><ul><li>Le lien hypertexte est l’essence du Web </li></ul></ul><ul><ul><li>3 types principaux de liens : </li></ul></ul><ul><ul><ul><li>vers une autre page du site </li></ul></ul></ul><ul><ul><ul><li>vers l’intérieur de la même page </li></ul></ul></ul><ul><ul><ul><li>vers un autre site </li></ul></ul></ul><ul><ul><li>Lien auto-descriptif (éviter le « cliquez ici »). Le lien permet de structurer la page </li></ul></ul><ul><ul><li>Texte plus efficace que l’image </li></ul></ul><ul><ul><li>Ne pas activer un lien vers la page courante </li></ul></ul>
  22. 22. Les liens hypertextes - 2 <ul><ul><li>Respecter les règles standards des liens: </li></ul></ul><ul><ul><ul><li>en bleu </li></ul></ul></ul><ul><ul><ul><li>s oulignés </li></ul></ul></ul><ul><ul><ul><li>… mais on peut parfois déroger! </li></ul></ul></ul><ul><ul><li>Réservez impérativement ces règles aux liens </li></ul></ul><ul><ul><li>Rédaction claire indiquant de manière synthétique vers où on va et ce que l’on va trouver comme information </li></ul></ul>
  23. 23. Ecrire pour le Web - 1 <ul><ul><li>On ne lit pas un site comme un livre : l’internaute perd 25% de ses capacités de lecture. Lecture par balayage </li></ul></ul><ul><ul><li>L’internaute s’intéresse d’abord au texte , et notamment aux titres, pour voir si la page l’intéresse </li></ul></ul><ul><ul><li>Rédiger pour le Web -> 3 règles: </li></ul></ul><ul><ul><ul><li>être bref (réduire de moitié) </li></ul></ul></ul><ul><ul><ul><li>permettre une lecture rapide </li></ul></ul></ul><ul><ul><ul><li>utiliser les liens hypertextes pour organiser les pages </li></ul></ul></ul><ul><ul><li>Attention aux nouveaux utilisateurs « peu éduqués » </li></ul></ul>
  24. 24. Ecrire pour le Web - 2 <ul><ul><li>La page: structure de base du Web </li></ul></ul><ul><ul><li>Titre de la page: élément fondamental de communication. Il doit être signifiant </li></ul></ul><ul><ul><li>Hiérarchiser et structurer le contenu: </li></ul></ul><ul><ul><ul><li>2 niveaux de titre (3 maximum) </li></ul></ul></ul><ul><ul><ul><li>liens hypertextes </li></ul></ul></ul><ul><ul><ul><li>commencer par la conclusion </li></ul></ul></ul><ul><ul><ul><li>listes à puces et numérotées </li></ul></ul></ul><ul><ul><ul><li>mises en évidence (gras, italique, souligné) </li></ul></ul></ul><ul><ul><ul><li>limiter la longueur (éviter « le scrolling ») </li></ul></ul></ul><ul><li>-> Utiliser les ressources XHTML </li></ul>
  25. 25. Penser à demain : mobile
  26. 26. Questions et réponses <ul><li>[email_address] </li></ul><ul><li>mastertic.blogspot.com </li></ul><ul><li>www.delicious.com/mastertic </li></ul>

×